:root {
  --ink: #17171a;
  --ink-2: #202024;
  --paper: #f7f6f2;
  --paper-2: #ecebea;
  --acid: #f2652a;
  --acid-soft: #ffc647;
  --line: #17171a22;
  --muted: #656366;
}

::selection { background: #ffb423; color: #17171a; }

.brand-mark i:nth-child(1) { background: #f7ad16; }
.brand-mark i:nth-child(2) { background: #f2652a; }
.brand-mark i:nth-child(3) { background: #a51c59; }

.button:not(.button-ghost),
.page-loading span {
  background: linear-gradient(105deg, #f7ad16 0%, #f2652a 48%, #c51f48 100%);
  border-color: transparent;
  color: #17171a;
}

.button:not(.button-ghost):hover {
  background: #fff;
  border-color: #fff;
}

.hero {
  background: #17171a;
}

.hero-image {
  content: url("/solar-global-2/media/identity/brochure-p2-2.jpg");
  opacity: .66;
  object-position: 54% center;
  filter: saturate(.62) contrast(1.08);
}

.hero-veil {
  background:
    radial-gradient(circle at 76% 44%, #f2652a2b 0, #f2652a00 28%),
    linear-gradient(90deg, #151419f7 0%, #19171bc7 48%, #17171a35 76%),
    linear-gradient(0deg, #17171aee 0%, #17171a00 52%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: min(51vw, 760px);
  aspect-ratio: 1;
  right: -19vw;
  bottom: -26vw;
  border: clamp(16px, 2.7vw, 42px) solid #f7ad16;
  border-radius: 50%;
  box-shadow:
    0 0 0 clamp(16px, 2.7vw, 42px) #f2652a,
    0 0 0 clamp(32px, 5.4vw, 84px) #d52b49,
    0 0 0 clamp(48px, 8.1vw, 126px) #8d205d;
  opacity: .78;
  pointer-events: none;
}

.hero h1 em,
.section-intro h2 em,
.footer-statement h2 em {
  color: transparent;
  background: linear-gradient(100deg, #f7ad16 0%, #f2652a 47%, #c51f48 78%, #8d205d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-kicker span {
  border-color: #f7ad16;
  box-shadow: 0 0 0 5px #f2652a24;
}

.investment-minimum,
.technology-grid span,
.opportunity-row small,
.footer-nav .eyebrow,
.contact-direct span {
  color: #ff9b25;
}

.flow-line::before {
  opacity: .9;
  background: linear-gradient(90deg, #f7ad16, #f2652a, #c51f48, #8d205d);
}

.energy-pulse {
  background: #ffb21e;
  box-shadow: 0 0 18px 5px #f2652a;
}

.opportunities-section,
.contact-section { background: #242126; }

.site-header.is-scrolled,
.site-footer { background: #141316ee; }

.expert-portrait {
  background-image:
    linear-gradient(180deg, transparent 55%, #17171a99),
    url("/solar-global-2/media/identity/brochure-p8-1.jpg");
  background-size: cover;
  background-position: 42% center;
  border: 0;
}

.expert-portrait::before,
.expert-portrait .portrait-placeholder { display: none; }

.insight-grid article:nth-child(1) .insight-visual {
  background-image:
    linear-gradient(135deg, #17171a22, #8d205d44),
    url("/solar-global-2/media/identity/brochure-p3-2.jpg");
  background-size: cover;
  background-position: center;
}

.insight-grid article:nth-child(2) .insight-visual {
  background-image:
    linear-gradient(135deg, #17171a22, #f2652a33),
    url("/solar-global-2/media/identity/brochure-p8-2.jpg");
  background-size: cover;
  background-position: center;
}

.insight-visual span,
.insight-visual i { display: none; }

/* Force cache-safe, brand-colour project artwork. */
.project-image img[src*="project-fve.svg"] {
  content: url("/solar-global-2/project-fve-brand-v2.svg");
}

.project-image img[src*="project-bess.svg"] {
  content: url("/solar-global-2/project-bess-brand-v2.svg");
}

.project-image img[src*="project-hybrid.svg"] {
  content: url("/solar-global-2/project-hybrid-brand-v2.svg");
}

.project-image > span {
  background: linear-gradient(105deg, #f2652a, #c51f48);
  color: #fff;
}

/* Metrics: four distinctive, code-native energy symbols */
.metric {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .3s ease, transform .3s ease;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--metric-gradient);
  transform: scaleX(.36);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.75,.2,1);
}

.metric::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 92px;
  height: 92px;
  top: 56px;
  right: 24px;
  opacity: .9;
  transition: transform .5s cubic-bezier(.2,.75,.2,1), opacity .3s;
}

.metric:hover {
  background: #fff;
  transform: translateY(-5px);
}

.metric:hover::before { transform: scaleX(1); }
.metric:hover::after { transform: rotate(8deg) scale(1.08); opacity: 1; }

.metric strong {
  width: fit-content;
  color: transparent;
  background: var(--metric-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.metric:nth-child(1) {
  --metric-gradient: linear-gradient(115deg, #f7ad16, #f2652a);
}

.metric:nth-child(1)::after {
  border: 2px solid #f7ad16;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f2652a 0 5px, transparent 6px),
    conic-gradient(from 32deg, transparent 0 18%, #f2652a 19% 22%, transparent 23% 58%, #f7ad16 59% 62%, transparent 63%);
  box-shadow: inset 0 0 0 14px #f7ad160d, 0 0 0 10px #f2652a0b;
}

.metric:nth-child(2) {
  --metric-gradient: linear-gradient(115deg, #f2652a, #e63b42);
}

.metric:nth-child(2)::after {
  background:
    linear-gradient(#f2652a 0 0) 0 0 / 25px 25px,
    linear-gradient(#e63b42 0 0) 100% 0 / 25px 25px,
    linear-gradient(#d62c49 0 0) 0 100% / 25px 25px,
    linear-gradient(#a51c59 0 0) 100% 100% / 25px 25px,
    linear-gradient(135deg, transparent 46%, #d62c4955 47% 53%, transparent 54%);
  background-repeat: no-repeat;
  transform: rotate(45deg) scale(.76);
}

.metric:nth-child(2):hover::after { transform: rotate(52deg) scale(.82); }

.metric:nth-child(3) {
  --metric-gradient: linear-gradient(115deg, #e63b42, #c51f48);
}

.metric:nth-child(3)::after {
  background:
    linear-gradient(90deg, transparent 0 8%, #e63b42 8% 16%, transparent 16% 25%, #d62c49 25% 38%, transparent 38% 48%, #c51f48 48% 67%, transparent 67% 77%, #a51c59 77% 100%);
  clip-path: polygon(0 62%, 8% 62%, 8% 36%, 16% 36%, 16% 69%, 25% 69%, 25% 48%, 38% 48%, 38% 75%, 48% 75%, 48% 25%, 67% 25%, 67% 57%, 77% 57%, 77% 10%, 100% 10%, 100% 90%, 0 90%);
}

.metric:nth-child(4) {
  --metric-gradient: linear-gradient(115deg, #c51f48, #8d205d);
}

.metric:nth-child(4)::after {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #8d205d 0 6px, transparent 7px),
    radial-gradient(circle at 18% 28%, #f2652a 0 5px, transparent 6px),
    radial-gradient(circle at 82% 20%, #e63b42 0 5px, transparent 6px),
    radial-gradient(circle at 79% 80%, #a51c59 0 5px, transparent 6px),
    linear-gradient(32deg, transparent 45%, #c51f4866 46% 49%, transparent 50%),
    linear-gradient(150deg, transparent 45%, #f2652a66 46% 49%, transparent 50%),
    linear-gradient(225deg, transparent 45%, #8d205d66 46% 49%, transparent 50%);
  border: 1px solid #8d205d2b;
}

@media (max-width: 760px) {
  .metric::after {
    width: 76px;
    height: 76px;
    top: 46px;
    right: 5px;
  }
}

/* Value chain 01–05: compact visual language */
.flow-node {
  position: relative;
  overflow: hidden;
  transition: background-color .25s ease;
}

.flow-node:nth-child(-n+5)::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  top: 18px;
  right: 16px;
  opacity: .78;
  transition: transform .35s ease, opacity .25s ease;
}

.flow-node:nth-child(-n+5):hover {
  background: #ffffff08;
}

.flow-node:nth-child(-n+5):hover::after {
  opacity: 1;
  transform: translateY(-3px) rotate(5deg);
}

/* 01 Kapitál – soustředné kruhy / růst hodnoty */
.flow-node:nth-child(1)::after {
  border: 1px solid #f7ad16;
  border-radius: 50%;
  background: radial-gradient(circle, #f2652a 0 4px, transparent 5px 11px, #f7ad1644 12px 13px, transparent 14px);
  box-shadow: 0 0 0 5px #f7ad1612;
}

/* 02 Development – půdorys a stavební bod */
.flow-node:nth-child(2)::after {
  border: 1px solid #f2652a;
  background:
    linear-gradient(90deg, transparent 47%, #f2652a 48% 52%, transparent 53%),
    linear-gradient(transparent 47%, #f2652a 48% 52%, transparent 53%);
  box-shadow: inset 10px 10px 0 #f2652a12;
}

/* 03 FVE / BESS – energie mezi panelem a úložištěm */
.flow-node:nth-child(3)::after {
  background:
    linear-gradient(135deg, transparent 0 36%, #e63b42 37% 47%, transparent 48% 60%, #f2652a 61% 71%, transparent 72%),
    linear-gradient(#e63b4244 0 0) 0 100% / 100% 1px no-repeat;
  border: 1px solid #e63b4266;
  transform: skewX(-8deg);
}

.flow-node:nth-child(3):hover::after { transform: translateY(-3px) skewX(-8deg) rotate(5deg); }

/* 04 EMS – řídicí signál */
.flow-node:nth-child(4)::after {
  background:
    radial-gradient(circle at 15% 50%, #e63b42 0 3px, transparent 4px),
    radial-gradient(circle at 50% 22%, #d62c49 0 3px, transparent 4px),
    radial-gradient(circle at 85% 58%, #c51f48 0 3px, transparent 4px),
    linear-gradient(28deg, transparent 46%, #d62c4988 47% 51%, transparent 52%),
    linear-gradient(145deg, transparent 46%, #e63b4288 47% 51%, transparent 52%);
}

/* 05 Provoz – nepřetržitý cyklus */
.flow-node:nth-child(5)::after {
  border: 2px solid #a51c59;
  border-left-color: transparent;
  border-radius: 50%;
  background: conic-gradient(from 40deg, transparent 0 72%, #c51f48 73% 78%, transparent 79%);
}

.flow-node:nth-child(1) span { color: #f7ad16; }
.flow-node:nth-child(2) span { color: #f2652a; }
.flow-node:nth-child(3) span { color: #e63b42; }
.flow-node:nth-child(4) span { color: #c51f48; }
.flow-node:nth-child(5) span { color: #a51c59; }

@media (max-width: 760px) {
  .hero::after {
    width: 76vw;
    right: -48vw;
    bottom: -9vw;
    opacity: .55;
  }
}