/* ============================================================================
   CircuitLeap — the home page only: the 3D hero, its loading state and the
   product cards. Everything shared with the rest of the site lives in site.css
   and is deliberately not repeated here.
   ============================================================================ */

/* The hero's ground and its one gradient are painted on the BODY, not on the
   hero element, because the 3D canvas sits between the two and anything painted
   on the hero itself would cover the stack. Sizing the gradient layer to the
   hero's own height keeps it off every section below. */
body{background:
  radial-gradient(64% 58% at 60% 74%,
    rgba(56,189,248,.070) 0%, rgba(56,189,248,.028) 44%, transparent 74%)
    no-repeat top center / 100% var(--hero-h),
  linear-gradient(var(--ground-hero), var(--ground-hero))
    no-repeat top center / 100% var(--hero-h),
  var(--cl-bg);}

#gl{position:absolute;top:0;left:0;width:100%;height:var(--hero-h);z-index:0;pointer-events:none;}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;z-index:2;min-height:var(--hero-h);display:grid;align-content:end;
  padding-bottom:calc(clamp(34px,5.4vh,64px) + 90px);}
h1{margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(38px,6.6vw,78px);line-height:.98;letter-spacing:-.028em;max-width:16ch;}
.sub{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-top:26px;flex-wrap:wrap;}
.lead{margin:0;max-width:42ch;font-size:clamp(15px,1.3vw,17px);color:var(--cl-text-muted);}
.acts{display:flex;gap:12px;align-items:center;}


/* ------------------------------------------------------- the loading mark --
   While the stack's layer images decode, the page shows the CircuitLeap mark
   in white, breathing. No drawing, no sequence, no colour — the mark is the
   brand, and a loading state is not the place to redraw it. */
.loading{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:var(--ground-hero);transition:opacity .6s ease;}
.loading.gone{opacity:0;pointer-events:none;}
.loading svg{width:84px;height:84px;overflow:visible;color:var(--cl-text);
  animation:mk-pulse 1.9s ease-in-out infinite;}
.mk-line{fill:none;stroke:currentColor;stroke-width:22;stroke-linecap:round;}
.mk-node{fill:currentColor;}

@keyframes mk-pulse{
  0%,100%{opacity:.32;transform:scale(.97);filter:none;}
  50%    {opacity:1;  transform:scale(1.02);
          filter:drop-shadow(0 0 15px rgba(241,245,249,.30));}
}

/* Anyone who has asked for less motion gets the mark, lit and still. */
@media(prefers-reduced-motion:reduce){
  .loading svg{animation:none;opacity:1;}
}


.rise{opacity:0;transform:translateY(16px);
  animation:rise 1.05s cubic-bezier(.16,.84,.28,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
.d0{animation-delay:.84s;} .d1{animation-delay:.95s;}
.d2{animation-delay:1.06s;} .d3{animation-delay:1.16s;} .d4{animation-delay:1.26s;}

:where(a,button):focus-visible{outline:2px solid var(--cl-accent);outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none;}
}
@media (max-width:860px){
  :root{--gutter:20px;}
  .nav{display:none;}
  h1{font-size:clamp(32px,9.4vw,50px);}
}


.after{position:relative;z-index:2;background:var(--cl-bg);}

/* ------------------------------------------------------------------ products --
   ONE card treatment, shared by every product. A card is a picture with the copy
   sitting on it, anchored to the bottom, plus a drawer of supporting facts that
   expands in place when the card is opened.

   WHY IT IS BUILT THIS WAY: the previous version had two different treatments —
   the wide card expanded its drawer in place, the narrow ones slid a separate
   floating panel over the picture. Two treatments meant every fix had to be made
   twice, and the narrow ones overflowed because their type was sized against the
   VIEWPORT while their box was sized against the GRID. Here every size inside a
   card is expressed in `cqw`, which means "percent of this card's own width", so
   a card can never be given type too big for itself. Adding a fourth product
   needs no new CSS at all.                                                       */
.clean-products{padding:96px 0 112px;background:var(--page-bg)}
.clean-products>.site-shell{max-width:var(--section-max,1360px)}
.clean-head{padding:0 0 38px}
.clean-head h2{max-width:820px;margin:0;font:480 clamp(40px,5vw,68px)/.96 var(--font-display);letter-spacing:-.055em}

.clean-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}

/* `container-type` is what makes `cqw` mean "percent of this card". */
.clean-card{container-type:inline-size;position:relative;min-height:440px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.030)}
.clean-card.clean-gama{grid-row:span 2;min-height:892px}

