/* OVERWATCH — index (home) page styles. Shared tokens, nav and footer
   chrome live in base.css (loaded first); this file overrides where the
   home page diverges and adds its hero / showcase / block styles. */

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:0.96;letter-spacing:-0.02em;margin:0;text-transform:uppercase;}
header.nav.scrolled{
  background:rgba(7,8,9,0.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand .mk{width:30px;height:30px;border-radius:7px;background:var(--signal);position:relative;border:0;flex:0 0 auto;}
.brand .mk::after{content:"";position:absolute;inset:9px;border:1.6px solid #fff;background:transparent;}
.brand .brand-badge{font-family:var(--mono);font-weight:600;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);border-radius:999px;padding:4px 10px;margin-left:4px;white-space:nowrap;}
.btn{
  font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;font-size:14px;
  border:1px solid var(--line);color:var(--white);background:transparent;
  padding:11px 22px;border-radius:8px;cursor:pointer;transition:all .25s ease;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}
.btn::before{display:none;}
.btn:hover{background:#fff;color:#000;border-color:#fff;}
.btn-demo{display:inline-flex;align-items:center;gap:9px;background:var(--signal);color:#fff;font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;padding:8px 16px;border-radius:7px;white-space:nowrap;transition:background .25s ease,box-shadow .25s ease;}
.btn-demo .bd-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#fff;color:#0a0a0b;border-radius:5px;font-size:13px;line-height:1;transition:transform .25s ease;}
.btn-demo:hover{background:#c33a29;box-shadow:0 6px 20px rgba(230,66,40,0.35);}
.btn-demo:hover .bd-arrow{transform:translateX(3px);}
.nav-inner a.btn-demo{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;color:#fff;font-size:13px;}
.btn-line{border-color:var(--line);}
.btn-ghost::before{display:none;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;}
.hero-bg image-slot{width:100%;height:100%;display:block;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(7,8,9,0.96) 0%, rgba(7,8,9,0.45) 38%, rgba(7,8,9,0.2) 62%, rgba(7,8,9,0.55) 100%),
    linear-gradient(to right, rgba(7,8,9,0.65) 0%, transparent 55%);
}
.hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 100% 80% at 30% 60%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 30% 60%,#000 20%,transparent 80%);
}
.hero-top{
  position:absolute;top:96px;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-start;
}
.hero-top .col-r{text-align:right;line-height:2;}
.hero-inner{position:relative;z-index:3;width:100%;padding-top:clamp(104px,12vh,140px);padding-bottom:clamp(60px,8vh,104px);text-align:center;}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.hero-eyebrow::before{content:"";width:40px;height:1px;background:var(--steel-dim);}
.hero h1{
  font-size:clamp(64px,15vw,210px);font-weight:800;letter-spacing:-0.03em;line-height:0.84;
  margin:0 0 24px;
}
/* Expanding logo window in the hero's open upper area */
.hero-modal{
  position:relative;z-index:3;width:min(52vw,640px);margin:0 auto clamp(28px,4.5vh,64px);
  transform:scale(0);transform-origin:center bottom;opacity:0;
  animation:heroModalIn 1.2s cubic-bezier(.16,1,.3,1) .5s forwards;pointer-events:none;
}
@keyframes heroModalIn{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}
.hero-win{margin:0;width:100%;box-shadow:0 44px 120px rgba(0,0,0,0.72);pointer-events:auto;}
.hero-win-body{position:relative;background:#0b0b0d;padding:44px 34px 40px;display:flex;align-items:center;justify-content:center;min-height:244px;}
/* boot loader phase */
.hw-boot{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;transition:opacity .4s ease;}
.hw-boot .mk{width:46px;height:46px;stroke:#fff;fill:none;stroke-width:1.3;}
.hw-bootlabel{color:var(--steel);font-size:10px;}
.hw-appname{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:0.24em;font-size:11px;color:var(--steel);text-align:center;}
.hw-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:0.2em;color:var(--signal);text-transform:uppercase;}
.hw-livedot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px rgba(230,66,40,0.7);animation:dmpulse 1.6s ease-in-out infinite;}
.hw-bar{width:78%;max-width:300px;height:3px;background:rgba(255,255,255,0.12);position:relative;overflow:hidden;}
.hw-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--signal);box-shadow:0 0 12px rgba(230,66,40,0.6);}
.hw-pct{color:var(--steel-dim);font-size:10px;letter-spacing:0.2em;}
/* content phase */
.hw-app{display:none;flex-direction:column;align-items:center;gap:18px;width:100%;opacity:0;transition:opacity .6s ease;}
.hw-mk-sm{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.3;}
.hw-usp{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.8vw,25px);letter-spacing:0.005em;line-height:1.12;color:#fff;text-align:center;text-wrap:balance;max-width:22ch;height:4em;display:flex;align-items:flex-start;justify-content:center;transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);}
.hw-usp.swap{opacity:0;transform:translateY(10px);}
.uw-inner{display:block;text-align:center;}
.hw-usp .uw-word,.hw-usp .uw-pop{display:inline-block;}
.hw-usp .uw-amt{display:inline-block;color:#d4ad57;font-variant-numeric:tabular-nums;margin-top:4px;}
.hw-usp .uw-hi{color:#d4ad57;}
.hw-usp .uw-ch{display:inline;opacity:0;transition:opacity .35s ease;}
/* Request Early Access — between the window and the tagline */
.hero-cta-mid{position:relative;z-index:5;display:flex;width:max-content;margin:0 auto clamp(40px,7vh,96px);font-size:13px;padding:15px 28px;}
.hw-cta{font-size:11px;padding:11px 18px;}
@media(prefers-reduced-motion:reduce){
  .hero-modal{animation:none;transform:scale(1);opacity:1;}
}
@media(max-width:760px){
  .hero-modal{width:84vw;}
}
.hero-tagline{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,72px);letter-spacing:-0.01em;line-height:1.04;
  color:#fff;margin:0 0 22px;max-width:none;position:relative;z-index:6;text-shadow:none;
}
/* Sliding wordmark marquee (right -> left) */
.hero-marquee{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;margin-bottom:26px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.hm-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:marquee 68s linear infinite;}
.hm-track span{
  font-family:var(--display);font-weight:800;font-size:clamp(64px,15vw,210px);
  letter-spacing:-0.03em;line-height:0.86;text-transform:uppercase;padding-right:0.55em;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.hm-track{animation:none;}}
.hero-word{font-family:var(--display);font-weight:800;font-size:clamp(56px,12vw,168px);letter-spacing:0.01em;line-height:0.9;text-transform:uppercase;margin:0 0 22px;color:#fff;}
.hero .lead{max-width:none;white-space:nowrap;font-size:clamp(17px,1.6vw,21px);margin:0 0 28px;color:#cfd2d6;}
.triad{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.triad span{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.2em;font-size:12px;color:#fff;}
.triad .sep{color:var(--steel-dim);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;}
/* Per-section tailored CTA — larger, inverted to stand out */
.sect-cta{margin-top:50px;display:flex;}
.sect-cta .btn{font-size:15px;padding:15px 30px;letter-spacing:0;background:var(--signal);color:#fff;border-color:transparent;}
.sect-cta .btn:hover{background:#c33a29;color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(230,66,40,0.35);}
section.invert .btn{border-color:rgba(0,0,0,0.28);color:var(--bone-ink);}
section.invert .btn:hover{background:var(--bone-ink);color:var(--bone);border-color:var(--bone-ink);}
section.invert .sect-cta .btn{background:var(--signal);color:#fff;border-color:transparent;}
section.invert .sect-cta .btn:hover{background:#c33a29;color:#fff;border-color:transparent;}
.btn-solid{background:var(--signal);color:#fff;border-color:transparent;}
.btn-solid:hover{background:#c33a29;color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(230,66,40,0.35);}
.hero-foot{
  position:relative;z-index:3;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:18px 0;margin-top:8px;
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px rgba(230,66,40,0.7);animation:blink 2.4s ease-in-out infinite;}

/* ---------- Blocks ---------- */
section.block{position:relative;z-index:2;padding:130px 0;border-top:1px solid var(--line);}
.block-head{display:flex;gap:22px;align-items:baseline;margin-bottom:56px;flex-wrap:wrap;}
.block-head h2{font-size:clamp(34px,5.2vw,72px);max-width:18ch;}
.idx{font-family:var(--mono);font-weight:500;letter-spacing:0.2em;font-size:12px;color:var(--steel-dim);white-space:nowrap;}
.idx b{color:var(--signal);font-weight:500;}

.statement{max-width:1040px;}
.statement .big{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,62px);line-height:1.02;letter-spacing:-0.02em;
}
.statement p.body{max-width:620px;margin-top:32px;color:var(--steel);font-weight:300;font-size:17px;}

/* Problem keyword effects — meaning-driven */
/* fragmented — letters scatter as broken fragments, then assemble */
.fx-frag{display:inline-block;}
.fx-frag .frag-l{display:inline-block;transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg));opacity:0;transition:transform 1.7s cubic-bezier(.16,1,.3,1),opacity 1.1s ease;}
.statement.in .fx-frag .frag-l{transform:none;opacity:1;}
/* exposed — a redaction bar wipes away to uncover the word */
.fx-exposed{position:relative;display:inline-block;}
.fx-exposed::after{content:"";position:absolute;left:-5px;right:-5px;top:-1px;bottom:-1px;background:#26262d;transform:scaleX(1);transform-origin:right center;transition:transform 1.3s cubic-bezier(.7,0,.25,1) .9s;}
.statement.in .fx-exposed::after{transform:scaleX(0);}
@media(prefers-reduced-motion:reduce){
  .fx-frag .frag-l{transform:none;opacity:1;transition:none;}
  .fx-exposed::after{display:none;}
}

/* Data callout */
/* Environment — two converging forces */
.forces{display:grid;grid-template-columns:1fr 1fr;margin-top:52px;border:1px solid var(--line);}
.force{padding:36px 36px 40px;}
.force + .force{border-left:1px solid var(--line);}
.force-tag{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.18em;font-size:10.5px;color:var(--steel-dim);margin-bottom:20px;}
.force h3{font-family:var(--display);font-weight:700;text-transform:none;font-size:clamp(21px,2.1vw,28px);letter-spacing:-0.015em;line-height:1.08;margin:0 0 16px;}
.force > p{color:var(--steel);font-weight:300;font-size:14.5px;line-height:1.62;margin:0;max-width:46ch;}
.force-stats{margin-top:26px;}
.force-stat{border-top:1px solid var(--line-soft);padding-top:20px;margin-top:20px;}
.force-stat:first-child{border-top:0;margin-top:0;padding-top:0;}
.force-k{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,48px);letter-spacing:-0.03em;line-height:1;margin-bottom:11px;}
.force-k em{font-style:normal;color:var(--signal);}
.force-l{display:block;color:var(--steel);font-weight:300;font-size:13.5px;line-height:1.55;max-width:48ch;}
.src{display:block;margin-top:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.14em;font-size:9.5px;line-height:1.5;color:var(--steel-dim);}
.src a{color:var(--steel);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;}
.src a:hover{color:#fff;border-bottom-color:var(--signal);}
.problem-bridge{margin-top:44px;max-width:680px;font-family:var(--display);font-weight:600;text-transform:none;font-size:clamp(19px,2.1vw,26px);line-height:1.28;letter-spacing:-0.015em;color:#fff;}
.problem-bridge .red{color:var(--signal);}

/* Capability grid */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.cap{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:42px 38px 48px;min-height:280px;position:relative;transition:background .35s ease;
  display:flex;flex-direction:column;
}
.cap:hover{background:var(--panel);}
.cap-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.cap .tag{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;color:var(--steel);text-transform:uppercase;}
.cap .ref{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--steel-dim);}
.cap h3{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.01em;line-height:1.08;margin-bottom:16px;text-transform:none;}
.cap p{color:var(--steel);font-size:14.5px;font-weight:300;line-height:1.62;margin:0;}
.cap .corner{position:absolute;bottom:18px;right:20px;width:0;height:0;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent var(--faint) transparent;transition:border-color .3s;z-index:2;}
.cap:hover .corner{border-color:transparent transparent var(--signal) transparent;}

/* Media capability card — full-bleed image with gradient */
.cap.cap-media{color:#fff;justify-content:flex-end;overflow:hidden;padding-bottom:34px;aspect-ratio:1 / 1;min-height:0;}
.cap.cap-media:hover{background:transparent;}
.cap.cap-media .cap-img{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cap.cap-media .cap-img img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.02);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.cap.cap-media:hover .cap-img img{transform:scale(1.07);}
.cap.cap-media .cap-img img.img-up{transform:scale(1.16) translateY(-8%);}
.cap.cap-media:hover .cap-img img.img-up{transform:scale(1.21) translateY(-8%);}
.cap.cap-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(7,8,9,0.92) 0%,rgba(7,8,9,0.6) 16%,rgba(7,8,9,0.18) 38%,transparent 60%);}
.cap.cap-media .cap-top,.cap.cap-media h3,.cap.cap-media p,.cap.cap-media .cap-cta{position:relative;z-index:2;}
.cap.cap-media .cap-top{margin-bottom:auto;}
.cap.cap-media h3{margin-top:14px;text-shadow:0 1px 18px rgba(0,0,0,0.45);}
.cap.cap-media p{color:#d6d9dd;text-shadow:0 1px 14px rgba(0,0,0,0.5);}
.cap-cta{
  align-self:flex-start;margin-top:20px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.04em;color:#fff;
  padding:10px 17px;border:1px solid rgba(255,255,255,0.42);border-radius:8px;
  background:rgba(7,8,9,0.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.cap-cta svg{width:14px;height:14px;transition:transform .25s ease;}
.cap.cap-media:hover .cap-cta{background:var(--signal);border-color:var(--signal);}
.cap.cap-media:hover .cap-cta svg{transform:translateX(3px);}
.cap.cap-media .tag,.cap.cap-media .ref{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,0.55);}

/* Steps */
.steps{border-top:1px solid var(--line);}
.step{
  display:grid;grid-template-columns:120px 1fr;gap:40px;align-items:start;
  padding:40px 0;border-bottom:1px solid var(--line);
}
.step .snum{font-family:var(--display);font-weight:800;font-size:clamp(38px,4.4vw,60px);letter-spacing:-0.03em;line-height:.8;color:var(--white);}
.step h3{font-size:22px;letter-spacing:-0.01em;margin-bottom:12px;text-transform:none;}
.step p{color:var(--steel);font-weight:300;font-size:15.5px;max-width:64ch;margin:0;}

/* How It Works — collapsed accordion: only 01 shown, others cascade open on scroll-in */
.step .step-c{position:relative;}
.step .acc-ind{display:none;}
.step .stepbody{margin-top:12px;}
/* steps 02–04 start fully collapsed (whole row) */
.steps .step + .step{
  max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-width:0;overflow:hidden;
  transition:max-height 1s cubic-bezier(.16,1,.3,1),opacity .8s ease,padding .85s cubic-bezier(.16,1,.3,1),border-color .6s ease;
}
.steps.in .step + .step{
  max-height:500px;opacity:1;padding-top:40px;padding-bottom:40px;border-bottom-width:1px;
}
.steps.in .step:nth-child(2){transition-delay:.10s;}
.steps.in .step:nth-child(3){transition-delay:.55s;}
.steps.in .step:nth-child(4){transition-delay:1.0s;}
@media(prefers-reduced-motion:reduce){
  .steps .step + .step{max-height:none;opacity:1;padding-top:40px;padding-bottom:40px;border-bottom-width:1px;transition:none;}
}

/* "live" glows into signal red */
#how .fx-live{color:inherit;transition:color 2s ease,text-shadow 2s ease;}
#how .block-head.in .fx-live{color:var(--signal);}
@keyframes liveGlow{0%,100%{text-shadow:none;}50%{text-shadow:none;}}
@media(prefers-reduced-motion:reduce){
  #how .block-head.in .fx-live{animation:none;color:var(--signal);text-shadow:none;}
}


/* Invert (light) section */
section.invert{background:var(--bone);color:var(--bone-ink);border-top:1px solid rgba(0,0,0,0.14);}
section.invert .idx{color:var(--bone-mute);}
section.invert .idx b{color:var(--signal);}
section.invert .steps{border-color:rgba(0,0,0,0.16);}
section.invert .step{border-color:rgba(0,0,0,0.12);}
section.invert .step .snum{color:var(--bone-ink);}
section.invert .step p{color:var(--bone-mute);}
section.invert .mono{color:var(--bone-mute);}

/* About */
.ops{max-width:940px;}
.ops .big{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(28px,4.2vw,56px);line-height:1.02;letter-spacing:-0.02em;}
.ops p.body{margin-top:26px;color:var(--steel);font-weight:300;max-width:680px;font-size:16.5px;}
.ops .row{display:flex;gap:0;margin-top:54px;border:1px solid var(--line);flex-wrap:wrap;}
.ops .stat{flex:1;min-width:200px;padding:28px 30px;border-right:1px solid var(--line);}
.ops .stat:last-child{border-right:0;}
.ops .stat .k{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.01em;line-height:1;}
.ops .stat .l{color:var(--steel);font-size:12px;text-transform:uppercase;letter-spacing:0.14em;font-family:var(--mono);margin-top:12px;}

/* CTA */
.cta{position:relative;z-index:2;border-top:1px solid var(--line);overflow:hidden;}
.cta-bg{position:absolute;inset:0;z-index:0;}
.cta-bg image-slot{width:100%;height:100%;}
.cta::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(7,8,9,0.92),rgba(7,8,9,0.82));}
.cta-inner{position:relative;z-index:3;max-width:680px;margin:0 auto;text-align:center;padding:130px 0 120px;}
.cta h2{font-size:clamp(44px,7vw,108px);margin-bottom:22px;letter-spacing:-0.03em;}
.cta p.lead{font-size:18px;margin:0 auto 44px;max-width:520px;}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;}
.form .full{grid-column:1 / -1;}
.form input{
  width:100%;background:rgba(255,255,255,0.02);border:1px solid var(--line);color:#fff;
  font-family:var(--body);font-size:15px;padding:15px 16px;outline:none;transition:border-color .25s,background .25s;
}
.form input::placeholder{color:var(--steel-dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:0.1em;font-size:11.5px;}
.form input:focus{border-color:#fff;background:rgba(255,255,255,0.04);}
.form button{grid-column:1 / -1;margin-top:6px;width:100%;padding:17px;justify-content:center;font-size:12px;}
.form-note{margin-top:18px;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.16em;font-size:11px;color:var(--steel-dim);}


/* ===== Product showcase — macOS window + live dashboard ===== */
.showcase{position:relative;z-index:2;border-top:1px solid var(--line);padding:96px 0 112px;background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,255,255,0.035), transparent 70%);}
.showcase .block-head{margin-bottom:0;}
.macwin{position:relative;max-width:1200px;margin:46px auto 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0b0d;box-shadow:0 50px 130px rgba(0,0,0,0.65);}
.macbar{height:40px;display:flex;align-items:center;gap:9px;padding:0 15px;background:#15151a;border-bottom:1px solid var(--line);}
.macbar .tl{width:12px;height:12px;border-radius:50%;}
.macbar .tl.r{background:#ff5f57;}.macbar .tl.y{background:#febc2e;}.macbar .tl.g{background:#28c840;}
.macbar .mtitle{flex:1;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--steel-dim);text-transform:uppercase;}
.demoui{display:flex;color:#cfd2d6;font-family:var(--mono);font-size:12px;line-height:1.5;}
.dm-side{width:212px;flex:0 0 212px;background:#0c0c0f;border-right:1px solid rgba(255,255,255,0.07);padding:16px 0 18px;}
.dm-brand{display:flex;align-items:flex-start;gap:9px;padding:0 16px;}
.dm-brand svg{width:20px;height:20px;color:#d4ad57;margin-top:1px;flex:0 0 auto;}
.dm-brand .bt{font-family:var(--display);font-weight:800;letter-spacing:0.14em;font-size:14px;color:#fff;line-height:1.1;}
.dm-brand .bs{font-size:8px;letter-spacing:0.16em;color:#6c6f75;text-transform:uppercase;margin-top:3px;}
.dm-role{margin:16px 0 6px;padding:0 16px;font-size:10px;letter-spacing:0.16em;color:#8c9097;text-transform:uppercase;}
.dm-navlabel{padding:0 16px;margin:16px 0 8px;font-size:9px;letter-spacing:0.22em;color:#56595f;text-transform:uppercase;}
.dm-nav{display:flex;align-items:center;gap:11px;padding:7px 16px;color:#9a9ea5;text-transform:uppercase;letter-spacing:0.07em;font-size:10.5px;cursor:default;transition:color .25s ease,text-shadow .25s ease;}
.dm-nav:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,0.75),0 0 22px rgba(212,173,87,0.45);}
.dm-nav:hover svg{filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));}
.dm-nav svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.4;}
.dm-nav.active{color:#fff;}
.dm-user{display:flex;align-items:center;gap:9px;padding:10px 16px;margin-top:4px;}
.dm-ava{width:22px;height:22px;border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:10px;color:#cfd2d6;flex:0 0 auto;}
.dm-main{flex:1;min-width:0;background:#0b0b0d;display:flex;flex-direction:column;}
.dm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,0.07);}
.dm-crumb{font-size:10.5px;letter-spacing:0.12em;color:#8c9097;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.dm-topr{display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:0.12em;color:#8c9097;text-transform:uppercase;}
.dm-toggle{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.12);padding:5px 9px;}
.dm-sw{width:26px;height:13px;border-radius:7px;background:#2a2a30;position:relative;}
.dm-sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#cfd2d6;}
.dm-inner{padding:22px;}
.dm-h1{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:0.02em;color:#fff;margin:0 0 14px;text-transform:uppercase;}
.dm-actions{display:flex;gap:9px;margin-bottom:22px;flex-wrap:wrap;align-items:center;}
.dm-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,0.14);padding:7px 12px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#cfd2d6;white-space:nowrap;cursor:default;transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,text-shadow .25s ease;}
.dm-btn:hover{color:#fff;border-color:rgba(255,255,255,0.45);text-shadow:0 0 10px rgba(255,255,255,0.6);box-shadow:0 0 18px rgba(255,255,255,0.12),inset 0 0 12px rgba(255,255,255,0.05);}
.dm-btn.gold:hover{color:#1a1407;text-shadow:none;box-shadow:0 0 22px rgba(212,173,87,0.75),0 0 40px rgba(212,173,87,0.4);border-color:#d4ad57;}
.dm-btn.grn:hover{color:#7fe0a6;border-color:rgba(91,189,132,0.7);text-shadow:0 0 10px rgba(91,189,132,0.6);box-shadow:0 0 18px rgba(91,189,132,0.25);}
.dm-btn.gold{background:#d4ad57;border-color:#d4ad57;color:#1a1407;font-weight:600;}
.dm-btn.gh{margin-left:auto;}
.dm-btn.grn{color:#5bbd84;border-color:rgba(91,189,132,0.4);}
.dm-cols{display:grid;grid-template-columns:1fr 290px;gap:26px;}
.dm-secl{border-left:2px solid #d4ad57;padding-left:11px;font-size:11px;letter-spacing:0.2em;color:#fff;text-transform:uppercase;font-weight:600;margin-bottom:10px;}
.dm-desc{color:#9a9ea5;font-size:12px;max-width:54ch;}
.dm-mlabel{font-size:9px;letter-spacing:0.2em;color:#6c6f75;text-transform:uppercase;margin:14px 0 7px;}
.dm-member{display:flex;align-items:center;gap:9px;}
.dm-member .ma{width:22px;height:22px;background:#17171c;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:9px;color:#cfd2d6;flex:0 0 auto;}
.dm-member .mn{font-weight:600;color:#fff;font-size:11px;}
.dm-member .ms{font-size:9px;color:#6c6f75;}
.dm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0;padding:18px 0;border-top:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(255,255,255,0.07);}
.dm-stat .sv{font-family:var(--display);font-weight:800;font-size:22px;color:#d4ad57;font-variant-numeric:tabular-nums;}
.dm-stat .sl{font-size:9px;letter-spacing:0.16em;color:#8c9097;text-transform:uppercase;margin-top:4px;}
.dm-tabs{display:flex;gap:26px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:20px;flex-wrap:wrap;}
.dm-tab{padding:0 0 12px;font-size:10.5px;letter-spacing:0.14em;color:#8c9097;text-transform:uppercase;position:relative;}
.dm-tab.active{color:#d4ad57;}
.dm-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#d4ad57;}
.dm-billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.dm-card{border:1px solid rgba(255,255,255,0.08);background:#0e0e12;padding:20px;border-radius:4px;}
.dm-card .ct{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.05em;color:#fff;text-transform:uppercase;}
.dm-badge{font-size:8px;letter-spacing:0.14em;border:1px solid #d4ad57;color:#d4ad57;padding:2px 7px;border-radius:8px;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;}
.dm-badge.cs{border-color:rgba(255,255,255,0.18);color:#8c9097;}
.dm-bal{margin:20px 0 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.dm-amt{font-family:var(--mono);font-weight:500;font-size:30px;letter-spacing:0.01em;color:#fff;font-variant-numeric:tabular-nums;}
.dm-cents{font-size:0.6em;color:#9a9ea5;}
.dm-cur{font-size:13px;color:#9a9ea5;}
.dm-addr{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,0.1);padding:9px 12px;font-size:10.5px;color:#9a9ea5;margin-bottom:16px;overflow:hidden;}
.dm-addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-walbtns{display:flex;gap:8px;flex-wrap:wrap;}
.dm-bank{display:flex;gap:14px;color:#7f8288;}
.dm-bank .bi{width:38px;height:38px;border:1px solid rgba(255,255,255,0.1);background:#141418;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.dm-bank .bi svg{width:18px;height:18px;color:#d4ad57;}
@keyframes dmpulse{0%,100%{opacity:1}50%{opacity:.3}}
.dm-online{width:6px;height:6px;border-radius:50%;background:#5bbd84;display:inline-block;animation:dmpulse 2s ease-in-out infinite;}

/* ===== Bite-size feature windows ===== */
.show-rows{display:flex;flex-direction:column;gap:84px;margin-top:64px;}
.show-row{display:grid;grid-template-columns:1.06fr 0.94fr;gap:58px;align-items:center;}
.show-row.flip .show-win{order:2;}
.show-text .sh-eye{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:0.22em;font-size:11px;color:var(--steel-dim);margin-bottom:20px;}
.show-text .sh-eye b{color:var(--signal);font-weight:500;}
.show-text .sh-eye::before{content:"";width:30px;height:1px;background:var(--steel-dim);}
.show-text h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.4vw,46px);letter-spacing:-0.02em;line-height:0.98;color:#fff;margin:0 0 16px;}
.show-text .sh-sub{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(15px,1.5vw,19px);letter-spacing:0.04em;color:#cfd2d6;margin:0 0 18px;}
.show-text .sh-body{color:var(--steel);font-weight:300;font-size:16px;line-height:1.65;max-width:48ch;margin:0;}

/* Title keyword effects — one per section function */
.show-text h3 .fx{display:inline-block;}
/* 00.1 navigation — slide in along a rail */
.fx-rail{position:relative;transform:translateX(-22px);opacity:0;transition:transform 1.2s cubic-bezier(.16,1,.3,1) .15s,opacity 1s ease .15s;}
.show-row.in .fx-rail{transform:none;opacity:1;}
.fx-rail::after{content:"";position:absolute;left:-13px;top:50%;height:2px;width:0;background:var(--signal);transform:translateY(-50%);transition:width .85s ease .65s;}
.show-row.in .fx-rail::after{width:7px;}
/* 00.2 scoped — focus in from blur */
.fx-scope{filter:blur(9px);opacity:0;letter-spacing:0.34em;transition:filter 1.3s ease .15s,opacity 1s ease .15s,letter-spacing 1.3s cubic-bezier(.16,1,.3,1) .15s;}
.show-row.in .fx-scope{filter:blur(0);opacity:1;letter-spacing:0;}
/* 00.3 glance — wipe reveal */
.fx-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.35s cubic-bezier(.7,0,.25,1) .2s;}
.show-row.in .fx-wipe{clip-path:inset(0 0 0 0);}
/* 00.4 privately — decrypt scramble (JS-driven) */
.fx-decode{color:#fff;}
@media(prefers-reduced-motion:reduce){
  .fx-rail,.fx-scope,.fx-wipe{transition:none;transform:none;opacity:1;filter:none;letter-spacing:0;clip-path:none;}
  .fx-rail::after{width:7px;}
}
.macwin.mini{margin:0;max-width:none;box-shadow:0 36px 90px rgba(0,0,0,0.6);}
.macwin.mini .macbar{height:34px;}
.macwin.mini .macbar .tl{width:10px;height:10px;}
.dm-pane{background:#0b0b0d;padding:22px;}
.dm-side.full{width:100%;flex:1 1 auto;border-right:0;padding:16px 0;}
.show-win .demoui{display:block;}
@media(max-width:900px){
  .show-row{grid-template-columns:1fr;gap:30px;}
  .show-row.flip .show-win{order:0;}
}

@media(max-width:860px){
  .dm-side{display:none;}
  .dm-cols{grid-template-columns:1fr;}
  .dm-billing-grid{grid-template-columns:1fr;}
  .dm-stats{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  /* mobile fullscreen menu: drop the scrolled header's backdrop-filter so the
     header doesn't become a containing block that clips the fixed .nav-links overlay */
  header.nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .nav-inner{display:flex;justify-content:space-between;}
  .brand .brand-badge{display:none;}
  .nav-links{
    position:fixed;inset:0;justify-self:stretch;width:100vw;background:rgba(7,8,9,0.98);backdrop-filter:blur(10px);
    flex-direction:column;justify-content:center;gap:28px;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open{transform:none;}
  .nav-links a{font-size:18px;letter-spacing:0;}
  .btn-demo{font-size:13px;padding:9px 9px 9px 18px;}
  .nav-toggle{display:flex;z-index:60;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media(max-width:760px){
  :root{--pad:22px;}
  .hero .lead{white-space:normal;}
  .nav-links{
    position:fixed;inset:0;justify-self:stretch;width:100vw;background:rgba(7,8,9,0.98);backdrop-filter:blur(10px);
    flex-direction:column;justify-content:center;gap:28px;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open{transform:none;}
  .nav-links a{font-size:15px;letter-spacing:0.16em;}
  .nav-toggle{display:flex;z-index:60;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .hero-top{top:84px;}
  .hero-top .col-r{display:none;}
  section.block{padding:84px 0;}
  .cap-grid{grid-template-columns:1fr;}
  .cap{min-height:auto;}
  .step{grid-template-columns:64px 1fr;gap:22px;}
  .forces{grid-template-columns:1fr;}
  .force + .force{border-left:0;border-top:1px solid var(--line);}
  .form{grid-template-columns:1fr;}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:12px;}
}
@media(prefers-reduced-motion:reduce){
  .status .dot{animation:none;}
  html{scroll-behavior:auto;}
}