/* Home: hero with the 3D core on a hero panel, readouts, ticker, layer panels, deep dives,
   chrome figures, sector bento, footprint and the closing call. */

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;padding-block:clamp(44px,5.6vw,84px)}
.hero .text{position:relative;z-index:2;display:grid;gap:30px;align-content:center;min-width:0}
.hero .label{color:var(--fg-2)}
.hero h1{font-size:var(--fs-hero);line-height:1;letter-spacing:-.025em;font-weight:620;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 span{font-weight:680;background:none;-webkit-text-fill-color:var(--signal);color:var(--signal)}
.hero .lede{max-width:540px}
.hero-stage{position:relative;height:clamp(420px,44vw,620px);max-width:100%;overflow:hidden;border:1px solid rgba(98,225,239,.55);border-radius:24px;background:linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 100%);box-shadow:var(--sh-hero)}
.hero-stage::before{content:"";position:absolute;right:-34px;top:-30px;width:170px;height:170px;background:url(../img/velariq-mark-192.png) center/contain no-repeat;opacity:.1;pointer-events:none}
.hero-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(98,225,239,.10),transparent 62%);pointer-events:none}
.hero-stage canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.hero-stage canvas:active{cursor:grabbing}
.tele{position:absolute;z-index:2;display:grid;gap:2px;padding:12px 15px;border:1px solid rgba(0,0,0,.42);border-radius:14px;background:var(--chip);box-shadow:var(--sh-well);color:var(--muted);font-size:12.5px;line-height:1.6;pointer-events:none}
.tele b{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--fg)}
.tele b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px rgba(98,225,239,.22)}
.tele span span{color:var(--fg)}
.tele.t1{top:16px;right:16px}
.tele.t2{bottom:16px;left:16px}
.tele.t2 b::before{background:var(--verified);box-shadow:0 0 0 2px rgba(131,224,166,.22)}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero-stage{height:min(112vw,520px)}.tele{font-size:11.5px;padding:9px 12px}.tele b{font-size:11.5px}}

/* Ticker */
.ticker{border-bottom:1px solid var(--line);color:var(--fg-2);font-size:12.5px;font-weight:650;font-stretch:var(--wide);letter-spacing:.14em;text-transform:uppercase}
.ticker .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;min-height:68px;padding-block:14px}
.ticker i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.6}
@media (max-width:760px){.ticker .wrap{justify-content:flex-start}.ticker i{display:none}}

/* Layer panels */
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.layer-card{justify-content:space-between;gap:44px;min-height:360px;padding:clamp(24px,2.6vw,36px)}
.layer-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.layer-card .top svg{width:52px;height:52px;flex:none}
.layer-card .body{display:grid;gap:14px}
.layer-card p{color:var(--fg-2);font-size:15.5px;line-height:1.6}
.layer-card .go{font-size:15px;font-weight:650;color:var(--fg)}
.layer-card.thermal .go,.layer-card.cognition .go,.layer-card.proof .go{color:var(--fg)}
.layer-card:hover .go{color:var(--signal)}
@media (max-width:1080px){.layers{grid-template-columns:minmax(0,1fr)}.layer-card{min-height:0}}

/* Deep-dive points: rows on one raised panel, as in the app's lists */
.points{display:grid;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel);overflow:hidden}
.point{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:18px 18px}
.point+.point{box-shadow:inset 0 1px 0 var(--line)}
.point .k{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--edge);border-radius:9px;background:linear-gradient(180deg,var(--key-a) 0%,var(--key-b) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 0 #1A1D22;font-size:13px;font-weight:700;color:var(--fg)}
.points.sage .point .k,.points.teal .point .k{color:var(--fg)}
.point div{display:grid;gap:4px;min-width:0}
.point h4{font-size:16.5px}
.point p{color:var(--fg-2);font-size:15px}

/* Panel holding a diagram */
.diagram{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:clamp(400px,46vw,660px);border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel)}
.diagram svg{width:100%;height:auto;max-width:620px}
.diagram .scanline{position:absolute;left:0;right:0;top:12%;height:1px;background:rgba(98,225,239,.5);opacity:.35;animation:scan 9s linear infinite;--scan:clamp(320px,36vw,500px)}

/* Cognition panels */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cog-card{gap:18px;min-height:400px;padding:34px}
.cog-card svg{width:100%;height:150px}
.cog-card h3{font-size:22px}
.cog-card p{color:var(--fg-2);font-size:15.5px}
.cog-glow{display:none}
@media (max-width:980px){.cards-3{grid-template-columns:minmax(0,1fr)}.cog-card{min-height:0}}