/* One accent per product, declared once and inherited by everything in the card. */
.clean-gama{--product:#38bdf8}
.clean-dias{--product:#a78bfa}
.clean-magellan{--product:#5eead4}

/* ---- the picture ---------------------------------------------------------- */
.clean-media{position:absolute;inset:0;overflow:hidden;background:var(--page-bg)}
.clean-media>img{display:block;width:100%;height:100%;object-fit:cover}
/* Only the framing of each photograph differs — never the box it sits in. */
.clean-gama .clean-media>img{object-position:52% 42%}
.clean-dias .clean-media>img{object-position:50% 40%}

/* The Magellan card has no photograph, so it draws its own waveform figure. */
.clean-magellan-visual{background:
  linear-gradient(rgba(94,234,212,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(94,234,212,.045) 1px,transparent 1px),rgba(0,0,0,.30);
  background-size:44px 44px}
.clean-magellan-visual svg{position:absolute;inset:6% 0 auto;width:100%;height:56%}
.clean-magellan-visual path{stroke-width:1.4}
.clean-magellan-visual path:nth-child(1){stroke:#5eead4}
.clean-magellan-visual path:nth-child(2){stroke:#7dd3fc}
.clean-magellan-visual path:nth-child(3){stroke:#c4b5fd}
.clean-magellan-visual path:nth-child(4){stroke:#f9a8d4}
.clean-magellan-visual path:nth-child(5){stroke:#fde68a}

/* The picture darkens towards the bottom so the copy always has ground to sit on,
   and darkens further while the card is open so the drawer stays readable. */
.clean-media::after{content:"";position:absolute;inset:0;transition:background .45s ease;
  background:linear-gradient(180deg,
    rgba(16,19,25,0) 0%, rgba(16,19,25,.06) 26%, rgba(16,19,25,.44) 52%,
    rgba(16,19,25,.90) 76%, rgba(16,19,25,.99) 100%)}
.clean-card:hover .clean-media::after,
.clean-card:focus-within .clean-media::after,
.clean-card.open .clean-media::after{
  background:linear-gradient(180deg,
    rgba(16,19,25,0) 0%, rgba(16,19,25,.22) 18%, rgba(16,19,25,.74) 40%,
    rgba(16,19,25,.97) 62%, rgba(16,19,25,.995) 84%)}

/* ---- the copy ------------------------------------------------------------- */
/* Anchored to the BOTTOM only, with no top edge, so the block grows upward into
   the picture as the drawer opens instead of being clipped by the card. */
.clean-copy{position:absolute;z-index:2;
  left:clamp(20px,4.2cqw,30px);right:clamp(20px,4.2cqw,30px);bottom:clamp(20px,4.2cqw,28px)}
.clean-logo{display:flex;align-items:center;gap:11px;margin-bottom:clamp(13px,3.2cqw,22px)}
.clean-logo img{display:block;width:clamp(34px,7.6cqw,58px);height:clamp(34px,7.6cqw,58px)}
.clean-logo strong{font:520 clamp(15px,2.4cqw,19px) var(--font-display);letter-spacing:-.03em}
.clean-claim{margin:0;font:500 clamp(23px,6cqw,46px)/1.02 var(--font-display);
  letter-spacing:-.045em;text-wrap:balance}
.clean-summary{max-width:46ch;margin:clamp(9px,1.6cqw,13px) 0 0;color:#a5b4c8;
  font-size:clamp(13px,1.85cqw,15px);line-height:1.5}
.clean-hint{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,3cqw,22px);
  color:#8294aa;font:9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.clean-hint::before{content:"";width:20px;height:1px;background:var(--product,#38bdf8)}

/* ---- the drawer ----------------------------------------------------------- */
/* Animating grid rows from 0fr to 1fr expands to the content's OWN height. A
   max-height would need a magic number per card, which is how the old narrow
   cards ended up clipping their last fact. */
.clean-drawer{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .52s cubic-bezier(.16,.84,.28,1),opacity .34s ease,margin-top .46s ease}
.clean-facts{overflow:hidden;min-height:0}
.clean-fact{padding:11px 0;border-top:1px solid rgba(255,255,255,.10);color:#c4d0df;
  font-size:clamp(12px,1.75cqw,13px);line-height:1.42}
.clean-fact:first-child{border-top:0}
.clean-card:hover .clean-drawer,
.clean-card:focus-within .clean-drawer,
.clean-card.open .clean-drawer{grid-template-rows:1fr;opacity:1;margin-top:clamp(13px,3cqw,22px)}

/* The whole card is one button, so the card is keyboard-reachable as one thing. */
.clean-card>button{position:absolute;inset:0;z-index:3;border:0;background:transparent;cursor:pointer}
.clean-card>button:focus-visible{outline:2px solid #38bdf8;outline-offset:-3px}

.clean-platform{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.030)}
.clean-platform-item{position:relative;min-height:230px;padding:28px 30px;overflow:hidden}
.clean-platform-item+.clean-platform-item{border-left:1px solid rgba(178,201,231,.16)}
.clean-platform-item h3{margin:14px 0 8px;font:500 clamp(27px,2.8vw,40px)/1 var(--font-display);letter-spacing:-.045em}
.clean-platform-item p{max-width:460px;margin:0;color:#9aa9bd;font-size:13px;line-height:1.5}
.clean-clai{display:grid;grid-template-columns:minmax(220px,.88fr) minmax(280px,1.12fr);gap:24px;align-items:center}
.clean-clai-lock{display:flex;align-items:center;gap:10px;color:#caeaff;font:10px var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
.clean-clai-lock img{display:block;width:30px;height:30px}
.clean-clai-ui{min-height:174px;padding:15px;border:1px solid rgba(178,201,231,.16);background:rgba(0,0,0,.34);color:#aab9ca;font:9px/1.45 var(--font-mono)}
.clean-request{min-height:48px;margin-left:34px;padding:10px 11px;border-radius:10px 10px 2px 10px;background:#121d2e;color:#e1eaf6}
.clean-step{display:flex;align-items:center;gap:8px;padding:7px 2px;opacity:.2;transform:translateY(4px);transition:opacity .32s ease,transform .32s ease}
.clean-step::before{content:"";width:5px;height:5px;border:1px solid #5eead4;border-radius:50%}
.clean-step.done{opacity:1;transform:none}.clean-step.done::before{background:#5eead4}
.clean-approval{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:9px 10px;border:1px solid rgba(178,201,231,.16);opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease}
.clean-approval.show{opacity:1;transform:none}.clean-approval button{height:27px;padding:0 10px;border:1px solid rgba(125,211,252,.35);border-radius:999px;background:transparent;color:#c8eafd;font:8px var(--font-mono);cursor:pointer}
.clean-kicker{color:#38bdf8;font:10px var(--font-mono);letter-spacing:.17em;text-transform:uppercase}
.clean-eda-flow{display:flex;gap:7px;margin-top:20px}
.clean-eda-flow span{padding:7px 9px;border:1px solid rgba(178,201,231,.16);color:#9cb0c8;font:8px var(--font-mono);text-transform:uppercase}

/* The heterogeneous strip spans the whole platform box. Its three facts read
   like the cards' drawer facts, but they are always visible. */
.clean-hetero{grid-column:1/-1;border-bottom:1px solid rgba(178,201,231,.16)}
.clean-hetero+.clean-platform-item{border-left:0}
.clean-hetero-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:22px}
.clean-hetero-fact{padding-top:12px;border-top:1px solid rgba(255,255,255,.10);color:#c4d0df;font-size:13px;line-height:1.5}
.clean-hetero-shot{margin:26px 0 0;border:1px solid rgba(178,201,231,.16);background:rgba(0,0,0,.34)}
.clean-hetero-shot img{display:block;width:100%;height:auto}
.clean-hetero-shot figcaption{padding:10px 12px;border-top:1px solid rgba(178,201,231,.16);
  color:#8294aa;font:9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}

/* The one-line proof strip under the hero. Same mono voice as the eyebrows;
   hairline separators between the facts, stacking cleanly on a phone. */
.hero-proof-in{display:flex;flex-wrap:wrap;gap:10px 0;padding:22px var(--gutter);
  color:#8899ad;font:10px var(--font-mono);letter-spacing:.15em;text-transform:uppercase}
.hero-proof-in span+span{margin-left:28px;padding-left:28px;border-left:1px solid rgba(178,201,231,.22)}

.product-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,.84,.28,1),transform .7s cubic-bezier(.16,.84,.28,1)}
.product-reveal.seen{opacity:1;transform:none}

@media(max-width:900px){
  .clean-grid{grid-template-columns:1fr}.clean-card.clean-gama{grid-row:auto;min-height:520px}.clean-card{min-height:480px}.clean-platform{grid-template-columns:1fr}.clean-platform-item+.clean-platform-item{border-left:0;border-top:1px solid rgba(178,201,231,.16)}
  .clean-hetero{border-bottom:0}.clean-hetero-facts{grid-template-columns:1fr;gap:12px}
}
@media(max-width:650px){
  .site-header nav{display:none}.page-hero,.hero-copy{min-height:78vh}.hero-copy{padding-bottom:44px}.hero-copy h1{font-size:clamp(38px,11vw,52px)}.hero-stack i{left:35%;top:9%;width:105vw;transform:translateX(-24%) rotateX(57deg) rotateZ(-18deg) translateY(calc(var(--step) * 13px))}
  .clean-products{padding:64px 0 76px}.clean-head{padding-bottom:30px}.clean-head h2{font-size:42px}.clean-grid{gap:10px}.clean-card{min-height:500px}.clean-card.clean-gama{min-height:560px}
  
  .clean-platform{margin-top:10px}.clean-platform-item{padding:25px 22px}.clean-clai{grid-template-columns:1fr}.clean-clai-ui{margin-top:4px}.clean-eda-flow{flex-wrap:wrap}
  .hero-proof-in{flex-direction:column;gap:12px;padding:20px var(--gutter)}
  .hero-proof-in span+span{margin-left:0;padding-left:0;border-left:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-rise,.hero-stack i{opacity:1;animation:none}.product-reveal{opacity:1;transform:none;transition:none}.clean-drawer,.clean-step,.clean-approval{transition:none!important}
}