/* ============================================================
DESIGN TOKENS — Linear / Vercel / Anthropic-inspired
============================================================ */
:root{
/* Type — Inter as primary, JetBrains Mono for technical labels */
--font-sans:'Inter','-apple-system','SF Pro Text','Segoe UI',sans-serif;
--font-mono:'JetBrains Mono','SF Mono','Menlo',monospace;
--font-ja:'Noto Sans JP','Inter','Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN','Meiryo','Segoe UI',sans-serif;
--font-zh:'Noto Sans SC','Inter','PingFang SC','Microsoft YaHei UI','Microsoft YaHei','Source Han Sans SC','Segoe UI',sans-serif;
/* Colour — warm infrastructure palette with solar and grid accents */
--bg:#fbfaf6;
--bg-alt:#f4f5f1;
--bg-tint:#fffdf8;
--bg-sky:#f5f7f4;
--bg-grad:linear-gradient(180deg,#fffdf8 0%,#f7f6f1 60%);
--bg-soft-grad:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(216,155,43,0.06),transparent 60%);
--ink:#0a0b0d; /* near-black */
--ink-2:#1a1d24;
--text:#2c2f36;
--text-2:#5a6072;
--text-3:#8a9099; /* light grey */
--text-soft:#5a6072;
--line:#ddd7ca;
--line-2:#e9e2d5;
--line-strong:#cfc6b7;
/* Brand — muted grid teal and solar amber */
--brand:#1f6f5b;
--brand-2:#155a4a;
--brand-soft:#e6f0ea;
--kingfisher:#188675;
--kingfisher-2:#37b7a5;
--kingfisher-glow:rgba(31,111,91,0.13);
--accent-orange:#c9792b;
--solar:#d89b2b;
--grid-green:#1f6f5b;
--accent-violet:#8c7a5f;
--night:#071014;
--night-2:#0d181e;
--night-line:rgba(255,255,255,0.12);
/* Surfaces */
--shadow-sm:0 1px 2px rgba(10,11,13,0.04);
--shadow:0 1px 2px rgba(10,11,13,0.04),0 8px 24px -12px rgba(10,11,13,0.08);
--shadow-lg:0 1px 2px rgba(10,11,13,0.04),0 24px 48px -20px rgba(10,11,13,0.18);
--shadow-glow:0 0 0 1px rgba(31,111,91,0.12),0 12px 40px -8px rgba(31,111,91,0.22);
--radius-sm:6px;
--radius:10px;
--radius-lg:18px;
--radius-xl:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:var(--font-sans);
font-size:16px;
line-height:1.55;
color:var(--text);
background:var(--bg);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
body::before{
content:"";
position:fixed;inset:0;z-index:-1;pointer-events:none;
opacity:0.42;
background-image:
linear-gradient(115deg,rgba(255,255,255,0.34),transparent 42%),
repeating-linear-gradient(0deg,rgba(7,16,20,0.026) 0 1px,transparent 1px 5px),
repeating-linear-gradient(90deg,rgba(255,255,255,0.16) 0 1px,transparent 1px 7px);
background-size:100% 100%,100% 100%,100% 100%;
mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;border:none;background:none;cursor:pointer}
::selection{background:var(--brand-soft);color:var(--brand-2)}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
background:rgba(251,250,246,0.88);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid transparent;
transition:border-color .25s,background .25s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.hero + .section{border-top:1px solid var(--line)}
.nav-inner{
max-width:1200px;margin:0 auto;
padding:9px 32px;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
}
.brand{
grid-column:1;
display:flex;align-items:center;
width:148px;height:auto;
margin-left:-36px;
overflow:visible;
}
.brand-logo{
width:100%;height:auto;
object-fit:contain;object-position:left center;
}
.nav-links{grid-column:2;justify-self:center;display:flex;gap:4px}
.nav-links a{
font-size:14px;font-weight:500;color:var(--text-2);
padding:7px 11px;border-radius:6px;transition:all .15s;
}
.nav-links a:hover{color:var(--ink);background:var(--bg-alt)}
.nav-links a.active{
color:var(--ink);
background:var(--brand-soft);
}
.mobile-nav-toggle{
grid-column:3;
justify-self:end;
display:none;
width:42px;
height:42px;
align-items:center;
justify-content:center;
border:1px solid rgba(7,16,20,0.1);
border-radius:8px;
background:rgba(255,255,255,0.62);
color:var(--ink);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.76);
}
.mobile-nav-toggle span,
.mobile-nav-toggle::before,
.mobile-nav-toggle::after{
content:"";
display:block;
width:18px;
height:2px;
border-radius:999px;
background:currentColor;
transition:transform .18s ease,opacity .18s ease;
}
.mobile-nav-toggle span{position:relative}
.mobile-nav-toggle::before{position:absolute;transform:translateY(-6px)}
.mobile-nav-toggle::after{position:absolute;transform:translateY(6px)}
.nav.menu-open .mobile-nav-toggle span{opacity:0}
.nav.menu-open .mobile-nav-toggle::before{transform:rotate(45deg)}
.nav.menu-open .mobile-nav-toggle::after{transform:rotate(-45deg)}
.nav-cta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.nav-cta .btn-ghost{display:none}
.nav-cta .lang-switch{display:none}
.lang-switch{
display:inline-flex;align-items:center;gap:2px;
padding:3px;
background:rgba(255,255,255,0.58);
border:1px solid rgba(7,16,20,0.1);
border-radius:999px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
html[lang="ja"] body{
font-family:var(--font-ja);
font-weight:450;
}
html[lang="ja"] .section-sub,
html[lang="ja"] .hero-sub,
html[lang="ja"] .hailey-content p.lead,
html[lang="ja"] .contact-head p,
html[lang="ja"] .trust-item span,
html[lang="ja"] .flow-step p,
html[lang="ja"] .feat p,
html[lang="ja"] .insight-card p{
font-weight:500;
}
html[lang="ja"] .btn,
html[lang="ja"] .hero-flow span,
html[lang="ja"] .capability-name > span:last-child,
html[lang="ja"] .action-item{
font-weight:600;
}
html[lang="zh-CN"] body{
font-family:var(--font-zh);
}
html[lang="zh-CN"] .hero-h1,
html[lang="zh-CN"] .section-title,
html[lang="zh-CN"] .hailey-content h2,
html[lang="zh-CN"] .contact-head h2{
font-weight:600;
letter-spacing:0;
}
html[lang="zh-CN"] .hero-h1{
font-family:var(--font-zh);
font-weight:600;
line-height:1.04;
letter-spacing:0.01em;
}
html[lang="zh-CN"] .hero-h1 .hero-title-bottom{
padding-left:0;
font-weight:650;
}
html[lang="zh-CN"] .hero-sub,
html[lang="zh-CN"] .section-sub,
html[lang="zh-CN"] .trust-item span,
html[lang="zh-CN"] .flow-step p,
html[lang="zh-CN"] .feat p,
html[lang="zh-CN"] .hailey-content p.lead{
font-weight:400;
line-height:1.72;
}
html[lang="zh-CN"] .btn,
html[lang="zh-CN"] .hero-flow span,
html[lang="zh-CN"] .action-item{
font-weight:600;
}
.lang-option{
min-width:34px;
padding:6px 8px;
border-radius:999px;
font-size:11px;
line-height:1;
font-weight:700;
color:var(--text-2);
letter-spacing:0.02em;
}
.lang-option:hover{color:var(--ink);background:rgba(255,255,255,0.72)}
.lang-option.active{
color:#fff;
background:var(--night);
box-shadow:0 8px 22px -16px rgba(7,16,20,0.65);
}
.btn{
display:inline-flex;align-items:center;gap:6px;
font-size:14px;font-weight:500;line-height:1;
padding:10px 16px;border-radius:8px;
transition:all .15s;cursor:pointer;
font-family:var(--font-sans);
}
.btn-ghost{color:var(--text);background:transparent}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn-outline:hover{border-color:var(--ink);background:#fff}
.btn-lg{padding:13px 22px;font-size:15px}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;
padding:108px 32px 64px;
display:flex;
flex-direction:column;
align-items:center;
overflow:hidden;
background:
radial-gradient(ellipse 82% 48% at 50% 18%,rgba(61,224,210,0.1),transparent 60%),
linear-gradient(180deg,#04090c 0%,#071014 54%,#050b0e 100%);
}
/* In-flow hero image (shown complete, edges fade into the dark backdrop) */
.hero-media{
width:100%;
max-width:1120px;
margin:42px auto 0;
}
.hero-image{
width:100%;
height:auto;
display:block;
border-radius:14px;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.hero-stage{
position:absolute;
z-index:0;
left:0;
right:0;
top:39%;
bottom:0;
width:100%;
height:auto;
margin:0;
border:0;
border-radius:0;
background:url("assets/renewai-energy-operating-network-hero_new.png") 50% 22%/cover no-repeat;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.55) 4%,#000 9%,#000 100%);
-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.55) 4%,#000 9%,#000 100%);
}
.hero-stage::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(4,9,12,0.06) 0%,rgba(4,9,12,0.0) 14%,rgba(4,9,12,0.0) 66%,rgba(4,9,12,0.5) 100%);
}
.hero::before{
content:"";position:absolute;inset:0;z-index:1;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
background-size:72px 72px;
mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.55) 24%,rgba(0,0,0,0.7) 72%,transparent 100%);
-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.55) 24%,rgba(0,0,0,0.7) 72%,transparent 100%);
pointer-events:none;
}
.hero::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
opacity:0.34;
background:
radial-gradient(ellipse 68% 46% at 50% 62%,transparent 56%,rgba(4,9,12,0.26) 82%,rgba(4,9,12,0.46) 100%);
}
.hero-inner{
position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
flex:1;
display:flex;
flex-direction:column;
}
.hero-inner::before{
display:none;
content:"";
position:absolute;
left:50%;top:50%;
width:min(880px,70vw);height:min(880px,70vw);
transform:translate(-50%,-55%);
border:1px solid rgba(255,255,255,0.14);
border-radius:50%;
pointer-events:none;
opacity:0.7;
background:none;
box-shadow:inset 0 0 0 1px rgba(61,224,210,0.08),0 0 0 120px rgba(255,255,255,0.015);
}
.hero-copy{
position:relative;
z-index:2;
max-width:980px;
min-width:0;
margin:0 auto;
text-align:center;
}
.hero-language-panel{
position:relative;
z-index:5;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin:32px auto 0;
}
.hero-language-tag{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
margin:0;
}
.hero-language-tag-top{
font-family:var(--font-sans);
font-size:14px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:#3de0d2;
}
.hero-language-tag-sub{
font-family:var(--font-sans);
font-size:12.5px;
font-weight:600;
letter-spacing:0.07em;
text-transform:uppercase;
color:rgba(255,255,255,0.5);
}
.hero-language-panel .lang-switch{
flex-direction:row;
align-items:center;
gap:16px;
padding:0 0 0 16px;
background:transparent;
border:0;
border-left:1px solid rgba(255,255,255,0.22);
border-radius:0;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.hero-language-panel .lang-option{
min-width:0;
padding:0;
border-radius:0;
background:transparent;
box-shadow:none;
font-size:15px;
font-weight:700;
letter-spacing:0.02em;
color:rgba(255,255,255,0.55);
}
.hero-language-panel .lang-option:hover{
background:transparent;
color:#fff;
}
.hero-language-panel .lang-option.active{
background:transparent;
box-shadow:none;
color:#fff;
}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px 8px 8px;
background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.18);border-radius:100px;
font-size:12px;color:rgba(255,255,255,0.82);font-weight:800;
letter-spacing:0.06em;text-transform:uppercase;
box-shadow:0 14px 34px -24px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.16);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
margin-bottom:26px;
transform:translateY(-6px);
}
.hero-eyebrow .pill{
background:linear-gradient(135deg,#159b8c,#3de0d2);color:#04090c;
font-family:var(--font-mono);font-size:10px;font-weight:700;
padding:5px 9px;border-radius:100px;letter-spacing:0.1em;
}
.hero-eyebrow .arr{display:none}
h1.hero-h1{
font-size:clamp(37px,4.5vw,66px);
font-weight:580;
line-height:1;
letter-spacing:-0.014em;
color:#eaf3f1;
text-shadow:0 2px 30px rgba(4,9,12,0.7),0 1px 3px rgba(4,9,12,0.5);
margin:0 auto 18px;max-width:980px;
text-align:center;
}
.hero-h1 span{
display:block;
white-space:nowrap;
text-align:center;
}
.hero-h1 .hero-title-bottom{
padding-left:0;
font-weight:610;
letter-spacing:-0.022em;
color:#3de0d2;
}
h1.hero-h1 em{
font-family:var(--font-sans);
font-style:normal;font-weight:650;
letter-spacing:-0.025em;
color:#d7fff9;
background:none;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:currentColor;
}
.hero-sub{
font-size:clamp(20px,1.55vw,26px);line-height:1.5;color:rgba(255,255,255,0.88);
text-shadow:0 1px 18px rgba(4,9,12,0.6);
max-width:760px;margin:0 auto;font-weight:500;
}
.hero-cta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.hero-cta,
.hero-flow{display:none!important}
.hero .btn-primary{background:var(--night);color:#fff}
.hero .btn-primary:hover{background:#102027;color:#fff}
.hero .btn-outline{background:rgba(255,255,255,0.52);color:var(--night);border-color:rgba(7,16,20,0.16)}
.hero .btn-outline:hover{background:#fff;border-color:rgba(7,16,20,0.32)}
.hero-flow{
display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
margin:0 0 34px;
color:var(--text-2);
font-family:var(--font-mono);font-size:11px;font-weight:700;
letter-spacing:0.06em;text-transform:uppercase;
}
.hero-flow span{
display:inline-flex;align-items:center;justify-content:center;
min-height:30px;padding:8px 10px;
border:1px solid rgba(31,111,91,0.16);
border-radius:999px;
background:rgba(255,255,255,0.54);
box-shadow:var(--shadow-sm);
}
.hero-meta{
position:relative;
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid rgba(255,255,255,0.16);
border-bottom:1px solid rgba(255,255,255,0.08);
border-radius:0;overflow:visible;
max-width:1040px;margin:18px auto 0;
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
box-shadow:none;
}
.hero-meta::before{
display:none;
}
.hero-meta > div{
position:relative;
background:transparent;
padding:20px 22px 18px;text-align:center;
}
.hero-meta-val{
font-size:clamp(28px,3.2vw,44px);font-weight:610;color:#eaf3f1;
text-shadow:0 1px 16px rgba(4,9,12,0.6);
letter-spacing:-0.02em;line-height:1.04;margin-bottom:7px;
}
.hero-meta-val em{
font-family:var(--font-sans);font-style:normal;font-weight:500;
color:#3de0d2;font-size:0.72em;margin-left:2px;
}
.hero-meta-label{
font-size:11px;color:rgba(255,255,255,0.62);font-family:var(--font-mono);
font-weight:800;letter-spacing:0.075em;text-transform:uppercase;line-height:1.25;text-align:center;
}
.hero-visual{
display:none!important;
}
.command-shell{
position:relative;
z-index:2;
border:1px solid rgba(7,16,20,0.14);
border-radius:32px;
padding:14px;
background:
linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.3)),
radial-gradient(circle at 80% 0%,rgba(55,183,165,0.16),transparent 34%);
box-shadow:0 38px 96px -44px rgba(7,16,20,0.58);
animation:screenRise .8s cubic-bezier(.16,1,.3,1) .08s both;
transform:rotateX(4deg) rotateY(-8deg) rotateZ(1deg);
transform-origin:center bottom;
width:116%;
margin-left:-2%;
}
.command-shell::before{
display:none;
}
.command-shell::after{
display:none;
}
.command-window{
overflow:hidden;
border-radius:18px;
background:#111820;
border:1px solid rgba(255,255,255,0.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
}
.command-bar{
height:44px;padding:0 16px;
display:flex;align-items:center;justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,0.1);
color:rgba(255,255,255,0.62);
font-family:var(--font-mono);font-size:12px;
}
.command-dots{display:flex;gap:7px}
.command-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.28)}
.command-dots span:nth-child(1){background:#ff6058}
.command-dots span:nth-child(2){background:#ffbd2e}
.command-dots span:nth-child(3){background:#28c941}
.command-body{background:#0b1420}
.command-body img{width:100%;height:auto}
.optimise-panel{
position:absolute;
right:auto;
left:4%;
top:376px;
width:292px;
z-index:4;
border:1px solid rgba(255,255,255,0.18);
border-radius:18px;
background:linear-gradient(145deg,rgba(9,18,25,0.94),rgba(15,31,38,0.88));
color:#fff;
box-shadow:0 28px 70px -32px rgba(0,0,0,0.72),inset 0 1px 0 rgba(255,255,255,0.12);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
overflow:hidden;
animation:signalFloat 6.2s ease-in-out infinite;
}
.optimise-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
padding:16px 16px 13px;
border-bottom:1px solid rgba(255,255,255,0.12);
}
.optimise-title-row{
display:flex;align-items:center;gap:10px;
margin-top:4px;
}
.optimise-mark{
flex-shrink:0;
width:28px;height:28px;border-radius:9px;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--kingfisher) 0%,var(--solar) 100%);
color:#fff;
box-shadow:0 0 0 4px rgba(55,183,165,0.12);
}
.optimise-mark svg{width:15px;height:15px}
.optimise-kicker{
display:block;
font-family:var(--font-mono);font-size:10px;font-weight:800;
letter-spacing:0.08em;text-transform:uppercase;
color:rgba(255,255,255,0.52);
}
.optimise-title-row strong{
display:block;
font-size:15px;line-height:1.25;font-weight:650;
color:#fff;
}
.optimise-status{
flex-shrink:0;
display:inline-flex;align-items:center;gap:6px;
padding:6px 8px;
border-radius:999px;
background:rgba(55,183,165,0.12);
color:#bff8ef;
font-family:var(--font-mono);font-size:10px;font-weight:800;
letter-spacing:0.04em;text-transform:uppercase;
}
.optimise-status::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--kingfisher-2);
box-shadow:0 0 0 4px rgba(55,183,165,0.16);
}
.optimise-body{padding:15px 16px 16px}
.optimise-trigger{
width:100%;
display:flex;align-items:center;justify-content:center;gap:8px;
min-height:38px;
margin-bottom:14px;
border-radius:11px;
background:linear-gradient(135deg,var(--kingfisher-2),var(--solar));
color:#071014;
font-size:12px;font-weight:750;
box-shadow:0 16px 34px -22px rgba(55,183,165,0.9),inset 0 1px 0 rgba(255,255,255,0.38);
animation:triggerPress 70s cubic-bezier(.16,1,.3,1) infinite;
}
.optimise-trigger::before{
content:"";width:8px;height:8px;border-radius:50%;
background:#071014;
box-shadow:0 0 0 4px rgba(7,16,20,0.12);
}
.scan-lines{
display:grid;gap:9px;margin-bottom:14px;
opacity:0;
animation:workflowReveal 70s ease infinite;
}
.scan-line{
display:grid;grid-template-columns:1fr;gap:7px;align-items:center;
font-size:12px;color:rgba(255,255,255,0.74);
}
.scan-line span:first-child{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.scan-bar{
height:4px;border-radius:999px;
background:rgba(255,255,255,0.08);
overflow:hidden;
}
.scan-bar i{
display:block;height:100%;border-radius:inherit;
background:linear-gradient(90deg,var(--kingfisher-2),var(--solar));
width:0;
animation:scanFillOne 70s cubic-bezier(.16,1,.3,1) infinite;
}
.scan-line:nth-child(2) .scan-bar i{
animation-name:scanFillTwo;
animation-delay:0s;
}
.scan-line:nth-child(3) .scan-bar i{
animation-name:scanFillThree;
animation-delay:0s;
}
.optimise-panel .value-grid{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
margin-bottom:13px;
opacity:0;
transform:translateY(8px);
animation:resultReveal 70s cubic-bezier(.16,1,.3,1) infinite;
}
.value-card{
padding:11px 10px;
border:1px solid rgba(255,255,255,0.12);
border-radius:12px;
background:rgba(255,255,255,0.06);
}
.value-card span{
display:block;
font-family:var(--font-mono);font-size:9px;font-weight:800;
letter-spacing:0.06em;text-transform:uppercase;
color:rgba(255,255,255,0.48);
margin-bottom:5px;
}
.value-card strong{
display:block;
font-size:22px;line-height:1;font-weight:700;
letter-spacing:-0.02em;color:#fff;
}
.value-card em{font-style:normal;color:var(--kingfisher-2)}
.action-list{
display:grid;gap:7px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,0.12);
opacity:0;
animation:actionsReveal 70s cubic-bezier(.16,1,.3,1) infinite;
}
.action-item{
display:flex;align-items:center;justify-content:space-between;gap:8px;
min-height:34px;
padding:8px 10px;
border:1px solid rgba(255,255,255,0.12);
border-radius:10px;
background:rgba(255,255,255,0.06);
font-size:11.5px;line-height:1.35;color:rgba(255,255,255,0.82);
opacity:0;
transform:translateY(6px);
animation:actionItemReveal 70s cubic-bezier(.16,1,.3,1) infinite;
}
.action-item:nth-child(2){animation-delay:.22s}
.action-item:nth-child(3){animation-delay:.44s}
.action-item::before{
content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;
background:var(--solar);
box-shadow:0 0 0 3px rgba(216,155,43,0.13);
}
.action-item::after{
content:">";
flex-shrink:0;
display:grid;place-items:center;
width:18px;height:18px;border-radius:50%;
background:rgba(255,255,255,0.08);
color:rgba(255,255,255,0.78);
font-size:16px;line-height:1;
}
.energy-map{
position:absolute;inset:-46px -34px -52px -40px;
z-index:-1;pointer-events:none;
opacity:0.94;
}
.energy-map::before{
content:"";position:absolute;inset:16% 10% 14% 8%;
border:1px solid rgba(31,111,91,0.16);
border-radius:42% 58% 48% 52%;
background:
radial-gradient(circle at 24% 20%,rgba(216,155,43,0.16),transparent 12%),
radial-gradient(circle at 77% 28%,rgba(55,183,165,0.18),transparent 12%),
radial-gradient(circle at 26% 75%,rgba(31,111,91,0.16),transparent 12%);
box-shadow:inset 0 0 48px rgba(255,255,255,0.5);
}
.energy-map::after{
content:"";position:absolute;inset:25% 16% 24% 15%;
border:1px dashed rgba(31,111,91,0.24);
border-radius:50%;
}
.signal-card{
position:absolute;
z-index:4;
width:310px;
border:1px solid rgba(255,255,255,0.16);
border-radius:16px;
background:linear-gradient(145deg,rgba(9,18,25,0.92),rgba(15,31,38,0.84));
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:0 26px 62px -34px rgba(0,0,0,0.76), inset 0 1px 0 rgba(255,255,255,0.1);
padding:14px 18px;
color:#fff;
}
.signal-card.top{right:-62px;top:72px}
.signal-card.bottom{left:-38px;bottom:-24px}
.signal-card{animation:signalFloat 5.8s ease-in-out infinite}
.signal-card.bottom{animation-delay:.9s}
.signal-card.capabilities{
width:268px;
padding:0;
overflow:hidden;
background:linear-gradient(145deg,rgba(8,16,23,0.94),rgba(13,29,36,0.88));
border-color:rgba(255,255,255,0.15);
}
.signal-card.bottom.capabilities{
left:auto;
right:8%;
bottom:20px;
}
.capability-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 15px 12px;
border-bottom:1px solid rgba(255,255,255,0.14);
}
.capability-head span{
font-family:var(--font-mono);font-size:9.5px;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
color:rgba(255,255,255,0.46);
}
.capability-head b{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:rgba(255,255,255,0.88);font-weight:600;
}
.capability-head b::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--kingfisher-2);
box-shadow:0 0 0 4px rgba(55,183,165,0.14);
}
.capability-grid{
display:grid;
grid-template-columns:1fr;
}
.signal-card.capabilities .signal-row{
align-items:center;
padding:12px 15px;
border-top-color:rgba(255,255,255,0.1);
}
.capability-name{
display:flex;align-items:center;gap:9px;
}
.capability-icon{
flex-shrink:0;
width:26px;height:26px;border-radius:8px;
display:grid;place-items:center;
color:#bff8ef;
background:rgba(55,183,165,0.09);
border:1px solid rgba(55,183,165,0.15);
}
.capability-icon svg{
width:15px;height:15px;
stroke:currentColor;
}
.capability-state{
display:inline-flex;align-items:center;justify-content:center;
min-width:62px;
padding:5px 7px;
border:1px solid rgba(55,183,165,0.17);
border-radius:999px;
background:rgba(55,183,165,0.08);
color:#bff8ef!important;
font-family:var(--font-sans)!important;
font-weight:600!important;
font-size:11px!important;
line-height:1;
white-space:nowrap;
}
.capability-name > span:last-child{
font-family:var(--font-sans)!important;
font-size:12.5px!important;
font-weight:500;
letter-spacing:0;
color:rgba(255,255,255,0.84)!important;
}
.signal-card.insight{
width:330px;
padding:13px 17px 12px;
}
.insight-head{
display:flex;align-items:center;gap:9px;margin-bottom:8px;
}
.insight-mark{
flex-shrink:0;
width:28px;height:28px;border-radius:50%;
display:grid;place-items:center;
background:linear-gradient(135deg,#fff,var(--kingfisher-2));
color:var(--night);
box-shadow:0 0 0 4px rgba(55,183,165,0.16);
}
.insight-label{
display:block;
font-family:var(--font-mono);font-size:10px;font-weight:800;
letter-spacing:0.08em;text-transform:uppercase;
color:rgba(255,255,255,0.54);
}
.insight-source{
display:block;
font-size:12px;font-weight:600;color:rgba(255,255,255,0.84);
margin-top:2px;
}
.insight-metric{
display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
margin:1px 0 7px;
font-family:var(--font-mono);
}
.insight-metric strong{
font-size:30px;line-height:1;font-weight:800;color:#fff;letter-spacing:-0.03em;
}
.insight-metric span{font-size:16px;color:rgba(255,255,255,0.42)}
.insight-metric small{
font-size:11px;font-weight:800;letter-spacing:0.04em;
color:rgba(255,255,255,0.56);text-transform:uppercase;
}
.insight-metric em{
font-style:normal;
font-size:27px;line-height:1;font-weight:800;
color:var(--kingfisher-2);letter-spacing:-0.03em;
}
.insight-copy{
font-size:12px;line-height:1.38;color:rgba(255,255,255,0.78);
margin:0 0 8px;
}
.insight-foot{
display:flex;align-items:center;gap:7px;
padding-top:8px;
border-top:1px solid rgba(255,255,255,0.12);
font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:0.06em;text-transform:uppercase;
color:rgba(255,255,255,0.46);
}
.insight-foot::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--kingfisher-2);
box-shadow:0 0 0 4px rgba(55,183,165,0.14);
}
.signal-kicker{
display:flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;
color:rgba(255,255,255,0.48);text-transform:uppercase;
margin-bottom:12px;
}
.signal-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kingfisher-2);box-shadow:0 0 0 4px rgba(0,216,200,0.14)}
.signal-value{font-size:30px;line-height:1;font-weight:650;letter-spacing:-0.025em;margin-bottom:8px}
.signal-value span{font-family:var(--font-sans);font-style:normal;font-weight:600;color:var(--solar)}
.signal-copy{font-size:13px;line-height:1.45;color:rgba(255,255,255,0.76);margin:0}
.signal-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(255,255,255,0.14)}
.signal-row:first-of-type{border-top:none;padding-top:0}
.signal-row b{font-size:14px;color:#fff}
.signal-row span{font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,0.62)}
/* ============================================================
SECTION TITLE / EYEBROW
============================================================ */
.section{
padding:96px 0;position:relative;
background:var(--bg);
}
.section.alt{background:var(--bg)}
.section.alt::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.section-head{max-width:720px;min-width:0;margin-bottom:60px}
.section-head.centred{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:12px;font-weight:800;
color:var(--brand-2);letter-spacing:0.12em;
margin-bottom:22px;text-transform:uppercase;
padding:7px 10px;
border:1px solid rgba(31,111,91,0.16);
border-radius:999px;
background:rgba(255,255,255,0.42);
box-shadow:var(--shadow-sm);
}
.eyebrow::before{
content:"";width:6px;height:6px;border-radius:999px;background:currentColor;
}
.section-title{
font-size:clamp(34px,3.6vw,52px);
font-weight:600;line-height:1.1;letter-spacing:-0.024em;
color:var(--ink);margin:0 0 20px;
}
#pathways{padding-top:86px}
.section-title span{display:block}
.section-title em{
font-family:var(--font-sans);font-style:normal;font-weight:600;
color:var(--ink);
}
.section-sub{
font-size:18px;line-height:1.6;color:var(--text-2);max-width:620px;margin:0;
}
.section-band{
display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
margin-bottom:42px;
}
.section-band .section-head{margin-bottom:0}
.section-action{
flex-shrink:0;
font-family:var(--font-mono);font-size:12px;color:var(--grid-green);
border:1px solid rgba(31,111,91,0.18);border-radius:999px;padding:9px 13px;
background:rgba(255,255,255,0.42);
}
/* ============================================================
V2 VALUE / PATHWAYS / COMPATIBILITY / GLOBAL
============================================================ */
.value-grid-home,
.pathway-grid,
.compat-grid,
.global-grid{display:grid;gap:18px}
.value-grid-home{grid-template-columns:repeat(3,1fr)}
.pathway-grid{grid-template-columns:repeat(5,1fr)}
.compat-grid{grid-template-columns:repeat(7,1fr)}
.global-grid{grid-template-columns:1.1fr .9fr;align-items:stretch}
.value-card-home,
.pathway-card,
.compat-tile,
.global-panel{
border:1px solid rgba(7,16,20,0.09);
background:linear-gradient(145deg,rgba(255,255,255,0.78),rgba(255,255,255,0.42));
box-shadow:0 18px 46px -36px rgba(7,16,20,0.28),inset 0 1px 0 rgba(255,255,255,0.78);
}
.value-card-home,
.pathway-card,
.global-panel{border-radius:18px;padding:24px}
.value-card-home strong,
.pathway-card strong{
display:block;
font-size:22px;
line-height:1.16;
color:var(--ink);
margin-bottom:10px;
}
.value-card-home p,
.pathway-card p,
.global-panel p{
margin:0;
color:var(--text-2);
font-size:14.5px;
line-height:1.6;
}
.value-mark{
width:38px;height:38px;border-radius:12px;
display:grid;place-items:center;
margin-bottom:18px;
color:#fff;
background:linear-gradient(135deg,var(--brand),var(--solar));
font-family:var(--font-mono);
font-size:13px;
font-weight:800;
}
.pathway-card{
display:flex;
min-height:230px;
flex-direction:column;
justify-content:space-between;
}
.pathway-card a{
display:inline-flex;
align-items:center;
gap:7px;
width:max-content;
margin-top:20px;
color:var(--brand-2);
font-size:13px;
font-weight:700;
}
.pathway-card a::after{content:">";font-size:16px;line-height:1}
/* Audience value rows — centred, stacked (Tesla-style) */
.audience-rows{
max-width:1080px;
margin:0 auto;
}
.audience-row{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:56px;
padding:52px 0;
border-top:1px solid var(--line);
text-align:left;
}
.audience-row:first-child{border-top:0;padding-top:8px}
.audience-row-media{
border-radius:18px;
overflow:hidden;
box-shadow:0 30px 70px -44px rgba(7,16,20,0.32);
}
.audience-row-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
aspect-ratio:4 / 3;
}
.audience-tag{
display:inline-block;
margin-bottom:16px;
font-family:var(--font-mono);
font-size:12px;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--brand-2);
}
.audience-row h3{
margin:0 0 14px;
font-size:clamp(28px,3.4vw,44px);
font-weight:600;
line-height:1.1;
letter-spacing:-0.022em;
color:var(--ink);
}
.audience-row p{
margin:0;
max-width:560px;
font-size:17px;
line-height:1.62;
color:var(--text-2);
}
.audience-cta{margin-top:24px}
.pathway-tag{
display:inline-flex;
width:max-content;
margin-bottom:18px;
padding:6px 8px;
border-radius:999px;
background:var(--brand-soft);
color:var(--brand-2);
font-family:var(--font-mono);
font-size:10px;
font-weight:800;
letter-spacing:0.06em;
text-transform:uppercase;
}
.compat-tile{
min-height:132px;
border-radius:16px;
padding:18px 12px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
text-align:center;
}
.brand-icon{
width:48px;height:48px;border-radius:15px;
display:grid;place-items:center;
color:#fff;
background:linear-gradient(135deg,var(--night),var(--brand));
font-family:var(--font-mono);
font-weight:850;
letter-spacing:0.02em;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 14px 30px -24px rgba(7,16,20,0.56);
}
.compat-tile:nth-child(2) .brand-icon{background:linear-gradient(135deg,#cf3428,#ee8b28)}
.compat-tile:nth-child(3) .brand-icon{background:linear-gradient(135deg,#175a9f,#38a2d6)}
.compat-tile:nth-child(4) .brand-icon{background:linear-gradient(135deg,#111,#d32828)}
.compat-tile:nth-child(5) .brand-icon{background:linear-gradient(135deg,#d66022,#f4b246)}
.compat-tile:nth-child(6) .brand-icon{background:linear-gradient(135deg,#243b6b,#50a8ff)}
.compat-tile:nth-child(7) .brand-icon{background:linear-gradient(135deg,#091216,#37b7a5)}
.compat-tile strong{
display:block;
color:var(--ink);
font-size:14px;
}
.brand-svg{width:104px;height:auto;display:block}
.global-panel{
min-height:280px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.global-map{
position:relative;
overflow:hidden;
color:#fff;
background:
radial-gradient(circle at 20% 34%,rgba(216,155,43,0.28),transparent 16%),
radial-gradient(circle at 56% 45%,rgba(55,183,165,0.24),transparent 20%),
linear-gradient(145deg,var(--night),#173026);
}
.global-map::before{
content:"";
position:absolute;inset:26px;
border:1px dashed rgba(255,255,255,0.2);
border-radius:999px;
}
.global-map strong,
.global-map p,
.global-map .market-path{position:relative;z-index:1}
.market-path{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:34px;
font-family:var(--font-mono);
font-size:12px;
font-weight:800;
letter-spacing:0.05em;
text-transform:uppercase;
}
.market-path span{
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.14);
}
.language-list{
display:grid;
gap:10px;
margin-top:22px;
}
.language-list span{
padding:13px 14px;
border-radius:12px;
background:rgba(31,111,91,0.08);
color:var(--brand-2);
font-weight:700;
}
.outcome-dock{
position:relative;
z-index:3;
max-width:920px;
margin:0 auto;
padding:54px 24px 0;
display:none;
}
.outcome-dock-inner{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
overflow:visible;
border:0;
border-radius:0;
background:
transparent;
box-shadow:none;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.outcome-intro{display:none!important}
.outcome-intro,
.outcome-item{
position:relative;
min-height:86px;
padding:18px;
}
.outcome-intro{
display:flex;
flex-direction:column;
justify-content:space-between;
color:var(--night);
background:rgba(7,16,20,0.035);
}
.outcome-intro span{
font-family:var(--font-mono);
font-size:10px;
font-weight:850;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--brand-2);
}
.outcome-intro strong{
display:block;
max-width:190px;
font-size:22px;
line-height:1.1;
letter-spacing:-0.02em;
}
.outcome-item{
border:1px solid rgba(7,16,20,0.11);
border-radius:16px;
background:linear-gradient(145deg,rgba(7,16,20,0.9),rgba(20,49,45,0.76));
box-shadow:0 22px 52px -38px rgba(7,16,20,0.72),inset 0 1px 0 rgba(255,255,255,0.12);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.outcome-item::before{
display:none;
}
.outcome-item h3{
margin:0;
color:#fff;
font-size:17px;
line-height:1.18;
}
.outcome-item p{
display:none;
}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.mission-card,
.roadmap-card{
border:1px solid rgba(7,16,20,0.09);
border-radius:18px;
background:linear-gradient(145deg,rgba(255,255,255,0.78),rgba(255,255,255,0.42));
padding:24px;
box-shadow:0 18px 46px -36px rgba(7,16,20,0.28),inset 0 1px 0 rgba(255,255,255,0.78);
}
.mission-card span,
.roadmap-card span{
display:block;
margin-bottom:12px;
color:var(--brand-2);
font-family:var(--font-mono);
font-size:11px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
}
.mission-card strong,
.roadmap-card strong{
display:block;
color:var(--ink);
font-size:23px;
line-height:1.18;
}
.mission-card p{margin:12px 0 0;color:var(--text-2);line-height:1.58}
.roadmap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.roadmap-card{position:relative;min-height:170px}
.roadmap-card:not(:last-child)::after{
content:">";
position:absolute;
right:-11px;
top:50%;
transform:translateY(-50%);
z-index:2;
width:22px;height:22px;border-radius:50%;
display:grid;place-items:center;
background:var(--night);
color:#fff;
font-size:14px;
}
/* ============================================================
ABOUT
============================================================ */
#about{
padding:86px 0 96px;
}
.value-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.value-pillar{
border:1px solid rgba(7,16,20,0.09);
border-radius:18px;
background:linear-gradient(145deg,rgba(255,255,255,0.82),rgba(255,255,255,0.46));
padding:0;
overflow:hidden;
box-shadow:0 18px 46px -36px rgba(7,16,20,0.28),inset 0 1px 0 rgba(255,255,255,0.78);
opacity:1;
animation:none;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.value-pillar:hover{
transform:translateY(-4px);
border-color:rgba(31,111,91,0.28);
box-shadow:0 28px 60px -38px rgba(7,16,20,0.34),inset 0 1px 0 rgba(255,255,255,0.78);
}
.value-pillar-media{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:var(--night);
}
.value-pillar-media::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,transparent 58%,rgba(7,16,20,.16) 100%);
}
.value-pillar-media img{width:100%;height:100%;display:block;object-fit:cover}
.value-pillar-body{padding:25px 24px 27px}
.value-pillar h3{
margin:0 0 10px;
color:var(--ink);
font-size:21px;
line-height:1.2;
font-weight:650;
letter-spacing:-0.01em;
}
.value-pillar p{
margin:0;
color:var(--text-2);
font-size:15.5px;
line-height:1.58;
}
@media (max-width:860px){
.value-grid{grid-template-columns:1fr;gap:14px}
.value-pillar-body{padding:22px}
#about{padding:64px 0}
.audience-row{grid-template-columns:1fr;gap:28px}
.audience-row-media{order:-1}
}
.trust-strip{
position:relative;
min-height:360px;
border:1px solid rgba(31,111,91,0.13);
border-radius:22px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(255,255,255,0.7),rgba(255,255,255,0.28)),
radial-gradient(circle at 16% 18%,rgba(216,155,43,0.1),transparent 28%),
radial-gradient(circle at 84% 22%,rgba(55,183,165,0.12),transparent 30%);
box-shadow:0 20px 56px -38px rgba(7,16,20,0.34),inset 0 1px 0 rgba(255,255,255,0.74);
}
.trust-strip::before{
content:"";
position:absolute;
left:7%;right:7%;top:50%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(216,155,43,0.28),rgba(31,111,91,0.3),transparent);
}
.pain-cloud,
.outcome-cloud{
position:absolute;
inset:0;
pointer-events:none;
}
.cloud-label{
position:absolute;
top:28px;
display:inline-flex;align-items:center;gap:8px;
padding:9px 14px;
border-radius:12px;
font-family:var(--font-mono);
font-size:11px;font-weight:850;
letter-spacing:0.08em;text-transform:uppercase;
background:linear-gradient(135deg,rgba(255,255,255,0.86),rgba(255,255,255,0.48));
border:1px solid rgba(7,16,20,0.08);
color:rgba(7,16,20,0.58);
box-shadow:0 16px 42px -30px rgba(7,16,20,0.36),inset 0 1px 0 rgba(255,255,255,0.86);
backdrop-filter:blur(14px);
}
.pain-label{
left:4%;
color:rgba(116,70,8,0.86);
border-color:rgba(216,155,43,0.28);
background:
linear-gradient(135deg,rgba(255,247,232,0.92),rgba(255,255,255,0.56)),
radial-gradient(circle at 18% 0%,rgba(216,155,43,0.18),transparent 54%);
}
.solution-label{
right:4%;
color:rgba(31,111,91,0.9);
border-color:rgba(31,111,91,0.24);
background:
linear-gradient(135deg,rgba(232,251,245,0.92),rgba(255,255,255,0.56)),
radial-gradient(circle at 82% 0%,rgba(55,183,165,0.2),transparent 54%);
}
.pain-chip,
.outcome-chip{
position:absolute;
display:inline-flex;align-items:center;gap:8px;
max-width:250px;
padding:10px 12px;
border:1px solid rgba(216,155,43,0.2);
border-radius:999px;
background:linear-gradient(135deg,rgba(255,249,238,0.86),rgba(255,255,255,0.42));
box-shadow:0 14px 34px -28px rgba(116,70,8,0.36),inset 0 1px 0 rgba(255,255,255,0.78);
color:var(--text);
font-size:13px;line-height:1.24;font-weight:500;
white-space:nowrap;
}
.pain-chip::before,
.outcome-chip::before{
content:"";
flex-shrink:0;width:7px;height:7px;border-radius:50%;
}
.pain-chip::before{
background:var(--solar);
box-shadow:0 0 0 4px rgba(216,155,43,0.12);
}
.outcome-chip{
border-color:rgba(31,111,91,0.12);
background:linear-gradient(135deg,rgba(236,252,247,0.86),rgba(255,255,255,0.46));
box-shadow:0 14px 34px -28px rgba(31,111,91,0.4),inset 0 1px 0 rgba(255,255,255,0.78);
}
.outcome-chip::before{
background:var(--kingfisher);
box-shadow:0 0 0 4px rgba(31,111,91,0.1);
}
.pain-chip:nth-child(1){left:4%;top:22%;max-width:none}
.pain-chip:nth-child(2){left:7%;top:58%;max-width:none}
.pain-chip:nth-child(3){left:10%;top:38%;max-width:none}
.pain-chip:nth-child(4){left:5%;top:78%;max-width:none}
.outcome-chip:nth-child(1){right:4%;top:22%;max-width:none}
.outcome-chip:nth-child(2){right:7%;top:58%;max-width:none}
.outcome-chip:nth-child(3){right:10%;top:38%;max-width:none}
.outcome-chip:nth-child(4){right:5%;top:78%;max-width:none}
.trust-layer{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
width:300px;
padding:20px 22px;
border:1px solid rgba(255,255,255,0.24);
border-radius:18px;
text-align:center;
color:#fff;
background:
radial-gradient(circle at 22% 0%,rgba(55,183,165,0.28),transparent 42%),
linear-gradient(135deg,rgba(7,16,20,0.95),rgba(23,54,63,0.9));
box-shadow:0 28px 70px -38px rgba(7,16,20,0.72),0 0 0 10px rgba(255,255,255,0.16),inset 0 1px 0 rgba(255,255,255,0.12);
overflow:hidden;
}
.trust-layer::after{
content:"";
position:absolute;
inset:12px;
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
pointer-events:none;
}
.trust-layer span{
display:block;
font-family:var(--font-mono);font-size:10px;font-weight:800;
letter-spacing:0.1em;text-transform:uppercase;
color:rgba(255,255,255,0.54);
margin-bottom:6px;
}
.trust-layer strong{
display:block;
font-size:24px;line-height:1.05;font-weight:680;
letter-spacing:-0.02em;
margin-bottom:6px;
}
.trust-layer p{
margin:0;
font-size:12.5px;line-height:1.42;
color:rgba(255,255,255,0.68);
}
/* ============================================================
VISION
============================================================ */
#vision{background:var(--bg-alt);position:relative;overflow:hidden}
#vision::before{
content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;
background:radial-gradient(circle,rgba(255,255,255,0.34) 0%,transparent 70%);
pointer-events:none;
}
#vision .section-band{position:relative}
#vision .section-head{
max-width:920px;
}
#vision .section-title span{
white-space:nowrap;
}
#vision .section-action{
position:absolute;
right:0;
bottom:4px;
}
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:0}
.operating-flow{
position:relative;
min-height:760px;
padding:28px 0;
isolation:isolate;
}
.operating-flow::before{
content:"";
position:absolute;
left:50%;top:50%;
width:360px;height:360px;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px dashed rgba(31,111,91,0.2);
background:
radial-gradient(circle at 50% 50%,rgba(55,183,165,0.12),transparent 32%),
radial-gradient(circle at 50% 50%,rgba(216,155,43,0.08),transparent 62%);
z-index:0;
}
.os-core{
position:absolute;
left:50%;top:50%;
width:168px;height:168px;
transform:translate(-50%,-50%);
border-radius:50%;
display:grid;place-items:center;
align-content:center;
gap:6px;
text-align:center;
background:
radial-gradient(circle at 38% 28%,rgba(255,255,255,0.72),transparent 24%),
linear-gradient(135deg,var(--night),#17363f 58%,var(--kingfisher));
border:1px solid rgba(255,255,255,0.38);
box-shadow:0 26px 70px -34px rgba(7,16,20,0.72),0 0 0 14px rgba(255,255,255,0.26);
color:#fff;
z-index:2;
}
.os-core::before,
.os-core::after{
content:"";
position:absolute;
inset:-18px;
border:1px solid rgba(31,111,91,0.18);
border-radius:50%;
}
.os-core::after{
inset:-34px;
border-style:dashed;
opacity:0.7;
}
.os-core span{
display:block;
font-family:var(--font-mono);font-size:11px;font-weight:800;
letter-spacing:0.1em;text-transform:uppercase;
color:rgba(255,255,255,0.62);
}
.os-core strong{
display:block;
margin-top:0;
font-size:28px;line-height:1;font-weight:750;
letter-spacing:-0.03em;
}
.flow-step{
position:absolute;
width:360px;
height:286px;
padding:20px 22px 20px 96px;
border:1px solid rgba(31,111,91,0.16);
border-radius:18px;
background:
linear-gradient(135deg,rgba(255,255,255,0.88),rgba(255,255,255,0.54)),
radial-gradient(circle at 0% 50%,rgba(55,183,165,0.12),transparent 46%);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 20px 54px -34px rgba(7,16,20,0.44),inset 0 1px 0 rgba(255,255,255,0.78);
overflow:visible;
z-index:1;
display:flex;
flex-direction:column;
}
.flow-step:nth-of-type(2){left:0;top:22px}
.flow-step:nth-of-type(3){right:0;top:22px}
.flow-step:nth-of-type(4){left:0;bottom:22px}
.flow-step:nth-of-type(5){right:0;bottom:22px}
.flow-step::before{
content:"";
position:absolute;
top:50%;
width:96px;height:1px;
background:linear-gradient(90deg,rgba(31,111,91,0),rgba(31,111,91,0.32));
}
.flow-step:nth-of-type(2)::before,
.flow-step:nth-of-type(4)::before{
right:-96px;
}
.flow-step:nth-of-type(3)::before,
.flow-step:nth-of-type(5)::before{
left:-96px;
transform:scaleX(-1);
}
.flow-step::after{
content:"";
position:absolute;
width:9px;height:9px;border-radius:50%;
top:calc(50% - 4.5px);
background:var(--kingfisher-2);
box-shadow:0 0 0 6px rgba(55,183,165,0.13);
opacity:0.82;
}
.flow-step:nth-of-type(2)::after,
.flow-step:nth-of-type(4)::after{
right:-101px;
}
.flow-step:nth-of-type(3)::after,
.flow-step:nth-of-type(5)::after{
left:-101px;
}
.flow-step:hover{
transform:translateY(-3px);
border-color:rgba(31,111,91,0.28);
box-shadow:0 24px 56px -34px rgba(7,16,20,0.58),inset 0 1px 0 rgba(255,255,255,0.82);
}
.flow-index{
position:absolute;
left:22px;top:18px;
display:inline-flex;align-items:center;justify-content:center;
width:46px;height:30px;border-radius:10px;
border:1px solid rgba(31,111,91,0.12);
background:rgba(31,111,91,0.08);
color:var(--brand-2);
font-family:var(--font-mono);font-size:15px;font-weight:800;line-height:1;
letter-spacing:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.58);
}
.flow-icon{
position:absolute;
left:22px;top:62px;
width:46px;height:46px;border-radius:14px;
display:grid;place-items:center;
color:var(--brand-2);
border:1px solid rgba(31,111,91,0.18);
background:
radial-gradient(circle at 35% 25%,rgba(255,255,255,0.94),transparent 32%),
linear-gradient(135deg,rgba(230,240,234,0.92),rgba(255,255,255,0.58));
box-shadow:0 14px 30px -24px rgba(7,16,20,0.44),inset 0 1px 0 rgba(255,255,255,0.82);
}
.flow-icon svg{
width:22px;height:22px;
stroke:currentColor;
}
.flow-step h3{
font-size:20px;font-weight:650;color:var(--ink);
letter-spacing:-0.015em;margin:0 0 8px;line-height:1.15;
}
.flow-step p{
font-size:12.8px;line-height:1.45;color:var(--text-2);margin:0;
}
.flow-points{
list-style:none;
padding:11px 0 0;
margin:0;
display:grid;
gap:6px;
}
.flow-points li{
position:relative;
padding:7px 9px 7px 24px;
border:1px solid rgba(31,111,91,0.12);
border-radius:10px;
background:linear-gradient(135deg,rgba(255,255,255,0.58),rgba(255,255,255,0.26));
box-shadow:inset 0 1px 0 rgba(255,255,255,0.72);
font-size:11.6px;
line-height:1.28;
color:var(--text);
}
.flow-points li::before{
content:"";
position:absolute;
left:9px;
top:50%;
transform:translateY(-50%);
width:5px;height:5px;border-radius:50%;
background:var(--kingfisher);
opacity:0.78;
box-shadow:0 0 0 3px rgba(31,111,91,0.08);
}
.vision-card{
background:rgba(255,255,255,0.62);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:30px 28px;
position:relative;overflow:hidden;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.is-visible{
opacity:1!important;
transform:translateY(0)!important;
}
.vision-card:hover{
transform:translateY(-4px);
border-color:var(--line-strong);
box-shadow:var(--shadow-lg);
}
.vision-card::after{
content:"";position:absolute;left:32px;right:32px;bottom:0;height:3px;
background:linear-gradient(90deg,var(--grid-green),var(--kingfisher),var(--solar));
opacity:0;transition:opacity .25s;
}
.vision-card:hover::after{opacity:1}
@keyframes screenRise{
from{opacity:0;transform:translateY(16px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes signalFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
@keyframes triggerPress{
0%,0.8%,100%{transform:translateY(0);filter:saturate(1)}
1.4%{transform:translateY(1px) scale(.985);filter:saturate(1.16)}
2.2%,98%{transform:translateY(0);filter:saturate(1)}
98.5%,99.4%{filter:saturate(1.08)}
}
@keyframes workflowReveal{
0%,1.5%,100%{opacity:0}
2.2%,98%{opacity:1}
}
@keyframes scanFillOne{
0%,2.2%{width:0}
5.2%,98%{width:100%}
100%{width:0}
}
@keyframes scanFillTwo{
0%,5.8%{width:0}
8.8%,98%{width:100%}
100%{width:0}
}
@keyframes scanFillThree{
0%,9.4%{width:0}
12.6%,98%{width:100%}
100%{width:0}
}
@keyframes resultReveal{
0%,13.2%,100%{opacity:0;transform:translateY(8px)}
14.2%,98%{opacity:1;transform:translateY(0)}
}
@keyframes actionsReveal{
0%,15%,100%{opacity:0}
16%,98%{opacity:1}
}
@keyframes actionItemReveal{
0%,15%,100%{opacity:0;transform:translateY(6px)}
16%,98%{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.vision-card-num{
font-family:var(--font-mono);font-style:normal;
font-size:42px;font-weight:400;line-height:1;
color:var(--brand);
margin-bottom:30px;
}
.vision-card h3{
font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-0.015em;
margin:0 0 14px;line-height:1.25;
}
.vision-card p{
font-size:14px;line-height:1.58;color:var(--text-2);margin:0;
}
/* ============================================================
PRODUCT — Big screenshots with feature blocks
============================================================ */
#product{padding-bottom:80px}
.product-screen{
margin-top:60px;
position:relative;
border-radius:var(--radius-xl);
overflow:hidden;
border:1px solid var(--line);
background:#fff;
box-shadow:var(--shadow-lg);
}
.product-screen.dark{
border-color:rgba(255,255,255,0.16);
background:#0b1420;
}
.product-screen.dark .product-screen-frame{
background:#111b28;
border-bottom-color:rgba(255,255,255,0.1);
}
.product-screen.dark .product-screen-url{color:rgba(255,255,255,0.54)}
.product-screen::after{
content:"";position:absolute;inset:0;
border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.55);
pointer-events:none;
}
.product-screen-frame{
background:#f3f5f9;padding:10px 14px;
display:flex;align-items:center;gap:6px;
border-bottom:1px solid var(--line);
}
.product-screen-dot{width:11px;height:11px;border-radius:50%;background:#d4d8df}
.product-screen-dot.r{background:#ff6058}
.product-screen-dot.y{background:#ffbd2e}
.product-screen-dot.g{background:#28c941}
.product-screen-url{
margin-left:14px;flex:1;
font-family:var(--font-mono);font-size:12px;color:var(--text-3);
}
.product-screen img,
.product-screen video{display:block;width:100%;height:auto}
/* RenewAI Energy OS workflow */
.energy-os-layout{
display:flex;
flex-direction:column;
gap:48px;
}
.energy-os-left{
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
}
.energy-os-cta{align-self:center}
.energy-os-phones{
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-width:1080px;
padding-bottom:clamp(14px,2vw,24px);
border-radius:30px;
background:#02070b;
box-shadow:0 36px 84px -46px rgba(0,0,0,.72);
overflow:hidden;
}
.energy-os-diagram{
position:relative;
display:flex;
flex-direction:column;
gap:24px;
}
.energy-os-core{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:226px;
min-height:94px;
margin:0 auto;
border:1px solid rgba(55,183,165,.45);
border-radius:18px;
background:#10262a;
box-shadow:0 18px 44px -25px rgba(0,0,0,.8),0 0 0 6px rgba(55,183,165,.06);
}
.energy-os-core span,
.energy-os-core small{
font-family:var(--font-mono);
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
}
.energy-os-core span{font-size:9px;color:#8aeee0}
.energy-os-core strong{margin:3px 0 2px;font-size:25px;line-height:1.05;letter-spacing:-.025em;color:#fff}
.energy-os-core small{font-size:8px;color:rgba(255,255,255,.44)}
.energy-os-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
}
.energy-os-step{
position:relative;
display:flex;flex-direction:column;
padding:26px 30px 6px;
border-top:1px solid var(--ink);
}
/* simple vertical dividers between panels */
.energy-os-step + .energy-os-step{
border-left:1px solid var(--line);
}
.energy-os-step h3{margin:0 0 10px;text-align:left;color:var(--ink);font-size:22px;line-height:1.1;letter-spacing:-.025em}
.energy-os-step > p{margin:0 0 18px;text-align:left;color:var(--text-2);font-size:13.5px;line-height:1.55}
.energy-os-step ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.energy-os-step li{
position:relative;
padding:0 0 0 19px;
color:var(--text);
font-size:12.5px;
line-height:1.42;
}
.energy-os-step li::before{
content:"";
position:absolute;
left:2px;top:8px;
width:5px;height:5px;
border-radius:50%;
background:var(--brand-2);
}
.energy-os-phone{
width:50%;
margin:0;
}
.energy-os-phone-combined{width:100%}
.energy-os-phone img{display:block;width:100%;height:auto}
@media (max-width:900px){
.energy-os-layout{gap:36px}
.energy-os-steps{grid-template-columns:1fr 1fr}
.energy-os-step{padding:24px 24px 6px}
.energy-os-step + .energy-os-step{border-left:0}
.energy-os-step:nth-child(2),
.energy-os-step:nth-child(4){border-left:1px solid var(--line)}
}
@media (max-width:520px){
.energy-os-steps{grid-template-columns:1fr}
.energy-os-step{padding:22px 2px 6px}
.energy-os-step:nth-child(2),
.energy-os-step:nth-child(4){border-left:0}
.energy-os-step h3{font-size:21px}
.energy-os-step > p{font-size:13.5px}
.energy-os-step li{font-size:12px}
}
.product-features{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px;
}
.feat{
position:relative;
min-height:210px;
padding:24px 22px 22px;
border:1px solid var(--line);
border-radius:18px;
background:
radial-gradient(circle at 100% 0%,rgba(31,111,91,0.1),transparent 38%),
linear-gradient(180deg,rgba(255,255,255,0.82),rgba(255,255,255,0.46));
box-shadow:var(--shadow);
overflow:hidden;
}
.feat::after{
content:"";
position:absolute;
left:22px;
right:22px;
bottom:0;
height:3px;
background:linear-gradient(90deg,var(--grid-green),var(--kingfisher),var(--solar));
opacity:0;
transition:opacity .22s ease;
}
.feat:hover::after{opacity:1}
.feat-icon{
width:46px;height:46px;border-radius:12px;
background:rgba(31,111,91,0.1);
display:grid;place-items:center;
color:var(--brand-2);font-weight:800;
font-family:var(--font-mono);font-size:15px;
margin-bottom:28px;
border:1px solid rgba(31,111,91,0.12);
}
.feat h4{
font-size:19px;font-weight:700;color:var(--ink);
letter-spacing:-0.015em;margin:0 0 10px;
}
.feat p{font-size:14.5px;line-height:1.58;color:var(--text-2);margin:0}
/* Sub-section: Single-site detail view — stacked, centred like the hero block */
.product-secondary{
margin-top:82px;
display:block;
}
.product-secondary-content h3{
font-size:32px;font-weight:600;color:var(--ink);
letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.product-secondary-content h3 em{font-family:var(--font-sans);font-style:normal;font-weight:600;color:var(--ink)}
.product-secondary-content p{font-size:16px;line-height:1.65;color:var(--text-2);margin:0 0 24px}
.product-secondary .checklist{
display:grid;grid-template-columns:1fr 1fr;gap:6px 48px;
max-width:840px;margin:-16px auto 52px;
}
.product-secondary .checklist li{font-size:16px;line-height:1.5}
.product-secondary .checklist li::before{width:20px;height:20px;background-size:12px}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{
display:flex;gap:12px;padding:10px 0;align-items:flex-start;
font-size:14px;color:var(--text);
}
.checklist li::before{
content:"";flex-shrink:0;
width:18px;height:18px;border-radius:50%;
background:var(--kingfisher-glow);
background-image:url("data:image/svg+xml;utf8,");
background-size:11px;background-position:center;background-repeat:no-repeat;
margin-top:2px;
}
.product-insights{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-top:34px;
}
.insight-card{
display:flex;
flex-direction:column;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
background:#fff;
box-shadow:var(--shadow);
}
.insight-card img,
.insight-card video{
width:100%;
aspect-ratio:1.9/1;
height:auto;
object-fit:cover;
object-position:center;
background:#0b1420;
}
.insight-card-body{
flex:1;
min-height:148px;
padding:18px 18px 20px;
}
.insight-card h4{
font-size:16px;
font-weight:650;
color:var(--ink);
margin:0 0 8px;
letter-spacing:-0.01em;
}
.insight-card p{
font-size:14px;
line-height:1.55;
color:var(--text-2);
margin:0;
}
/* ============================================================
HAILEY
============================================================ */
#hailey{
position:relative;overflow:hidden;
}
.hailey-grid{
display:block;
margin-top:0;
}
.hailey-grid .hailey-skills{
max-width:840px;margin:-16px auto 52px;
}
.hailey-grid .ip-note{
max-width:780px;margin:30px auto 0;
}
.hailey-content h2{
font-size:clamp(34px,3.6vw,52px);
font-weight:600;line-height:1.1;letter-spacing:-0.024em;
color:var(--ink);margin:0 0 20px;
}
.hailey-content h2 em{
font-family:var(--font-sans);font-style:normal;font-weight:600;
color:var(--ink);
background:none;
-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
}
.hailey-content p.lead{
font-size:18px;line-height:1.6;color:var(--text-2);margin:0 0 30px;
}
.hailey-skills{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
.hailey-skill{display:flex;gap:12px;align-items:flex-start}
.hailey-skill-dot{
flex-shrink:0;width:20px;height:20px;border-radius:50%;
margin-top:2px;
background-color:var(--kingfisher-glow);
background-image:url("data:image/svg+xml;utf8,");
background-size:12px;background-position:center;background-repeat:no-repeat;
box-shadow:none;
}
.hailey-skill h5{
font-size:15px;font-weight:600;color:var(--ink);margin:0 0 3px;
}
.hailey-skill p{font-size:14px;color:var(--text-2);margin:0;line-height:1.5}
/* IP origin note - small card explaining the assistant mascot */
.ip-note{
background:#fff;border:1px solid var(--line);
border-radius:var(--radius);
padding:18px 20px;
display:flex;gap:14px;align-items:flex-start;
font-size:13px;line-height:1.55;color:var(--text-2);
}
.ip-note .ipn-mark{
flex-shrink:0;width:32px;height:32px;border-radius:8px;
background:linear-gradient(135deg,var(--kingfisher) 0%,var(--solar) 100%);
display:grid;place-items:center;color:#fff;font-size:14px;
}
.ip-note strong{color:var(--ink);font-weight:600}
/* Right side — pixel-art-style chat mock (matches the screenshot vibe) */
.hailey-screen{
position:relative;display:flex;align-items:stretch;justify-content:center;
padding:0;
}
.hailey-screen img{
max-width:420px;width:100%;height:auto;
border-radius:var(--radius-lg);
border:1px solid var(--line);
box-shadow:var(--shadow-lg);
}
.hailey-screen video{
width:min(100%,430px);
height:100%;
max-height:640px;
object-fit:cover;
object-position:top center;
border-radius:18px;
border:1px solid rgba(255,255,255,0.18);
background:#071014;
box-shadow:0 28px 64px -34px rgba(7,16,20,0.62),0 0 0 10px rgba(255,255,255,0.26);
}
.hailey-screen::before{
content:"";position:absolute;
width:120%;height:80%;top:10%;left:-10%;
background:none;
z-index:-1;
}
/* ============================================================
MARKET READINESS
============================================================ */
#market{
background:
radial-gradient(circle at 12% 8%,rgba(31,111,91,0.08),transparent 28%),
radial-gradient(circle at 88% 18%,rgba(216,155,43,0.08),transparent 30%),
linear-gradient(180deg,#f8f7f2 0%,#fbfaf6 100%);
overflow:hidden;
}
.market-grid{
display:grid;
grid-template-columns:minmax(0,0.92fr) minmax(420px,1.08fr);
gap:58px;
align-items:start;
}
.market-copy .section-head{margin-bottom:34px}
.market-copy .section-title{max-width:680px}
.market-proof{
display:grid;
gap:14px;
margin-top:30px;
max-width:640px;
}
.market-proof-row{
display:grid;
grid-template-columns:132px 1fr;
gap:18px;
padding:16px 0;
border-top:1px solid rgba(7,16,20,0.1);
}
.market-proof-row:last-child{border-bottom:1px solid rgba(7,16,20,0.1)}
.market-proof-row span{
font-family:var(--font-mono);
font-size:11px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--brand-2);
}
.market-proof-row p{
margin:0;
color:var(--text);
line-height:1.58;
font-size:15px;
}
.market-rail{
position:relative;
margin-top:46px;
padding:28px;
border:1px solid rgba(7,16,20,0.13);
border-radius:22px;
background:
linear-gradient(135deg,rgba(255,255,255,0.74),rgba(255,255,255,0.34)),
rgba(255,255,255,0.44);
box-shadow:0 28px 70px -44px rgba(7,16,20,0.42),inset 0 1px 0 rgba(255,255,255,0.82);
}
.market-rail::before{
content:"";
position:absolute;
left:32px;top:58px;bottom:178px;
width:1px;
background:linear-gradient(180deg,transparent,var(--line-strong),transparent);
}
.market-lane{
position:relative;
display:grid;
grid-template-columns:86px 1fr;
gap:20px;
align-items:flex-start;
min-height:104px;
padding:14px 0;
}
.market-lane::before{
content:"";
position:absolute;
left:25px;top:16px;
width:16px;height:16px;
border-radius:999px;
background:var(--bg);
border:4px solid var(--kingfisher);
box-shadow:0 0 0 7px rgba(31,111,91,0.1);
}
.market-lane:nth-child(4)::before{border-color:var(--brand-2);box-shadow:0 0 0 7px rgba(31,111,91,0.13)}
.market-lane-tag{
padding-top:42px;
text-align:center;
font-family:var(--font-mono);
font-size:10px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--text-3);
}
.market-lane h3{
margin:0 0 8px;
font-size:21px;
line-height:1.2;
color:var(--ink);
letter-spacing:-0.015em;
}
.market-lane p{
margin:0;
max-width:460px;
color:var(--text-2);
font-size:14.5px;
line-height:1.58;
}
.market-note{
margin-top:22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:16px 18px;
border:1px solid rgba(31,111,91,0.16);
border-radius:14px;
background:rgba(230,240,234,0.62);
}
.market-note strong{
display:block;
color:var(--ink);
font-size:14px;
margin-bottom:2px;
}
.market-note span{
color:var(--text-2);
font-size:13px;
line-height:1.45;
}
.market-note b{
flex-shrink:0;
font-family:var(--font-mono);
font-size:10px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--brand-2);
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,0.58);
border:1px solid rgba(31,111,91,0.14);
}
/* ============================================================
CONTACT
============================================================ */
#contact{
background:url("assets/contact.png") 50% 50%/cover no-repeat;
color:var(--text);
padding:128px 0 96px;
min-height:100vh;
display:flex;align-items:center;
position:relative;overflow:hidden;
}
#contact::before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(247,249,250,0.62) 0%,rgba(247,249,250,0.34) 40%,rgba(247,249,250,0.6) 100%);
}
.contact-inner{position:relative;z-index:2;width:100%}
.contact-grid{
display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:flex-start;
}
.contact-head h2{
font-size:clamp(38px,4.3vw,60px);
font-weight:600;line-height:1.06;letter-spacing:-0.03em;
color:var(--ink);margin:0 0 22px;
}
.contact-head h2 span{display:block}
.contact-head h2 em{
font-family:var(--font-sans);font-style:normal;font-weight:600;
color:var(--brand-2);
background:none;
-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
}
.contact-head p{font-size:17px;line-height:1.6;color:var(--text-2);max-width:520px;margin:0 0 36px}
.contact-cta{display:flex;gap:10px;flex-wrap:wrap}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#f1f3f7}
.btn-line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.2)}
.btn-line:hover{background:rgba(255,255,255,0.08);border-color:rgba(216,155,43,0.42)}
.contact-side{
background:linear-gradient(145deg,rgba(255,255,255,0.82),rgba(255,255,255,0.46));
border:1px solid rgba(7,16,20,0.09);
border-radius:var(--radius-lg);
padding:32px;
box-shadow:0 18px 46px -36px rgba(7,16,20,0.28),inset 0 1px 0 rgba(255,255,255,0.78);
}
.contact-side h3{
font-size:13px;font-family:var(--font-mono);font-weight:600;
color:var(--text-3);letter-spacing:0.08em;text-transform:uppercase;
margin:0 0 18px;
}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{
padding:16px 0;border-bottom:1px solid var(--line-2);
display:flex;flex-direction:column;gap:4px;
}
.contact-list li:last-child{border-bottom:none;padding-bottom:0}
.contact-list li:first-child{padding-top:0}
.contact-list label{
font-family:var(--font-mono);font-size:10px;color:var(--text-3);
letter-spacing:0.08em;text-transform:uppercase;
}
.contact-list a,.contact-list span{
color:var(--ink);font-size:15px;font-weight:500;line-height:1.4;
}
.contact-list a:hover{color:var(--brand-2)}
/* ============================================================
FOOTER
============================================================ */
.footer{
background:var(--bg);color:var(--text-2);
padding:28px 0 24px;font-size:13px;
border-top:1px solid var(--line);
}
.footer-ack{
flex:0 0 100%;
margin:0;
color:var(--text-2);
font-size:13px;
line-height:1.62;
}
.footer-flags{
flex:0 0 100%;
display:flex;
align-items:center;
gap:10px;
margin:14px 0 0;
padding-bottom:22px;
border-bottom:1px solid var(--line);
}
.footer-flags img{
height:30px;width:auto;display:block;
border-radius:2px;
box-shadow:0 1px 4px rgba(10,11,13,0.16);
border:1px solid rgba(10,11,13,0.08);
}
.footer-inner{
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:16px;
}
.footer-inner a{color:var(--text-2)}
.footer-inner a:hover{color:var(--ink)}
.footer-links{display:flex;gap:24px}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:980px){
.container{padding:0 24px}
.hero-inner{grid-template-columns:1fr;gap:44px}
.hero-copy{max-width:none}
.hero-language-panel{right:0;top:48%}
.hero-visual{min-height:auto;display:grid;gap:12px;margin-right:0}
.command-shell{width:100%;margin-left:0;transform:none}
.optimise-panel{position:relative;right:auto;top:auto;width:auto;order:2}
.signal-card.top,.signal-card.bottom{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
.hailey-grid,.market-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
.section-band{align-items:flex-start;flex-direction:column;gap:20px}
.trust-strip{min-height:430px}
.trust-layer{width:250px}
.pain-label{left:3%;top:18px}
.solution-label{right:3%;top:18px}
.pain-chip:nth-child(1){left:3%;top:18%;max-width:none}
.pain-chip:nth-child(2){left:3%;top:64%;max-width:none}
.pain-chip:nth-child(3){left:4%;top:39%;max-width:none}
.pain-chip:nth-child(4){left:3%;top:84%;max-width:none}
.outcome-chip:nth-child(1){right:3%;top:18%;max-width:none}
.outcome-chip:nth-child(2){right:3%;top:64%;max-width:none}
.outcome-chip:nth-child(3){right:4%;top:39%;max-width:none}
.outcome-chip:nth-child(4){right:3%;top:84%;max-width:none}
.vision-grid{grid-template-columns:1fr 1fr;gap:18px}
.operating-flow{min-height:760px;padding-top:220px}
.operating-flow::before{top:110px;width:300px;height:300px}
.os-core{top:110px}
.flow-step{width:calc(50% - 12px);height:306px}
.flow-step:nth-of-type(2){left:0;top:240px}
.flow-step:nth-of-type(3){right:0;top:240px}
.flow-step:nth-of-type(4){left:0;bottom:18px}
.flow-step:nth-of-type(5){right:0;bottom:18px}
.flow-step::before,.flow-step::after{display:none}
.product-features{grid-template-columns:1fr 1fr;gap:32px 24px}
.value-grid-home{grid-template-columns:1fr 1fr}
.outcome-dock{display:none}
.outcome-dock-inner{grid-template-columns:repeat(3,1fr)}
.pathway-grid{grid-template-columns:1fr 1fr}
.compat-grid{grid-template-columns:repeat(3,1fr)}
.global-grid{grid-template-columns:1fr}
.mission-grid{grid-template-columns:1fr}
.roadmap-grid{grid-template-columns:1fr 1fr}
.roadmap-card:not(:last-child)::after{display:none}
.product-secondary{grid-template-columns:1fr;gap:40px}
.product-insights{grid-template-columns:1fr 1fr;gap:18px}
.hailey-skills{grid-template-columns:1fr}
.hailey-screen{padding:0}
.hailey-screen video{
width:min(100%,520px);
height:auto;
max-height:none;
object-fit:contain;
box-shadow:var(--shadow-lg);
}
.section{padding:80px 0}
.hero{min-height:calc(100svh - 1px);padding:100px 24px 44px}
}
@media (max-width:640px){
body{overflow-x:hidden}
.nav-inner{position:relative;grid-template-columns:1fr auto;padding:12px 18px;gap:14px}
.nav-links{
display:none;
position:absolute;
top:calc(100% + 10px);
left:18px;
right:18px;
flex-direction:column;
align-items:stretch;
gap:4px;
padding:10px;
border:1px solid rgba(7,16,20,0.1);
border-radius:12px;
background:rgba(248,244,236,0.97);
box-shadow:0 24px 64px -38px rgba(7,16,20,0.48),inset 0 1px 0 rgba(255,255,255,0.72);
}
.nav.menu-open .nav-links{display:flex}
.nav-links a,
.nav-trigger{
width:100%;
justify-content:flex-start;
padding:12px 12px;
border-radius:8px;
font-size:14px;
}
.nav-item{display:block}
.mobile-nav-toggle{grid-column:2;display:inline-flex;position:relative}
.brand{width:124px;height:auto;margin-left:0;overflow:visible}
.brand-logo{width:100%;max-width:100%;height:auto;object-fit:contain;object-position:left center;transform:none}
.nav-cta{display:none}
.lang-switch{padding:2px}
.lang-option{min-width:28px;padding:6px 6px;font-size:10px}
.nav-cta .btn-primary{padding:9px 12px;font-size:0;white-space:nowrap}
.nav-cta .btn-primary::before{content:"Demo";font-size:13px}
body[data-lang="zh"] .nav-cta .btn-primary::before{content:"演示"}
body[data-lang="ja"] .nav-cta .btn-primary::before{content:"デモ"}
.nav-cta .btn-primary .arr{font-size:13px}
.hero{min-height:calc(100svh - 1px);padding:96px 18px 42px}
.hero-inner{gap:30px}
.hero-language-panel{
position:relative;
right:auto;
top:auto;
transform:none;
display:flex;
justify-content:center;
margin:-4px auto 16px;
}
.hero-language-panel .lang-switch{
flex-direction:row;
gap:14px;
padding:0 0 10px;
border-left:0;
border-bottom:1px solid rgba(255,255,255,0.18);
}
.hero-language-panel .lang-option{
min-width:0;
padding:0;
font-size:10.5px;
}
.hero-eyebrow{font-size:9.5px;align-items:center;gap:6px;line-height:1.25;max-width:100%;flex-wrap:nowrap;letter-spacing:0.035em}
.hero-eyebrow{transform:none;margin-bottom:22px}
.hero-eyebrow .pill{font-size:9px;white-space:nowrap}
h1.hero-h1{font-size:34px;line-height:1;max-width:100%;letter-spacing:-0.01em;margin-top:0}
.hero-h1 span{white-space:normal}
.hero-h1 .hero-title-bottom{padding-left:0}
.hero-sub{font-size:17.5px;line-height:1.55;max-width:100%}
.hero-stage{
top:34%;
bottom:0;
width:100%;
height:auto;
margin:0;
background-position:50% 42%;
background-size:cover;
}
.hero-copy,
.section-head,
.section-title,
.section-sub{max-width:calc(100vw - 36px)}
.hero-cta{margin-bottom:14px}
.hero-cta .btn{width:100%;justify-content:center;min-height:44px}
.hero-flow{gap:6px;margin-bottom:22px;font-size:9.5px}
.hero-flow span{padding:7px 8px;min-height:28px}
.outcome-dock{display:none}
.outcome-dock-inner{grid-template-columns:1fr;border-radius:0}
.outcome-intro,
.outcome-item{min-height:auto;padding:16px}
.outcome-item{border-top:1px solid rgba(7,16,20,0.1)}
.outcome-item h3{margin:0;font-size:17px}
.hero-meta{grid-template-columns:repeat(2,1fr);margin-top:22px;border-radius:0}
.hero-meta::before{
background:
linear-gradient(90deg,transparent calc(50% - 1px),rgba(7,16,20,0.15) calc(50% - 1px),rgba(7,16,20,0.15) 50%,rgba(255,255,255,0.64) calc(50% + 1px),transparent calc(50% + 2px)),
linear-gradient(180deg,transparent calc(50% - 1px),rgba(7,16,20,0.15) calc(50% - 1px),rgba(7,16,20,0.15) 50%,rgba(255,255,255,0.64) calc(50% + 1px),transparent calc(50% + 2px));
}
.hero-meta > div{padding:13px 14px;display:block;min-height:82px}
.hero-meta-val{font-size:28px;margin-bottom:2px;white-space:nowrap}
.hero-meta-label{font-size:10px;line-height:1.25;text-align:center;margin-top:8px}
.hero-visual{
margin-top:6px;
display:grid;
gap:12px;
padding:10px;
border:1px solid rgba(7,16,20,0.12);
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,0.72),rgba(255,255,255,0.34));
box-shadow:0 20px 54px -34px rgba(7,16,20,0.42);
}
.energy-map{display:none}
.command-shell{
order:1;
position:relative;
padding:0;
border-radius:16px;
border-color:rgba(7,16,20,0.1);
background:transparent;
box-shadow:none;
transform:none;
}
.command-shell::before,
.command-shell::after{display:none}
.command-window{border-radius:12px}
.command-bar{height:38px;font-size:10px;padding:0 12px}
.command-bar > div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.command-body img{min-height:190px;object-fit:cover;object-position:left top}
.signal-card{
animation:none;
width:auto;
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
border-radius:14px;
box-shadow:none;
}
.signal-card.top{
order:2;
z-index:3;
margin:-54px 12px 0;
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:7px 12px;
padding:13px 14px;
background:linear-gradient(145deg,rgba(23,54,63,0.84),rgba(18,34,44,0.78));
}
.signal-card.top.insight{
display:block;
padding:13px 14px;
}
.signal-card.bottom{
order:3;
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
padding:1px;
overflow:hidden;
background:rgba(22,38,45,0.9);
}
.signal-card.bottom.capabilities{
display:block;
padding:0;
}
.signal-card.bottom.capabilities .signal-row{
display:flex;
min-height:auto;
}
.signal-kicker{grid-column:1/-1;margin-bottom:0;font-size:9px}
.signal-value{font-size:24px;margin-bottom:0}
.signal-copy{font-size:12px;line-height:1.35}
.signal-row{
display:block;
padding:11px 12px;
border-top:none;
background:rgba(255,255,255,0.055);
min-height:58px;
}
.signal-row:first-of-type{padding-top:11px}
.signal-row:last-child{grid-column:1/-1}
.signal-row span{font-size:10px}
.signal-row b{display:block;margin-top:4px;font-size:13px}
.section{padding:64px 0}
.section-title{font-size:31px}
.section-sub{font-size:16px}
.hailey-content p.lead{font-size:16px}
.market-proof-row{grid-template-columns:1fr;gap:7px;padding:14px 0}
.market-rail{margin-top:0;padding:18px;border-radius:18px}
.market-rail::before{left:22px;top:46px;bottom:184px}
.market-lane{grid-template-columns:58px 1fr;gap:14px;min-height:auto;padding:14px 0}
.market-lane::before{left:16px;top:16px;width:13px;height:13px;border-width:3px}
.market-lane-tag{padding-top:38px;text-align:center;font-size:8.5px;letter-spacing:0.04em}
.market-lane h3{font-size:18px}
.market-note{align-items:flex-start;flex-direction:column}
.section-action{white-space:normal;line-height:1.45}
.trust-strip{
min-height:auto;
display:grid;
gap:14px;
padding:16px;
}
.trust-strip::before{display:none}
.cloud-label,
.pain-label,
.solution-label{
position:relative;
left:auto;right:auto;top:auto;
width:max-content;
max-width:100%;
}
.pain-label{order:1}
.pain-cloud{order:2}
.trust-layer{order:3}
.solution-label{order:4}
.outcome-cloud{order:5}
.pain-cloud,
.outcome-cloud{
position:relative;
inset:auto;
display:grid;
gap:8px;
}
.pain-chip,
.outcome-chip,
.pain-chip:nth-child(n),
.outcome-chip:nth-child(n){
position:relative;
left:auto;right:auto;top:auto;
max-width:none;
width:max-content;
max-width:100%;
border-radius:12px;
white-space:nowrap;
overflow-x:auto;
}
.trust-layer{
position:relative;
left:auto;top:auto;
transform:none;
width:100%;
}
#vision .section-action{
position:static;
}
.optimise-panel{
animation:none;
margin:-46px 12px 0;
z-index:4;
}
#vision .section-title span{white-space:normal}
.vision-grid{grid-template-columns:1fr}
.operating-flow{display:grid;grid-template-columns:1fr;border-radius:18px;padding:0;gap:14px;min-height:auto}
.operating-flow::before{display:none}
.os-core{
position:relative;
left:auto;top:auto;
transform:none;
width:100%;height:auto;
min-height:92px;
border-radius:18px;
margin-bottom:4px;
}
.os-core::before,.os-core::after{display:none}
.os-core strong{font-size:24px}
.flow-step,
.flow-step:nth-of-type(2),
.flow-step:nth-of-type(3),
.flow-step:nth-of-type(4),
.flow-step:nth-of-type(5){
position:relative;
left:auto;right:auto;top:auto;bottom:auto;
width:auto;
height:auto;
padding:24px 22px 22px 84px;
}
.flow-step::before,.flow-step::after{display:none}
.flow-step:hover{transform:none}
.flow-index{margin-bottom:20px}
.flow-icon{left:22px;top:62px}
.product-features{grid-template-columns:1fr}
.value-grid-home,
.pathway-grid,
.compat-grid{grid-template-columns:1fr}
.pathway-card{min-height:auto}
.compat-tile{min-height:112px}
.roadmap-grid{grid-template-columns:1fr}
.product-insights{grid-template-columns:1fr}
.product-insights{margin-top:24px}
.product-screen{border-radius:18px}
.product-secondary .checklist{grid-template-columns:1fr;max-width:420px}
.hailey-grid .hailey-skills{grid-template-columns:1fr}
.nav-cta .btn:not(.btn-primary){display:none}
}
@media (max-width:420px){
.container{padding:0 18px}
.hero{padding-left:16px;padding-right:16px}
h1.hero-h1{font-size:32px}
.hero-h1 .hero-title-bottom{padding-left:0}
.hero-sub{font-size:17px}
.hero-meta{grid-template-columns:1fr}
.hero-meta::before{
background:
linear-gradient(180deg,transparent calc(25% - 1px),rgba(7,16,20,0.15) calc(25% - 1px),rgba(7,16,20,0.15) 25%,rgba(255,255,255,0.64) calc(25% + 1px),transparent calc(25% + 2px)),
linear-gradient(180deg,transparent calc(50% - 1px),rgba(7,16,20,0.15) calc(50% - 1px),rgba(7,16,20,0.15) 50%,rgba(255,255,255,0.64) calc(50% + 1px),transparent calc(50% + 2px)),
linear-gradient(180deg,transparent calc(75% - 1px),rgba(7,16,20,0.15) calc(75% - 1px),rgba(7,16,20,0.15) 75%,rgba(255,255,255,0.64) calc(75% + 1px),transparent calc(75% + 2px));
}
.hero-meta > div{min-height:auto}
.hero-meta-label{text-align:center}
}
/* ============================================================
SHARED ADDITIONS — Partner dropdown, unified page chrome
(added during framework unification)
============================================================ */
/* Partner dropdown */
.nav-item{position:relative;display:flex;align-items:center}
.nav-trigger{
display:inline-flex;align-items:center;gap:5px;
font-size:14px;font-weight:500;color:var(--text-2);
padding:8px 12px;border-radius:6px;transition:all .15s;
font-family:var(--font-sans);cursor:pointer;
}
.nav-trigger:hover,
.nav-item:hover .nav-trigger,
.nav-trigger[aria-expanded="true"]{color:var(--ink);background:var(--bg-alt)}
.nav-trigger .caret{font-size:10px;line-height:1;transition:transform .18s;opacity:.7}
.nav-item:hover .nav-trigger .caret,
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-dropdown{
position:absolute;top:calc(100% + 8px);left:0;z-index:120;
min-width:208px;padding:8px;
display:flex;flex-direction:column;gap:2px;
background:rgba(251,250,246,0.92);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow-lg);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{
display:block;padding:10px 12px;border-radius:8px;
font-size:14px;font-weight:500;color:var(--text-2);transition:all .15s;
}
.nav-dropdown a:hover{color:var(--ink);background:var(--bg-alt)}
/* Unified sub-page chrome */
.page-hero{padding-top:128px}
.customer-stories-hero{
background:
radial-gradient(circle at 16% 20%,rgba(55,183,165,.16),transparent 34%),
radial-gradient(circle at 88% 12%,rgba(216,155,43,.13),transparent 32%),
linear-gradient(135deg,#071014 0%,#101a1e 58%,#211b18 100%);
}
.customer-stories-hero .section-title{color:#f2f7f6}
.customer-stories-hero .section-sub{color:rgba(242,247,246,.72)}
.customer-stories-hero .btn-primary{
color:#071014;
background:#3de0d2;
box-shadow:0 16px 38px -22px rgba(61,224,210,.85);
}
.customer-stories-hero .btn-primary:hover{
color:#071014;
background:#71eee3;
}
.customer-stories-visual{
width:100%;
margin:0;
overflow:hidden;
background:#080d11;
}
.customer-stories-visual img{
display:block;
width:100%;
height:auto;
}
@media (max-width:620px){
.customer-stories-visual img{
height:420px;
object-fit:cover;
object-position:center;
}
}
.lead{
font-size:clamp(17px,1.4vw,20px);line-height:1.62;color:var(--text-2);
max-width:680px;margin:0 auto;
}
.section-head.centred .lead{margin-left:auto;margin-right:auto}
.auto-grid{
display:grid;gap:18px;
grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.auto-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.auto-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.center-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px}
/* CTA band (sub-page footers / calls to action) */
.cta-band{
text-align:center;color:#fff;
background:linear-gradient(145deg,var(--night),#173026);
}
.cta-band .section-title,.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,0.74);max-width:620px;margin:0 auto 8px}
@media (max-width:980px){
.auto-grid.cols-4,.auto-grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.auto-grid,.auto-grid.cols-4,.auto-grid.cols-3{grid-template-columns:1fr}
.nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:none;padding:4px 0 4px 12px}
.nav-links .nav-item{display:block}
.nav-links .nav-trigger{display:flex}
}
/* centred section sub-heading */
.section-head.centred .section-sub{margin-left:auto;margin-right:auto;text-align:center}
.value-card-home.step{text-align:center}
.value-card-home.step .value-mark{margin-left:auto;margin-right:auto}
/* active states for dropdown nav */
.nav-trigger.active{color:var(--ink);background:var(--brand-soft)}
.nav-dropdown a.active{color:var(--ink);background:var(--bg-alt)}
/* ============================================================
STICKY FOOTER — keep footer pinned to viewport bottom on short pages
============================================================ */
body{display:flex;flex-direction:column;min-height:100vh}
body > main{flex:1 0 auto}
.footer{margin-top:auto}
/* ============================================================
HOMEPAGE NAV — warm champagne-gold metallic bar
(light background keeps the colour logo crisp; sub-pages stay cream)
============================================================ */
body.has-hero .nav{
background:
radial-gradient(circle at 88% 0%,rgba(255,255,255,.64),transparent 42%),
linear-gradient(180deg,rgba(251,250,246,.94),rgba(251,250,246,.88));
backdrop-filter:saturate(135%) blur(16px);
-webkit-backdrop-filter:saturate(135%) blur(16px);
border-bottom:1px solid rgba(7,16,20,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 30px -26px rgba(7,16,20,.3);
}
body.has-hero .nav:not(.scrolled) .nav-cta .btn-primary:hover{background:rgba(255,255,255,0.2)}
/* ============================================================
MODULE MEDIA — Tesla-style big image per key module
============================================================ */
.module-media{margin:46px auto 0;max-width:1080px;width:100%}
.module-media > img,
.module-media > video{
width:100%;height:auto;display:block;border-radius:18px;
border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.media-ph{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
min-height:360px;padding:40px 32px;text-align:center;border-radius:18px;
background:
radial-gradient(circle at 50% 0%,rgba(55,183,165,0.14),transparent 55%),
linear-gradient(160deg,#0b1a1f,#0a1316);
border:1px solid rgba(255,255,255,0.1);
box-shadow:var(--shadow-lg);
}
.media-ph-icon{
width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
color:var(--kingfisher-2);
}
.media-ph-icon svg{width:24px;height:24px}
.media-ph span{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.42)}
.media-ph strong{font-size:17px;font-weight:600;color:rgba(255,255,255,0.88)}
.media-ph small{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.5);max-width:460px}
/* Compatibility intro is centred above the brand image */
#compatibility-preview .section-head{text-align:center}
#compatibility-preview .section-sub{margin-left:auto;margin-right:auto;text-align:center}
#compatibility-preview .center-actions{justify-content:center}
/* Compatibility brand band — calm grey wordmarks, brand colour on hover */
.compat-band{
position:relative;
width:100%;max-width:1080px;
margin:30px auto 0;
aspect-ratio:auto;
border-radius:24px;
background:#071014;
box-shadow:0 32px 72px -42px rgba(7,16,20,.72);
overflow:hidden;
}
.compat-band::before{
display:none;
}
.compat-brand-image{display:block;width:100%;height:auto}
.compat-logo{
--c:var(--ink);--size:108px;--rot:0deg;
position:absolute;
transform:translate(-50%,-50%) rotate(var(--rot));
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
width:var(--size);height:var(--size);
text-align:center;
border:1px solid color-mix(in srgb,var(--c) 65%,#fff);
border-radius:50%;
background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 72%);
box-shadow:
0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent),
0 6px 22px -2px color-mix(in srgb,var(--c) 70%,transparent),
0 20px 44px -20px rgba(0,0,0,.8);
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.compat-logo span{
font-size:16px;line-height:1.05;font-weight:800;letter-spacing:-.02em;
color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.compat-logo small{
font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:rgba(255,255,255,.82);
}
.compat-logo:hover{
transform:translate(-50%,-50%) rotate(0) scale(1.1);
z-index:6;
box-shadow:
0 0 0 6px color-mix(in srgb,var(--c) 26%,transparent),
0 10px 30px 0 color-mix(in srgb,var(--c) 85%,transparent),
0 26px 54px -22px rgba(0,0,0,.85);
}
.compat-logo.brand-huawei{--c:#d8242f}
.compat-logo.brand-sungrow{--c:#e34a25}
.compat-logo.brand-goodwe{--c:#1671b8}
.compat-logo.brand-tesla{--c:#d71920}
.compat-logo.brand-fronius{--c:#e96822}
.compat-logo.brand-enphase{--c:#e56b24}
.compat-logo.brand-qzero{--c:#0f6f63}
/* scattered positions inside the circle */
.brand-huawei {left:49%;top:47%;--size:142px;--rot:-4deg;z-index:4}
.brand-huawei span{font-size:23px}
.brand-sungrow{left:25%;top:27%;--size:106px;--rot:5deg}
.brand-goodwe {left:74%;top:25%;--size:114px;--rot:-3deg}
.brand-tesla {left:80%;top:59%;--size:100px;--rot:4deg}
.brand-fronius{left:29%;top:67%;--size:108px;--rot:-5deg}
.brand-enphase{left:55%;top:81%;--size:96px;--rot:3deg}
.brand-qzero {left:16%;top:52%;--size:92px;--rot:-2deg}
/* QZERO uses its real logo — light badge so the colour mark stays legible */
.compat-logo.brand-qzero{background:#fff;border-color:rgba(15,111,99,.4)}
.compat-logo-svg{width:74%;height:auto;display:block}
@media (max-width:620px){
.compat-band{
max-width:100%;
border-radius:16px;
}
.compat-band::before{display:none}
.compat-logo{
position:relative;left:auto !important;top:auto !important;
--size:98px;
transform:rotate(var(--rot));
}
.compat-logo:hover{transform:rotate(0) scale(1.06)}
}
/* ============================================================
CONTACT — centred title + details grid below
============================================================ */
#contact .section-title em{font-style:normal;color:var(--ink)}
.contact-panel{
display:grid;grid-template-columns:1fr 1fr;
max-width:820px;margin:52px auto 0;
border:1px solid rgba(7,16,20,0.1);
border-radius:22px;
background:linear-gradient(145deg,rgba(255,255,255,0.88),rgba(255,255,255,0.52));
box-shadow:0 30px 70px -44px rgba(7,16,20,0.32),inset 0 1px 0 rgba(255,255,255,0.72);
overflow:hidden;
}
.contact-col{padding:38px 40px}
.contact-col + .contact-col{border-left:1px solid rgba(7,16,20,0.08)}
.contact-col-title{
display:flex;align-items:center;gap:10px;
margin:0 0 24px;
font-family:var(--font-mono);font-size:12px;font-weight:700;
letter-spacing:0.1em;text-transform:uppercase;color:var(--text-2);
}
.contact-col-title svg{width:18px;height:18px;color:var(--brand-2)}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.contact-list li,
.contact-block{display:flex;flex-direction:column;gap:4px}
.contact-block + .contact-block{margin-top:22px}
.contact-list-label{
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:0.09em;text-transform:uppercase;color:var(--text-3);
}
.contact-list a{
font-size:16px;line-height:1.4;font-weight:600;color:var(--ink);
width:max-content;transition:color .2s ease;
}
.contact-list a:hover{color:var(--brand-2)}
.contact-block p{margin:0;color:var(--ink);font-size:15px;line-height:1.62;font-weight:500}
@media(max-width:560px){
.contact-panel{grid-template-columns:1fr}
.contact-col{padding:30px 26px}
.contact-col + .contact-col{border-left:0;border-top:1px solid rgba(7,16,20,0.08)}
}
/* ============================================================
ABOUT — Tesla-style full-screen panels
============================================================ */
.about-full{position:relative}
.about-panel{
position:relative;
min-height:100vh;
display:flex;
align-items:flex-start;
justify-content:flex-start;
padding:128px 32px 96px;
overflow:hidden;
color:#fff;
text-align:left;
}
.about-panel-bg{
position:absolute;inset:0;z-index:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.about-panel-bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(4,9,12,0.66) 0%,rgba(4,9,12,0.3) 42%,rgba(4,9,12,0.66) 100%);
}
.about-panel--hero .about-panel-bg{background-image:url("assets/renewai-energy-operating-network-hero.png")}
.about-panel--mission .about-panel-bg{background-image:url("assets/value-reduce-energy-costs.png")}
.about-panel--vision .about-panel-bg{background-image:url("assets/value-increase-asset-performance.png")}
.about-panel-inner{
position:relative;z-index:1;
width:100%;
max-width:1140px;
margin:0 auto;
}
/* Small tag/marker label pinned to the top-left of each panel */
.about-eyebrow{
display:block;
margin:0 0 18px;
font-family:var(--font-mono);
font-size:14px;
font-weight:800;
line-height:1;
letter-spacing:0.12em;
text-transform:uppercase;
color:#3de0d2;
text-shadow:0 2px 18px rgba(4,9,12,0.5);
}
.about-panel h1,
.about-panel h2{
margin:0 0 22px;
max-width:20ch;
font-size:clamp(34px,3.6vw,52px);
font-weight:600;
line-height:1.1;
letter-spacing:-0.024em;
color:#fff;
text-shadow:0 2px 30px rgba(4,9,12,0.6);
}
.about-panel--hero h1{
max-width:24ch;
font-size:clamp(34px,3.6vw,52px);
}
.about-panel p{
margin:0;
max-width:640px;
font-size:clamp(17px,1.4vw,21px);
line-height:1.6;
font-weight:500;
color:rgba(255,255,255,0.86);
text-shadow:0 1px 16px rgba(4,9,12,0.5);
}
@media (max-width:860px){
.about-panel{padding:104px 22px 72px;min-height:92vh}
}
/* ============================================================
ONE PLATFORM, FOUR BUSINESSES — homepage addition
============================================================ */
.core-business-section{background:var(--bg)}
.business-platform{
max-width:1120px;margin:52px auto 0;
border:1px solid rgba(7,16,20,.1);border-radius:24px;overflow:hidden;
background:rgba(255,255,255,.72);
box-shadow:0 34px 80px -52px rgba(7,16,20,.34);
}
.asset-scope{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:18px;padding:22px 30px;background:#fff;border-bottom:1px solid rgba(7,16,20,.08)}
.asset-scope span{font:600 11px/1.3 var(--font-sans);color:var(--ink);white-space:nowrap;text-align:center}
.asset-scope i{height:1px;background:linear-gradient(90deg,rgba(24,154,128,.18),rgba(24,154,128,.72),rgba(24,154,128,.18));position:relative}
.asset-scope i::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--brand-2);transform:translateY(-50%);box-shadow:0 0 0 4px rgba(24,154,128,.08)}
.business-tabs{
display:grid;grid-template-columns:repeat(4,1fr);
padding:8px;background:rgba(7,16,20,.035);
border-bottom:1px solid rgba(7,16,20,.08);
}
.business-tab{
min-height:48px;padding:10px 14px;border:0;border-radius:14px;
background:transparent;color:var(--text-2);cursor:pointer;
font:600 12px/1.25 var(--font-sans);transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.business-tab:hover{color:var(--ink);background:rgba(255,255,255,.62)}
.business-tab.active{color:var(--ink);background:#fff;box-shadow:0 8px 24px rgba(7,16,20,.08)}
.business-stage{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;min-height:480px}
.business-stage-copy{padding:52px 42px 52px 52px}
.business-stage-copy h3{margin:0 0 16px;font-size:clamp(27px,2.7vw,40px);line-height:1.08;letter-spacing:-.035em;color:var(--ink)}
.business-stage-copy>p{margin:0;color:var(--text-2);font-size:15px;line-height:1.66}
.business-stage-copy ul{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid rgba(7,16,20,.09)}
.business-stage-copy li{position:relative;padding:12px 0 12px 18px;border-bottom:1px solid rgba(7,16,20,.09);color:var(--text-2);font-size:12px;line-height:1.45}
.business-stage-copy li::before{content:"";position:absolute;left:1px;top:18px;width:5px;height:5px;border-radius:50%;background:var(--brand-2)}
.business-stage-media{align-self:stretch;min-height:420px;margin:28px 28px 28px 0;border-radius:18px;overflow:hidden;background:#0b1418;display:flex;flex-direction:column;box-shadow:0 24px 54px -34px rgba(7,16,20,.62)}
.business-screen-frame{height:38px;flex:0 0 38px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.38)}
.business-screen-frame span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.business-screen-frame b{margin-left:auto;font:500 8px/1 var(--font-mono);letter-spacing:.08em}
.business-stage-media img{display:block;width:100%;height:100%;min-height:382px;object-fit:cover;object-position:top center;transition:opacity .2s ease,transform .45s ease}
.business-stage-media.is-changing img{opacity:.18;transform:scale(.985)}
.core-foundation{display:grid;grid-template-columns:220px 1fr;align-items:stretch;border-top:1px solid rgba(7,16,20,.1);background:#f1f5f3}
.core-foundation-title{padding:23px 26px;border-right:1px solid rgba(7,16,20,.09)}
.core-foundation-title span{display:block;margin-bottom:6px;font:700 10px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--brand-2)}
.core-foundation-title strong{font-size:11px;line-height:1.35;color:var(--text-2)}
.core-capabilities{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch}
.core-capabilities span{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 10px;border-right:1px solid rgba(7,16,20,.07);font:600 10px/1.35 var(--font-sans);color:var(--text-2);transition:color .25s ease,background .25s ease}
.core-capabilities span:last-child{border-right:0}
.core-capabilities span.is-relevant{color:var(--ink);background:rgba(255,255,255,.72)}
.core-capabilities span.is-relevant::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-2);margin-right:7px;box-shadow:0 0 0 4px rgba(24,154,128,.08)}
@media(max-width:820px){
.asset-scope{gap:10px;padding:19px 18px}
.asset-scope span{font-size:10px;white-space:normal}
.business-tabs{grid-template-columns:1fr 1fr}
.business-stage{grid-template-columns:1fr}
.business-stage-copy{padding:38px 28px 24px}
.business-stage-media{margin:10px 20px 24px;min-height:320px}
.business-stage-media img{min-height:282px}
.core-foundation{grid-template-columns:1fr}
.core-foundation-title{border-right:0;border-bottom:1px solid rgba(7,16,20,.09);text-align:center}
.core-capabilities{grid-template-columns:repeat(2,1fr)}
.core-capabilities span{min-height:54px;border-bottom:1px solid rgba(7,16,20,.07)}
}
@media(max-width:480px){
.business-platform{margin-top:36px;border-radius:18px}
.asset-scope{grid-template-columns:1fr;gap:8px;padding:18px}
.asset-scope i{width:1px;height:14px;margin:auto;background:linear-gradient(rgba(24,154,128,.18),rgba(24,154,128,.72))}
.asset-scope i::after{right:50%;top:auto;bottom:0;transform:translate(50%,50%)}
.business-tab{font-size:11px;padding:9px 7px}
.business-stage-copy h3{font-size:28px}
.core-capabilities{grid-template-columns:1fr}
}
/* ============================================================
CINEMATIC BUSINESS LANDSCAPE — three assets, four businesses
============================================================ */
.business-cinematic{position:relative;min-height:clamp(720px,88vh,900px);overflow:hidden;color:#fff;isolation:isolate;background:#bfc9ca}
.business-cinematic-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.business-cinematic-bg img{width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.015);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),object-position 1.1s cubic-bezier(.2,.7,.2,1)}
.business-cinematic::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(245,248,247,.08) 0%,rgba(8,13,15,0) 35%,rgba(7,12,14,.12) 52%,rgba(7,12,14,.87) 100%)}
.business-cinematic::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,10,12,.16),transparent 32%,transparent 70%,rgba(5,10,12,.08));pointer-events:none}
.business-cinematic[data-active-business="stations"] .business-cinematic-bg img{object-position:35% center;transform:scale(1.045)}
.business-cinematic[data-active-business="distributed"] .business-cinematic-bg img{object-position:72% center;transform:scale(1.045)}
.business-cinematic[data-active-business="operations"] .business-cinematic-bg img{object-position:50% center;transform:scale(1.025)}
.business-cinematic[data-active-business="portfolios"] .business-cinematic-bg img{object-position:center center;transform:scale(1.015)}
.business-cinematic-heading{position:relative;z-index:1;text-align:center;width:min(940px,calc(100% - 48px));margin:0 auto;padding-top:clamp(70px,8vw,112px);color:#0a171b;text-shadow:0 1px 18px rgba(255,255,255,.48)}
.business-cinematic-heading h2{margin:0 auto;font-size:clamp(34px,4vw,58px);line-height:1.03;letter-spacing:-.045em;font-weight:550;max-width:16ch}
.cinematic-assets{display:flex;align-items:center;justify-content:center;gap:0;margin:26px auto 0;color:rgba(7,20,24,.68);font-size:11px;font-weight:650;letter-spacing:.015em;text-shadow:0 1px 10px rgba(255,255,255,.7)}
.cinematic-assets span{padding:0 24px}
.cinematic-assets span+span{border-left:1px solid rgba(7,20,24,.3)}
.business-cinematic-content{position:absolute;z-index:2;left:clamp(24px,6vw,90px);right:clamp(24px,6vw,90px);bottom:95px}
.cinematic-detail{max-width:650px;min-height:156px;transition:opacity .2s ease,transform .3s ease}
.cinematic-detail.is-changing{opacity:0;transform:translateY(7px)}
.cinematic-detail h3{margin:0 0 12px;font-size:clamp(28px,3vw,44px);font-weight:520;line-height:1.05;letter-spacing:-.035em;color:#fff}
.cinematic-detail p{max-width:620px;margin:0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.6}
.cinematic-points{display:flex;flex-wrap:wrap;gap:0;margin-top:20px;color:rgba(255,255,255,.7);font-size:10px;font-weight:600;letter-spacing:.025em}
.cinematic-points span{padding:0 14px}
.cinematic-points span:first-child{padding-left:0}
.cinematic-points span+span{border-left:1px solid rgba(255,255,255,.28)}
.cinematic-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:1px solid rgba(255,255,255,.32)}
.cinematic-tab{position:relative;min-height:58px;padding:18px 14px 12px;border:0;background:transparent;color:rgba(255,255,255,.55);font:600 11px/1.3 var(--font-sans);text-align:left;cursor:pointer;transition:color .25s ease}
.cinematic-tab::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:#fff;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.cinematic-tab:hover{color:#fff}.cinematic-tab.active{color:#fff}.cinematic-tab.active::before{width:100%}
.cinematic-core{position:absolute;z-index:3;left:0;right:0;bottom:0;min-height:66px;padding:0 clamp(24px,6vw,90px);display:flex;align-items:center;justify-content:space-between;gap:30px;background:rgba(245,248,247,.94);backdrop-filter:blur(14px);color:#0b171a;border-top:1px solid rgba(255,255,255,.5)}
.cinematic-core strong{font-size:12px;font-weight:700;white-space:nowrap}
.cinematic-core>div{display:flex;align-items:center;justify-content:flex-end;gap:0;color:#455351;font-size:10px;font-weight:600}
.cinematic-core span{padding:0 20px}
.cinematic-core span+span{border-left:1px solid rgba(7,16,20,.14)}
@media(max-width:760px){
.business-cinematic{min-height:820px}
.business-cinematic-heading{padding-top:60px}
.business-cinematic-heading h2{font-size:38px}
.cinematic-assets{align-items:stretch;font-size:9px}.cinematic-assets span{padding:0 10px}
.business-cinematic-content{left:20px;right:20px;bottom:174px}
.cinematic-detail{min-height:182px}
.cinematic-tabs{grid-template-columns:1fr 1fr}
.cinematic-tab{min-height:48px;padding:13px 8px 9px;font-size:10px}
.cinematic-core{min-height:146px;padding:18px 20px;display:block;text-align:center}
.cinematic-core>div{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}
.cinematic-core span{padding:7px 4px}.cinematic-core span+span{border-left:0}
}
@media(max-width:440px){.business-cinematic-heading h2{font-size:33px}.cinematic-assets{line-height:1.3}.cinematic-detail h3{font-size:29px}.cinematic-points{line-height:1.8}.cinematic-points span{padding:0 8px}}
@media(prefers-reduced-motion:reduce){.business-cinematic-bg img,.cinematic-detail,.cinematic-tab::before{transition:none}}
/* ============================================================
HERO IMAGE CAROUSEL
============================================================ */
.hero-carousel{position:relative;aspect-ratio:1672/941;overflow:hidden;border-radius:14px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);background:#071014}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s linear;z-index:0}
.hero-slide.active{opacity:1;visibility:visible;z-index:1}
.hero-carousel .hero-image{width:100%;height:100%;object-fit:cover;border-radius:0;-webkit-mask-image:none;mask-image:none;filter:brightness(.72) saturate(.82) blur(3px);transition:transform 4.9s cubic-bezier(.14,.76,.2,1),filter .95s ease;will-change:transform,filter}
.hero-slide:nth-child(1) .hero-image{transform:scale(1.14) translate3d(-3.8%,1.5%,0)}
.hero-slide:nth-child(1).active .hero-image{transform:scale(1.025) translate3d(0,0,0);filter:brightness(1) saturate(1) blur(0)}
.hero-slide:nth-child(2) .hero-image{transform:scale(1.035) translate3d(4%,0,0)}
.hero-slide:nth-child(2).active .hero-image{transform:scale(1.13) translate3d(-2.5%,0,0);filter:brightness(1) saturate(1) blur(0)}
.hero-slide:nth-child(3) .hero-image{transform:scale(1.15) translate3d(4%,2%,0)}
.hero-slide:nth-child(3).active .hero-image{transform:scale(1.035) translate3d(-1%,0,0);filter:brightness(1) saturate(1) blur(0)}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(3,8,11,.68) 100%);pointer-events:none}
.hero-slide figcaption{position:absolute;z-index:2;left:28px;bottom:35px;color:#fff;display:flex;align-items:baseline;gap:12px;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.hero-slide figcaption span{font:600 9px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.hero-slide figcaption strong{font-size:13px;font-weight:600}
.hero-carousel-controls{position:absolute;z-index:4;right:28px;bottom:37px;display:flex;align-items:center;gap:7px}
.hero-carousel[data-static-hero] .hero-carousel-controls{display:none}
.hero-carousel-controls button{position:relative;width:38px;height:14px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-carousel-controls button::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:rgba(255,255,255,.38);transition:height .2s ease,background .2s ease}
.hero-carousel-controls button:hover::before{background:rgba(255,255,255,.75)}
.hero-carousel-controls button.active::before{height:2px;background:#fff}
@media(max-width:640px){.hero-carousel{aspect-ratio:4/3}.hero-carousel .hero-image{object-position:center}.hero-slide figcaption{left:16px;bottom:28px;display:block}.hero-slide figcaption span{display:block;margin-bottom:6px}.hero-carousel-controls{right:16px;bottom:29px}.hero-carousel-controls button{width:25px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-carousel .hero-image{transition:none}.hero-h1.copy-enter,.hero-sub.copy-enter{animation:none}}
/* Language control at the far right of the primary navigation. */
.nav-cta{gap:8px;padding:4px 6px 4px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,8,11,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.nav-cta .lang-switch{display:inline-flex;padding:0;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.nav-lang-label{font:650 9px/1 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nav-cta .lang-option{min-width:0;padding:7px 8px;border-radius:0;background:transparent;box-shadow:none;color:rgba(255,255,255,.76);font-size:10px;border-bottom:1px solid transparent;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nav-cta .lang-option+.lang-option{border-left:1px solid rgba(255,255,255,.18)}
.nav-cta .lang-option:hover{background:transparent;color:#fff}
.nav-cta .lang-option.active{background:transparent;color:#fff;box-shadow:none;border-bottom-color:#fff}
body.has-hero .nav:not(.scrolled) .nav-lang-label{color:rgba(255,255,255,.72)}
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option{color:rgba(255,255,255,.76)}
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option+.lang-option{border-left-color:rgba(255,255,255,.18)}
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option:hover,body.has-hero .nav:not(.scrolled) .nav-cta .lang-option.active{color:#fff}
@media(max-width:640px){.nav-lang-label{display:none}}
/* ============================================================
STRATEGY STORY — assets, four businesses, shared foundation
============================================================ */
.strategy-story{background:#071014}
.strategy-panel{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;color:#fff}
.strategy-panel-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.strategy-panel-bg img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);transition:transform 8s cubic-bezier(.16,.72,.22,1)}
.strategy-panel.is-in-view .strategy-panel-bg img{transform:scale(1)}
.strategy-panel-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,9,12,.04) 0%,rgba(4,9,12,.1) 45%,rgba(4,9,12,.82) 100%)}
.strategy-panel-content{position:relative;width:min(1180px,calc(100% - 64px));margin:0 auto;padding:0 0 clamp(72px,8vw,112px);opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.18,.76,.22,1)}
.strategy-panel-content.is-visible{opacity:1;transform:none}
.strategy-panel-content h2{margin:0 0 18px;max-width:760px;font-size:clamp(38px,5vw,72px);font-weight:540;line-height:.98;letter-spacing:-.05em;color:#fff;text-shadow:0 3px 28px rgba(0,0,0,.4)}
.strategy-panel-content>p{max-width:650px;margin:0;color:rgba(255,255,255,.8);font-size:clamp(16px,1.45vw,21px);line-height:1.58;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.centred-story{text-align:center;align-self:center;padding:80px 0}.centred-story h2,.centred-story>p{margin-left:auto;margin-right:auto}
.asset-universe .centred-story h2{max-width:none;white-space:nowrap}
.asset-universe{align-items:center;min-height:86svh}.asset-universe .strategy-panel-shade{background:linear-gradient(180deg,rgba(4,9,12,.12),rgba(4,9,12,.05) 40%,rgba(4,9,12,.58) 100%)}
.asset-class-line{display:flex;align-items:center;justify-content:center;margin:34px auto 0;color:rgba(255,255,255,.86);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.asset-class-line span{padding:0 28px}.asset-class-line span+span{border-left:1px solid rgba(255,255,255,.4)}
.business-story{min-height:92svh}.business-story .strategy-panel-shade{background:linear-gradient(90deg,rgba(4,9,12,.8) 0%,rgba(4,9,12,.42) 42%,transparent 72%),linear-gradient(180deg,transparent 45%,rgba(4,9,12,.62) 100%)}
.business-story .align-right{text-align:right;margin-right:max(32px,calc((100vw - 1180px)/2));margin-left:auto;width:min(650px,calc(100% - 64px))}.business-story .align-right h2,.business-story .align-right>p{margin-left:auto}.business-story:has(.align-right) .strategy-panel-shade{background:linear-gradient(270deg,rgba(4,9,12,.82) 0%,rgba(4,9,12,.42) 44%,transparent 74%),linear-gradient(180deg,transparent 45%,rgba(4,9,12,.62) 100%)}
.distributed-story .strategy-panel-bg img{object-position:center}.operations-story .strategy-panel-bg img{object-position:center}.portfolio-story .strategy-panel-bg img{object-position:center}
.story-capabilities{display:flex;flex-wrap:wrap;gap:0;margin-top:25px;color:rgba(255,255,255,.72);font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.06em}.align-right .story-capabilities{justify-content:flex-end}.story-capabilities span{padding:0 15px}.story-capabilities span:first-child{padding-left:0}.story-capabilities span+span{border-left:1px solid rgba(255,255,255,.32)}
.strategy-panel-content>a{display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.42);color:#fff;font-size:12px;font-weight:600}.strategy-panel-content>a b{font-size:14px;font-weight:400;transition:transform .2s}.strategy-panel-content>a:hover b{transform:translate(3px,-3px)}
.strategy-foundation{padding:clamp(90px,10vw,150px) 32px;background:#eef2f0;color:#081316;overflow:hidden}.strategy-foundation-head{text-align:center;opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.strategy-foundation-head.is-visible{opacity:1;transform:none}.strategy-foundation-head h2{margin:0;font-size:clamp(38px,5vw,68px);line-height:1;letter-spacing:-.05em;font-weight:520}.strategy-foundation-head p{max-width:630px;margin:22px auto 0;color:#576461;font-size:16px;line-height:1.65}
.foundation-visual{max-width:1120px;margin:64px auto 0;opacity:0;transform:translateY(32px);transition:opacity .9s ease .12s,transform .9s ease .12s}.foundation-visual.is-visible{opacity:1;transform:none}.foundation-screen{padding:12px 12px 0;border:1px solid rgba(7,16,20,.12);border-radius:20px 20px 0 0;background:#fff;box-shadow:0 38px 80px -50px rgba(7,16,20,.42);overflow:hidden}.foundation-screen img{display:block;width:100%;max-height:520px;object-fit:cover;object-position:top;border-radius:12px 12px 0 0}.foundation-layers{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(7,16,20,.12);border-top:0;background:#071014;color:#eaf4f1}.foundation-layers span{display:flex;align-items:center;justify-content:center;min-height:70px;padding:15px 10px;text-align:center;font-size:10px;font-weight:650;letter-spacing:.035em}.foundation-layers span+span{border-left:1px solid rgba(255,255,255,.12)}
@media(max-width:760px){
.asset-universe .centred-story h2{font-size:clamp(22px,7.4vw,40px)}
.strategy-panel{min-height:78svh}.business-story{min-height:82svh}
.strategy-panel-content{width:calc(100% - 40px);padding-bottom:62px}.strategy-panel-content h2{font-size:40px}.strategy-panel-content>p{font-size:16px}
.asset-class-line{font-size:9px;line-height:1.4}.asset-class-line span{padding:0 10px}
.business-story .align-right{text-align:left;margin:0 auto;width:calc(100% - 40px)}.business-story .align-right h2,.business-story .align-right>p{margin-left:0}.align-right .story-capabilities{justify-content:flex-start}
.business-story:has(.align-right) .strategy-panel-shade,.business-story .strategy-panel-shade{background:linear-gradient(180deg,rgba(4,9,12,.04) 20%,rgba(4,9,12,.86) 100%)}
.operations-story .strategy-panel-bg img{object-position:58% center}.portfolio-story .strategy-panel-bg img{object-position:55% center}
.story-capabilities{line-height:1.8}.story-capabilities span{padding:0 8px}
.strategy-foundation{padding:82px 20px}.strategy-foundation-head h2{font-size:42px}.foundation-visual{margin-top:42px}.foundation-layers{grid-template-columns:1fr 1fr}.foundation-layers span{min-height:54px}.foundation-layers span+span{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}
@media(prefers-reduced-motion:reduce){.strategy-panel-bg img,.strategy-panel-content,.strategy-foundation-head,.foundation-visual{transition:none}.strategy-panel-content,.strategy-foundation-head,.foundation-visual{opacity:1;transform:none}}
/* Balanced story pacing: one panorama, a 2 × 2 business gallery, one foundation. */
.strategy-story{padding-top:76px;background:var(--bg)}
.asset-universe{min-height:70svh}
.business-story-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:clamp(76px,8vw,120px) clamp(18px,3vw,48px);background:var(--bg);align-items:start}
.business-story-grid .business-story{min-height:58svh;border-radius:24px;overflow:hidden;box-shadow:0 28px 70px -48px rgba(7,16,20,.5)}
.business-story-grid .station-story{grid-column:span 7;min-height:68svh}
.business-story-grid .distributed-story{grid-column:span 5;min-height:54svh;align-self:end;margin-top:72px}
.business-story-grid .operations-story{grid-column:span 5;min-height:54svh;margin-top:0}
.business-story-grid .portfolio-story{grid-column:span 7;min-height:68svh;margin-top:46px}
.business-story-grid .strategy-panel-content{width:calc(100% - 56px);padding-bottom:54px}
.business-story-grid .strategy-panel-content h2{font-size:clamp(30px,3.1vw,48px);max-width:620px}
.business-story-grid .strategy-panel-content>p{font-size:15px;max-width:540px}
.business-story-grid .business-story .align-right{width:calc(100% - 56px);margin-left:auto;margin-right:auto}
.business-story-grid .story-capabilities{margin-top:20px;font-size:9px}
.business-story-grid .strategy-panel-content>a{margin-top:22px}
.strategy-foundation{min-height:70svh;display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){
.strategy-story{padding-top:48px}
.asset-universe{min-height:68svh}
.business-story-grid{grid-template-columns:1fr;gap:16px;padding:64px 16px}
.business-story-grid .business-story,.business-story-grid .station-story,.business-story-grid .distributed-story,.business-story-grid .operations-story,.business-story-grid .portfolio-story{grid-column:1;min-height:58svh;margin-top:0;border-radius:18px}
.business-story-grid .strategy-panel-content,.business-story-grid .business-story .align-right{width:calc(100% - 40px)}
.business-story-grid .strategy-panel-content h2{font-size:36px}
.business-story-grid .business-story .align-right{text-align:left}
.business-story-grid .business-story .align-right h2,.business-story-grid .business-story .align-right>p{margin-left:0}
.business-story-grid .align-right .story-capabilities{justify-content:flex-start}
}
/* Shared foundation: architectural layers, not a dashboard screenshot. */
.foundation-visual{max-width:1200px;perspective:1400px;display:grid;grid-template-columns:.92fr 1.08fr;gap:42px;align-items:center}
.foundation-product{position:relative;border-radius:24px;overflow:hidden;background:#050b12;box-shadow:0 36px 76px -42px rgba(7,16,20,.62)}
.foundation-product::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:inherit;pointer-events:none}
.foundation-product img{display:block;width:100%;height:auto}
.foundation-architecture{position:relative;padding:12px 0 30px;transform-style:preserve-3d}
.foundation-plane,.foundation-base{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:88px;padding:22px 30px;margin:0 auto 14px;border:1px solid rgba(7,16,20,.11);background:rgba(255,255,255,.7);box-shadow:0 28px 55px -42px rgba(7,16,20,.4);backdrop-filter:blur(12px)}
.foundation-plane::after{content:"";position:absolute;left:7%;right:7%;bottom:-15px;height:14px;border-left:1px solid rgba(7,16,20,.15);border-right:1px solid rgba(7,16,20,.15);background:linear-gradient(90deg,transparent,rgba(24,154,128,.08),transparent)}
.foundation-plane>span,.foundation-base>span,.foundation-applications>strong{font-size:clamp(18px,2.2vw,30px);font-weight:600;letter-spacing:-.025em;color:#0a171a}
.foundation-plane>strong,.foundation-base>strong{font:600 10px/1.5 var(--font-mono);letter-spacing:.035em;color:#687572;text-align:right}
.foundation-applications{width:88%;min-height:112px;background:#071014;color:#fff;border-color:#071014;box-shadow:0 32px 70px -38px rgba(7,16,20,.7)}
.foundation-applications>strong{color:#fff;white-space:nowrap}
.foundation-applications>div{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;color:rgba(255,255,255,.7);font-size:10px;font-weight:600;text-align:right}
.foundation-intelligence{width:91%}.foundation-data{width:94%}.foundation-edge{width:97%}
.foundation-base{width:100%;min-height:96px;margin-bottom:0;background:#dce7e3;border-color:rgba(20,110,91,.18);box-shadow:0 34px 70px -44px rgba(7,16,20,.42)}
.foundation-base>span{color:#0d6856}.foundation-base>strong{color:#3e645b}
@media(max-width:700px){
.foundation-visual{grid-template-columns:1fr;gap:32px}
.foundation-product{border-radius:18px}
.foundation-plane,.foundation-base{width:100%;min-height:0;padding:20px;display:block}
.foundation-plane>strong,.foundation-base>strong{display:block;margin-top:9px;text-align:left;font-size:8px}
.foundation-applications>div{margin-top:16px;text-align:left}
.foundation-plane>span,.foundation-base>span,.foundation-applications>strong{font-size:22px}
}
/* Match the shared foundation section to the site's standard warm background. */
.strategy-foundation{background:var(--bg)}
/* Compact bridge between the businesses and the detailed technology story. */
.foundation-bridge{min-height:auto;padding:clamp(76px,8vw,112px) 32px clamp(82px,9vw,124px)}
.foundation-bridge .strategy-foundation-head h2{max-width:940px;margin-left:auto;margin-right:auto;font-size:clamp(36px,4.4vw,62px);line-height:1.04}
.foundation-bridge .strategy-foundation-head p{
max-width:760px;
margin:18px auto 0;
color:var(--text-2);
font-family:var(--font-sans);
font-size:18px;
font-weight:400;
line-height:1.6;
}
@media(max-width:620px){.foundation-bridge .strategy-foundation-head p{font-size:16px;line-height:1.6}}
.foundation-bridge .foundation-visual{display:block;max-width:1120px;margin-top:52px;perspective:none}
.foundation-bridge .foundation-architecture{padding:0;transform:none}
.foundation-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(7,16,20,.17);border-bottom:1px solid rgba(7,16,20,.17)}
.foundation-flow::before{content:"";position:absolute;left:16.66%;right:16.66%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#4aa88f 18%,#4aa88f 82%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.18,.76,.22,1) .25s}.foundation-visual.is-visible .foundation-flow::before{transform:scaleX(1)}
.foundation-flow>div{position:relative;min-height:132px;padding:34px clamp(20px,3vw,42px);display:flex;flex-direction:column;justify-content:center}.foundation-flow>div+div{border-left:1px solid rgba(7,16,20,.12)}
.foundation-flow>div::before{content:"";position:absolute;top:-4px;left:clamp(20px,3vw,42px);width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid #2c927a;box-shadow:0 0 0 5px rgba(44,146,122,.08);opacity:0;transform:scale(.5);transition:opacity .35s,transform .35s}.foundation-visual.is-visible .foundation-flow>div::before{opacity:1;transform:scale(1)}.foundation-visual.is-visible .foundation-flow>div:nth-child(2)::before{transition-delay:.45s}.foundation-visual.is-visible .foundation-flow>div:nth-child(3)::before{transition-delay:.75s}
.foundation-flow span{font-size:clamp(19px,2.2vw,28px);font-weight:580;letter-spacing:-.035em;color:#0a171a}.foundation-flow strong{margin-top:10px;font:550 9px/1.5 var(--font-mono);letter-spacing:.045em;color:#6a7774;text-transform:uppercase}
.foundation-governance{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:20px clamp(20px,3vw,42px);background:#dfe9e5;color:#0d6856}.foundation-governance span{font-size:12px;font-weight:650;letter-spacing:.015em}.foundation-governance strong{font:550 9px/1.4 var(--font-mono);letter-spacing:.04em;color:#58716b;text-align:right}
@media(max-width:700px){.foundation-bridge{padding-left:20px;padding-right:20px}.foundation-bridge .foundation-visual{margin-top:38px}.foundation-flow{grid-template-columns:1fr}.foundation-flow>div{min-height:94px;padding:24px}.foundation-flow>div+div{border-left:0;border-top:1px solid rgba(7,16,20,.1)}.foundation-flow>div::before{top:50%;left:-4px;transform:translateY(-50%) scale(.5)}.foundation-visual.is-visible .foundation-flow>div::before{transform:translateY(-50%) scale(1)}.foundation-flow::before{left:-1px;right:auto;top:10%;bottom:10%;width:1px;height:auto;transform:scaleY(0);transform-origin:top}.foundation-visual.is-visible .foundation-flow::before{transform:scaleY(1)}.foundation-governance{display:block;padding:20px 24px}.foundation-governance strong{display:block;margin-top:8px;text-align:left;font-size:8px}}
/* Editorial foundation flow: typography and direction replace template dots. */
.foundation-bridge .foundation-flow{border-top:1px solid rgba(7,16,20,.14);border-bottom:1px solid rgba(7,16,20,.14)}
.foundation-bridge .foundation-flow::before,.foundation-bridge .foundation-flow>div::before{display:none}
.foundation-bridge .foundation-flow>div{min-height:150px;padding-top:38px;padding-bottom:38px;overflow:visible}
.foundation-bridge .foundation-flow>div:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-15px;top:50%;width:30px;height:30px;border:1px solid rgba(7,16,20,.16);border-radius:50%;background:var(--bg);color:#15211f;font-size:14px;font-weight:400;line-height:28px;text-align:center;transform:translateY(-50%) scale(.7);opacity:0;transition:opacity .4s ease,transform .55s cubic-bezier(.18,.76,.22,1)}.foundation-visual.is-visible .foundation-flow>div:not(:last-child)::after{opacity:1;transform:translateY(-50%) scale(1)}.foundation-visual.is-visible .foundation-flow>div:nth-child(2)::after{transition-delay:.22s}
.foundation-bridge .foundation-flow span{font-size:clamp(22px,2.45vw,34px);font-weight:520;line-height:1.04}.foundation-bridge .foundation-flow strong{margin-top:17px;font-family:var(--font-sans);font-size:13px;font-weight:430;line-height:1.45;letter-spacing:0;text-transform:none;color:#69736f}
.foundation-bridge .foundation-governance{padding-top:22px;padding-bottom:22px;background:#111817;color:#f1f5f3}.foundation-bridge .foundation-governance span{font-size:14px;font-weight:550;letter-spacing:-.01em}.foundation-bridge .foundation-governance strong{font-family:var(--font-sans);font-size:11px;font-weight:430;letter-spacing:0;color:rgba(255,255,255,.52)}
@media(max-width:700px){.foundation-bridge .foundation-flow>div{min-height:104px}.foundation-bridge .foundation-flow>div:not(:last-child)::after{content:"↓";right:22px;top:auto;bottom:-15px;transform:scale(.7)}.foundation-visual.is-visible .foundation-flow>div:not(:last-child)::after{transform:scale(1)}.foundation-bridge .foundation-governance{padding:22px 24px}.foundation-bridge .foundation-governance strong{font-size:10px}}
.foundation-feature-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(109,207,180,.18);border-radius:18px;background:linear-gradient(115deg,#071014,#0b1416 52%,#071014);box-shadow:0 34px 70px -48px rgba(4,11,13,.72);overflow:hidden}
.foundation-feature-strip article{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;min-height:142px;padding:26px 22px;opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .65s cubic-bezier(.18,.76,.22,1),background .3s ease}.foundation-feature-strip article+article{border-left:1px solid rgba(255,255,255,.08)}.foundation-visual.is-visible .foundation-feature-strip article{opacity:1;transform:none}.foundation-visual.is-visible .foundation-feature-strip article:nth-child(2){transition-delay:.1s}.foundation-visual.is-visible .foundation-feature-strip article:nth-child(3){transition-delay:.2s}.foundation-visual.is-visible .foundation-feature-strip article:nth-child(4){transition-delay:.3s}.foundation-feature-strip article:hover{background:rgba(90,211,179,.035)}
.foundation-feature-icon{display:flex;width:64px;height:64px;align-items:center;justify-content:center;border:1px solid rgba(94,203,174,.34);border-radius:13px;background:rgba(44,159,131,.035);box-shadow:inset 0 0 22px rgba(70,196,163,.035);transition:border-color .3s,box-shadow .3s}.foundation-feature-strip article:hover .foundation-feature-icon{border-color:rgba(111,224,194,.58);box-shadow:inset 0 0 22px rgba(70,196,163,.07),0 0 18px rgba(70,196,163,.06)}.foundation-feature-icon svg{width:38px;height:38px;stroke:#63cdb0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(82,203,170,.2))}
.foundation-feature-strip h3{margin:0;color:#53c7a7;font-size:15px;font-weight:620;line-height:1.25;letter-spacing:-.02em}.foundation-feature-strip p{margin:8px 0 0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.45}
.foundation-feature-strip{overflow:visible}.foundation-feature-strip article:first-child{border-radius:18px 0 0 18px}.foundation-feature-strip article:last-child{border-radius:0 18px 18px 0}
.foundation-feature-strip article::after{content:"";position:absolute;left:50%;bottom:-18px;width:1px;height:18px;background:linear-gradient(180deg,rgba(99,205,176,.6),rgba(99,205,176,.08));opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity .35s ease,transform .5s cubic-bezier(.18,.76,.22,1)}
.foundation-visual.is-visible .foundation-feature-strip article::after{opacity:1;transform:scaleY(1)}
.foundation-visual.is-visible .foundation-feature-strip article:nth-child(1)::after{transition-delay:.42s}.foundation-visual.is-visible .foundation-feature-strip article:nth-child(2)::after{transition-delay:.52s}.foundation-visual.is-visible .foundation-feature-strip article:nth-child(3)::after{transition-delay:.62s}.foundation-visual.is-visible .foundation-feature-strip article:nth-child(4)::after{transition-delay:.72s}
.foundation-ai-icon{position:relative}.foundation-visual.is-visible .foundation-ai-icon{animation:foundationAiPulse 3.4s ease-in-out 1.05s infinite}
.foundation-security-rail{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;min-height:92px;margin-top:18px;padding:18px 24px;border:1px solid rgba(109,207,180,.2);border-radius:14px;background:linear-gradient(90deg,#050b0e,#0b1516 48%,#050b0e);color:#fff;overflow:hidden;opacity:0;transform:scaleX(.72);transform-origin:center;transition:opacity .55s ease .55s,transform .9s cubic-bezier(.18,.76,.22,1) .55s}
.foundation-visual.is-visible .foundation-security-rail{opacity:1;transform:scaleX(1)}
.foundation-security-rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#65d0b3 50%,transparent);transform:scaleX(0);transition:transform 1s cubic-bezier(.18,.76,.22,1) 1.05s}.foundation-visual.is-visible .foundation-security-rail::before{transform:scaleX(1)}
.foundation-security-icon{display:flex;width:58px;height:58px;align-items:center;justify-content:center;border:1px solid rgba(94,203,174,.38);border-radius:12px;background:rgba(44,159,131,.045)}.foundation-security-icon svg{width:34px;height:34px;fill:none;stroke:#63cdb0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.foundation-security-rail strong{display:block;color:#dff7f0;font-size:15px;font-weight:620;letter-spacing:-.015em}.foundation-security-rail span{display:block;margin-top:8px;color:rgba(255,255,255,.52);font-size:10px;letter-spacing:.025em}
@keyframes foundationAiPulse{0%,100%{border-color:rgba(94,203,174,.34);box-shadow:inset 0 0 22px rgba(70,196,163,.035)}50%{border-color:rgba(126,231,202,.72);box-shadow:inset 0 0 26px rgba(70,196,163,.1),0 0 22px rgba(70,196,163,.12)}}
@media(max-width:920px){.foundation-feature-strip{grid-template-columns:1fr 1fr}.foundation-feature-strip article:first-child{border-radius:18px 0 0 0}.foundation-feature-strip article:nth-child(2){border-radius:0 18px 0 0}.foundation-feature-strip article:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 0 18px}.foundation-feature-strip article:nth-child(4){border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 18px 0}}
@media(max-width:520px){.foundation-feature-strip{grid-template-columns:1fr}.foundation-feature-strip article,.foundation-feature-strip article:nth-child(2),.foundation-feature-strip article:nth-child(3){min-height:112px;padding:22px;border-radius:0}.foundation-feature-strip article:first-child{border-radius:18px 18px 0 0}.foundation-feature-strip article:last-child{border-radius:0 0 18px 18px}.foundation-feature-strip article+article{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.foundation-feature-strip article::after{display:none}.foundation-security-rail{grid-template-columns:52px 1fr;padding:18px}.foundation-security-icon{width:50px;height:50px}.foundation-security-rail span{line-height:1.55}}
@media(prefers-reduced-motion:reduce){.foundation-feature-strip article{opacity:1;transform:none;transition:none}.foundation-feature-strip article::after{opacity:1;transform:none;transition:none}.foundation-ai-icon{animation:none!important}.foundation-security-rail{opacity:1;transform:none;transition:none}.foundation-security-rail::before{transform:none;transition:none}}
/* AI intelligence engine: one continuous operating view, not a card grid. */
.open-ecosystem{padding-top:clamp(86px,9vw,126px);padding-bottom:clamp(88px,9vw,126px);background:var(--bg)}
.open-ecosystem .section-head{margin-bottom:54px}.open-ecosystem .section-title{font-size:clamp(38px,5vw,68px);letter-spacing:-.05em}.open-ecosystem .section-sub{max-width:760px}
.ecosystem-map{position:relative;height:580px;border:1px solid rgba(7,16,20,.12);border-radius:28px;background:radial-gradient(circle at 50% 48%,rgba(64,184,151,.1),transparent 26%),linear-gradient(180deg,rgba(255,255,255,.82),rgba(247,247,242,.92));overflow:hidden;box-shadow:0 34px 80px -62px rgba(7,16,20,.48)}
.ecosystem-product-visual{position:relative;border:0;border-radius:0;background:transparent;overflow:hidden;box-shadow:none;opacity:0;transform:translateY(24px) scale(.99);transition:opacity .85s ease,transform 1s cubic-bezier(.18,.76,.22,1)}.ecosystem-product-visual.is-visible{opacity:1;transform:none}.ecosystem-product-visual img{display:block;width:100%;height:auto}.ecosystem-product-visual::after{display:none}.ecosystem-product-scan{position:absolute;left:5%;right:5%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(96,228,192,.72),transparent);box-shadow:0 0 12px rgba(56,199,160,.3);opacity:0;animation:ecosystemProductScan 7s ease-in-out infinite}
.ecosystem-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(7,16,20,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(7,16,20,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at center,#000,transparent 77%);-webkit-mask-image:radial-gradient(circle at center,#000,transparent 77%)}
.ecosystem-links{position:absolute;inset:4% 3%;width:94%;height:92%;overflow:visible}.ecosystem-links path{fill:none;stroke:rgba(38,116,96,.18);stroke-width:1.15;vector-effect:non-scaling-stroke}.ecosystem-links .ecosystem-flow{stroke:rgba(48,183,148,.72);stroke-width:1.35;stroke-linecap:round;stroke-dasharray:2 26;animation:ecosystemDataFlow 9s linear infinite;filter:drop-shadow(0 0 4px rgba(48,183,148,.28))}
.ecosystem-node,.ecosystem-core{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.86);border:1px solid rgba(7,16,20,.11);box-shadow:0 22px 42px -34px rgba(7,16,20,.42);backdrop-filter:blur(10px)}
.ecosystem-node{width:174px;min-height:108px;padding:16px 12px;border-radius:16px;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.ecosystem-node:hover{transform:translateY(-4px);border-color:rgba(31,111,91,.25);box-shadow:0 26px 46px -30px rgba(7,16,20,.46)}.ecosystem-node i{display:flex;align-items:center;justify-content:center;min-width:42px;height:28px;margin-bottom:9px;padding:0 8px;border:1px solid rgba(31,111,91,.22);border-radius:999px;color:#1b7862;font:650 8px/1 var(--font-mono);font-style:normal;letter-spacing:.04em}.ecosystem-node span{font-size:13px;font-weight:620;letter-spacing:-.02em;color:#101a1d}.ecosystem-node small{margin-top:6px;color:#7a8581;font-size:8px}
.ecosystem-core{left:50%;top:50%;width:280px;min-height:146px;padding:24px;border-radius:22px;transform:translate(-50%,-50%);border-color:rgba(31,111,91,.22);background:rgba(255,255,255,.94);box-shadow:0 28px 58px -34px rgba(17,104,82,.48),0 0 0 8px rgba(55,183,165,.055)}.ecosystem-core::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(105deg,transparent 28%,rgba(79,207,172,.32),transparent 64%);z-index:-1;animation:ecosystemCoreGlow 5s ease-in-out infinite}.ecosystem-core img{width:172px;height:auto}.ecosystem-core strong{margin-top:13px;color:#14775f;font-size:16px;font-weight:620}.ecosystem-core small{margin-top:7px;color:#7a8581;font-size:8px}
.node-solar{left:8%;top:8%}.node-bess{left:50%;top:5%;transform:translateX(-50%)}.node-bess:hover{transform:translateX(-50%) translateY(-4px)}.node-pcs{right:8%;top:8%}.node-scada{left:3%;top:50%;transform:translateY(-50%)}.node-scada:hover{transform:translateY(calc(-50% - 4px))}.node-bms{right:3%;top:50%;transform:translateY(-50%)}.node-bms:hover{transform:translateY(calc(-50% - 4px))}.node-meter{left:8%;bottom:8%}.node-load{left:50%;bottom:5%;transform:translateX(-50%)}.node-load:hover{transform:translateX(-50%) translateY(-4px)}.node-sensor{right:8%;bottom:8%}
.ecosystem-capabilities{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border-top:1px solid rgba(7,16,20,.14);border-bottom:1px solid rgba(7,16,20,.14)}.ecosystem-capabilities>div{min-height:124px;padding:26px clamp(18px,2.4vw,32px)}.ecosystem-capabilities>div+div{border-left:1px solid rgba(7,16,20,.11)}.ecosystem-capabilities strong{display:block;color:#102024;font-size:16px;font-weight:620;letter-spacing:-.025em}.ecosystem-capabilities span{display:block;margin-top:12px;color:#6e7a76;font-size:10px;line-height:1.6}
.ecosystem-foot{display:flex;align-items:center;justify-content:flex-end;padding:21px 24px;background:#e7efeb}.ecosystem-foot a{flex:none;color:#126e58;font-size:11px;font-weight:620}.ecosystem-foot b{margin-left:7px;font-weight:400}
@keyframes ecosystemDataFlow{to{stroke-dashoffset:-280}}@keyframes ecosystemCoreGlow{50%{opacity:.35}}@keyframes ecosystemProductScan{0%,15%{top:8%;opacity:0}25%{opacity:.6}70%{top:91%;opacity:.32}82%,100%{top:91%;opacity:0}}
@media(max-width:820px){.ecosystem-map{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px}.ecosystem-map::before,.ecosystem-links{display:none}.ecosystem-node,.ecosystem-core,.node-solar,.node-bess,.node-pcs,.node-scada,.node-bms,.node-meter,.node-load,.node-sensor{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;min-height:96px;transform:none}.ecosystem-node:hover,.node-bess:hover,.node-scada:hover,.node-bms:hover,.node-load:hover{transform:none}.ecosystem-core{grid-column:1/-1;grid-row:1;min-height:132px}.ecosystem-capabilities{grid-template-columns:1fr 1fr}.ecosystem-capabilities>div:nth-child(3){border-left:0;border-top:1px solid rgba(7,16,20,.11)}.ecosystem-capabilities>div:nth-child(4){border-top:1px solid rgba(7,16,20,.11)}.ecosystem-foot{display:flex;justify-content:flex-end}.ecosystem-foot a{margin:0}}
@media(max-width:480px){.ecosystem-map{grid-template-columns:1fr}.ecosystem-core{grid-column:1}.ecosystem-capabilities{grid-template-columns:1fr}.ecosystem-capabilities>div+div{border-left:0;border-top:1px solid rgba(7,16,20,.11)}}
@media(prefers-reduced-motion:reduce){.ecosystem-links .ecosystem-flow,.ecosystem-core::after,.ecosystem-product-scan{animation:none}.ecosystem-product-visual{opacity:1;transform:none;transition:none}}
.ai-engine{position:relative;min-height:100svh;padding:clamp(96px,11vw,160px) 32px 72px;overflow:hidden;background:#151d1c;color:#fff}
.ai-engine-bg{position:absolute;inset:0;opacity:.42}.ai-engine-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,29,28,.88) 0%,rgba(21,29,28,.42) 34%,rgba(21,29,28,.7) 72%,#151d1c 100%),linear-gradient(90deg,rgba(17,25,24,.64),transparent 62%,rgba(17,25,24,.22))}
.ai-engine-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06);transform:scale(1.035)}
.ai-engine-shell{position:relative;z-index:1;width:min(1220px,100%);margin:0 auto}
.ai-engine-head{text-align:center}.ai-engine-head>span{font:600 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#92a49e}.ai-engine-head h2{margin:20px 0 0;font-size:clamp(38px,5vw,68px);font-weight:500;line-height:.98;letter-spacing:-.05em}.ai-engine-head p{margin:22px 0 0;font-size:clamp(17px,1.55vw,21px);color:rgba(255,255,255,.68)}
.ai-engine-console{display:grid;grid-template-columns:285px 1fr;min-height:520px;margin-top:72px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);background:rgba(8,11,11,.48);backdrop-filter:blur(13px)}
.ai-engine-modes{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.14)}
.ai-engine-modes button{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:20px 28px;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.48);text-align:left;cursor:pointer;transition:color .3s,background .3s}.ai-engine-modes button:last-child{border-bottom:0}.ai-engine-modes button::before{content:"";position:absolute;left:-1px;top:20%;bottom:20%;width:2px;background:#96e2ce;transform:scaleY(0);transition:transform .35s}.ai-engine-modes button:hover{color:rgba(255,255,255,.8)}.ai-engine-modes button.active{color:#fff;background:linear-gradient(90deg,rgba(113,207,182,.11),transparent)}.ai-engine-modes button.active::before{transform:scaleY(1)}
.ai-engine-modes span{font-size:17px;font-weight:550;letter-spacing:-.02em}.ai-engine-modes small{font-size:10px;color:inherit;opacity:.65}
.ai-engine-stage{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:30px clamp(30px,5vw,72px) 36px;overflow:hidden;transition:opacity .22s ease,transform .22s ease}.ai-engine-stage.is-changing{opacity:.25;transform:translateY(7px)}
.ai-engine-status{display:flex;align-items:center;gap:10px;font:600 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}.ai-engine-status i{width:6px;height:6px;border-radius:50%;background:#8ce0c9;box-shadow:0 0 15px #8ce0c9;animation:aiPulse 2s ease-in-out infinite}.ai-engine-status b{margin-left:auto;font:inherit;color:rgba(255,255,255,.34)}
.ai-engine-reading{position:relative;z-index:2;max-width:720px;margin:52px 0 42px}.ai-engine-kicker{display:block;margin-bottom:14px;font-size:12px;color:rgba(255,255,255,.55)}.ai-engine-reading>strong{display:block;font-size:clamp(58px,8vw,106px);font-weight:400;line-height:.85;letter-spacing:-.065em}.ai-engine-reading>strong em{font-size:.28em;font-style:normal;font-weight:500;letter-spacing:-.02em;color:#9cb0aa}.ai-engine-reading>p{max-width:650px;margin:30px 0 0;color:rgba(255,255,255,.73);font-size:16px;line-height:1.65}
.ai-engine-signal{position:absolute;right:-10px;top:80px;width:43%;height:220px;display:flex;align-items:flex-end;gap:8px;padding:34px 0 24px;opacity:.32;transform:skewY(-5deg);transition:opacity .35s,filter .35s}.ai-engine-signal::before{content:attr(data-chart);position:absolute;top:0;left:0;color:rgba(255,255,255,.62);font:600 9px/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase}.ai-engine-signal::after{content:attr(data-axis);position:absolute;left:0;right:0;bottom:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.34);font:500 7px/1 var(--font-mono);letter-spacing:.08em}.ai-engine-signal span{position:relative;flex:1;height:var(--h,35%);background:linear-gradient(180deg,rgba(143,226,204,.72),rgba(143,226,204,.04));animation:aiSignal 3.6s ease-in-out infinite alternate;transition:height .6s cubic-bezier(.18,.76,.22,1),background .35s,box-shadow .35s}.ai-engine-signal span.is-focus{background:linear-gradient(180deg,#b6f3e3,rgba(143,226,204,.08));box-shadow:0 -4px 18px rgba(143,226,204,.34)}.ai-engine-signal span.is-focus::before{content:"";position:absolute;top:-5px;left:50%;width:4px;height:4px;border-radius:50%;background:#e3fff7;box-shadow:0 0 10px #9de5d2;transform:translateX(-50%)}.ai-engine-signal span:nth-child(2n){animation-delay:-.7s}.ai-engine-signal span:nth-child(3n){animation-delay:-1.5s}.ai-engine-signal span:nth-child(5n){animation-delay:-2.2s}.ai-engine-stage[data-ai-view="health"] .ai-engine-signal span.is-focus,.ai-engine-stage[data-ai-view="operations"] .ai-engine-signal span.is-focus{background:linear-gradient(180deg,#ffc28c,rgba(244,178,119,.08));box-shadow:0 -4px 20px rgba(244,178,119,.45)}.ai-engine-stage[data-ai-view="health"] .ai-engine-signal span.is-focus::before,.ai-engine-stage[data-ai-view="operations"] .ai-engine-signal span.is-focus::before{background:#ffe0c1;box-shadow:0 0 11px #f4b277}.ai-engine-stage[data-ai-view="optimisation"] .ai-engine-signal{filter:hue-rotate(20deg)}.ai-engine-stage[data-ai-view="assistant"] .ai-engine-signal{opacity:.27}
.ai-engine-evidence{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)}.ai-engine-evidence>span{padding:22px 18px 0 0}.ai-engine-evidence small{display:block;margin-bottom:9px;color:rgba(255,255,255,.4);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.ai-engine-evidence b{font:500 14px/1.2 var(--font-mono);color:#dceae6}
.ai-engine-body{display:grid;grid-template-columns:minmax(270px,.78fr) minmax(390px,1.22fr);gap:clamp(28px,4vw,62px);align-items:center;min-height:355px;margin:30px 0}.ai-engine-body .ai-engine-reading{margin:0}.ai-engine-body .ai-engine-reading>strong{font-size:clamp(54px,6.5vw,92px)}
.ai-engine-visual{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;animation:aiVisualIn .65s cubic-bezier(.18,.76,.22,1) both}.ai-chart-title{margin-bottom:16px;color:#8fd7c4;font:600 10px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase}.ai-chart-content{position:relative;min-height:230px}.ai-chart-axis{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.38);font:500 7px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.ai-chart-axis b{color:#8fd7c4;font-weight:550}.ai-line-chart{display:block;width:100%;height:230px;overflow:visible}.chart-grid path{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1;stroke-dasharray:3 4}.chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:850;stroke-dashoffset:850;animation:drawAiLine 1.35s cubic-bezier(.3,.7,.2,1) forwards}.chart-line-primary{stroke:#91dfcb}.chart-line-muted{stroke:rgba(255,255,255,.34);stroke-width:2;animation-delay:.15s}.forecast-band{fill:url(#forecastFill);opacity:0;animation:aiFadeIn .7s ease .65s forwards}.chart-marker{stroke:#91dfcb;stroke-width:1;stroke-dasharray:4 5;opacity:0;animation:aiFadeIn .4s ease 1.15s forwards}.chart-point{fill:#a9f0dd;stroke:rgba(169,240,221,.3);stroke-width:7;opacity:0;animation:aiFadeIn .4s ease 1.15s forwards}.ai-line-chart text{fill:#a8ded0;font:600 10px var(--font-mono);opacity:0;animation:aiFadeIn .4s ease 1.2s forwards}.optimise-fill{fill:url(#optimiseFill);opacity:0;animation:aiFadeIn .7s ease .7s forwards}.chart-before{stroke:rgba(255,255,255,.46);stroke-width:2;stroke-dasharray:10 8;animation-delay:.08s}.peak-reduction{stroke:#f2b66d;stroke-width:2;opacity:0;animation:aiFadeIn .4s ease 1.15s forwards}
.health-scale{position:absolute;left:0;top:0;bottom:28px;display:flex;flex-direction:column;justify-content:space-between;color:rgba(255,255,255,.35);font:500 8px var(--font-mono)}.health-bars{position:absolute;inset:0 0 0 28px;display:grid;grid-template-columns:repeat(12,1fr);gap:7px;align-items:end;background:repeating-linear-gradient(180deg,transparent 0,transparent 24.5%,rgba(255,255,255,.07) 25%,transparent 25.5%)}.health-bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.health-bar i{display:block;width:70%;height:var(--score);min-height:8px;background:linear-gradient(180deg,rgba(137,204,187,.62),rgba(137,204,187,.16));border-top:1px solid #8fd7c4;transform-origin:bottom;animation:aiBarGrow .8s cubic-bezier(.18,.76,.22,1) both}.health-bar small{height:25px;padding-top:10px;color:rgba(255,255,255,.38);font:500 6px var(--font-mono);white-space:nowrap}.health-bar.anomaly i{background:linear-gradient(180deg,rgba(244,178,119,.86),rgba(244,178,119,.14));border-color:#f4b277;box-shadow:0 -5px 16px rgba(244,178,119,.22)}.health-bar.anomaly small{color:#f4b277}
.operations-flow{height:230px;display:grid;grid-template-columns:1fr 18px 1.18fr 18px 1fr 18px 1fr;align-items:center}.operations-flow>div{height:164px;padding:17px 13px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.025);opacity:0;transform:translateX(-8px);animation:flowNodeIn .45s ease forwards}.operations-flow>div:nth-of-type(2){animation-delay:.22s}.operations-flow>div:nth-of-type(3){animation-delay:.44s}.operations-flow>div:nth-of-type(4){animation-delay:.66s}.operations-flow>div.focus{border-color:rgba(244,178,119,.65);box-shadow:inset 0 0 28px rgba(244,178,119,.07)}.operations-flow small{display:block;min-height:28px;color:rgba(255,255,255,.4);font:500 7px/1.4 var(--font-mono);text-transform:uppercase}.operations-flow strong{display:block;margin:18px 0 9px;font:500 clamp(16px,1.7vw,23px)/1 var(--font-mono);color:#dff1ec}.operations-flow .focus strong{color:#f4b277}.operations-flow span{font-size:8px;line-height:1.4;color:rgba(255,255,255,.43)}.operations-flow>i{position:relative;height:1px;background:rgba(255,255,255,.24);transform:scaleX(0);animation:flowLineIn .3s ease forwards}.operations-flow>i:nth-of-type(1){animation-delay:.38s}.operations-flow>i:nth-of-type(2){animation-delay:.6s}.operations-flow>i:nth-of-type(3){animation-delay:.82s}.operations-flow>i::after{content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-top:1px solid #8fd7c4;border-right:1px solid #8fd7c4;transform:rotate(45deg)}
.ai-engine-stage[data-ai-view="operations"] .ai-engine-body{grid-template-columns:minmax(220px,.58fr) minmax(520px,1.42fr);gap:34px}.ai-engine-stage[data-ai-view="operations"] .ai-engine-reading>strong{font-size:clamp(72px,8vw,112px)}
.operations-flow .om-node{position:relative;height:205px;padding:14px 11px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 1px rgba(255,255,255,.025)}.operations-flow .om-node.focus{background:radial-gradient(circle at 50% 28%,rgba(244,178,119,.13),transparent 48%),rgba(255,255,255,.02);box-shadow:inset 0 0 28px rgba(244,178,119,.08),0 0 24px rgba(244,178,119,.06)}
.operations-flow .om-icon{display:flex;width:38px;height:38px;margin:6px auto 8px;align-items:center;justify-content:center;border:1px solid rgba(143,215,196,.18);border-radius:50%;background:rgba(143,215,196,.06);color:#91dfcb;font:500 19px/1 var(--font-mono);box-shadow:0 0 18px rgba(143,215,196,.07)}.operations-flow .focus .om-icon{border-color:rgba(244,178,119,.34);background:rgba(244,178,119,.08);color:#f4b277}
.operations-flow .om-node>strong{margin:4px 0 5px;font-size:clamp(12px,1.25vw,17px);line-height:1.2}.operations-flow .alarms>strong{font-size:29px;color:#91dfcb}.operations-flow .om-node>p{margin:0;color:rgba(255,255,255,.68);font-size:8px;line-height:1.4}.operations-flow .om-node>em{display:block;margin-top:6px;color:rgba(255,255,255,.35);font-size:7px;font-style:normal;line-height:1.35}.operations-flow .work-order>p{margin-top:15px;color:#91dfcb;font:500 11px var(--font-mono)}
.om-tags{display:flex;justify-content:center;gap:3px;margin-top:15px}.om-tags b{padding:3px 4px;background:rgba(143,215,196,.08);color:rgba(190,230,220,.55);font:500 5px var(--font-mono)}.operations-flow .om-confidence{width:max-content;margin:8px auto!important;padding:4px 9px;border:1px solid rgba(244,178,119,.4);border-radius:20px;color:#f4b277!important;font:550 7px var(--font-mono)}
.operations-flow ul{margin:8px 0 0;padding:7px 0 0;border-top:1px solid rgba(255,255,255,.08);list-style:none;text-align:left}.operations-flow li{position:relative;margin:4px 0;padding-left:8px;color:rgba(255,255,255,.46);font-size:6px;line-height:1.35}.operations-flow li::before{content:"";position:absolute;left:0;top:4px;width:2px;height:2px;border-radius:50%;background:#85d4bf;box-shadow:0 0 5px #85d4bf}
.operations-flow>i{z-index:2}.operations-flow>i::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:#0c1212;transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(0,0,0,.55)}.operations-flow>i::after{right:6px;z-index:2}
.ai-engine-stage[data-ai-view="optimisation"] .ai-engine-body{grid-template-columns:minmax(230px,.62fr) minmax(500px,1.38fr);gap:36px}.ai-engine-stage[data-ai-view="optimisation"] .ai-engine-reading>strong{font-size:clamp(76px,8.5vw,118px)}
.ai-engine-stage[data-ai-view="forecast"] .ai-engine-body{grid-template-columns:minmax(235px,.64fr) minmax(500px,1.36fr);gap:36px}.ai-engine-stage[data-ai-view="forecast"] .ai-engine-reading>strong{font-size:clamp(72px,8.2vw,114px)}
.forecast-chart{position:relative;padding-top:25px}.forecast-legend{position:absolute;right:7px;top:0;display:flex;gap:18px;color:rgba(255,255,255,.48);font:500 7px var(--font-mono);letter-spacing:.035em;text-transform:uppercase}.forecast-legend span{display:flex;align-items:center;gap:7px}.forecast-legend i{display:block;width:22px;height:2px;background:#57bda4}.forecast-legend .predicted i{background:#a9f0dd}.forecast-legend .range i{height:9px;background:rgba(143,226,204,.23)}.forecast-chart .ai-line-chart{height:248px}.forecast-y text,.forecast-x text{fill:rgba(255,255,255,.38);font:500 8px var(--font-mono);animation:none;opacity:1}.forecast-x .peak-time{fill:#91dfcb}.forecast-actual{stroke:#53b99f;stroke-width:2.5}.forecast-predicted{animation-delay:.48s}.forecast-callout text{fill:#9ce4d1;font-size:8px;animation:aiFadeIn .4s ease 1.25s forwards}.forecast-callout text:nth-child(2){fill:#fff;font-size:11px}.forecast-callout text:nth-child(3){font-size:9px}.forecast-chart .forecast-band{animation-delay:.72s}
.optimisation-chart{position:relative;padding-top:24px}.optimisation-legend{position:absolute;right:8px;top:0;display:flex;gap:20px;color:rgba(255,255,255,.48);font:500 7px var(--font-mono);text-transform:uppercase;letter-spacing:.04em}.optimisation-legend span{display:flex;align-items:center;gap:7px}.optimisation-legend i{display:block;width:22px;height:1px;border-top:2px dashed rgba(255,255,255,.48)}.optimisation-legend span:last-child i{border-top-style:solid;border-color:#91dfcb}
.optimisation-chart .ai-line-chart{height:248px}.optimise-y text,.optimise-x text{fill:rgba(255,255,255,.38);font:500 8px var(--font-mono);animation:none;opacity:1}.battery-window{opacity:0;animation:aiFadeIn .45s ease 1.05s forwards}.battery-window line{stroke:#91dfcb;stroke-width:1}.battery-window text{fill:#91dfcb;font-size:7px;animation:none;opacity:1}.peak-callout{opacity:0;animation:aiFadeIn .45s ease 1.18s forwards}.peak-callout line,.peak-callout path{fill:none;stroke:#f4b277;stroke-width:1.5}.peak-callout text{fill:#f4b277;font-size:8px;animation:none;opacity:1}.peak-callout text:last-child{font-size:11px}.solar-timeline{display:flex;align-items:center;gap:10px;margin:-4px 20px 4px 40px;color:#e5ae64}.solar-timeline span{font-size:15px}.solar-timeline span:first-child,.solar-timeline span:last-child{color:#69ad9c}.solar-timeline i{flex:1;height:1px;background:linear-gradient(90deg,rgba(105,173,156,.08),rgba(229,174,100,.3))}.solar-timeline i:last-of-type{background:linear-gradient(90deg,rgba(229,174,100,.3),rgba(105,173,156,.08))}.solar-timeline strong{font:550 7px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.assistant-flow{display:grid;gap:10px}.assistant-question,.assistant-answer{padding:16px 18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025)}.assistant-answer{border-left:2px solid #8fd7c4;animation:assistantAnswerIn .65s ease .25s both}.assistant-flow small{color:rgba(255,255,255,.4);font:550 7px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.assistant-flow p{margin:8px 0 0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.72)}.assistant-flow p b{color:#a8e2d3}.assistant-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.assistant-sources span{padding:12px;border:1px solid rgba(255,255,255,.1);opacity:0;animation:flowNodeIn .4s ease forwards}.assistant-sources span:nth-child(1){animation-delay:.55s}.assistant-sources span:nth-child(2){animation-delay:.7s}.assistant-sources span:nth-child(3){animation-delay:.85s}.assistant-sources b{display:block;margin-top:7px;color:#dff1ec;font:500 10px var(--font-mono)}
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-body{grid-template-columns:minmax(285px,.72fr) minmax(470px,1.28fr);gap:42px}.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>strong{font-size:clamp(32px,3.7vw,52px);font-weight:430;line-height:1.08;letter-spacing:-.05em}.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>strong mark{padding:0;background:none;color:#8fd7c4}.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>p{padding-left:17px;border-left:2px solid #8fd7c4}
.assistant-question,.assistant-answer{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;min-height:70px}.assistant-answer{min-height:95px;background:linear-gradient(90deg,rgba(143,215,196,.055),rgba(255,255,255,.022))}.assistant-avatar{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid rgba(143,215,196,.3);border-radius:50%;background:rgba(143,215,196,.055);color:#91dfcb;font-size:16px}.assistant-flow time{align-self:start;color:rgba(255,255,255,.35);font:500 7px var(--font-mono)}.assistant-question p,.assistant-answer p{margin-top:6px}.assistant-answer p{font-size:11px}.assistant-sources span{position:relative;min-height:105px;padding:14px 12px 12px 42px;background:rgba(255,255,255,.02)}.assistant-sources span.warning::after{content:"!";position:absolute;right:9px;top:9px;width:14px;height:14px;border:1px solid rgba(244,178,119,.65);border-radius:50%;color:#f4b277;font:600 8px/13px var(--font-mono);text-align:center}.assistant-sources .source-icon{position:absolute;left:12px;top:15px;color:#91dfcb;font:500 21px/1 var(--font-mono);font-style:normal}.assistant-sources small{min-height:25px;line-height:1.35;color:rgba(255,255,255,.68)}.assistant-sources b{color:#8fd7c4;font-size:15px}.assistant-sources em{display:block;margin-top:7px;color:rgba(255,255,255,.34);font-size:7px;font-style:normal;line-height:1.35}
@keyframes drawAiLine{to{stroke-dashoffset:0}}@keyframes aiFadeIn{to{opacity:1}}@keyframes aiBarGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes flowNodeIn{to{opacity:1;transform:none}}@keyframes flowLineIn{to{transform:scaleX(1)}}@keyframes assistantAnswerIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes aiVisualIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-trust{margin-top:70px}.ai-trust>div{display:grid;grid-template-columns:280px 1fr;gap:50px;align-items:start}.ai-trust>div span{font-size:24px;font-weight:520;letter-spacing:-.035em}.ai-trust>div p{max-width:750px;margin:0;color:rgba(255,255,255,.55);font-size:13px;line-height:1.7}.ai-trust ol{display:grid;grid-template-columns:repeat(5,1fr);margin:36px 0 0;padding:0;list-style:none;counter-reset:trust}.ai-trust li{position:relative;padding:18px 24px 0 0;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.7);font:500 9px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;counter-increment:trust}.ai-trust li::before{content:"0" counter(trust);display:block;margin-bottom:10px;color:#82cbb8}.ai-trust li:not(:last-child)::after{content:"";position:absolute;top:-2px;right:14px;width:5px;height:5px;border-top:1px solid #82cbb8;border-right:1px solid #82cbb8;transform:rotate(45deg)}
@keyframes aiPulse{50%{opacity:.38;box-shadow:0 0 5px #8ce0c9}}@keyframes aiSignal{to{height:calc(var(--h,35%) + 18%)}}
@media(max-width:760px){
.ai-engine{padding:86px 20px 58px}.ai-engine-head h2{font-size:38px}.ai-engine-console{grid-template-columns:1fr;min-height:0;margin-top:52px}.ai-engine-modes{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.14);scrollbar-width:none}.ai-engine-modes::-webkit-scrollbar{display:none}.ai-engine-modes button{flex:0 0 auto;min-width:145px;min-height:80px;padding:17px;border-right:1px solid rgba(255,255,255,.09);border-bottom:0}.ai-engine-modes button::before{left:15%;right:15%;top:auto;bottom:-1px;width:auto;height:2px;transform:scaleX(0)}.ai-engine-modes button.active::before{transform:scaleX(1)}.ai-engine-modes small{display:none}.ai-engine-stage{padding:24px 20px 28px}.ai-engine-reading{margin:54px 0 38px}.ai-engine-reading>strong{font-size:57px}.ai-engine-reading>p{font-size:14px}.ai-engine-signal{top:90px;width:65%;opacity:.16}.ai-engine-evidence{gap:12px}.ai-engine-evidence>span{padding-right:0}.ai-engine-evidence b{font-size:11px}.ai-trust{margin-top:54px}.ai-trust>div{grid-template-columns:1fr;gap:16px}.ai-trust ol{grid-template-columns:1fr}.ai-trust li{padding:14px 0 14px 38px;border-top:1px solid rgba(255,255,255,.14)}.ai-trust li::before{position:absolute;left:0;margin:0}.ai-trust li:not(:last-child)::after{top:auto;right:auto;left:9px;bottom:-3px;transform:rotate(135deg)}}
@media(prefers-reduced-motion:reduce){.ai-engine-status i,.ai-engine-signal span{animation:none}}
.ai-trust li::before{display:none}
@media(max-width:760px){.ai-trust li{padding-left:0}}
/* Full-screen hero treatment: the carousel becomes the canvas. */
.hero{min-height:100svh;padding:108px 32px 54px;justify-content:center;background:#050a0d}
.hero>.hero-carousel{position:absolute;inset:0;z-index:0;width:100%;max-width:none;height:100%;margin:0;border-radius:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
.hero>.hero-carousel::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(3,7,10,.36) 0%,rgba(3,7,10,.13) 44%,rgba(3,7,10,.48) 100%)}
.hero>.hero-carousel .hero-slide::after{background:linear-gradient(180deg,rgba(3,7,10,.08),transparent 42%,rgba(3,7,10,.38) 100%)}
.hero>.hero-carousel .hero-image{border-radius:0}
.hero{--hero-pan-x:0px;--hero-pan-y:0px}
.hero>.hero-carousel[data-static-hero] .hero-slide.active .hero-image{transform-origin:52% 54%;animation:heroCinematicDrift 15s ease-in-out infinite;will-change:transform}
.hero>.hero-carousel .hero-slide:first-child .hero-image{object-position:78% 74%}
.hero>.hero-carousel[data-static-hero] .hero-slide:first-child.active .hero-image{transform-origin:78% 74%;animation-name:heroFieldCinematicDrift}
.hero-cinematic{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-cinematic::before{content:"";position:absolute;inset:-8%;opacity:.32;background-image:radial-gradient(circle,rgba(116,231,201,.82) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(186,241,225,.48) 0 1px,transparent 1.6px);background-size:137px 137px,211px 211px;background-position:17px 31px,83px 9px;mask-image:linear-gradient(180deg,transparent 4%,#000 31%,#000 84%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 31%,#000 84%,transparent 100%);animation:heroParticleDrift 22s linear infinite}
.hero-light-sweep{position:absolute;inset:-20% -35%;background:linear-gradient(108deg,transparent 36%,rgba(198,235,225,.075) 47%,rgba(255,255,255,.025) 51%,transparent 62%);transform:translateX(-42%) skewX(-8deg);animation:heroLightTravel 13s ease-in-out infinite}
.hero-asset-scan{position:absolute;left:50.5%;top:44%;width:24%;height:31%;overflow:hidden;opacity:.5;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.hero-asset-scan::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(115,231,201,.85) 32%,rgba(186,246,229,.95) 58%,transparent);box-shadow:0 0 18px 5px rgba(68,218,181,.14);animation:heroAssetScan 12s cubic-bezier(.42,0,.24,1) infinite}
.hero-energy-trace{position:absolute;inset:0;width:100%;height:100%;opacity:.72;filter:drop-shadow(0 0 7px rgba(91,212,182,.32));transform:translate3d(var(--hero-pan-x),var(--hero-pan-y),0);will-change:transform}.hero-energy-trace path{fill:none;vector-effect:non-scaling-stroke}.trace-bed{stroke:rgba(177,224,212,.14);stroke-width:1}.trace-live{stroke:rgba(120,226,198,.88);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1 12;animation:heroEnergyFlow 2.6s linear infinite}.trace-node{fill:#8de5ce;transform-box:fill-box;transform-origin:center;animation:heroTraceNode 12s ease-in-out infinite}.node-tablet{animation-delay:.35s}
.hero-intelligence-status{position:absolute;left:63%;top:65%;width:min(205px,17vw);height:48px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.82)}
.hero-intelligence-step{position:absolute;inset:0;display:grid;grid-template-columns:15px 1fr;grid-template-rows:auto auto;column-gap:9px;align-content:center;padding:7px 10px;background:linear-gradient(rgba(145,229,207,.5),rgba(145,229,207,.5)) left top/23px 1px no-repeat,linear-gradient(rgba(145,229,207,.5),rgba(145,229,207,.5)) left top/1px 14px no-repeat,linear-gradient(rgba(145,229,207,.28),rgba(145,229,207,.28)) right bottom/23px 1px no-repeat,linear-gradient(rgba(145,229,207,.28),rgba(145,229,207,.28)) right bottom/1px 14px no-repeat;opacity:0;transform:translateY(6px);clip-path:inset(0 100% 0 0);animation:heroIntelligenceStep 12s cubic-bezier(.2,.72,.2,1) infinite}
.hero-intelligence-step::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(123,232,204,.95),transparent);transform:translateX(-70%);opacity:0;animation:heroHudSweep 4s ease-in-out infinite}
.hero-intelligence-step i{position:relative;grid-row:1/3;align-self:center;width:6px;height:6px;border-radius:50%;background:#80dfc6;box-shadow:0 0 0 1px rgba(128,223,198,.85),0 0 13px rgba(91,218,185,.8);animation:heroHudTarget 1.5s ease-in-out infinite}
.hero-intelligence-step i::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(128,223,198,.35);border-radius:50%;animation:heroHudRing 1.5s ease-out infinite}
.hero-intelligence-step small{font:600 7px/1.1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(205,241,232,.72)}
.hero-intelligence-step b{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:550 9.5px/1.1 var(--font-sans);letter-spacing:.01em;color:rgba(255,255,255,.94)}
.intelligence-connected{animation-delay:0s}.intelligence-inspecting{animation-delay:4s}.intelligence-ready{animation-delay:8s}.intelligence-ready i{background:#f0b75b;box-shadow:0 0 0 1px rgba(240,183,91,.85),0 0 13px rgba(240,183,91,.72)}.intelligence-ready i::after{border-color:rgba(240,183,91,.38)}
.cinematic-paused .hero-image,.cinematic-paused .hero-cinematic::before,.cinematic-paused .hero-light-sweep,.cinematic-paused .hero-asset-scan::before,.cinematic-paused .trace-live,.cinematic-paused .trace-node,.cinematic-paused .hero-intelligence-step,.cinematic-paused .hero-intelligence-step::after,.cinematic-paused .hero-intelligence-step i,.cinematic-paused .hero-intelligence-step i::after{animation-play-state:paused!important}
@keyframes heroCinematicDrift{0%,100%{transform:scale(1.035) translate3d(var(--hero-pan-x),var(--hero-pan-y),0)}48%{transform:scale(1.09) translate3d(calc(var(--hero-pan-x) - 1.1%),calc(var(--hero-pan-y) - .55%),0)}72%{transform:scale(1.075) translate3d(calc(var(--hero-pan-x) + .45%),calc(var(--hero-pan-y) - .25%),0)}}
@keyframes heroFieldCinematicDrift{0%,100%{transform:scale(1.012) translate3d(var(--hero-pan-x),var(--hero-pan-y),0)}50%{transform:scale(1.042) translate3d(calc(var(--hero-pan-x) - .2%),calc(var(--hero-pan-y) - .15%),0)}76%{transform:scale(1.028) translate3d(var(--hero-pan-x),var(--hero-pan-y),0)}}
@keyframes heroLightTravel{0%,18%{transform:translateX(-45%) skewX(-8deg);opacity:0}38%{opacity:1}68%,100%{transform:translateX(42%) skewX(-8deg);opacity:0}}
@keyframes heroEnergyFlow{to{stroke-dashoffset:-220}}
@keyframes heroParticleDrift{to{transform:translate3d(34px,-24px,0)}}
@keyframes heroAssetScan{0%,7%{left:-4%;opacity:0}14%{opacity:1}29%{left:100%;opacity:.8}35%,100%{left:100%;opacity:0}}
@keyframes heroTraceNode{0%,9%,38%,100%{opacity:.2;transform:scale(.7)}15%,29%{opacity:1;transform:scale(1.7)}32%{opacity:.6;transform:scale(1)}}
@keyframes heroIntelligenceStep{0%,7%{opacity:0;transform:translateY(6px);clip-path:inset(0 100% 0 0)}12%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}27%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}32%,100%{opacity:0;transform:translateY(-3px);clip-path:inset(0 0 0 100%)}}
@keyframes heroHudSweep{0%,20%{opacity:0;transform:translateX(-70%)}42%{opacity:.9}75%,100%{opacity:0;transform:translateX(70%)}}
@keyframes heroHudTarget{50%{opacity:.65;transform:scale(.78)}}
@keyframes heroHudRing{0%{opacity:0;transform:scale(.55)}35%{opacity:.8}100%{opacity:0;transform:scale(1.45)}}
.hero>.hero-inner{min-height:calc(100svh - 162px);justify-content:center}
.hero>.hero-inner .hero-copy{margin-top:-34px;transform:translateY(-7vh)}
.hero>.hero-inner .hero-meta{width:min(1040px,100%);margin-top:48px;background:rgba(3,9,12,.12);backdrop-filter:blur(2px)}
.hero>.hero-inner .hero-language-panel{margin-top:28px}
.hero>.hero-carousel .hero-slide figcaption{left:clamp(20px,3vw,46px);bottom:34px}
.hero>.hero-carousel .hero-carousel-controls{right:clamp(20px,3vw,46px);bottom:36px}
.hero>.hero-inner .hero-language-panel{position:absolute;top:0;right:0;margin:0;align-items:flex-end}
.hero>.hero-inner .hero-language-tag{align-items:flex-end}
.hero-h1,.hero-sub{transition:opacity .18s ease,transform .18s ease}
.hero-h1.is-changing,.hero-sub.is-changing{opacity:0;transform:translateY(5px)}
.hero-h1.copy-enter{animation:heroCopyIn .72s cubic-bezier(.18,.76,.22,1) both}
.hero-sub.copy-enter{animation:heroCopyIn .72s cubic-bezier(.18,.76,.22,1) .08s both}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
.hero{min-height:100svh;padding:94px 18px 34px}
.hero>.hero-inner{min-height:calc(100svh - 128px);gap:0}
.hero>.hero-inner .hero-copy{margin-top:-18px;transform:none}
.hero>.hero-inner .hero-meta{margin-top:34px}
.hero>.hero-inner .hero-language-panel{position:absolute;top:0;right:0;margin:0;display:flex;transform:none}
.hero>.hero-inner .hero-language-tag{display:none}
.hero>.hero-inner .hero-language-panel .lang-switch{padding-bottom:7px;gap:10px}
.hero>.hero-carousel{aspect-ratio:auto}
.hero>.hero-carousel .hero-image{object-position:center center}
.hero>.hero-carousel .hero-slide:first-child .hero-image{object-position:84% center}
.hero>.hero-carousel .hero-slide figcaption{bottom:24px;left:18px}
.hero>.hero-carousel .hero-carousel-controls{bottom:25px;right:18px}
.hero-asset-scan{left:30%;top:44%;width:46%;height:29%}.hero-energy-trace{display:none}.hero-intelligence-status{left:14px;right:auto;top:auto;bottom:18%;width:min(195px,62vw)}.hero-light-sweep{animation-duration:16s}
}
@media(prefers-reduced-motion:reduce){.hero>.hero-carousel[data-static-hero] .hero-slide.active .hero-image{animation:none;transform:scale(1.025)}.hero-cinematic{display:none}}
@media(max-width:980px){.ai-engine-body{grid-template-columns:1fr;gap:30px}.ai-engine-body .ai-engine-reading{max-width:650px}.ai-engine-visual{min-height:280px}.operations-flow{grid-template-columns:1fr 12px 1.1fr 12px 1fr 12px 1fr}.operations-flow>div{padding:13px 9px}.operations-flow span{display:none}}
@media(max-width:980px){.ai-engine-stage[data-ai-view="operations"] .ai-engine-body{grid-template-columns:1fr;gap:30px}.operations-flow .om-icon{display:flex}}
@media(max-width:980px){.ai-engine-stage[data-ai-view="optimisation"] .ai-engine-body{grid-template-columns:1fr;gap:30px}}
@media(max-width:980px){.ai-engine-stage[data-ai-view="forecast"] .ai-engine-body{grid-template-columns:1fr;gap:30px}}
@media(max-width:980px){.ai-engine-stage[data-ai-view="assistant"] .ai-engine-body{grid-template-columns:1fr;gap:30px}.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>strong{font-size:clamp(34px,7vw,54px)}}
@media(max-width:560px){.ai-chart-content,.ai-line-chart{min-height:190px;height:190px}.health-bars{gap:3px}.health-bar small{font-size:5px}.operations-flow{height:auto;grid-template-columns:1fr}.operations-flow>div{height:auto;min-height:78px}.operations-flow>i{width:1px;height:13px;margin:auto;transform:scaleY(0)}.operations-flow>i::after{right:-2px;top:auto;bottom:0;transform:rotate(135deg)}.assistant-sources{grid-template-columns:1fr 1fr}.assistant-sources span:last-child{grid-column:1/-1}}
@media(max-width:560px){.optimisation-chart .ai-line-chart{height:210px;min-height:210px}.optimisation-legend{position:static;margin-bottom:8px;justify-content:flex-end}.solar-timeline{margin-left:26px;margin-right:8px}.solar-timeline strong{font-size:6px}}
@media(max-width:560px){.forecast-chart .ai-line-chart{height:210px;min-height:210px}.forecast-legend{position:static;margin-bottom:8px;justify-content:flex-end;gap:10px}.forecast-legend span{font-size:6px}.forecast-legend i{width:14px}}
@media(prefers-reduced-motion:reduce){.ai-engine-visual,.chart-line,.forecast-band,.chart-marker,.chart-point,.ai-line-chart text,.optimise-fill,.peak-reduction,.health-bar i,.operations-flow>div,.operations-flow>i,.assistant-answer,.assistant-sources span{animation:none;opacity:1;transform:none;stroke-dashoffset:0}}
/* Cinematic story motion: restrained, image-led and consistent across the homepage. */
.strategy-panel-bg{
inset:-24px 0;
transform:translate3d(0,var(--story-parallax,0),0);
will-change:transform;
}
.asset-universe .strategy-panel-content h2,
.asset-universe .strategy-panel-content>p,
.asset-universe .asset-class-line{
opacity:0;
transform:translateY(20px);
transition:opacity .7s ease,transform .85s cubic-bezier(.18,.76,.22,1);
}
.asset-universe .strategy-panel-content.is-visible h2,
.asset-universe .strategy-panel-content.is-visible>p,
.asset-universe .strategy-panel-content.is-visible .asset-class-line{
opacity:1;
transform:none;
}
.asset-universe .strategy-panel-content.is-visible>p{transition-delay:.12s}
.asset-universe .strategy-panel-content.is-visible .asset-class-line{transition-delay:.24s}
.business-story-grid .business-story{
will-change:clip-path,transform;
transition:clip-path 1.05s cubic-bezier(.18,.76,.22,1),transform 1.05s cubic-bezier(.18,.76,.22,1),box-shadow .35s ease;
}
.business-story-grid .station-story,
.business-story-grid .portfolio-story{
clip-path:inset(0 8% 0 0 round 24px);
transform:translateX(-28px);
}
.business-story-grid .distributed-story,
.business-story-grid .operations-story{
clip-path:inset(0 0 0 8% round 24px);
transform:translateX(28px);
}
.business-story-grid .business-story.is-in-view{
clip-path:inset(0 round 24px);
transform:none;
}
.business-story-grid .station-story .strategy-panel-content,
.business-story-grid .operations-story .strategy-panel-content{transform:translate3d(-34px,18px,0)}
.business-story-grid .distributed-story .strategy-panel-content,
.business-story-grid .portfolio-story .strategy-panel-content{transform:translate3d(34px,18px,0)}
.business-story-grid .strategy-panel-content.is-visible{transform:none}
.ecosystem-head{
opacity:0;
transform:translateY(26px);
transition:opacity .7s ease,transform .85s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-head.is-visible{opacity:1;transform:none}
.ecosystem-product-visual{
clip-path:inset(9% 13% 9% 13%);
transform:translateY(28px) scale(1.035);
transition:clip-path 1.15s cubic-bezier(.18,.76,.22,1),opacity .8s ease,transform 1.15s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-product-visual.is-visible{
clip-path:inset(0);
transform:none;
}
.ecosystem-capabilities>div{
opacity:0;
transform:translateY(18px);
transition:opacity .55s ease,transform .7s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-capabilities.is-visible>div{opacity:1;transform:none}
.ecosystem-capabilities.is-visible>div:nth-child(2){transition-delay:.08s}
.ecosystem-capabilities.is-visible>div:nth-child(3){transition-delay:.16s}
.ecosystem-capabilities.is-visible>div:nth-child(4){transition-delay:.24s}
@media(max-width:820px){
.strategy-panel-bg{inset:0;transform:none!important}
.business-story-grid .station-story,
.business-story-grid .distributed-story,
.business-story-grid .operations-story,
.business-story-grid .portfolio-story{clip-path:none;transform:none}
.business-story-grid .station-story .strategy-panel-content,
.business-story-grid .distributed-story .strategy-panel-content,
.business-story-grid .operations-story .strategy-panel-content,
.business-story-grid .portfolio-story .strategy-panel-content{transform:translateY(22px)}
.business-story-grid .strategy-panel-content.is-visible{transform:none}
.ecosystem-product-visual{clip-path:inset(5% 4%);transform:translateY(20px) scale(1.015)}
.ecosystem-product-visual.is-visible{clip-path:inset(0);transform:none}
}
@media(prefers-reduced-motion:reduce){
.strategy-panel-bg{inset:0;transform:none!important}
.asset-universe .strategy-panel-content h2,
.asset-universe .strategy-panel-content>p,
.asset-universe .asset-class-line,
.business-story-grid .business-story,
.business-story-grid .strategy-panel-content,
.ecosystem-head,
.ecosystem-product-visual,
.ecosystem-capabilities>div{opacity:1;clip-path:none;transform:none;transition:none}
}
/* Open ecosystem stage: turn the static topology artwork into a living system. */
.open-ecosystem{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(ellipse at 50% 48%,rgba(91,206,174,.11) 0,rgba(91,206,174,.035) 30%,transparent 62%),
var(--bg);
}
.open-ecosystem::before{
content:"";
position:absolute;
z-index:-1;
left:50%;
top:46%;
width:min(980px,86vw);
aspect-ratio:1;
border-radius:50%;
background:repeating-radial-gradient(circle,rgba(50,153,127,.07) 0 1px,transparent 1px 82px);
opacity:.62;
transform:translate(-50%,-50%) scale(.78);
animation:ecosystemRadar 9s ease-in-out infinite;
pointer-events:none;
}
.open-ecosystem .container{width:min(1380px,calc(100% - 48px));max-width:none}
.ecosystem-product-visual{
overflow:visible;
transform-style:preserve-3d;
}
.ecosystem-product-visual.is-visible{
transform:perspective(1400px) rotateX(var(--eco-rx,0deg)) rotateY(var(--eco-ry,0deg)) translateZ(0);
transition:clip-path 1.15s cubic-bezier(.18,.76,.22,1),opacity .8s ease,transform .55s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-product-visual::before{
content:"";
position:absolute;
z-index:2;
left:50%;
top:49%;
width:31%;
aspect-ratio:2.25;
border-radius:50%;
border:1px solid rgba(42,184,146,.26);
box-shadow:0 0 0 16px rgba(49,190,152,.035),0 0 0 38px rgba(49,190,152,.018),0 25px 60px rgba(25,142,113,.18);
opacity:0;
transform:translate(-50%,-50%) scale(.72);
animation:ecosystemCorePulse 3.6s ease-out infinite;
pointer-events:none;
}
.ecosystem-product-visual.is-visible::before{opacity:1}
.ecosystem-product-visual::after{display:none}
.ecosystem-product-visual img{
position:relative;
z-index:1;
filter:drop-shadow(0 32px 30px rgba(16,42,35,.1));
}
.ecosystem-product-scan{
z-index:4;
left:4%;
right:4%;
opacity:0;
background:linear-gradient(90deg,transparent 4%,rgba(57,181,148,.12) 22%,rgba(72,222,183,.78) 50%,rgba(57,181,148,.12) 78%,transparent 96%);
box-shadow:0 0 18px rgba(50,190,153,.24);
}
.ecosystem-product-visual.is-visible .ecosystem-product-scan{animation:ecosystemProductScan 6s ease-in-out infinite}
.ecosystem-capabilities{
position:relative;
z-index:5;
gap:14px;
margin-top:24px;
border:0;
border-radius:0;
overflow:visible;
background:transparent;
box-shadow:none;
}
.ecosystem-capabilities>div{
position:relative;
min-height:150px;
padding:32px clamp(20px,2.5vw,34px) 28px;
border:1px solid rgba(17,67,56,.1);
border-radius:17px;
background:rgba(255,255,255,.72);
box-shadow:0 24px 55px -42px rgba(9,48,39,.5);
backdrop-filter:blur(12px);
opacity:0;
transform:translateY(44px) scale(.965);
transition:opacity .55s ease,transform .9s cubic-bezier(.16,.78,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.ecosystem-capabilities>div:nth-child(2),
.ecosystem-capabilities>div:nth-child(4){transform:translateY(64px) scale(.965)}
.ecosystem-capabilities.is-visible>div{opacity:1;transform:translateY(0) scale(1)}
.ecosystem-capabilities.is-visible>div:nth-child(1){transition-delay:.05s}
.ecosystem-capabilities.is-visible>div:nth-child(2){transition-delay:.22s}
.ecosystem-capabilities.is-visible>div:nth-child(3){transition-delay:.39s}
.ecosystem-capabilities.is-visible>div:nth-child(4){transition-delay:.56s}
.ecosystem-capabilities>div+div{border-left:1px solid rgba(17,67,56,.1)}
.ecosystem-capabilities>div::before{
content:"";
position:absolute;
left:0;
top:30px;
width:2px;
height:0;
border-radius:2px;
background:linear-gradient(180deg,#2eb68f,rgba(46,182,143,.08));
box-shadow:0 0 16px rgba(46,182,143,.32);
transition:height .65s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-capabilities.is-visible>div::before{height:54px}
.ecosystem-capabilities.is-visible>div:nth-child(1)::before{transition-delay:.42s}
.ecosystem-capabilities.is-visible>div:nth-child(2)::before{transition-delay:.59s}
.ecosystem-capabilities.is-visible>div:nth-child(3)::before{transition-delay:.76s}
.ecosystem-capabilities.is-visible>div:nth-child(4)::before{transition-delay:.93s}
.ecosystem-capabilities>div::after{
content:"";
position:absolute;
left:28px;
right:28px;
bottom:20px;
height:1px;
background:linear-gradient(90deg,rgba(38,155,124,.34),transparent);
transform:scaleX(0);
transform-origin:left;
transition:transform .7s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-capabilities.is-visible>div::after{transform:scaleX(1)}
.ecosystem-capabilities.is-visible>div:nth-child(1)::after{transition-delay:.48s}
.ecosystem-capabilities.is-visible>div:nth-child(2)::after{transition-delay:.65s}
.ecosystem-capabilities.is-visible>div:nth-child(3)::after{transition-delay:.82s}
.ecosystem-capabilities.is-visible>div:nth-child(4)::after{transition-delay:.99s}
.ecosystem-capabilities>div:hover{border-color:rgba(39,153,124,.26);box-shadow:0 28px 60px -38px rgba(9,75,58,.38)}
.ecosystem-capabilities strong{color:#102b25;font-size:18px}
.ecosystem-capabilities span{color:#6a7773;font-size:11px}
@keyframes ecosystemRadar{
0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.76)}
50%{opacity:.72;transform:translate(-50%,-50%) scale(.84)}
}
@keyframes ecosystemCorePulse{
0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
22%{opacity:.75}
78%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
@media(max-width:820px){
.open-ecosystem .container{width:min(100% - 32px,1200px)}
.open-ecosystem::before{width:110vw;opacity:.35}
.ecosystem-product-visual.is-visible{transform:none}
.ecosystem-product-visual::before{width:38%}
.ecosystem-capabilities{gap:12px;border-radius:0}
.ecosystem-capabilities>div:nth-child(2),.ecosystem-capabilities>div:nth-child(4){transform:translateY(44px) scale(.965)}
.ecosystem-capabilities.is-visible>div{transform:none}
.ecosystem-capabilities>div:nth-child(3),.ecosystem-capabilities>div:nth-child(4){border-top:1px solid rgba(17,67,56,.1)}
.ecosystem-capabilities>div:nth-child(3){border-left:1px solid rgba(17,67,56,.1)}
}
@media(max-width:480px){
.ecosystem-capabilities>div+div{border-left:1px solid rgba(17,67,56,.1);border-top:1px solid rgba(17,67,56,.1)}
}
@media(prefers-reduced-motion:reduce){
.open-ecosystem::before,.ecosystem-product-visual::before,.ecosystem-product-visual::after,.ecosystem-product-scan{animation:none!important}
.ecosystem-product-visual.is-visible{transform:none}
.ecosystem-capabilities>div,.ecosystem-capabilities>div:nth-child(2),.ecosystem-capabilities>div:nth-child(4){opacity:1;transform:none;transition:none}
.ecosystem-capabilities>div::before{height:54px;transition:none}
.ecosystem-capabilities>div::after{transform:scaleX(1);transition:none}
}
/* Scroll-directed business journey: the wheel controls a pinned cinematic camera. */
@media(min-width:821px){
.business-story-grid{
position:relative;
display:block;
height:480svh;
padding:0;
background:var(--bg);
}
.business-story-stage{
position:sticky;
top:0;
height:100svh;
overflow:hidden;
background:var(--bg);
isolation:isolate;
}
.business-story-stage::after{
content:"";
position:absolute;
z-index:20;
left:clamp(24px,4vw,64px);
right:clamp(24px,4vw,64px);
bottom:22px;
height:1px;
background:linear-gradient(90deg,rgba(255,255,255,.5) 0 var(--journey-progress,0%),rgba(255,255,255,.15) var(--journey-progress,0%) 100%);
pointer-events:none;
}
.business-story-grid .business-story,
.business-story-grid .station-story,
.business-story-grid .distributed-story,
.business-story-grid .operations-story,
.business-story-grid .portfolio-story{
position:absolute;
left:var(--scene-left,1%);
top:var(--scene-top,2%);
right:auto;
bottom:auto;
z-index:var(--scene-z,1);
min-height:0;
width:var(--scene-width,98%);
height:var(--scene-height,96%);
margin:0;
align-self:auto;
border-radius:var(--scene-radius,clamp(18px,2vw,28px));
opacity:var(--scene-opacity,0);
clip-path:inset(0 round var(--scene-radius,clamp(18px,2vw,28px)));
transform:none;
transition:none;
pointer-events:none;
contain:layout paint;
will-change:left,top,width,height,opacity;
}
.business-story-grid .station-story{--scene-opacity:1;--scene-scale:1;--scene-clip:0%}
.business-story-grid .business-story .strategy-panel-bg{
inset:-4%;
transform:none;
}
.business-story-grid .business-story .strategy-panel-bg img{
transform:translate3d(var(--image-x,0),var(--image-y,0),0) scale(var(--image-scale,1.06));
transition:none;
will-change:transform;
}
.business-story-grid .business-story .strategy-panel-content,
.business-story-grid .station-story .strategy-panel-content,
.business-story-grid .distributed-story .strategy-panel-content,
.business-story-grid .operations-story .strategy-panel-content,
.business-story-grid .portfolio-story .strategy-panel-content{
opacity:var(--copy-opacity,0);
transform:translate3d(var(--copy-x,0),var(--copy-y,30px),0);
transition:none;
will-change:opacity,transform;
}
.business-story-grid .business-story.is-journey-active{pointer-events:auto}
.business-story-grid .business-story:not(.is-journey-relevant){visibility:hidden}
}
@media(max-width:820px){
.business-story-stage{display:contents}
}
@media(prefers-reduced-motion:reduce) and (min-width:821px){
.business-story-grid{display:grid;height:auto;padding:76px 48px;background:var(--bg)}
.business-story-stage{position:static;display:contents;height:auto;overflow:visible}
.business-story-stage::after{display:none}
.business-story-grid .business-story,
.business-story-grid .station-story,
.business-story-grid .distributed-story,
.business-story-grid .operations-story,
.business-story-grid .portfolio-story{position:relative;inset:auto;width:auto;height:68svh;opacity:1;clip-path:none;transform:none;pointer-events:auto;visibility:visible}
.business-story-grid .business-story .strategy-panel-content{opacity:1;transform:none}
}
/* Hero-to-platform assembly: physical assets dissolve into one intelligent layer. */
.asset-universe{
isolation:isolate;
overflow:clip;
min-height:175svh!important;
display:block;
background:
radial-gradient(ellipse at 50% 48%,rgba(51,190,154,.16),transparent 24%),
radial-gradient(ellipse at 18% 72%,rgba(44,113,145,.1),transparent 32%),
linear-gradient(145deg,#071113 0%,#091819 48%,#061012 100%);
}
.asset-space-stage{position:sticky;z-index:1;top:0;width:100%;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:inherit}
.asset-universe::before{
display:none;
}
.asset-universe::after{
content:"";
position:absolute;
z-index:1;
inset:0;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
background-size:160px;
mix-blend-mode:soft-light;
opacity:.13;
pointer-events:none;
}
.asset-particle-field{position:absolute;z-index:2;inset:0;width:100%;height:100%;opacity:var(--asset-field-opacity,.36)}
.asset-space-glow{position:absolute;z-index:2;left:50%;top:50%;width:min(70vw,950px);aspect-ratio:1.9;border-radius:50%;background:radial-gradient(ellipse,rgba(71,218,177,.11),rgba(52,144,127,.035) 42%,transparent 70%);filter:blur(10px);transform:translate(-50%,-50%) scale(var(--asset-field-scale,.88));pointer-events:none}
.asset-universe .asset-assembly{z-index:4;width:min(1120px,88vw);max-width:none;opacity:1;transform:translateY(var(--asset-assembly-y,0));transition:none}
.asset-orbit-words{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.asset-orbit-words span{position:absolute;padding:10px 16px;border:1px solid rgba(137,230,205,.18);border-radius:999px;background:rgba(8,23,24,.4);color:rgba(189,243,228,.8);font:500 clamp(12px,1.05vw,16px)/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;opacity:0;will-change:transform,opacity,filter}
.asset-universe .asset-assembly h2{position:relative;z-index:2;display:flex;justify-content:center;gap:.24em;margin:0;color:#f4f8f6;font-size:clamp(45px,6.5vw,98px);letter-spacing:-.065em;line-height:.94;opacity:var(--asset-title-opacity,0);transform:scale(var(--asset-title-scale,.92));filter:blur(var(--asset-title-blur,8px));text-shadow:0 0 46px rgba(87,218,182,.08);transition:none}
.asset-assembly h2 span:first-child{transform:translateX(var(--asset-title-left,-12vw))}
.asset-assembly h2 span:last-child{transform:translateX(var(--asset-title-right,12vw))}
.asset-universe .asset-assembly>p{position:relative;z-index:2;max-width:850px;margin:30px auto 0;color:rgba(225,237,233,.68);font-size:clamp(16px,1.45vw,22px);line-height:1.6;opacity:var(--asset-copy-opacity,0);transform:translateY(var(--asset-copy-y,32px));filter:blur(var(--asset-copy-blur,5px));transition:none}
.asset-universe .asset-assembly .asset-class-line{position:relative;z-index:2;margin-top:34px;border-color:rgba(255,255,255,.13);opacity:var(--asset-class-opacity,0);transform:translateY(var(--asset-class-y,24px));transition:none}
.asset-assembly .asset-class-line span{color:rgba(210,229,223,.62)}
.asset-product-reveal{position:absolute;z-index:3;left:50%;top:52%;width:min(660px,52vw);margin:0;opacity:var(--asset-product-opacity,0);clip-path:inset(var(--asset-product-clip,42%) 0 round 28px);transform:translate3d(-50%,var(--asset-product-y,105px),0) scale(var(--asset-product-scale,.72));transform-origin:center 28%;filter:blur(var(--asset-product-blur,14px)) drop-shadow(0 30px 46px rgba(0,0,0,.32));will-change:opacity,transform,clip-path,filter;pointer-events:none}
.asset-product-reveal::after{content:"";position:absolute;inset:4% 8%;border-radius:50%;background:radial-gradient(ellipse,rgba(45,230,181,.2),rgba(45,202,163,.05) 48%,transparent 72%);filter:blur(34px);opacity:var(--asset-product-glow,0);transform:scale(calc(.72 + var(--asset-product-glow,0) * .35));z-index:-1}
.asset-product-reveal img{display:block;width:100%;height:auto;mask-image:radial-gradient(ellipse 76% 76% at center,#000 62%,rgba(0,0,0,.92) 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 76% 76% at center,#000 62%,rgba(0,0,0,.92) 76%,transparent 100%)}
@media(max-width:820px){
.hero{position:sticky;top:0;z-index:0;transform:translateZ(0)}
.hero>.hero-carousel{transform:scale(var(--hero-handoff-scale,1));filter:brightness(var(--hero-handoff-light,1));transform-origin:center 56%;will-change:transform,filter}
.hero>.hero-inner,.hero>.hero-cinematic{opacity:var(--hero-handoff-copy,1);transform:translateY(var(--hero-handoff-copy-y,0));will-change:opacity,transform}
.strategy-story{position:relative;z-index:2;padding-top:0}
.asset-universe{min-height:150svh!important;display:block;clip-path:inset(var(--asset-handoff-inset,7%) 0 0 round var(--asset-handoff-radius,20px) var(--asset-handoff-radius,20px) 0 0);transform:scale(var(--asset-handoff-scale,.97));transform-origin:center top}
.asset-space-stage{position:sticky;inset:auto;top:0;width:100%;height:100svh;display:flex;padding:0}
.asset-particle-field{display:block;opacity:var(--asset-field-opacity,.34)}
.asset-orbit-words{display:flex}
.asset-orbit-words span{padding:7px 10px;font-size:9px;letter-spacing:.075em}
.asset-universe .asset-assembly{width:calc(100% - 32px);transform:translateY(var(--asset-assembly-y,0))}
.asset-universe .asset-assembly h2{display:block;font-size:clamp(39px,11vw,54px);opacity:var(--asset-title-opacity,0);filter:blur(var(--asset-title-blur,8px));transform:scale(var(--asset-title-scale,.92))}
.asset-assembly h2 span{display:block}
.asset-assembly h2 span:first-child{transform:translateX(var(--asset-title-left,-12vw))}
.asset-assembly h2 span:last-child{transform:translateX(var(--asset-title-right,12vw))}
.asset-universe .asset-assembly>p{max-width:92vw;margin-top:20px;font-size:14px;line-height:1.55;opacity:var(--asset-copy-opacity,0);filter:blur(var(--asset-copy-blur,5px));transform:translateY(var(--asset-copy-y,32px))}
.asset-universe .asset-assembly .asset-class-line{margin-top:22px;font-size:7px;opacity:var(--asset-class-opacity,0);transform:translateY(var(--asset-class-y,24px))}
.asset-product-reveal{position:absolute;left:50%;top:57%;width:min(520px,78vw);margin:0;opacity:var(--asset-product-opacity,0);transform:translate3d(-50%,var(--asset-product-y,70px),0) scale(var(--asset-product-scale,.86))}
}
@media(prefers-reduced-motion:reduce){.asset-particle-field{display:none}.asset-orbit-words{display:none}.asset-universe .asset-assembly,.asset-universe .asset-assembly h2,.asset-universe .asset-assembly>p,.asset-universe .asset-assembly .asset-class-line,.asset-product-reveal{opacity:1;filter:none;transform:none}}
/* Hero handoff: the opening frame stays in place while the asset universe takes over. */
@media(min-width:821px){
.hero{
position:sticky;
top:0;
z-index:0;
transform:translateZ(0);
}
.hero>.hero-carousel{
transform:scale(var(--hero-handoff-scale,1));
filter:brightness(var(--hero-handoff-light,1));
transform-origin:center 56%;
will-change:transform,filter;
}
.hero>.hero-inner,
.hero>.hero-cinematic{
opacity:var(--hero-handoff-copy,1);
transform:translateY(var(--hero-handoff-copy-y,0));
will-change:opacity,transform;
}
.strategy-story{
position:relative;
z-index:2;
padding-top:0;
}
.asset-universe{
min-height:100svh;
border-radius:var(--asset-handoff-radius,28px) var(--asset-handoff-radius,28px) 0 0;
clip-path:inset(var(--asset-handoff-inset,7%) 0 0 round var(--asset-handoff-radius,28px) var(--asset-handoff-radius,28px) 0 0);
transform:scale(var(--asset-handoff-scale,.96));
transform-origin:center top;
box-shadow:0 -34px 90px rgba(2,8,10,var(--asset-handoff-shadow,.28));
will-change:clip-path,transform,border-radius;
}
}
@media(prefers-reduced-motion:reduce) and (min-width:821px){
.hero{position:relative}
.hero>.hero-carousel,.hero>.hero-inner,.hero>.hero-cinematic,.asset-universe{opacity:1;filter:none;clip-path:none;transform:none}
.strategy-story{padding-top:76px}
}
/* Five equal foundation capabilities, including security and governance. */
.foundation-feature-strip{grid-template-columns:repeat(5,1fr)}
.foundation-feature-strip article{grid-template-columns:54px 1fr;gap:14px;padding:24px 16px}
.foundation-feature-strip .foundation-feature-icon{width:54px;height:54px}.foundation-feature-strip .foundation-feature-icon svg{width:32px;height:32px}
.foundation-feature-strip article::after{display:none}
.foundation-visual.is-visible .foundation-feature-strip article:nth-child(5){transition-delay:.4s}
@media(max-width:920px){
.foundation-feature-strip{grid-template-columns:1fr 1fr}
.foundation-feature-strip article:first-child{border-radius:18px 0 0 0}
.foundation-feature-strip article:nth-child(2){border-radius:0 18px 0 0}
.foundation-feature-strip article:nth-child(3),.foundation-feature-strip article:nth-child(4){border-radius:0;border-top:1px solid rgba(255,255,255,.08)}
.foundation-feature-strip article:nth-child(3),.foundation-feature-strip article:nth-child(5){border-left:0}
.foundation-feature-strip article:nth-child(5){grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 18px 18px}
}
@media(max-width:520px){
.foundation-feature-strip{grid-template-columns:1fr}
.foundation-feature-strip article:nth-child(5){grid-column:auto}
}
/* Keep post-story content above the sticky opening frame. */
.outcome-dock,#pathways,.footer{position:relative;z-index:3}
.footer{background:var(--bg);color:var(--text-2)}
.footer-ack,.footer-copy,.footer-links,.footer-flags{position:relative;z-index:1}
/* Assemble the open ecosystem device by device from the existing topology artwork. */
.ecosystem-product-visual .ecosystem-product-base{position:relative;z-index:1;opacity:.035}
.ecosystem-product-visual.is-visible .ecosystem-product-base{animation:ecosystemResolve .9s ease 3.72s forwards}
.ecosystem-network-reveal,.ecosystem-device-layer{position:absolute;inset:0;background:url("assets/Edgeproduct-dark-v1.png") center/100% 100% no-repeat;pointer-events:none}
.ecosystem-network-reveal{z-index:2;opacity:0;clip-path:circle(13% at 50% 49%)}
.ecosystem-product-visual.is-visible .ecosystem-network-reveal{animation:ecosystemNetworkConnect 4.1s cubic-bezier(.18,.76,.22,1) .38s forwards}
.ecosystem-device-layer{z-index:4;opacity:0;transform:scale(.965);filter:saturate(.72) brightness(1.025);will-change:opacity,transform,filter}
.ecosystem-product-visual.is-visible .ecosystem-device-layer{animation:ecosystemDeviceConnect .78s cubic-bezier(.18,.76,.22,1) var(--device-delay,0s) forwards}
.ecosystem-core-layer{--device-delay:.12s;clip-path:inset(34% 31% 34% 31%)}
.ecosystem-solar-layer{--device-delay:.78s;clip-path:inset(3% 63% 66% 14%)}
.ecosystem-bess-layer{--device-delay:1.02s;clip-path:inset(3% 38% 66% 39%)}
.ecosystem-pcs-layer{--device-delay:1.26s;clip-path:inset(3% 10% 66% 65%)}
.ecosystem-scada-layer{--device-delay:1.68s;clip-path:inset(30% 72% 38% 0)}
.ecosystem-bms-layer{--device-delay:1.92s;clip-path:inset(31% 0 37% 76%)}
.ecosystem-meter-layer{--device-delay:2.42s;clip-path:inset(59% 75% 4% 0)}
.ecosystem-ev-layer{--device-delay:2.62s;clip-path:inset(59% 55% 4% 20%)}
.ecosystem-heat-layer{--device-delay:2.82s;clip-path:inset(59% 37% 4% 39%)}
.ecosystem-load-layer{--device-delay:3.02s;clip-path:inset(58% 16% 4% 60%)}
.ecosystem-sensor-layer{--device-delay:3.22s;clip-path:inset(58% 0 4% 80%)}
.ecosystem-product-visual.is-visible .ecosystem-core-layer{animation-name:ecosystemCoreConnect}
.ecosystem-product-visual.is-visible .ecosystem-product-scan{animation-delay:4.85s}
@keyframes ecosystemDeviceConnect{0%{opacity:0;transform:scale(.965) translateY(10px);filter:saturate(.55) brightness(1.06) blur(4px)}55%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes ecosystemCoreConnect{0%{opacity:0;transform:scale(.82);filter:brightness(1.18) blur(5px)}62%{opacity:1;filter:brightness(1.08) drop-shadow(0 0 20px rgba(57,196,158,.32))}100%{opacity:1;transform:none;filter:none}}
@keyframes ecosystemNetworkConnect{0%{opacity:0;clip-path:circle(13% at 50% 49%)}18%{opacity:.24}72%{opacity:.46}88%{opacity:.34;clip-path:circle(76% at 50% 49%)}100%{opacity:0;clip-path:circle(76% at 50% 49%)}}
@keyframes ecosystemResolve{from{opacity:.035}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ecosystem-product-visual .ecosystem-product-base{opacity:1;animation:none}.ecosystem-network-reveal,.ecosystem-device-layer{display:none}.ecosystem-product-visual.is-visible .ecosystem-product-scan{animation:none}}
/* Explicit connection sequence: device lands first, then its route draws from RenewAI. */
.ecosystem-network-reveal{
z-index:3;
display:block;
width:100%;
height:100%;
opacity:1;
clip-path:none;
background:none;
overflow:visible;
}
.ecosystem-product-visual.is-visible .ecosystem-network-reveal{animation:none!important}
.ecosystem-network-reveal path{
fill:none;
stroke:#2daf8c;
stroke-width:1.35;
stroke-linecap:round;
stroke-dasharray:1;
stroke-dashoffset:1;
vector-effect:non-scaling-stroke;
filter:drop-shadow(0 0 3px rgba(45,175,140,.24));
}
.ecosystem-network-reveal circle{
fill:#8ef0d4;
stroke:rgba(255,255,255,.92);
stroke-width:1.2;
opacity:0;
transform-box:fill-box;
transform-origin:center;
vector-effect:non-scaling-stroke;
}
.ecosystem-product-visual.is-visible .ecosystem-network-reveal path{animation:ecosystemLineDraw .92s cubic-bezier(.22,.72,.22,1) var(--line-delay) forwards}
.ecosystem-product-visual.is-visible .ecosystem-network-reveal circle{animation:ecosystemEndpoint .5s ease calc(var(--line-delay) + .72s) forwards}
.ecosystem-product-visual.is-visible .ecosystem-product-base{animation:ecosystemResolve .8s ease 4.72s forwards}
.ecosystem-product-visual.is-visible .ecosystem-product-scan{animation-delay:5.55s}
@keyframes ecosystemLineDraw{to{stroke-dashoffset:0}}
@keyframes ecosystemEndpoint{0%{opacity:0;transform:scale(.25)}55%{opacity:1;transform:scale(1.65)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ecosystem-network-reveal{display:none}.ecosystem-network-reveal path,.ecosystem-network-reveal circle{animation:none}}
/* Quantum particle field for the RenewAI Intelligence Engine. */
.ai-engine{isolation:isolate;background:#17211f}
.ai-engine-bg{
opacity:1;
background:
radial-gradient(ellipse at 17% 28%,rgba(72,196,164,.13),transparent 31%),
radial-gradient(ellipse at 82% 62%,rgba(80,155,142,.1),transparent 34%),
linear-gradient(145deg,#1b2624 0%,#121b1a 48%,#192321 100%);
}
.ai-engine-bg img{display:none}
.ai-engine-bg::before{
content:"";
position:absolute;
inset:-12%;
background-image:
radial-gradient(circle,rgba(164,239,219,.72) 0 1px,transparent 1.7px),
radial-gradient(circle,rgba(99,197,171,.38) 0 1px,transparent 1.8px),
radial-gradient(circle,rgba(255,255,255,.2) 0 .7px,transparent 1.4px);
background-size:137px 151px,211px 193px,83px 97px;
background-position:13px 27px,61px 14px,0 0;
opacity:.5;
mask-image:radial-gradient(ellipse at center,#000 8%,rgba(0,0,0,.82) 48%,transparent 88%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 8%,rgba(0,0,0,.82) 48%,transparent 88%);
animation:quantumParticleDrift 24s linear infinite alternate;
}
.ai-engine-bg::after{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(180deg,rgba(23,33,31,.2),rgba(23,33,31,.08) 42%,rgba(23,33,31,.7)),
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
background-size:auto,180px 180px;
background-blend-mode:normal,soft-light;
opacity:.17;
animation:quantumNoiseShift .32s steps(2) infinite;
}
.ai-engine::before{
content:"";
position:absolute;
z-index:0;
left:50%;
top:52%;
width:min(1120px,84vw);
aspect-ratio:1.75;
border-radius:50%;
background:repeating-radial-gradient(ellipse at center,transparent 0 68px,rgba(105,221,190,.075) 69px 70px,transparent 71px 135px);
opacity:.78;
transform:translate(-50%,-50%) rotate(-7deg);
animation:quantumFieldBreathe 9s ease-in-out infinite;
pointer-events:none;
}
.ai-engine::after{
content:"";
position:absolute;
z-index:0;
inset:0;
background:linear-gradient(112deg,transparent 18%,rgba(107,223,192,.035) 49%,transparent 77%);
transform:translateX(-36%);
animation:quantumEnergyDrift 13s ease-in-out infinite alternate;
pointer-events:none;
}
.ai-engine-shell{z-index:2}
@keyframes quantumParticleDrift{to{background-position:74px -41px,-38px 83px,47px -31px;transform:rotate(.35deg) scale(1.015)}}
@keyframes quantumNoiseShift{0%{transform:translate(0,0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(.5%,1%)}100%{transform:translate(0,0)}}
@keyframes quantumFieldBreathe{0%,100%{opacity:.48;transform:translate(-50%,-50%) rotate(-7deg) scale(.96)}50%{opacity:.84;transform:translate(-50%,-50%) rotate(-5.5deg) scale(1.035)}}
@keyframes quantumEnergyDrift{to{transform:translateX(34%)}}
@media(prefers-reduced-motion:reduce){.ai-engine-bg::before,.ai-engine-bg::after,.ai-engine::before,.ai-engine::after{animation:none}}
/* Intelligence Engine startup sequence. */
.ai-engine .ai-engine-bg{opacity:0;transform:scale(1.12);filter:blur(12px);transition:opacity 1.15s ease,transform 2s cubic-bezier(.18,.76,.22,1),filter 1.35s ease}
.ai-engine.is-engine-visible .ai-engine-bg{opacity:1;transform:none;filter:none}
.ai-engine .ai-engine-head{opacity:0;transform:translateY(44px);filter:blur(11px);transition:opacity .8s ease .15s,transform 1s cubic-bezier(.18,.76,.22,1) .15s,filter .9s ease .15s}
.ai-engine.is-engine-visible .ai-engine-head{opacity:1;transform:none;filter:none}
.ai-engine .ai-engine-console{opacity:0;clip-path:inset(18% 10% round 22px);transform:translateY(64px) scale(.94);transition:opacity .78s ease .46s,clip-path 1.18s cubic-bezier(.18,.76,.22,1) .46s,transform 1.18s cubic-bezier(.18,.76,.22,1) .46s}
.ai-engine.is-engine-visible .ai-engine-console{opacity:1;clip-path:inset(0 round 0);transform:none}
.ai-engine .ai-engine-modes button{opacity:0;transform:translateX(-18px)}
.ai-engine.is-engine-visible .ai-engine-modes button{opacity:1;transform:none;transition:color .3s,background .3s,opacity .5s ease,transform .65s cubic-bezier(.18,.76,.22,1)}
.ai-engine.is-engine-visible .ai-engine-modes button:nth-child(1){transition-delay:0s,0s,.78s,.78s}.ai-engine.is-engine-visible .ai-engine-modes button:nth-child(2){transition-delay:0s,0s,.88s,.88s}.ai-engine.is-engine-visible .ai-engine-modes button:nth-child(3){transition-delay:0s,0s,.98s,.98s}.ai-engine.is-engine-visible .ai-engine-modes button:nth-child(4){transition-delay:0s,0s,1.08s,1.08s}.ai-engine.is-engine-visible .ai-engine-modes button:nth-child(5){transition-delay:0s,0s,1.18s,1.18s}
.ai-engine .ai-engine-stage{opacity:0;transform:translateX(28px)}
.ai-engine.is-engine-visible .ai-engine-stage{opacity:1;transform:none;transition:opacity .7s ease 1.02s,transform .85s cubic-bezier(.18,.76,.22,1) 1.02s}
.ai-engine.is-engine-visible .ai-engine-stage.is-changing{opacity:.25;transform:translateY(7px);transition:opacity .22s ease,transform .22s ease}
.ai-engine .ai-trust{opacity:0;transform:translateY(22px)}
.ai-engine.is-engine-visible .ai-trust{opacity:1;transform:none;transition:opacity .7s ease 1.28s,transform .8s ease 1.28s}
@media(prefers-reduced-motion:reduce){.ai-engine .ai-engine-bg,.ai-engine .ai-engine-head,.ai-engine .ai-engine-console,.ai-engine .ai-engine-modes button,.ai-engine .ai-engine-stage,.ai-engine .ai-trust{opacity:1;clip-path:none;transform:none;filter:none;transition:none}}
.ai-engine-status{display:none}
.ai-engine-body{align-items:start}
.ai-engine-body .ai-engine-reading{min-height:315px;padding-top:22px;box-sizing:border-box}
@media(max-width:980px){.ai-engine-body .ai-engine-reading{min-height:0;padding-top:0}}
/* Make the Intelligence Engine mode switcher visibly interactive. */
.ai-mode-hint{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.38);font:600 8px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase}
.ai-mode-hint i{color:#8fd7c4;font-size:13px;font-style:normal;animation:aiModeHint 2.2s ease-in-out infinite}
.ai-engine-modes button::after{content:"→";position:absolute;right:24px;top:50%;color:#8fd7c4;font-size:15px;font-weight:400;opacity:.28;transform:translate(-5px,-50%);transition:opacity .3s ease,transform .3s ease}
.ai-engine-modes button.active::after{content:"";width:5px;height:5px;border-radius:50%;background:#8fd7c4;box-shadow:0 0 12px rgba(143,215,196,.65);opacity:1;transform:translateY(-50%)}
.ai-engine-modes button:hover::after{opacity:1;transform:translate(0,-50%)}
.ai-engine-modes button:not(.active):hover{padding-left:32px;background:linear-gradient(90deg,rgba(113,207,182,.07),transparent)}
.ai-engine.is-engine-visible .ai-engine-modes button:not(.active){animation:aiModeWake .7s ease var(--mode-wake,1.5s) both}
.ai-engine-modes button:nth-of-type(1){--mode-wake:1.45s}.ai-engine-modes button:nth-of-type(2){--mode-wake:1.58s}.ai-engine-modes button:nth-of-type(3){--mode-wake:1.71s}.ai-engine-modes button:nth-of-type(4){--mode-wake:1.84s}.ai-engine-modes button:nth-of-type(5){--mode-wake:1.97s}
@keyframes aiModeHint{50%{opacity:.45;transform:translate(2px,2px)}}
@keyframes aiModeWake{0%,100%{box-shadow:none}48%{box-shadow:inset 3px 0 0 rgba(143,215,196,.45);background:linear-gradient(90deg,rgba(113,207,182,.09),transparent)}}
@media(max-width:760px){.ai-mode-hint{position:sticky;left:0;flex:0 0 150px;min-height:80px;padding:0 17px;background:rgba(8,11,11,.96);line-height:1.4}.ai-engine-modes button::after{right:14px}.ai-engine-modes button.active::after{right:14px}}
@media(prefers-reduced-motion:reduce){.ai-mode-hint i,.ai-engine.is-engine-visible .ai-engine-modes button:not(.active){animation:none}}
/* Refine AI reading alignment. */
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>p{padding-left:0;border-left:0}
.ai-engine-stage[data-ai-view="forecast"] .ai-engine-reading>strong em{display:inline-block;margin-left:8px;transform:translateY(-.16em);vertical-align:baseline}
.ai-engine-stage[data-ai-view="forecast"] .ai-engine-reading>p{margin-top:30px}
/* Audience portfolio: four commercial buyers, composed as an asymmetric image field. */
.audience-portfolio{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:clamp(58px,7vw,94px);align-items:start}
.audience-segment{position:relative;min-height:440px;overflow:hidden;border-radius:24px;background:#101716;color:#fff;box-shadow:0 30px 70px -48px rgba(7,16,20,.5);opacity:0;transform:translateY(30px);clip-path:inset(6% round 24px);transition:opacity .75s ease,transform .95s cubic-bezier(.18,.76,.22,1),clip-path .95s cubic-bezier(.18,.76,.22,1)}
.audience-segment.is-visible{opacity:1;transform:none;clip-path:inset(0 round 24px)}
.audience-segment img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.055);filter:saturate(.78) contrast(1.04);transition:transform 7s cubic-bezier(.18,.76,.22,1)}.audience-segment.is-visible img{transform:scale(1)}
.audience-segment::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(5,10,11,.18) 52%,rgba(5,10,11,.9) 100%)}
.audience-segment>div{position:absolute;z-index:2;left:clamp(24px,3vw,46px);right:clamp(24px,3vw,46px);bottom:clamp(28px,3.4vw,50px)}
.audience-segment h3{max-width:620px;margin:0;color:#fff;font-size:clamp(27px,3vw,46px);font-weight:530;line-height:1;letter-spacing:-.045em;text-shadow:0 3px 24px rgba(0,0,0,.38)}
.audience-segment p{max-width:610px;margin:17px 0 0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.audience-owners{grid-column:span 7;min-height:570px}.audience-epc{grid-column:span 5;min-height:445px;margin-top:92px}.audience-services{grid-column:span 5;min-height:445px}.audience-aggregators{grid-column:span 7;min-height:570px;margin-top:42px}
.audience-epc>div,.audience-aggregators>div{text-align:right}.audience-epc h3,.audience-epc p,.audience-aggregators h3,.audience-aggregators p{margin-left:auto}
.audience-boundary{max-width:920px;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line);color:var(--text-2);font-size:12px;line-height:1.65;text-align:center}
@media(max-width:820px){.audience-portfolio{grid-template-columns:1fr;gap:16px;margin-top:52px}.audience-segment,.audience-owners,.audience-epc,.audience-services,.audience-aggregators{grid-column:1;min-height:58svh;margin-top:0;border-radius:18px}.audience-segment>div,.audience-epc>div,.audience-aggregators>div{text-align:left}.audience-epc h3,.audience-epc p,.audience-aggregators h3,.audience-aggregators p{margin-left:0}.audience-boundary{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.audience-segment,.audience-segment img{opacity:1;clip-path:none;transform:none;transition:none}}
/* One shared partner image, with the four audiences expressed editorially below. */
.audience-unified{margin-top:clamp(58px,7vw,94px);opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform 1s cubic-bezier(.18,.76,.22,1)}
.audience-unified.is-visible{opacity:1;transform:none}
.audience-unified-media{position:relative;border-radius:0 0 26px 26px;overflow:hidden;clip-path:inset(7% 5% 0 round 0 0 26px 26px);box-shadow:0 36px 78px -50px rgba(7,16,20,.48);transition:clip-path 1.1s cubic-bezier(.18,.76,.22,1)}
.audience-unified.is-visible .audience-unified-media{clip-path:inset(0 round 0 0 26px 26px)}
.audience-unified-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(7,14,15,.18));pointer-events:none}
.audience-unified-media img{display:block;width:100%;height:auto;transform:scale(1.045);filter:saturate(.88) contrast(1.02);transition:transform 7s cubic-bezier(.18,.76,.22,1)}.audience-unified.is-visible .audience-unified-media img{transform:scale(1)}
.audience-groups{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;background:rgba(255,255,255,.42);overflow:hidden}
.audience-groups>div{position:relative;min-height:150px;padding:25px clamp(18px,2.2vw,30px) 27px;opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .7s cubic-bezier(.18,.76,.22,1),background .35s ease}.audience-groups>div+div{border-left:1px solid var(--line)}
.audience-groups>div::after{content:"";position:absolute;left:clamp(18px,2.2vw,30px);right:clamp(18px,2.2vw,30px);bottom:0;height:2px;background:linear-gradient(90deg,#34c89d,#54a8ff);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.18,.76,.22,1)}
.audience-groups>div:hover{background:rgba(255,255,255,.72)}.audience-groups>div:hover::after{transform:scaleX(1)}
.audience-unified.is-visible .audience-groups>div{opacity:1;transform:none}.audience-unified.is-visible .audience-groups>div:nth-child(1){transition-delay:.35s}.audience-unified.is-visible .audience-groups>div:nth-child(2){transition-delay:.48s}.audience-unified.is-visible .audience-groups>div:nth-child(3){transition-delay:.61s}.audience-unified.is-visible .audience-groups>div:nth-child(4){transition-delay:.74s}
.audience-groups h3{margin:0;color:var(--ink);font-size:17px;font-weight:620;line-height:1.25;letter-spacing:-.025em}.audience-groups p{margin:12px 0 0;color:var(--text-2);font-size:12px;line-height:1.6}
@media(max-width:820px){.audience-unified{margin-top:52px}.audience-unified-media{border-radius:0 0 18px 18px}.audience-groups{grid-template-columns:1fr 1fr;border-radius:18px 18px 0 0}.audience-groups>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.audience-groups>div:nth-child(4){border-top:1px solid var(--line)}}
@media(max-width:520px){.audience-groups{grid-template-columns:1fr}.audience-groups>div{min-height:0}.audience-groups>div+div{border-left:0;border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){.audience-unified,.audience-unified-media,.audience-unified-media img,.audience-groups>div{opacity:1;clip-path:none;transform:none;transition:none}}
/* Homepage chapter-title system: match the hero's scale and typography. */
.foundation-bridge .strategy-foundation-head h2,
.open-ecosystem .section-title,
.ai-engine-head h2,
#pathways .section-title{
font-family:var(--font-sans);
font-size:clamp(37px,4.5vw,66px);
font-weight:580;
line-height:1;
letter-spacing:-.014em;
}
@media(max-width:620px){
.foundation-bridge .strategy-foundation-head h2,
.open-ecosystem .section-title,
.ai-engine-head h2,
#pathways .section-title{font-size:34px;line-height:1.04}
}
@media(max-width:420px){
.foundation-bridge .strategy-foundation-head h2,
.open-ecosystem .section-title,
.ai-engine-head h2,
#pathways .section-title{font-size:32px}
}
/* Mobile business journey: four consecutive full-screen scenes, without a mosaic. */
@media(max-width:820px){
.business-story-grid{position:relative!important;display:block!important;height:400svh!important;padding:0!important;background:var(--bg);overflow:visible}
.business-story-stage{position:sticky!important;top:0;display:block!important;height:100svh;overflow:hidden;background:var(--bg);isolation:isolate}
.business-story-stage::after{display:none}
.business-story-grid .business-story,
.business-story-grid .station-story,
.business-story-grid .distributed-story,
.business-story-grid .operations-story,
.business-story-grid .portfolio-story{
position:absolute;
left:var(--scene-left,0%);
top:var(--scene-top,0%);
right:auto;
bottom:auto;
z-index:var(--scene-z,1);
width:var(--scene-width,100%);
height:var(--scene-height,100%);
min-height:0;
margin:0;
border-radius:0!important;
opacity:var(--scene-opacity,0);
clip-path:inset(0)!important;
transform:none;
transition:none;
pointer-events:none;
visibility:visible;
will-change:left,top,width,height,opacity;
}
.business-story-grid .station-story{--scene-opacity:1}
.business-story-grid .business-story .strategy-panel-bg{inset:-4%;transform:none!important}
.business-story-grid .business-story .strategy-panel-bg img{transform:translate3d(var(--image-x,0),var(--image-y,0),0) scale(var(--image-scale,1.07));transition:none;will-change:transform}
.business-story-grid .business-story .strategy-panel-content,
.business-story-grid .business-story .align-right{position:relative;width:calc(100% - 36px);margin:0 auto;padding-bottom:58px;text-align:left;opacity:var(--copy-opacity,0);transform:translate3d(var(--copy-x,0),var(--copy-y,24px),0);transition:none;will-change:opacity,transform}
.business-story-grid .business-story .strategy-panel-content h2{font-size:clamp(34px,10vw,48px);line-height:.98}
.business-story-grid .business-story .strategy-panel-content>p{font-size:14px;line-height:1.5}
.business-story-grid .business-story .story-capabilities{font-size:7px;line-height:1.5}
.business-story-grid .business-story.is-journey-active{pointer-events:auto}
.business-story-grid .business-story:not(.is-journey-relevant){visibility:hidden}
}
@media(prefers-reduced-motion:reduce) and (max-width:820px){
.business-story-grid{display:grid!important;height:auto!important;padding:64px 16px!important;gap:16px}
.business-story-stage{position:static!important;display:contents!important;height:auto;overflow:visible}
.business-story-stage::after{display:none}
.business-story-grid .business-story,
.business-story-grid .station-story,
.business-story-grid .distributed-story,
.business-story-grid .operations-story,
.business-story-grid .portfolio-story{position:relative;inset:auto;width:auto;height:62svh;opacity:1;clip-path:none;transform:none;pointer-events:auto;visibility:visible}
.business-story-grid .business-story .strategy-panel-content{opacity:1;transform:none}
}
/* Compact AI workflows on phones: preserve the story without desktop-grid collisions. */
@media(max-width:560px){
.ai-engine-stage[data-ai-view="operations"],
.ai-engine-stage[data-ai-view="assistant"]{padding-left:14px;padding-right:14px}
.ai-engine-stage[data-ai-view="operations"] .ai-engine-body,
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-body{gap:22px;margin:22px 0}
.ai-engine-stage[data-ai-view="operations"] .ai-engine-reading,
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading{min-height:0;padding-top:0;margin:0}
.ai-engine-stage[data-ai-view="operations"] .ai-engine-reading>strong{font-size:58px}
.ai-engine-stage[data-ai-view="operations"] .ai-engine-reading>p,
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>p{margin-top:18px;font-size:13px;line-height:1.55}
.ai-engine-stage[data-ai-view="operations"] .ai-chart-content{height:auto;min-height:0}
.operations-flow{height:auto;display:grid;grid-template-columns:1fr;gap:0}
.operations-flow .om-node{display:grid;height:auto!important;min-height:108px;padding:14px 14px;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;text-align:left}
.operations-flow .om-node small{grid-column:2;min-height:0;margin-bottom:5px;font-size:7px}
.operations-flow .om-icon{grid-column:1;grid-row:1/4;width:36px;height:36px;margin:1px 0 0}
.operations-flow .om-node>strong{grid-column:2;margin:0 0 5px;font-size:15px;line-height:1.2}
.operations-flow .alarms>strong{font-size:23px}
.operations-flow .om-node>p,
.operations-flow .om-node>em{grid-column:2;margin:0;font-size:8px;line-height:1.4}
.operations-flow .om-node>em{margin-top:3px}
.operations-flow .work-order>p{margin-top:2px;font-size:11px}
.operations-flow .om-confidence{width:max-content;margin:5px 0 0!important;padding:4px 8px}
.operations-flow .om-tags,.operations-flow ul{display:none}
.operations-flow>i{width:1px;height:18px;margin:0 0 0 31px;background:rgba(143,215,196,.3);transform:scaleY(0);animation-name:mobileFlowLine}
.operations-flow>i::before{width:14px;height:14px}
.operations-flow>i::after{right:-2px;top:auto;bottom:1px;transform:rotate(135deg)}
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>strong{font-size:30px;line-height:1.06}
.ai-engine-stage[data-ai-view="assistant"] .ai-engine-reading>p{padding-left:12px}
.assistant-flow{gap:9px}
.assistant-question,.assistant-answer{grid-template-columns:30px minmax(0,1fr);gap:10px;min-height:0;padding:14px}
.assistant-avatar{width:29px;height:29px;font-size:14px}
.assistant-flow time{display:none}
.assistant-flow p,.assistant-answer p{font-size:11px;line-height:1.5}
.assistant-sources{grid-template-columns:1fr;gap:7px}
.assistant-sources span,.assistant-sources span:last-child{grid-column:auto;min-height:0;padding:13px 36px 13px 44px}
.assistant-sources small{min-height:0;font-size:7px}
.assistant-sources b{margin-top:5px;font-size:13px}
.assistant-sources em{margin-top:4px;font-size:7px}
.assistant-sources .source-icon{top:14px;font-size:18px}
@keyframes mobileFlowLine{to{transform:scaleY(1)}}
}
/* RenewAI Intelligence Canvas: one signal, five operational views. */
.ai-engine{
--ai-accent:#91dfcb;
--ai-accent-soft:rgba(145,223,203,.2);
padding-bottom:clamp(76px,8vw,118px);
}
.ai-engine-console{
position:relative;
isolation:isolate;
display:block;
min-height:0;
margin-top:clamp(52px,6vw,76px);
border:0;
background:transparent;
backdrop-filter:none;
}
.ai-engine-modes{
position:relative;
z-index:4;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
border:0;
border-bottom:1px solid rgba(199,235,225,.2);
}
.ai-engine-modes::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:18%;
height:1px;
background:linear-gradient(90deg,transparent,#b6f3e3 42%,transparent);
box-shadow:0 0 14px rgba(145,223,203,.75);
animation:aiRailScan 6.8s cubic-bezier(.45,0,.55,1) infinite;
pointer-events:none;
}
.ai-engine-modes button{
min-width:0;
min-height:98px;
padding:22px clamp(13px,2vw,27px) 25px;
border:0;
background:transparent;
transition:color .35s ease,transform .5s cubic-bezier(.18,.76,.22,1),opacity .35s ease;
}
.ai-engine-modes button+button{border-left:1px solid rgba(199,235,225,.09)}
.ai-engine-modes button::before{
left:clamp(13px,2vw,27px);
right:clamp(13px,2vw,27px);
top:auto;
bottom:-1px;
width:auto;
height:2px;
background:linear-gradient(90deg,var(--ai-accent),rgba(145,223,203,.12));
transform:scaleX(0);
transform-origin:left;
}
.ai-engine-modes button::after{display:none}
.ai-engine-modes button:hover,
.ai-engine-modes button:not(.active):hover{padding-left:clamp(13px,2vw,27px);background:transparent;color:rgba(255,255,255,.84);transform:translateY(-2px)}
.ai-engine-modes button.active{background:transparent;color:#fff;transform:translateY(-3px)}
.ai-engine-modes button.active::before{transform:scaleX(1)}
.ai-engine-modes span{font-size:clamp(14px,1.25vw,17px);font-weight:560}
.ai-engine-modes small{max-width:165px;font-size:9px;line-height:1.35;letter-spacing:.015em;opacity:.52}
.ai-engine-stage{
--scene-accent:var(--ai-accent);
position:relative;
min-height:570px;
padding:clamp(34px,4.1vw,55px) clamp(28px,4.7vw,64px) 38px;
overflow:hidden;
border-bottom:1px solid rgba(199,235,225,.15);
background:
linear-gradient(rgba(153,220,202,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(153,220,202,.028) 1px,transparent 1px),
radial-gradient(circle at 67% 47%,rgba(89,190,162,.1),transparent 39%);
background-size:100% 92px,112px 100%,auto;
}
.ai-engine-stage[data-ai-view="health"],
.ai-engine-stage[data-ai-view="operations"]{--scene-accent:#f1b36e}
.ai-engine-stage::before{
content:attr(data-ai-label);
position:absolute;
z-index:0;
top:22px;
right:34px;
color:rgba(222,249,241,.035);
font-size:clamp(68px,8vw,118px);
font-weight:600;
line-height:.85;
letter-spacing:-.065em;
white-space:nowrap;
pointer-events:none;
}
.ai-engine-stage::after{
content:"";
position:absolute;
z-index:0;
inset:0;
background:linear-gradient(90deg,rgba(17,26,24,.76) 0%,transparent 34%,transparent 84%,rgba(17,26,24,.2));
pointer-events:none;
}
.ai-engine-body,.ai-engine-evidence{position:relative;z-index:2}
.ai-engine-body{min-height:390px;margin:16px 0 18px}
.ai-engine-body .ai-engine-reading{min-height:0;padding-top:clamp(38px,5vw,72px)}
.ai-engine-reading>strong{text-shadow:0 12px 38px rgba(0,0,0,.2)}
.ai-engine-kicker{color:rgba(210,235,228,.58);letter-spacing:.01em}
.ai-engine-evidence{border-top-color:rgba(199,235,225,.17)}
.ai-engine-evidence>span{position:relative;padding-top:20px}
.ai-engine-evidence>span::before{
content:"";
position:absolute;
top:-1px;
left:0;
width:34px;
height:1px;
background:var(--scene-accent);
box-shadow:0 0 9px var(--scene-accent);
}
.ai-engine-stage.is-scene-entering .ai-engine-reading>*{animation:aiCanvasCopyIn .62s cubic-bezier(.18,.76,.22,1) both}
.ai-engine-stage.is-scene-entering .ai-engine-reading>strong{animation-delay:.04s}
.ai-engine-stage.is-scene-entering .ai-engine-reading>p{animation-delay:.1s}
.ai-engine-stage.is-scene-entering .ai-engine-evidence>span{animation:aiCanvasEvidenceIn .55s cubic-bezier(.18,.76,.22,1) both}
.ai-engine-stage.is-scene-entering .ai-engine-evidence>span:nth-child(2){animation-delay:.07s}
.ai-engine-stage.is-scene-entering .ai-engine-evidence>span:nth-child(3){animation-delay:.14s}
@keyframes aiRailScan{0%{transform:translateX(-110%);opacity:0}12%{opacity:1}76%{opacity:.75}100%{transform:translateX(555%);opacity:0}}
@keyframes aiCanvasCopyIn{from{opacity:0;transform:translate3d(-18px,8px,0)}to{opacity:1;transform:none}}
@keyframes aiCanvasEvidenceIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:980px){
.ai-engine-body{min-height:0;margin:26px 0 22px}
.ai-engine-body .ai-engine-reading{padding-top:18px}
}
@media(max-width:760px){
.ai-engine-console{margin-top:44px}
.ai-engine-modes{display:flex;border-bottom-color:rgba(199,235,225,.17)}
.ai-engine-modes::after{display:none}
.ai-engine-modes button{min-width:142px;min-height:76px;padding:15px 16px 18px;border-right:1px solid rgba(199,235,225,.08)}
.ai-engine-modes button+button{border-left:0}
.ai-engine-modes button::before{left:16px;right:16px}
.ai-engine-modes button:hover,.ai-engine-modes button:not(.active):hover{padding-left:16px;transform:none}
.ai-engine-modes button.active{transform:none}
.ai-engine-stage{min-height:0;padding:26px 18px 28px;background-size:100% 78px,84px 100%,auto}
.ai-engine-stage::before{top:28px;right:16px;font-size:54px;opacity:.65}
.ai-engine-body .ai-engine-reading{padding-top:10px}
.ai-engine-evidence>span::before{width:24px}
}
@media(prefers-reduced-motion:reduce){
.ai-engine-modes::after,.ai-engine-stage.is-scene-entering .ai-engine-reading>*,.ai-engine-stage.is-scene-entering .ai-engine-evidence>span{animation:none}
}
/* Edge capability bus: connected operating nodes, not four cards. */
.ecosystem-capabilities{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin-top:34px;
padding-top:31px;
overflow:visible;
background:transparent;
box-shadow:none;
}
.ecosystem-capabilities::before{
content:"";
position:absolute;
left:calc(12.5% + 5px);
right:calc(12.5% + 5px);
top:15px;
height:1px;
background:rgba(20,68,57,.16);
}
.ecosystem-capabilities>div,
.ecosystem-capabilities>div:nth-child(2),
.ecosystem-capabilities>div:nth-child(4){
position:relative;
min-height:118px;
padding:25px clamp(18px,2.4vw,34px) 18px;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
opacity:1;
transform:none;
}
.ecosystem-capabilities>div+div{border:0}
.ecosystem-capabilities>div::before{
content:"";
position:absolute;
z-index:3;
left:50%;
top:-21px;
width:11px;
height:11px;
border:2px solid #eef1ed;
border-radius:50%;
background:#a8b3af;
box-shadow:0 0 0 1px rgba(14,63,52,.18),0 3px 9px rgba(8,35,29,.12);
opacity:1;
transform:translateX(-50%) scale(.72);
transition:none;
}
.ecosystem-capabilities>div::after{
content:"";
position:absolute;
z-index:2;
left:50%;
right:-50%;
top:-16px;
bottom:auto;
height:2px;
background:linear-gradient(90deg,#46c7a4,rgba(70,199,164,.24));
transform:scaleX(0);
transform-origin:left;
transition:none;
}
.ecosystem-capabilities>div:last-child::after{display:none}
.ecosystem-capabilities strong,.ecosystem-capabilities span{
opacity:0;
transform:translateY(12px);
}
.ecosystem-capabilities.is-visible>div::before{height:11px;animation:edgeNodeLight .7s cubic-bezier(.18,.76,.22,1) var(--edge-delay,0s) forwards}
.ecosystem-capabilities.is-visible>div::after{animation:edgeBusConnect .72s cubic-bezier(.18,.76,.22,1) calc(var(--edge-delay,0s) + .42s) forwards}
.ecosystem-capabilities.is-visible strong,.ecosystem-capabilities.is-visible span{animation:edgeCopyReveal .65s ease calc(var(--edge-delay,0s) + .28s) forwards}
.ecosystem-capabilities>div:nth-child(1){--edge-delay:.08s}.ecosystem-capabilities>div:nth-child(2){--edge-delay:.48s}.ecosystem-capabilities>div:nth-child(3){--edge-delay:.88s}.ecosystem-capabilities>div:nth-child(4){--edge-delay:1.28s}
.ecosystem-capabilities strong{color:#102b25;font-size:18px;text-align:center}
.ecosystem-capabilities span{max-width:230px;margin:10px auto 0;color:#6a7773;font-size:11px;line-height:1.6;text-align:center}
.ecosystem-capabilities>div:hover{border:0;background:transparent;box-shadow:none}
.ecosystem-capabilities>div:hover::before{box-shadow:0 0 0 1px rgba(36,154,123,.32),0 0 24px rgba(54,201,162,.38)}
@keyframes edgeNodeLight{0%{background:#a8b3af;transform:translateX(-50%) scale(.72);box-shadow:0 0 0 1px rgba(14,63,52,.16)}58%{background:#baffec;transform:translateX(-50%) scale(1.45);box-shadow:0 0 0 5px rgba(61,201,163,.1),0 0 26px rgba(54,201,162,.58)}100%{background:#58d2b0;transform:translateX(-50%) scale(1);box-shadow:0 0 0 3px rgba(61,201,163,.09),0 0 16px rgba(54,201,162,.42)}}
@keyframes edgeBusConnect{to{transform:scaleX(1)}}
@keyframes edgeCopyReveal{to{opacity:1;transform:none}}
@media(max-width:820px){
.ecosystem-capabilities{grid-template-columns:1fr 1fr;gap:24px 0;padding-top:31px}
.ecosystem-capabilities::before{display:none}
.ecosystem-capabilities>div:nth-child(3),.ecosystem-capabilities>div:nth-child(4){border:0}
.ecosystem-capabilities>div:nth-child(2)::after{display:none}
.ecosystem-capabilities>div:nth-child(3)::after{display:block}
}
@media(max-width:480px){
.ecosystem-capabilities{grid-template-columns:1fr;gap:18px;padding:0 0 0 28px}
.ecosystem-capabilities>div{min-height:96px;padding:14px 10px 14px 20px}
.ecosystem-capabilities>div::before{left:-18px;top:20px;transform:scale(.72)}
.ecosystem-capabilities>div::after{left:-13px;right:auto;top:31px;width:2px;height:calc(100% + 18px);transform:scaleY(0);transform-origin:top}
.ecosystem-capabilities>div:last-child::after{display:none}
.ecosystem-capabilities strong,.ecosystem-capabilities span{max-width:none;margin-left:0;text-align:left}
@keyframes edgeBusConnect{to{transform:scaleY(1)}}
@keyframes edgeNodeLight{0%{background:#a8b3af;transform:scale(.72)}58%{background:#baffec;transform:scale(1.45);box-shadow:0 0 0 5px rgba(61,201,163,.1),0 0 26px rgba(54,201,162,.58)}100%{background:#58d2b0;transform:scale(1);box-shadow:0 0 0 3px rgba(61,201,163,.09),0 0 16px rgba(54,201,162,.42)}}
}
@media(prefers-reduced-motion:reduce){.ecosystem-capabilities>div::before{background:#58d2b0;opacity:1;transform:translateX(-50%)}.ecosystem-capabilities>div::after{transform:scaleX(1)}.ecosystem-capabilities strong,.ecosystem-capabilities span{opacity:1;transform:none;animation:none}}
/* Independent status lights — no process line between capabilities. */
.ecosystem-capabilities::before,.ecosystem-capabilities>div::after{display:none!important}
/* Industrial exploded view for RenewAI's four edge product modules. */
.edge-exploded{
position:relative;
margin-top:42px;
border-radius:24px;
overflow:hidden;
background:#050707;
box-shadow:0 38px 80px -48px rgba(3,10,9,.7);
opacity:0;
transform:translateY(30px);
transition:opacity .8s ease,transform 1s cubic-bezier(.18,.76,.22,1);
}
.edge-exploded.is-visible{opacity:1;transform:none}
.edge-exploded-media{position:relative;overflow:hidden}
.edge-exploded-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,rgba(3,6,6,.18) 68%,#050707 94%);pointer-events:none}
.edge-exploded-media img{display:block;width:100%;height:auto;transform:scale(1.035);filter:saturate(.86) contrast(1.04);transition:transform 6s cubic-bezier(.18,.76,.22,1)}
.edge-exploded.is-visible .edge-exploded-media img{transform:scale(1)}
.edge-exploded-labels{position:absolute;z-index:2;left:3%;right:3%;bottom:4.2%;display:grid;grid-template-columns:repeat(4,1fr);color:#fff}
.edge-exploded-labels>div{position:relative;padding:26px clamp(12px,2vw,30px) 0;opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .72s cubic-bezier(.18,.76,.22,1)}
.edge-exploded-labels>div+div{border-left:1px solid rgba(255,255,255,.1)}
.edge-exploded.is-visible .edge-exploded-labels>div{opacity:1;transform:none}.edge-exploded.is-visible .edge-exploded-labels>div:nth-child(1){transition-delay:.35s}.edge-exploded.is-visible .edge-exploded-labels>div:nth-child(2){transition-delay:.5s}.edge-exploded.is-visible .edge-exploded-labels>div:nth-child(3){transition-delay:.65s}.edge-exploded.is-visible .edge-exploded-labels>div:nth-child(4){transition-delay:.8s}
.edge-exploded-labels>div::before{content:"";position:absolute;left:clamp(12px,2vw,30px);top:0;width:22px;height:1px;background:#63d0b2;box-shadow:0 0 9px rgba(99,208,178,.32)}
.edge-exploded-labels strong{display:block;font-size:clamp(13px,1.3vw,18px);font-weight:580;line-height:1.2;letter-spacing:-.025em}.edge-exploded-labels span{display:block;margin-top:8px;color:#64cfb2;font:600 8px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.edge-exploded-labels small{display:block;max-width:230px;margin-top:10px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.5}
@media(max-width:820px){.edge-exploded{border-radius:18px}.edge-exploded-labels{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr 1fr;padding:0 18px 22px}.edge-exploded-labels>div{padding:26px 14px 18px}.edge-exploded-labels>div:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.08)}.edge-exploded-labels>div:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}}
@media(max-width:480px){.edge-exploded-labels{grid-template-columns:1fr}.edge-exploded-labels>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.08)}}
@media(prefers-reduced-motion:reduce){.edge-exploded,.edge-exploded-media img,.edge-exploded-labels>div{opacity:1;transform:none;transition:none}}
/* Request Demo */
.nav-demo-link{padding:9px 15px!important;border:1px solid rgba(7,16,20,.18);border-radius:999px}
body.has-hero .nav:not(.scrolled) .nav-demo-link,.request-demo-page .nav:not(.scrolled) .nav-demo-link{border-color:rgba(255,255,255,.38)}
.demo-hero{position:relative;min-height:78svh;display:flex;align-items:flex-start;justify-content:center;padding:clamp(150px,17vh,210px) 28px 92px;overflow:hidden;background:linear-gradient(180deg,rgba(4,14,16,.18),rgba(4,13,15,.06) 48%,rgba(4,12,14,.34)),url("assets/requestDemo.png") center/cover no-repeat;color:#f4f8f6;text-align:center}
.demo-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(26,107,91,.12),transparent 45%);pointer-events:none}
.demo-particles{position:absolute;z-index:1;inset:-10%;opacity:.12;background-image:radial-gradient(circle,rgba(130,232,204,.72) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(88,180,160,.4) 0 1px,transparent 1.5px);background-size:119px 137px,193px 173px;animation:demoParticleDrift 24s linear infinite alternate;mask-image:linear-gradient(to bottom,#000,transparent 65%)}
.demo-hero-inner{position:relative;z-index:2;width:min(1100px,100%)}.demo-kicker{font:600 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#8bd9c4}.demo-hero h1{max-width:1050px;margin:30px auto 0;font-size:clamp(48px,6.4vw,96px);font-weight:540;line-height:.94;letter-spacing:-.06em}.demo-hero p{max-width:760px;margin:30px auto 0;color:rgba(235,246,242,.7);font-size:clamp(16px,1.45vw,21px);line-height:1.65}.demo-hero-points{display:flex;justify-content:center;margin-top:38px;color:rgba(218,239,233,.62);font:600 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.demo-hero-points span{padding:0 24px}.demo-hero-points span+span{border-left:1px solid rgba(255,255,255,.22)}
.demo-request-section{padding:clamp(90px,10vw,150px) 24px;background:var(--bg)}.demo-request-layout{width:min(1220px,100%);margin:0 auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(50px,7vw,100px);align-items:start}.demo-request-copy{position:sticky;top:130px}.demo-request-copy>span{font:600 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#178d72}.demo-request-copy h2{margin:24px 0 0;font-size:clamp(42px,4.5vw,66px);font-weight:560;line-height:1;letter-spacing:-.05em}.demo-request-copy>p{margin:24px 0 0;color:var(--text-2);font-size:17px;line-height:1.65}.demo-expectations{margin-top:48px;border-top:1px solid var(--line)}.demo-expectations>div{padding:20px 0;border-bottom:1px solid var(--line)}.demo-expectations strong,.demo-expectations small{display:block}.demo-expectations strong{font-size:15px;font-weight:620}.demo-expectations small{margin-top:5px;color:var(--text-2);font-size:12px}
.demo-form-shell{min-height:580px;padding:clamp(28px,4vw,52px);border:1px solid rgba(7,16,20,.1);border-radius:26px;background:rgba(255,255,255,.62);box-shadow:0 38px 80px -56px rgba(7,16,20,.42)}.demo-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px 18px}.demo-field{display:grid;gap:9px}.demo-field-wide{grid-column:1/-1}.demo-field>span{font-size:11px;font-weight:620;color:#33443f}.demo-field input,.demo-field select,.demo-field textarea{width:100%;padding:13px 14px;border:1px solid rgba(7,16,20,.14);border-radius:9px;background:rgba(255,255,255,.82);color:var(--ink);font:400 14px/1.4 var(--font-sans);outline:0;transition:border-color .2s,box-shadow .2s}.demo-field textarea{resize:vertical}.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{border-color:#2ca889;box-shadow:0 0 0 3px rgba(44,168,137,.1)}.demo-consent{display:flex;gap:11px;margin-top:24px;color:var(--text-2);font-size:11px;line-height:1.5}.demo-consent input{margin-top:2px;accent-color:#168e71}.demo-timezone-note{margin:14px 0 0;color:#7b8783;font-size:10px}.demo-submit-row{display:flex;align-items:center;gap:20px;margin-top:28px}.demo-submit-row button:disabled{opacity:.58;cursor:wait}.demo-form-status{margin:0;color:var(--text-2);font-size:11px;line-height:1.45}.demo-form-status.is-error{color:#a14232}.demo-honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.demo-success{padding:70px 20px;text-align:center}.demo-success-mark{display:grid;width:58px;height:58px;margin:0 auto 26px;place-items:center;border-radius:50%;background:#dff2ec;color:#14795f;font-size:25px}.demo-success h2{margin:0;font-size:42px;letter-spacing:-.045em}.demo-success p{max-width:520px;margin:20px auto 30px;color:var(--text-2);line-height:1.65}
@keyframes demoParticleDrift{to{background-position:80px -50px,-60px 95px;transform:rotate(.4deg) scale(1.02)}}
@media(max-width:820px){.demo-request-layout{grid-template-columns:1fr}.demo-request-copy{position:static}.demo-expectations{display:grid;grid-template-columns:repeat(3,1fr)}.demo-expectations>div{padding:18px 14px;border-right:1px solid var(--line)}.demo-expectations>div:last-child{border-right:0}}
@media(max-width:600px){.nav-demo-link{padding:0!important;border:0}.demo-hero{min-height:72svh;padding:112px 18px 72px}.demo-hero h1{font-size:45px}.demo-hero-points span{padding:0 9px;font-size:7px}.demo-request-section{padding:72px 16px}.demo-request-copy h2{font-size:40px}.demo-expectations{grid-template-columns:1fr}.demo-expectations>div{padding:16px 0;border-right:0}.demo-form-shell{padding:26px 18px;border-radius:18px}.demo-field-grid{grid-template-columns:1fr}.demo-field-wide{grid-column:auto}.demo-submit-row{align-items:stretch;flex-direction:column}.demo-submit-row button{justify-content:center}.demo-form-status{text-align:center}}
/* Clean language navigation and a clear primary demo action. */
.nav-links .nav-demo-link{
margin-left:18px;
padding:10px 17px!important;
border:1px solid rgba(7,16,20,.16);
border-radius:7px;
background:#071014;
color:#f8f4ec;
font-weight:650;
letter-spacing:-.01em;
box-shadow:0 10px 26px -18px rgba(7,16,20,.7),inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-links .nav-demo-link:hover,
.nav-links .nav-demo-link.active{
color:#fff;
background:#14211f;
transform:translateY(-1px);
box-shadow:0 12px 30px -18px rgba(7,16,20,.8),inset 0 1px 0 rgba(255,255,255,.16);
}
body.has-hero .nav:not(.scrolled) .nav-links .nav-demo-link{
border-color:rgba(255,255,255,.48);
background:rgba(255,255,255,.1);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px -20px rgba(0,0,0,.65);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
body.has-hero .nav:not(.scrolled) .nav-links .nav-demo-link:hover{
border-color:rgba(255,255,255,.72);
background:rgba(255,255,255,.18);
}
.nav-cta{
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.nav-cta .lang-switch{
display:inline-flex;
gap:13px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
.nav-cta .lang-option{
min-width:0;
padding:5px 0;
border:0!important;
border-radius:0;
background:transparent!important;
box-shadow:none!important;
color:rgba(7,16,20,.56);
font-size:11px;
font-weight:550;
text-shadow:none;
}
.nav-cta .lang-option:hover{color:var(--ink)}
.nav-cta .lang-option.active{color:var(--ink);font-weight:700}
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option{color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.45)}
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option:hover,
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option.active{color:#fff}
.nav-cta .lang-option,
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option{
color:var(--text-2);
text-shadow:none;
}
.nav-cta .lang-option:hover,
.nav-cta .lang-option.active,
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option:hover,
body.has-hero .nav:not(.scrolled) .nav-cta .lang-option.active{color:var(--ink)}
.asset-demo-action{
position:absolute;
z-index:5;
display:flex;
left:calc(50% + min(24vw,305px));
top:70%;
justify-content:flex-start;
margin:0;
opacity:var(--asset-class-opacity,0);
transform:translate3d(0,var(--asset-class-y,24px),0);
}
.asset-demo-action::before{content:"";position:absolute;right:calc(100% + 10px);top:50%;width:42px;height:1px;background:linear-gradient(90deg,transparent,rgba(119,225,197,.5));transform:translateY(-50%)}
.asset-demo-action .btn{padding:10px 14px;border:1px solid rgba(186,235,222,.28);border-radius:999px;background:rgba(10,28,29,.72);color:#f6faf8;font-size:12px;font-weight:560;box-shadow:0 14px 35px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(prefers-reduced-motion:reduce){.asset-demo-action{opacity:1;transform:none}}
/* Shared globe language dropdown. */
.nav-language{position:relative;display:block;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.language-trigger{
display:grid;
place-items:center;
width:36px;
height:36px;
border:1px solid rgba(7,16,20,.14);
border-radius:50%;
background:rgba(251,250,246,.58);
color:var(--ink);
transition:background .18s,border-color .18s,transform .18s;
}
.language-trigger:hover{background:var(--bg-alt);border-color:rgba(7,16,20,.24);transform:translateY(-1px)}
.language-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.language-menu{
position:absolute;
top:calc(100% + 14px);
right:0;
z-index:120;
display:grid;
width:172px;
padding:7px;
border:1px solid rgba(7,16,20,.1);
border-radius:18px;
background:rgba(251,250,246,.98);
box-shadow:0 22px 55px -30px rgba(7,16,20,.5),inset 0 1px 0 rgba(255,255,255,.8);
opacity:0;
visibility:hidden;
transform:translateY(-7px);
transition:opacity .18s,transform .18s,visibility .18s;
}
.language-menu.open{opacity:1;visibility:visible;transform:none}
.nav-language .language-menu .lang-option{
width:100%;
padding:11px 12px;
border:0!important;
border-radius:12px;
background:transparent!important;
color:var(--ink)!important;
font-size:14px;
font-weight:500;
line-height:1.1;
text-align:left;
text-shadow:none!important;
}
.nav-language .language-menu .lang-option:hover,
.nav-language .language-menu .lang-option.active{background:#f1f0eb!important}
/* Contact typography follows the same sans-serif system as the rest of the site. */
#contact,#contact .contact-col-title,#contact .contact-list-label,#contact .contact-list a,#contact .contact-block p{font-family:var(--font-sans)}
#contact .contact-col-title{font-size:13px;letter-spacing:.02em;text-transform:none}
#contact .contact-list-label{font-size:11px;letter-spacing:.04em}
@media(max-width:640px){
.nav-language{display:block;position:absolute;right:70px;top:12px}
.language-trigger{width:42px;height:42px;background:rgba(251,250,246,.94)}
.language-menu{right:-52px;top:calc(100% + 10px);width:172px}
.nav-links .nav-demo-link{
width:calc(100% - 24px);
margin:10px 12px 4px;
padding:13px 16px!important;
justify-content:center;
text-align:center;
}
.asset-demo-action{left:auto;right:12px;top:70%;margin:0}
.asset-demo-action::before{display:none}
.asset-demo-action .btn{padding:9px 12px;font-size:11px}
}
/* RenewAI ecosystem: devices rotate into focus and connect to the open platform. */
.ecosystem-orbit{
position:relative;
height:680px;
overflow:hidden;
isolation:isolate;
background:radial-gradient(ellipse at 50% 36%,rgba(63,202,165,.12),transparent 31%),linear-gradient(180deg,#f8f4ec 0%,#f3f0e9 100%);
opacity:0;
transform:translateY(24px);
transition:opacity .85s ease,transform .95s cubic-bezier(.18,.76,.22,1);
}
.ecosystem-orbit.is-visible{opacity:1;transform:none}
.ecosystem-orbit::before{content:"";position:absolute;left:50%;bottom:7%;width:88%;height:38%;border:1px solid rgba(20,112,88,.1);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 55px rgba(53,191,155,.055) inset;pointer-events:none}
.ecosystem-open-core{position:absolute;z-index:12;left:50%;top:3%;width:290px;transform:translateX(-50%);filter:drop-shadow(0 25px 30px rgba(7,16,20,.12))}
.ecosystem-open-core::after{content:"";position:absolute;left:14%;right:14%;bottom:17%;height:17%;border-radius:50%;background:rgba(38,207,164,.18);filter:blur(25px);z-index:-1;animation:ecosystemOpenPulse 2.9s ease-in-out infinite}
.ecosystem-open-core img,.ecosystem-device-track img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.ecosystem-device-track{position:absolute;inset:0;z-index:8}
.ecosystem-device-track figure{position:absolute;left:50%;top:69%;width:260px;margin:0;opacity:var(--orbit-opacity,0);transform:translate(-50%,-50%) translate3d(var(--orbit-x,0),var(--orbit-y,0),0) scale(var(--orbit-scale,.5));filter:saturate(.78) blur(.4px);transition:transform 1.15s cubic-bezier(.18,.76,.22,1),opacity .8s ease,filter .8s ease;will-change:transform,opacity}
.ecosystem-device-track figure.active{filter:none}
.ecosystem-live-link{position:absolute;z-index:6;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ecosystem-live-link path{fill:none;stroke:#35b993;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(49,190,151,.45))}
.ecosystem-live-link circle{fill:#6ee1c1;opacity:0;transform-box:fill-box;transform-origin:center}
.ecosystem-orbit.is-connecting .ecosystem-live-link path{animation:ecosystemLiveConnect 1.25s cubic-bezier(.22,.72,.22,1) .55s forwards}
.ecosystem-orbit.is-connecting .ecosystem-live-link circle{animation:ecosystemLiveNode .48s ease 1.65s forwards}
.ecosystem-connect-state{position:absolute;z-index:15;left:50%;top:53%;display:flex;align-items:center;gap:9px;transform:translateX(-50%);white-space:nowrap;color:#5d6b67;font-size:11px}
.ecosystem-connect-state span{width:6px;height:6px;border-radius:50%;background:#43caa5;box-shadow:0 0 12px rgba(54,199,160,.7)}
.ecosystem-connect-state b{font:600 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#238b70}
.ecosystem-connect-state strong{font-size:12px;font-weight:600;color:#12221e;transition:opacity .3s}
@keyframes ecosystemLiveConnect{to{stroke-dashoffset:0}}
@keyframes ecosystemLiveNode{0%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}
@keyframes ecosystemOpenPulse{50%{opacity:.38;transform:scaleX(1.12)}}
@media(max-width:820px){
.ecosystem-orbit{height:580px;margin-left:-16px;margin-right:-16px}
.ecosystem-open-core{top:5%;width:220px}
.ecosystem-device-track figure{top:70%;width:215px}
.ecosystem-connect-state{top:50%;font-size:10px}
.ecosystem-live-link path{stroke-width:2}
}
@media(max-width:520px){
.ecosystem-orbit{height:540px}
.ecosystem-open-core{width:195px}
.ecosystem-device-track figure{width:195px}
.ecosystem-connect-state{top:48%}
}
@media(prefers-reduced-motion:reduce){.ecosystem-orbit{opacity:1;transform:none}.ecosystem-open-core::after,.ecosystem-live-link path,.ecosystem-live-link circle{animation:none}.ecosystem-live-link path{stroke-dashoffset:0}.ecosystem-device-track figure{transition:none}}
/* Complete ecosystem composition: one central platform, ten connected devices. */
.ecosystem-orbit{
height:700px;
background:transparent;
}
.open-ecosystem{background:#fbfaf6}
.open-ecosystem::before{display:none}
.ecosystem-orbit::before{display:none}
.ecosystem-open-core{left:50%;top:50%;width:270px;transform:translate(-50%,-50%)}
.ecosystem-open-core img{clip-path:none}
.ecosystem-open-core img,.ecosystem-device-track img{
mix-blend-mode:normal;
image-rendering:auto;
backface-visibility:visible;
-webkit-backface-visibility:visible;
mask-image:none;
-webkit-mask-image:none;
}
.ecosystem-device-track figure{
left:var(--orbit-left,50%);
top:var(--orbit-top,50%);
width:184px;
opacity:1;
visibility:hidden;
transform:translate(-50%,-50%);
filter:none;
transition:none;
will-change:auto;
}
.ecosystem-device-track figure.connected,
.ecosystem-device-track figure.active{opacity:1;visibility:visible;transform:translate(-50%,-50%);filter:none}
.ecosystem-live-link{z-index:9;height:100%}
.ecosystem-live-link path{stroke:rgba(39,154,123,.38);stroke-width:1.15;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke .45s,stroke-width .45s,filter .45s}
.ecosystem-live-link path.connected{animation:ecosystemLiveConnect .9s cubic-bezier(.22,.72,.22,1) .18s forwards}
.ecosystem-live-link path.ready{stroke-dasharray:none;stroke-dashoffset:0}
.ecosystem-live-link path.active{stroke:#48c9a5;stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(49,190,151,.55))}
.ecosystem-connect-state{left:24px;top:24px;transform:none;padding:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.ecosystem-connect-state b{color:#64726e}.ecosystem-connect-state strong{color:#16785f}
@media(max-width:820px){
.ecosystem-orbit{height:620px;margin-left:0;margin-right:0}
.ecosystem-open-core{top:50%;width:210px}
.ecosystem-device-track figure{width:132px}
.ecosystem-connect-state{left:18px;top:18px;max-width:88%;overflow:hidden}
}
@media(max-width:520px){
.ecosystem-orbit{height:560px;margin-left:-10px;margin-right:-10px}
.ecosystem-open-core{width:170px}
.ecosystem-device-track figure{width:104px}
.ecosystem-connect-state{left:14px;top:14px;font-size:9px}
.ecosystem-connect-state strong{max-width:130px;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){.ecosystem-live-link path.connected{animation:none;stroke-dashoffset:0}.ecosystem-device-track figure{visibility:visible;transition:none}}
/* Hero title ignition: one restrained startup sequence, then fully static. */
.hero-h1>span:first-child{
opacity:0;
filter:blur(10px);
animation:heroTitleResolve 1.05s cubic-bezier(.18,.76,.22,1) .12s forwards;
}
.hero-h1 .hero-title-bottom{
position:relative;
overflow:visible;
opacity:0;
filter:blur(8px);
transform:translateY(18px);
animation:heroTitleAccent 1.05s cubic-bezier(.18,.76,.22,1) .34s forwards;
}
.hero-h1 .hero-title-bottom::after{
content:"";
position:absolute;
top:-8%;
bottom:-8%;
left:-24%;
width:16%;
opacity:0;
transform:skewX(-18deg);
background:linear-gradient(90deg,transparent,rgba(217,255,247,.72),transparent);
filter:blur(4px);
mix-blend-mode:screen;
animation:heroTitleSweep 1.15s cubic-bezier(.22,.72,.22,1) .92s forwards;
}
.hero-energy-trace{animation:heroTraceAwaken 1.35s ease .72s both}
@keyframes heroTitleResolve{0%{opacity:0;filter:blur(10px);letter-spacing:.035em;transform:translateY(8px)}100%{opacity:1;filter:none;letter-spacing:-.014em;transform:none}}
@keyframes heroTitleAccent{0%{opacity:0;filter:blur(8px);transform:translateY(18px)}100%{opacity:1;filter:none;transform:none}}
@keyframes heroTitleSweep{0%{left:-24%;opacity:0}20%{opacity:.9}78%{opacity:.55}100%{left:108%;opacity:0}}
@keyframes heroTraceAwaken{0%{opacity:.08;filter:drop-shadow(0 0 0 rgba(91,212,182,0))}58%{opacity:.66;filter:drop-shadow(0 0 12px rgba(91,212,182,.42))}100%{opacity:.42;filter:drop-shadow(0 0 6px rgba(91,212,182,.2))}}
@media(prefers-reduced-motion:reduce){.hero-h1>span:first-child,.hero-h1 .hero-title-bottom{opacity:1;filter:none;transform:none;animation:none}.hero-h1 .hero-title-bottom::after,.hero-energy-trace{animation:none}}
@media(prefers-reduced-motion:reduce){.demo-particles{animation:none}}
/* One Platform: translucent graphite space with a restrained aurora field. */
.asset-universe{
background:
radial-gradient(ellipse at 50% 48%,rgba(54,177,148,.09),transparent 38%),
radial-gradient(ellipse at 82% 18%,rgba(77,139,166,.045),transparent 34%),
linear-gradient(145deg,#0a1414 0%,#0d1c1b 48%,#091315 100%);
}
.asset-space-stage{
isolation:isolate;
background:
linear-gradient(112deg,rgba(255,255,255,.026),transparent 27%,rgba(122,216,193,.022) 62%,transparent),
radial-gradient(ellipse at 50% 54%,rgba(49,176,145,.065),transparent 53%);
}
.asset-space-stage::before{
content:"";
position:absolute;
z-index:0;
left:50%;
top:51%;
width:min(1120px,88vw);
height:min(680px,70vh);
border-radius:50%;
background:
radial-gradient(ellipse at 48% 52%,rgba(91,225,187,.13) 0%,rgba(43,145,124,.055) 34%,transparent 67%),
radial-gradient(ellipse at 72% 40%,rgba(67,137,181,.07),transparent 48%);
filter:blur(38px);
opacity:.74;
transform:translate(-50%,-50%) scale(var(--asset-field-scale,.88));
animation:assetAuroraBreathe 11s ease-in-out infinite alternate;
pointer-events:none;
}
.asset-space-stage::after{
content:"";
position:absolute;
z-index:1;
inset:0;
background:
linear-gradient(180deg,rgba(4,10,11,.25),transparent 18%,transparent 79%,rgba(3,8,9,.25)),
linear-gradient(90deg,rgba(3,9,10,.22),transparent 20%,transparent 80%,rgba(3,9,10,.2));
pointer-events:none;
}
.asset-universe::after{opacity:.055;mix-blend-mode:soft-light}
.asset-particle-field{
z-index:2;
opacity:calc(var(--asset-field-opacity,.36) * .72);
mix-blend-mode:screen;
filter:drop-shadow(0 0 4px rgba(118,221,195,.2));
}
.asset-space-glow{
width:min(76vw,1040px);
background:radial-gradient(ellipse,rgba(87,218,183,.085),rgba(54,137,126,.025) 45%,transparent 72%);
filter:blur(24px);
opacity:.8;
}
.asset-universe .asset-assembly h2{
text-shadow:0 0 54px rgba(94,225,190,.075),0 18px 60px rgba(0,0,0,.18);
}
.asset-universe .asset-assembly>p{color:rgba(229,239,236,.7)}
.asset-assembly .asset-class-line span{color:rgba(218,234,229,.66)}
.asset-product-reveal{
filter:blur(var(--asset-product-blur,14px)) drop-shadow(0 34px 58px rgba(0,0,0,.25)) drop-shadow(0 0 34px rgba(63,198,161,.06));
}
.asset-product-reveal::after{
inset:2% 4% -3%;
background:radial-gradient(ellipse,rgba(73,224,183,.16),rgba(42,159,136,.035) 48%,transparent 73%);
filter:blur(42px);
}
.asset-product-reveal img{
mask-image:radial-gradient(ellipse 84% 83% at center,#000 68%,rgba(0,0,0,.94) 82%,transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 84% 83% at center,#000 68%,rgba(0,0,0,.94) 82%,transparent 100%);
}
@keyframes assetAuroraBreathe{
0%{opacity:.56;transform:translate(-51%,-50%) scale(var(--asset-field-scale,.88))}
100%{opacity:.82;transform:translate(-49%,-51%) scale(var(--asset-field-scale,.88))}
}
@media(max-width:820px){
.asset-space-stage::before{width:120vw;height:62vh;filter:blur(31px);opacity:.62}
.asset-universe::after{opacity:.04}
.asset-particle-field{opacity:calc(var(--asset-field-opacity,.34) * .6)}
}
@media(prefers-reduced-motion:reduce){.asset-space-stage::before{animation:none}}
/* About: company narrative, operating principles and competitive moat. */
.about-page{background:#f8f5ee;color:var(--ink)}
.about-modern{overflow:hidden}
.about-container{width:min(1200px,calc(100% - 64px));margin:0 auto}
.about-hero{
position:relative;
min-height:max(720px,96svh);
display:flex;
align-items:flex-end;
overflow:hidden;
background:#071014;
color:#fff;
}
.about-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);animation:aboutHeroResolve 9s cubic-bezier(.18,.76,.22,1) forwards}
.about-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,14,.82) 0%,rgba(4,10,14,.52) 43%,rgba(4,10,14,.08) 75%),linear-gradient(180deg,rgba(3,8,11,.32),transparent 36%,rgba(3,8,11,.66) 100%)}
.about-hero-copy{position:relative;z-index:2;width:min(1200px,calc(100% - 64px));margin:0 auto;padding:0 0 clamp(82px,10vh,116px);opacity:0;transform:translateY(28px);animation:aboutCopyIn 1s cubic-bezier(.18,.76,.22,1) .15s forwards}
.about-hero h1{max-width:900px;margin:0;color:#fff;font-size:clamp(50px,6.6vw,94px);font-weight:540;line-height:.94;letter-spacing:-.064em}
.about-hero-copy>p{max-width:710px;margin:30px 0 0;color:rgba(239,247,244,.78);font-size:clamp(17px,1.5vw,22px);line-height:1.55}
.about-hero-rail{display:flex;align-items:center;gap:0;margin-top:42px;color:rgba(226,240,235,.7);font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.about-hero-rail span{padding:0 22px}.about-hero-rail span:first-child{padding-left:0}.about-hero-rail span+span{border-left:1px solid rgba(196,231,221,.28)}
.about-hero-signal{position:absolute;z-index:2;right:5.5vw;bottom:0;width:1px;height:42%;overflow:visible;background:linear-gradient(180deg,transparent,rgba(111,224,195,.55),transparent)}
.about-hero-signal i{position:absolute;left:50%;top:0;width:5px;height:5px;border-radius:50%;background:#9ce8d4;box-shadow:0 0 18px #70d8bd;transform:translate(-50%,-50%);animation:aboutSignalFall 4.6s ease-in-out infinite}
.about-thesis{padding:clamp(108px,12vw,170px) 0 clamp(96px,10vw,146px);background:#f8f5ee}
.about-thesis-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr);gap:clamp(70px,10vw,150px);align-items:start}
.about-thesis h2{margin:0;max-width:850px;font-size:clamp(44px,5.5vw,78px);font-weight:520;line-height:.98;letter-spacing:-.057em}
.about-thesis-copy{padding-top:10px;border-top:1px solid rgba(7,16,20,.18)}
.about-thesis-copy p{margin:22px 0 0;color:#59635f;font-size:16px;line-height:1.72}.about-thesis-copy p:first-child{margin-top:18px;color:#26312e}
.about-operating-line{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(22px,4vw,54px);align-items:center;margin-top:clamp(76px,9vw,120px);padding-top:28px;border-top:1px solid rgba(7,16,20,.16)}
.about-operating-line>div{display:grid;gap:10px}.about-operating-line strong{font-size:18px;font-weight:620;letter-spacing:-.03em}.about-operating-line span{max-width:270px;color:#68716e;font-size:13px;line-height:1.55}.about-operating-line>i{width:54px;height:1px;background:linear-gradient(90deg,rgba(31,111,91,.12),#3aa78b,rgba(31,111,91,.12));transform:scaleX(0);transition:transform .8s ease .35s}.about-operating-line.is-visible>i{transform:scaleX(1)}
.about-principles{padding:clamp(108px,11vw,160px) 0;background:#eeeee8}
.about-section-head{display:grid;grid-template-columns:1.15fr .55fr;gap:10vw;align-items:end}
.about-section-head h2{margin:0;max-width:730px;font-size:clamp(42px,5vw,70px);font-weight:530;line-height:.98;letter-spacing:-.055em}.about-section-head p{margin:0;color:#68716e;font-size:16px;line-height:1.65}
.about-principle-list{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;row-gap:70px;margin-top:clamp(80px,9vw,124px)}
.about-principle-list article{position:relative;padding:28px 0 0;border-top:1px solid rgba(7,16,20,.22)}
.about-principle-list article::before{content:"";position:absolute;left:0;top:-1px;width:76px;height:2px;background:linear-gradient(90deg,#248d72,#7bcab4);transform:scaleX(0);transform-origin:left;transition:transform .75s cubic-bezier(.18,.76,.22,1) .25s}.about-principle-list article.is-visible::before{transform:scaleX(1)}
.about-principle-list article:nth-child(1){grid-column:1/7}.about-principle-list article:nth-child(2){grid-column:8/13;margin-top:86px}.about-principle-list article:nth-child(3){grid-column:3/10;margin-top:-8px}
.about-principle-list h3{margin:0;font-size:clamp(27px,3vw,42px);font-weight:560;line-height:1.05;letter-spacing:-.047em}.about-principle-list p{max-width:570px;margin:20px 0 0;color:#5d6763;font-size:15px;line-height:1.7}
.about-moat{position:relative;isolation:isolate;padding:clamp(112px,12vw,176px) 0 92px;overflow:hidden;background:#0a1515;color:#fff}
.about-moat::before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 24% 48%,rgba(49,179,148,.13),transparent 33%),radial-gradient(ellipse at 78% 18%,rgba(65,119,152,.08),transparent 30%),linear-gradient(145deg,#081212,#0e1b1a 54%,#081113)}
.about-moat-field{position:absolute;z-index:-1;inset:0;opacity:.2;background-image:linear-gradient(rgba(142,215,196,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(142,215,196,.055) 1px,transparent 1px);background-size:94px 94px;mask-image:radial-gradient(ellipse at 50% 45%,#000,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000,transparent 78%)}
.about-moat-head{display:grid;grid-template-columns:1fr .72fr;gap:10vw;align-items:end}.about-moat-head h2{margin:0;font-size:clamp(52px,7vw,98px);font-weight:520;line-height:.9;letter-spacing:-.065em}.about-moat-head p{margin:0;color:rgba(223,238,233,.67);font-size:16px;line-height:1.7}
.about-moat-grid{display:grid;grid-template-columns:minmax(430px,.9fr) minmax(460px,1.1fr);gap:clamp(60px,8vw,120px);align-items:center;margin-top:clamp(86px,9vw,126px)}
.about-flywheel{position:relative;width:min(500px,39vw);aspect-ratio:1;margin:0 auto}
.about-flywheel::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(64,205,169,.18),rgba(52,146,128,.04) 55%,transparent 72%);filter:blur(18px);animation:moatCoreBreathe 5s ease-in-out infinite}
.about-flywheel-ring{position:absolute;border-radius:50%;border:1px solid rgba(137,222,200,.2)}
.about-flywheel-ring::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:#8ce2ca;box-shadow:0 0 16px rgba(93,224,189,.8)}
.ring-outer{inset:5%;border-style:dashed;animation:moatRingSpin 28s linear infinite}.ring-inner{inset:23%;border-color:rgba(137,222,200,.3);animation:moatRingSpin 19s linear infinite reverse}
.about-flywheel-core{position:absolute;inset:35%;display:grid;place-content:center;text-align:center;border:1px solid rgba(145,228,206,.27);border-radius:50%;background:rgba(11,29,28,.6);box-shadow:inset 0 0 40px rgba(82,196,166,.08),0 0 52px rgba(39,144,121,.1);backdrop-filter:blur(12px)}
.about-flywheel-core span{color:#87d9c3;font:600 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.about-flywheel-core strong{margin-top:10px;font-size:clamp(17px,1.7vw,23px);font-weight:530;line-height:1.08;letter-spacing:-.035em}
.flywheel-node{position:absolute;color:rgba(229,242,238,.73);font:550 10px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.flywheel-node::before{content:"";position:absolute;top:50%;width:36px;height:1px;background:linear-gradient(90deg,transparent,rgba(126,220,195,.5))}.node-assets{left:-1%;top:20%}.node-assets::before{left:calc(100% + 12px)}.node-context{right:-2%;top:28%}.node-context::before{right:calc(100% + 12px);transform:rotate(180deg)}.node-models{right:2%;bottom:22%}.node-models::before{right:calc(100% + 12px);transform:rotate(180deg)}.node-value{left:1%;bottom:18%}.node-value::before{left:calc(100% + 12px)}
.about-moat-pillars{border-top:1px solid rgba(198,232,223,.16)}
.about-moat-pillars article{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:32px 0;border-bottom:1px solid rgba(198,232,223,.16)}
.about-moat-icon{display:grid;place-items:center;width:46px;height:46px;color:#8bdcc6}.about-moat-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.about-moat-pillars h3{margin:0;color:#f3f8f6;font-size:21px;font-weight:570;letter-spacing:-.035em}.about-moat-pillars p{margin:11px 0 0;color:rgba(218,233,228,.62);font-size:13px;line-height:1.68}
.about-scale-architecture{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:25px;align-items:center;margin-top:80px;padding:24px 0;border-top:1px solid rgba(198,232,223,.16);border-bottom:1px solid rgba(198,232,223,.16);color:rgba(223,238,233,.58);font-size:11px;text-transform:uppercase;letter-spacing:.07em}.about-scale-architecture b{color:#f3f8f6;font-weight:600}.about-scale-architecture i{height:1px;background:linear-gradient(90deg,transparent,rgba(115,214,188,.48),transparent)}
.about-close{padding:clamp(110px,12vw,170px) 0;background:#f8f5ee}
.about-close-grid{display:grid;grid-template-columns:1fr auto;gap:80px;align-items:end}.about-close h2{max-width:870px;margin:0;font-size:clamp(45px,5.6vw,80px);font-weight:520;line-height:.96;letter-spacing:-.06em}.about-close p{max-width:720px;margin:27px 0 0;color:#5d6763;font-size:16px;line-height:1.7}.about-close-actions{display:flex;gap:12px;white-space:nowrap}.about-close .btn-outline{border-color:rgba(7,16,20,.22);color:var(--ink)}
[data-about-reveal]{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .9s cubic-bezier(.18,.76,.22,1)}
[data-about-reveal].is-visible{opacity:1;transform:none}.about-principle-list article:nth-child(2){transition-delay:.1s}.about-principle-list article:nth-child(3){transition-delay:.16s}.about-moat-pillars article:nth-child(2){transition-delay:.08s}.about-moat-pillars article:nth-child(3){transition-delay:.16s}
@keyframes aboutHeroResolve{to{transform:scale(1)}}
@keyframes aboutCopyIn{to{opacity:1;transform:none}}
@keyframes aboutSignalFall{0%{top:0;opacity:0}18%{opacity:1}75%{opacity:.8}100%{top:100%;opacity:0}}
@keyframes moatRingSpin{to{transform:rotate(360deg)}}
@keyframes moatCoreBreathe{50%{opacity:.65;transform:scale(1.07)}}
@media(max-width:900px){
.about-container,.about-hero-copy{width:calc(100% - 40px)}
.about-thesis-grid,.about-section-head,.about-moat-head,.about-close-grid{grid-template-columns:1fr;gap:38px}
.about-thesis-copy{max-width:650px}
.about-moat-grid{grid-template-columns:1fr;gap:72px}
.about-flywheel{width:min(500px,76vw)}
.about-close-actions{align-self:start}
}
@media(max-width:640px){
.about-hero{min-height:88svh}.about-hero-media{object-position:62% center}.about-hero-shade{background:linear-gradient(180deg,rgba(4,10,14,.32),rgba(4,10,14,.42) 35%,rgba(3,8,11,.9) 100%)}
.about-hero-copy{padding-bottom:62px}.about-hero h1{font-size:clamp(45px,13vw,62px)}.about-hero-copy>p{margin-top:23px;font-size:16px}.about-hero-rail{flex-wrap:wrap;gap:9px 0;margin-top:30px;font-size:8px}.about-hero-rail span{padding:0 11px}.about-hero-signal{display:none}
.about-thesis{padding:88px 0}.about-thesis h2,.about-section-head h2{font-size:42px}.about-operating-line{grid-template-columns:1fr;margin-top:62px;gap:0}.about-operating-line>div{padding:22px 0}.about-operating-line>i{width:1px;height:24px;margin-left:7px;transform:scaleY(0)}.about-operating-line.is-visible>i{transform:scaleY(1)}
.about-principles{padding:88px 0}.about-principle-list{display:block;margin-top:65px}.about-principle-list article,.about-principle-list article:nth-child(1),.about-principle-list article:nth-child(2),.about-principle-list article:nth-child(3){margin:0 0 58px}.about-principle-list h3{font-size:31px}
.about-moat{padding:92px 0 72px}.about-moat-head h2{font-size:58px}.about-flywheel{width:calc(100vw - 48px);margin-left:-4px}.flywheel-node{font-size:8px;letter-spacing:.045em}.flywheel-node::before{width:16px}.node-assets{left:0}.node-context{right:0}.node-models{right:0}.node-value{left:0}.about-moat-pillars article{grid-template-columns:42px 1fr;gap:17px;padding:27px 0}.about-moat-icon{width:38px;height:38px}.about-moat-icon svg{width:26px;height:26px}
.about-scale-architecture{grid-template-columns:1fr;gap:13px;margin-top:55px}.about-scale-architecture i{width:40px}
.about-close{padding:90px 0}.about-close h2{font-size:45px}.about-close-actions{flex-direction:column;align-items:stretch}.about-close-actions .btn{text-align:center}
}
@media(prefers-reduced-motion:reduce){.about-hero-media,.about-hero-copy,.about-hero-signal i,.about-flywheel-ring,.about-flywheel::before{animation:none}.about-hero-copy,[data-about-reveal]{opacity:1;transform:none}}
/* About: restrained single-image narrative inspired by premium product editorial pages. */
.about-tesla{background:#f5f3ed;color:#121919;overflow:hidden}
.about-title{padding:154px 32px 74px;text-align:center}
.about-title h1{margin:0;font-size:clamp(48px,5.1vw,78px);font-weight:560;line-height:1;letter-spacing:-.055em}
.about-cover{width:calc(100% - 64px);max-width:1800px;height:min(74vh,850px);min-height:560px;margin:0 auto;overflow:hidden;background:#071716}
.about-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 52%;animation:aboutCoverSettle 1.8s cubic-bezier(.2,.72,.15,1) both}
@keyframes aboutCoverSettle{from{transform:scale(1.025)}to{transform:scale(1)}}
.about-story-width,.about-story-copy,.about-final{width:min(100% - 64px,1120px);margin-inline:auto}
.about-intro{padding:144px 0 132px;text-align:center}
.about-intro h2,.about-story-copy h2,.about-final h2{margin:0;font-size:clamp(42px,5vw,72px);font-weight:540;line-height:1.04;letter-spacing:-.052em}
.about-intro p{max-width:780px;margin:30px auto 0;color:#4b5350;font-size:clamp(19px,1.65vw,25px);line-height:1.5;letter-spacing:-.022em}
.about-story{border-top:1px solid rgba(16,28,26,.14)}
.about-story-section{min-height:64vh;display:flex;align-items:center;border-bottom:1px solid rgba(16,28,26,.14)}
.about-story-copy{display:grid;grid-template-columns:minmax(310px,.86fr) minmax(360px,.74fr);justify-content:space-between;align-items:start;gap:10vw;padding:112px 0}
.about-story-copy p{max-width:590px;margin:9px 0 0;color:#555d5a;font-size:clamp(18px,1.35vw,22px);line-height:1.58;letter-spacing:-.018em}
.about-story-ai{background:#091b1a;color:#f4f6f2;border-color:transparent}
.about-story-ai .about-story-copy{display:block;width:min(100% - 64px,1280px);text-align:center}
.about-story-ai .about-story-copy p{max-width:780px;margin:30px auto 0;color:rgba(229,239,235,.65)}
.about-data-flywheel{position:relative;width:min(560px,78vw);aspect-ratio:1;margin:68px auto 0}
.data-flywheel-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 9px rgba(70,207,170,.12))}
.data-flywheel-arcs marker path{fill:#72ddc0}
.data-flywheel-arcs>path{fill:none;stroke:#69d7b9;stroke-width:1.6;stroke-linecap:round;marker-end:url(#data-cycle-arrow);stroke-dasharray:5 8;animation:dataCycleFlow 7s linear infinite,dataCyclePulse 4.8s ease-in-out infinite}
.data-flywheel-arcs>path:nth-of-type(2){animation-delay:-1.2s}.data-flywheel-arcs>path:nth-of-type(3){animation-delay:-2.4s}.data-flywheel-arcs>path:nth-of-type(4){animation-delay:-3.6s}
.data-flywheel-core{position:absolute;inset:34%;display:grid;place-content:center;background:radial-gradient(circle,rgba(55,155,132,.16),rgba(9,27,26,0) 69%);text-align:center}
.data-flywheel-core span{color:#7fceb9;font:600 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.data-flywheel-core strong{margin-top:8px;font-size:clamp(17px,1.7vw,22px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.data-flywheel-node{position:absolute;display:flex;align-items:center;gap:10px;color:rgba(228,240,236,.82);font:550 10px/1.25 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.data-flywheel-node i{display:block;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#70ddbf;box-shadow:0 0 13px rgba(95,220,186,.62);animation:dataNodePulse 4.8s ease-in-out infinite}
.data-node-assets{left:50%;top:16.6%;flex-direction:column;transform:translate(-50%,-100%)}.data-node-data{left:83.4%;top:50%;transform:translateY(-50%)}.data-node-ai{left:50%;top:83.4%;flex-direction:column;transform:translateX(-50%)}.data-node-value{right:83.4%;top:50%;transform:translateY(-50%)}
.data-node-data i{animation-delay:1.2s}.data-node-ai i{animation-delay:2.4s}.data-node-value i{animation-delay:3.6s}
@keyframes dataCycleFlow{to{stroke-dashoffset:-52}}
@keyframes dataCyclePulse{0%,38%,100%{opacity:.26}16%{opacity:1;filter:drop-shadow(0 0 4px rgba(103,224,191,.65))}}
@keyframes dataNodePulse{0%,38%,100%{opacity:.48;transform:scale(.82)}16%{opacity:1;transform:scale(1.25)}}
.about-final{padding:150px 0 170px;text-align:center}
.about-final a{display:inline-flex;align-items:center;gap:14px;margin-top:38px;color:#121919;font-size:16px;font-weight:570;text-decoration:none;border-bottom:1px solid rgba(18,25,25,.45);padding-bottom:7px;transition:gap .25s ease,border-color .25s ease}
.about-final a:hover{gap:21px;border-color:#121919}
.about-tesla [data-about-reveal]{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .95s cubic-bezier(.2,.7,.2,1)}
.about-tesla [data-about-reveal].is-visible{opacity:1;transform:none}
@media(max-width:900px){
.about-title{padding:124px 24px 56px}.about-cover{width:calc(100% - 32px);height:64vh;min-height:470px}.about-story-width,.about-story-copy,.about-final{width:min(100% - 48px,1120px)}
.about-intro{padding:104px 0 94px}.about-story-section{min-height:unset}.about-story-copy{grid-template-columns:1fr;gap:26px;padding:92px 0}.about-story-copy p{margin:0}
.about-story-ai .about-story-copy{width:min(100% - 48px,1280px);padding:106px 0}.about-data-flywheel{margin-top:64px}.about-final{padding:110px 0 125px}
}
@media(max-width:560px){
.about-title{padding:106px 20px 42px}.about-title h1{font-size:50px}.about-cover{width:100%;height:58vh;min-height:420px}.about-cover img{object-position:65% center}
.about-story-width,.about-story-copy,.about-final{width:calc(100% - 40px)}.about-intro{padding:82px 0 78px}.about-intro h2,.about-story-copy h2,.about-final h2{font-size:42px}.about-intro p{margin-top:22px;font-size:18px}
.about-story-copy{gap:20px;padding:74px 0}.about-story-copy p{font-size:17px;line-height:1.55}.about-story-ai .about-story-copy{width:calc(100% - 40px);padding:86px 0}.about-data-flywheel{width:min(350px,88vw);margin-top:50px}.data-flywheel-node{gap:6px;font-size:7.5px;letter-spacing:.025em}.data-flywheel-node i{width:5px;height:5px}.data-flywheel-core{inset:32%}.about-final{padding:90px 0 105px}
}
@media(prefers-reduced-motion:reduce){.about-cover img,.about-tesla [data-about-reveal]{transition:none;transform:none;opacity:1}.data-flywheel-arcs>path,.data-flywheel-node i{animation:none;opacity:.8}}
/* Customer stories — quiet, image-led editorial index. */
.customer-stories-page{background:#f8f5ee;color:#171a1d}
.stories-main{background:#f5f3ed}
.stories-shell{width:min(1240px,calc(100% - 80px));margin:0 auto}
.stories-hero{padding:142px 0 76px}
.stories-kicker{margin:0 0 18px;color:#0b9e72;font:600 12px/1.2 var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
.stories-hero h1{max-width:940px;margin:0;color:#111820;font-size:clamp(48px,5.1vw,78px);font-weight:560;line-height:1;letter-spacing:-.055em}
.stories-intro{max-width:690px;margin:36px 0 0;color:#4b5359;font-size:clamp(18px,2vw,24px);line-height:1.5;letter-spacing:-.018em}
.stories-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 28px;padding-bottom:120px}
.story-card{min-width:0}
.story-card-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.24fr) minmax(430px,1fr);background:#ebe9e2}
.story-card-media{position:relative;overflow:hidden;margin:0;aspect-ratio:16/10;background:#e9ecea}
.story-card-featured .story-card-media{aspect-ratio:auto;min-height:620px}
.story-card-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.story-card-media figcaption{position:absolute;right:14px;bottom:12px;padding:6px 9px;border-radius:3px;background:rgba(11,17,20,.58);color:rgba(255,255,255,.88);font:500 9px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(8px)}
.story-card-media-placeholder{display:grid;place-items:center;background:#050607}
.story-card-media-contain.story-card-media-placeholder{background:#050607}
.story-card-media-placeholder img{opacity:0;pointer-events:none}
.story-card-media-placeholder::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:1px;background:rgba(255,255,255,.34);transform:translate(-50%,-50%)}
.story-card-media-placeholder figcaption{right:auto;bottom:auto;left:50%;top:calc(50% + 22px);padding:0;background:transparent;color:rgba(255,255,255,.48);transform:translateX(-50%);white-space:nowrap;backdrop-filter:none}
.story-card:hover .story-card-media img{transform:scale(1.018)}
.story-card-media-contain{background:#f5f5f2}
.story-card-media-contain img{object-fit:cover}
.story-card-copy{padding:30px 0 0}
.story-card:not(.story-card-featured){display:flex;flex-direction:column}
.story-card:not(.story-card-featured) .story-card-copy{display:flex;flex:1;flex-direction:column}
.story-card:not(.story-card-featured) .story-metrics{margin-top:auto}
.story-card-featured .story-card-copy{display:flex;flex-direction:column;justify-content:flex-start;padding:58px 48px}
.story-card-meta{display:flex;align-items:center;justify-content:flex-start;margin-bottom:22px}
.story-status{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid rgba(17,24,32,.2);border-radius:4px;color:#555d62;background:rgba(255,255,255,.34);font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.story-card h2{max-width:720px;margin:0;color:#12171b;font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
.story-card-featured h2{font-size:clamp(30px,2.65vw,40px)}
.story-card:not(.story-card-featured) h2{font-size:clamp(26px,2.45vw,36px)}
.story-card-copy>p{max-width:690px;margin:22px 0 0;color:#545c61;font-size:16px;line-height:1.65}
.story-metrics{display:flex;gap:34px;margin:42px 0 0;padding:28px 0 0;border-top:1px solid rgba(17,24,32,.14)}
.story-metrics div{min-width:0}
.story-metrics dt{color:#111820;font-size:28px;font-weight:550;line-height:1;letter-spacing:-.04em}
.story-metrics dd{margin:9px 0 0;color:#697075;font-size:12px;line-height:1.3}
.stories-cta{padding:110px 0 124px;background:#ebe9e2;text-align:center}
.stories-cta .stories-shell{display:flex;flex-direction:column;align-items:center}
.stories-cta h2{max-width:830px;margin:0 0 38px;color:#111820;font-size:clamp(36px,5vw,64px);font-weight:500;line-height:1.02;letter-spacing:-.055em}
.stories-cta .btn{min-width:190px}
@media(max-width:900px){
.stories-shell{width:min(100% - 40px,680px)}
.stories-hero{padding:112px 0 58px}
.stories-grid{grid-template-columns:1fr;gap:58px;padding-bottom:84px}
.story-card-featured{grid-column:auto;display:block}
.story-card-featured .story-card-media{min-height:0;aspect-ratio:4/3}
.story-card-featured .story-card-copy{padding:30px 0 0}
.stories-cta{padding:80px 0 88px}
}
@media(max-width:560px){
.stories-shell{width:calc(100% - 30px)}
.stories-hero h1{font-size:50px}
.stories-intro{margin-top:25px;font-size:18px}
.story-card-media{aspect-ratio:4/3}
.story-card-meta{align-items:flex-start;flex-direction:column;gap:10px}
.story-metrics{gap:24px;flex-wrap:wrap}
}