/* Chrome figures */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.metric{position:relative;overflow:hidden;display:grid;align-content:start;gap:14px;padding:30px 28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel)}
.metric+.metric{padding-left:28px;border-left:1px solid var(--line)}
.metric b{font-size:clamp(40px,4vw,54px);font-weight:560;font-stretch:var(--wide);line-height:1.04;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric b small{margin-left:8px;font-size:13px;font-weight:650;letter-spacing:.06em;-webkit-text-fill-color:var(--muted);color:var(--muted)}
.metric.sage b{background:var(--chrome);-webkit-background-clip:text;background-clip:text}
.metric span{color:var(--fg-2);font-size:15px}
@media (max-width:760px){.metrics{grid-template-columns:minmax(0,1fr)}}

/* Sector bento: 7/5 then 5/7 */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.tile{position:relative;overflow:hidden;gap:18px;min-height:380px;padding:30px}
.tile.w7{grid-column:span 7}
.tile.w5{grid-column:span 5}
.tile .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.tile .top .label{font-size:12.5px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid rgba(0,0,0,.42);border-radius:8px;background:var(--bg-2);box-shadow:var(--sh-well);font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--fg-2)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--steel)}
.tag.sage::before{background:var(--sage)}
.tag.teal::before{background:var(--teal)}
.tag.sage,.tag.teal{border-color:rgba(0,0,0,.42);color:var(--fg-2)}
.tile .art{flex-grow:1;display:flex;align-items:center;justify-content:center;min-height:190px}
.tile .art svg{width:100%;height:190px}
.tile .tile-copy{display:grid;gap:8px}
.tile .tile-copy b{font-size:24px;font-weight:620;font-stretch:var(--wide);letter-spacing:-.01em}
.tile .tile-copy span{max-width:520px;color:var(--fg-2);font-size:15.5px;line-height:1.55}
.radar{position:relative;display:grid;place-items:center;width:190px;height:190px;border:1px solid rgba(98,225,239,.3);border-radius:50%;overflow:hidden;background:var(--bg-2);box-shadow:var(--sh-well)}
.radar i{position:absolute;border:1px solid rgba(98,225,239,.22);border-radius:50%}
.radar i:nth-child(1){width:124px;height:124px}
.radar i:nth-child(2){width:60px;height:60px}
.radar::before,.radar::after{content:"";position:absolute;background:rgba(98,225,239,.18)}
.radar::before{width:100%;height:1px}
.radar::after{width:1px;height:100%}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(98,225,239,.24),transparent 70deg);animation:spin 6s linear infinite}
.radar .blip{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--signal)}
.steps-mini{display:grid;gap:8px;width:100%;align-self:center}
.steps-mini div{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;border:1px solid rgba(0,0,0,.42);border-radius:10px;background:var(--bg-2);box-shadow:var(--sh-well);color:var(--fg-2);font-size:13px}
.steps-mini div span:first-child{color:var(--muted);font-variant-numeric:tabular-nums}
.steps-mini div span:nth-child(2){flex-grow:1}
.steps-mini div span:last-child{color:var(--verified)}
.steps-mini div.final{border-color:rgba(98,225,239,.5);color:var(--fg)}
.steps-mini div.final span:last-child{color:var(--signal)}
@media (max-width:980px){.tile.w7,.tile.w5{grid-column:1/-1}.tile{min-height:0}}

/* Footprint */
.footprint{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 20px;align-items:center}
.footprint .text{grid-column:span 4;display:grid;gap:22px;min-width:0}
.footprint .text h2{font-size:clamp(30px,2.6vw,38px)}
.footprint .visual{grid-column:6 / span 7;min-width:0}
@media (max-width:980px){.footprint .text,.footprint .visual{grid-column:1/-1}}

/* Closing call */
.cta-box{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:30px;padding:clamp(28px,4vw,56px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel)}
.cta-box .flow-art{position:absolute;right:-40px;top:0;width:600px;height:100%;pointer-events:none;opacity:.8}
.cta-box .text{position:relative;display:grid;gap:16px;max-width:700px;min-width:0}
.cta-box h2{font-size:clamp(28px,3vw,42px);line-height:1.1}
.cta-box p{color:var(--fg-2);font-size:17px}
.cta-box .act{position:relative;display:grid;justify-items:center;gap:12px}
.cta-box .act .mono{color:var(--fg-2);font-size:13.5px}

/* Company record */
.rec-h{margin:14px 0 22px;font-size:clamp(26px,2.4vw,34px)}
.facts{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel);overflow:hidden}
.facts>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:15px 18px}
.facts>div+div{box-shadow:inset 0 1px 0 var(--line)}
.facts dt{padding-top:2px;font-size:13px;font-weight:650;color:var(--muted)}
.facts dd{margin:0;font-size:16px;min-width:0}
.facts dd small{display:block;margin-top:2px;font-size:13px;color:var(--fg-2)}
.leaders{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel);overflow:hidden}
.leader{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding:17px 18px}
.leader+.leader{box-shadow:inset 0 1px 0 var(--line)}
.leader b{font-size:19px;font-weight:620;font-stretch:var(--wide);letter-spacing:-.01em}
.leader span{color:var(--fg-2);font-size:14px;text-align:right}
.leader p{grid-column:1/-1;max-width:56ch;color:var(--fg-2);font-size:15px}
@media (max-width:560px){.facts>div{grid-template-columns:minmax(0,1fr);gap:4px}.leader{grid-template-columns:minmax(0,1fr)}.leader span{text-align:left}}