/* ─────────────────────────────────────────────────────────────
   NOPE case study — rendered inside the project overlay.
   Mobile-first; every animation has a prefers-reduced-motion path.
   ───────────────────────────────────────────────────────────── */
.project[data-case="nope"]{
  --nc-lime:#D8F76F;
  --nc-ink:#F2F2EC;
  --nc-soft:rgba(242,242,236,.64);
  --nc-faint:rgba(242,242,236,.38);
  --nc-card:#111312;
  --nc-card-2:#181a19;
  --nc-line:rgba(242,242,236,.09);
  --nc-sf:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  --nc-rd:"SF Pro Rounded",ui-rounded,"Nunito",-apple-system,BlinkMacSystemFont,sans-serif;
  --nc-ease:cubic-bezier(.22,1,.36,1);
  --nc-spring:cubic-bezier(.34,1.56,.64,1);
}
.project[data-case="nope"] .project__eyebrow{ color:var(--nc-lime); font-family:var(--nc-rd); font-weight:600; }
.project[data-case="nope"] .project__tags span{ border-color:rgba(216,247,111,.22); }
.project[data-case="nope"] .project__lead{ font-family:var(--nc-sf); letter-spacing:-.01em; }
.project[data-case="nope"] .project__results .r b{ font-family:var(--nc-rd); font-weight:900; color:var(--nc-lime); }
.project[data-case="nope"] .project__next:hover strong{ color:var(--nc-lime); }

/* ── Wordmark: SF Rounded Black, lime O + dot (mirrors NOPEWordmark.swift) ── */
.nw{ display:inline-flex; align-items:baseline; font-family:var(--nc-rd); font-weight:900; letter-spacing:-.02em; color:var(--nc-ink,#F2F2EC); line-height:1; }
.nw-o{ display:inline-block; perspective:1.6em; color:var(--nc-lime,#D8F76F); }
.nw-o > span{ display:inline-block; transform-origin:50% 50%; will-change:transform; }
.nw-dot{ display:inline-block; color:var(--nc-lime,#D8F76F); will-change:transform; }

.nc-title{ display:flex; flex-direction:column; gap:.18em; }
.nc-title .nw{ font-size:clamp(3.4rem,15vw,7.2rem); }
.nc-title__sub{ font-family:var(--nc-sf); font-weight:600; font-size:clamp(1.3rem,4.6vw,2.3rem); letter-spacing:-.03em; line-height:1.05; color:var(--nc-ink); }

/* ── App Store "coming soon" pill (same shell as Pickly's link) ── */
.project__store-link.is-soon{ cursor:default; }
.project__store-link.is-soon .project__store-arrow{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; width:auto; padding:0 .2rem; }

/* ── iPhone mockup: titanium rim + black bezel + Dynamic Island; everything scales with the phone width ── */
.nc-phone{ container-type:inline-size; position:relative; width:100%; }
.nc-dev{
  position:relative; padding:2.9cqw; border-radius:15.5cqw;
  border:1.15cqw solid transparent;
  background:
    linear-gradient(#020202,#020202) padding-box,
    linear-gradient(140deg,#c9ccc7 0%,#6f726e 14%,#2c2e2c 32%,#8a8d89 52%,#303230 70%,#a5a8a4 88%,#5b5e5a 100%) border-box;
  box-shadow:
    0 0 0 .3cqw rgba(0,0,0,.55),
    inset 0 0 0 .35cqw rgba(255,255,255,.06),
    0 9cqw 16cqw -4cqw rgba(0,0,0,.85),
    0 2.5cqw 5cqw -2cqw rgba(0,0,0,.7);
}
.nc-dev__screen{ position:relative; aspect-ratio:1179/2556; border-radius:12.4cqw; overflow:hidden; background:#000; isolation:isolate; }
.nc-dev__screen > img{ display:block; width:100%; height:100%; object-fit:cover; }
.nc-dev__screen > .nc-screen, .nc-dev__screen > .nc-screen-stack{ position:absolute; inset:0; }
.nc-dev__screen::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 28%); }
.nc-dev__island{ position:absolute; z-index:3; top:calc(2.9cqw + 3.1cqw); left:50%; width:28cqw; height:8.2cqw; margin-left:-14cqw; border-radius:99px; background:#000; box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.04); }
.nc-dev__btn{ position:absolute; width:1.1cqw; border-radius:1cqw; background:linear-gradient(90deg,#3a3c3a,#9a9d99,#3a3c3a); }
.nc-dev__btn--a{ left:-2.1cqw; top:19%; height:6%; }
.nc-dev__btn--b{ left:-2.1cqw; top:28%; height:10%; }
.nc-dev__btn--c{ right:-2.1cqw; top:25%; height:15%; }

/* Brand stage behind phones so black screens never sit on black */
.nc-stage{ position:relative; border-radius:28px; overflow:hidden; isolation:isolate; border:1px solid rgba(216,247,111,.1);
  background:
   radial-gradient(60% 55% at 72% 22%, rgba(31,130,96,.55), transparent 70%),
   radial-gradient(55% 50% at 12% 90%, rgba(22,96,108,.5), transparent 70%),
   radial-gradient(40% 40% at 88% 96%, rgba(130,150,40,.32), transparent 70%),
   #06100c; }
.nc-stage::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.06; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ── Reveal on scroll ── */
.nc [data-nr]{ opacity:0; transform:translate3d(0,28px,0); transition:opacity .9s var(--nc-ease), transform 1.1s var(--nc-ease); transition-delay:calc(var(--i,0) * 70ms); }
.nc [data-nr].is-in{ opacity:1; transform:none; }

/* ── Section scaffolding ── */
.nc{ font-family:var(--nc-sf); color:var(--nc-ink); }
.nc-sec{ padding-block:clamp(4rem,11vw,7.5rem); position:relative; }
.nc-sec + .nc-sec{ border-top:1px solid var(--nc-line); }
.nc-kicker{ font-family:var(--nc-rd); font-weight:600; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--nc-lime); }
.nc-h{ font-family:var(--nc-sf); font-weight:700; letter-spacing:-.035em; line-height:1; font-size:clamp(2rem,7.4vw,3.9rem); margin-top:.9rem; }
.nc-h em{ font-style:normal; color:var(--nc-lime); font-family:var(--nc-rd); font-weight:900; letter-spacing:-.02em; }
.nc-p{ font-size:clamp(1.05rem,3.6vw,1.3rem); line-height:1.55; color:var(--nc-soft); margin-top:1.3rem; max-width:40ch; }
.nc-head{ max-width:56rem; }
.nc-bleed{ margin-inline:calc(-1 * var(--pad)); }

/* ── HERO (cover) ── */
.project[data-case="nope"] .project__cover{ border-radius:20px; overflow:hidden; }
.nc-hero{
  position:relative; width:100%; container-type:inline-size; overflow:hidden; isolation:isolate;
  background:#050706;
}
.nc-hero::before{ content:""; display:block; padding-top:108%; }
.nc-hero__bg{ position:absolute; inset:-20%; z-index:-2;
  background:
   radial-gradient(42% 36% at 70% 34%, rgba(31,130,96,.62), transparent 70%),
   radial-gradient(36% 30% at 98% 86%, rgba(22,96,108,.55), transparent 70%),
   radial-gradient(30% 26% at 68% 100%, rgba(130,150,40,.34), transparent 70%),
   radial-gradient(22% 18% at 40% 8%, rgba(200,170,50,.14), transparent 70%),
   radial-gradient(50% 44% at 0% 0%, rgba(18,40,30,.6), transparent 70%);
  animation:nc-drift 22s ease-in-out infinite alternate;
}
@keyframes nc-drift{ 0%{ transform:translate3d(0,0,0) rotate(0) } 50%{ transform:translate3d(-3%,2%,0) rotate(4deg) } 100%{ transform:translate3d(2%,-2%,0) rotate(-3deg) } }
.nc-hero__grain{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.nc-hero__ghost{ position:absolute; left:0; right:0; text-align:center; bottom:-9cqw; z-index:-1; white-space:nowrap; font-family:var(--nc-rd); font-weight:900; font-size:37cqw; line-height:1; letter-spacing:-.03em;
  background:linear-gradient(180deg,rgba(216,247,111,.085) 10%,rgba(120,170,90,.02) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nc-hp{ position:absolute; transform:translate3d(calc(var(--mx,0) * var(--d,1) * 1.4cqw), calc(var(--my,0) * var(--d,1) * 1.4cqw), 0); transition:transform .9s var(--nc-ease); }
.nc-hp > .nc-float{ animation:nc-float 6s ease-in-out infinite; animation-delay:var(--fd,0s); }
.nc-hp > .nc-float > *{ transform:rotate(var(--r,0deg)); }
@keyframes nc-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-1.6cqw) } }
/* mobile composition (hero is 100 × 108 cqw) */
.nc-hc{ left:33cqw; top:17cqw; width:34cqw; --r:0deg;  --d:1;  z-index:5; }
.nc-hl{ left:13cqw; top:25cqw; width:29cqw; --r:-6deg; --d:.6; z-index:3; }
.nc-hr{ left:58cqw; top:25cqw; width:29cqw; --r:6deg;  --d:.6; z-index:3; }
.nc-hl .nc-dev__screen, .nc-hr .nc-dev__screen{ filter:brightness(.8); }
.nc-chip{ z-index:1; --d:.35; --r:0deg; }
.nc-w1{ left:6cqw;  top:7cqw; width:17cqw; } .nc-w2{ left:25cqw; top:5cqw; width:17cqw; }
.nc-w5{ left:58cqw; top:5cqw; width:17cqw; } .nc-w8{ left:77cqw; top:7cqw; width:17cqw; }
.nc-w3, .nc-w4, .nc-w6, .nc-w7{ display:none; }
/* hero entrance */
.nc-hero .nc-hp{ opacity:0; translate:0 14cqw; transition:transform .9s var(--nc-ease), opacity 1s var(--nc-ease), translate 1.3s var(--nc-ease); transition-delay:0s, var(--in,0s), var(--in,0s); }
.nc-hero.is-in .nc-hp{ opacity:1; translate:0 0; }
.nc-hero .nc-badge.nc-hp{ translate:0 0; scale:.4; transition:transform .9s var(--nc-ease), opacity .5s var(--nc-ease), scale .8s var(--nc-spring); transition-delay:0s, var(--in), var(--in); }
.nc-hero.is-in .nc-badge.nc-hp{ scale:1; }
@container (min-width:760px){
  .nc-hero::before{ padding-top:56.25%; }
  .nc-hero__ghost{ font-size:30cqw; bottom:-8cqw; }
  .nc-hc{ left:39.4cqw; top:3.75cqw; width:21.25cqw; }
  .nc-hl{ left:27.5cqw; top:8.1cqw;  width:18.75cqw; }
  .nc-hr{ left:53.75cqw; top:8.1cqw; width:18.75cqw; }
  .nc-w3, .nc-w4, .nc-w6, .nc-w7{ display:block; }
  .nc-w1{ left:11.9cqw;  top:22.5cqw; width:8.5cqw; }
  .nc-w2{ left:21.25cqw; top:22.5cqw; width:8.5cqw; }
  .nc-w3{ left:11.5cqw;  top:31.9cqw; width:18.25cqw; }
  .nc-w4{ left:11.9cqw;  top:41.25cqw; width:8.5cqw; }
  .nc-w5{ left:21.25cqw; top:41.25cqw; width:8.5cqw; }
  .nc-w6{ left:70.25cqw; top:22.5cqw; width:18.25cqw; }
  .nc-w7{ left:70.6cqw;  top:41.25cqw; width:8.5cqw; }
  .nc-w8{ left:80cqw;    top:41.25cqw; width:8.5cqw; }
}


/* ── Kinetic statement ── */
.nc-kinetic{ font-family:var(--nc-sf); font-weight:700; letter-spacing:-.035em; line-height:1.06; font-size:clamp(2rem,7.8vw,4.6rem); }
.nc-kinetic .w{ display:inline-block; opacity:.14; transition:opacity .5s var(--nc-ease), color .5s var(--nc-ease); }
.nc-kinetic .w.is-lit{ opacity:1; }
.nc-kinetic .w.is-lime.is-lit{ color:var(--nc-lime); }
.nc-kinetic .w--strike, .nc-kinetic .w--under{ position:relative; }
.nc-kinetic .w--strike::after{ content:""; position:absolute; left:-2%; right:-2%; top:54%; height:.09em; border-radius:99px; background:var(--nc-lime); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--nc-ease) .35s; }
.nc-kinetic .w--strike.is-lit{ color:rgba(242,242,236,.5); }
.nc-kinetic .w--strike.is-lit::after{ transform:scaleX(1); }
.nc-kinetic .w--under::after{ content:""; position:absolute; left:0; right:.25em; bottom:-.06em; height:.12em; background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 2, 110 6 S 170 11, 198 4' fill='none' stroke='%23D8F76F' stroke-width='4' stroke-linecap='round'/></svg>"); clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--nc-ease) .3s; }
.nc-kinetic .w--under.is-lit::after{ clip-path:inset(0 0 0 0); }
.nc-kinetic .nw--inline{ font-size:1.04em; letter-spacing:-.02em; vertical-align:baseline; }
.nc-intro{ display:grid; gap:2rem; margin-top:clamp(2.5rem,6vw,4rem); }
.nc-intro p{ font-size:clamp(1.05rem,3.6vw,1.3rem); line-height:1.6; color:var(--nc-soft); }
@media (min-width:900px){ .nc-intro{ grid-template-columns:1fr 1fr; gap:4rem; } }

/* ── Stats ── */
.nc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--nc-line); border:1px solid var(--nc-line); border-radius:22px; overflow:hidden; margin-top:clamp(3rem,8vw,5rem); }
.nc-stat{ background:#08080a; padding:clamp(1.2rem,4vw,2rem); min-height:8rem; display:flex; flex-direction:column; justify-content:space-between; gap:1rem; }
.nc-stat b{ font-family:var(--nc-rd); font-weight:900; font-size:clamp(2.5rem,10vw,4.2rem); line-height:.9; color:var(--nc-lime); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.nc-stat span{ font-size:.92rem; color:var(--nc-soft); line-height:1.35; }
@media (min-width:900px){ .nc-stats{ grid-template-columns:repeat(4,1fr); } }

/* ── How it works (steps; sticky phone on wide screens) ── */
.nc-flow{ margin-top:clamp(3rem,8vw,5rem); display:grid; gap:4.5rem; }
.nc-step{ display:grid; gap:1.6rem; align-items:center; }
.nc-step__no{ font-family:var(--nc-rd); font-weight:900; font-size:.95rem; color:#0b0d08; background:var(--nc-lime); width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; }
.nc-step h3{ font-size:clamp(1.8rem,5.6vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.02; margin-top:1rem; }
.nc-step p{ color:var(--nc-soft); font-size:clamp(1.02rem,3.4vw,1.25rem); line-height:1.55; margin-top:.8rem; max-width:36ch; }
.nc-step__text{ position:relative; }
.nc-step__ghost{ position:absolute; right:0; top:-.15em; z-index:-1; font-family:var(--nc-rd); font-weight:900; font-size:clamp(6rem,30vw,15rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(216,247,111,.14); pointer-events:none; }
.nc-step__facts{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; max-width:34rem; }
.nc-step__facts li{ display:flex; align-items:center; gap:.7rem; padding:.8rem .9rem; border-radius:16px; background:var(--nc-card); border:1px solid var(--nc-line); font-size:.9rem; line-height:1.25; color:var(--nc-ink); }
.nc-step__facts b{ flex:0 0 auto; width:2rem; height:2rem; border-radius:10px; display:grid; place-items:center; background:rgba(216,247,111,.12); color:var(--nc-lime); font-family:var(--nc-rd); font-weight:800; font-size:.85rem; }
.nc-step__phone{ padding:2.4rem 0; }
.nc-step__phone > .nc-phone{ width:min(56vw,250px); margin-inline:auto; }
.nc-flow__sticky{ display:none; }
@media (min-width:900px){
  .nc-flow{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 6vw; }
  .nc-flow__sticky{ display:block; position:sticky; top:4vh; height:min(76vh,720px); grid-column:1; grid-row:1 / span 4; }
  .nc-flow__stage{ position:relative; height:100%; display:grid; place-items:center; }
  .nc-flow__stage > .nc-phone{ width:min(29vh,270px); }
  .nc-step{ grid-column:2; min-height:76vh; }
  .nc-step__phone{ display:none; }
  .nc-step__text{ opacity:.28; transition:opacity .6s var(--nc-ease); }
  .nc-step.is-active .nc-step__text{ opacity:1; }
  .nc-flow__dots{ position:absolute; left:1.4rem; top:50%; translate:0 -50%; display:grid; gap:.6rem; }
  .nc-flow__dots i{ width:6px; height:6px; border-radius:50%; background:var(--nc-faint); transition:background .4s, transform .4s var(--nc-spring); }
  .nc-flow__dots i.is-on{ background:var(--nc-lime); transform:scale(1.6); }
}
.nc-screen-stack{ position:relative; }
.nc-screen-stack > .nc-screen, .nc-screen-stack > img{ position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .7s var(--nc-ease), transform .9s var(--nc-ease); }
.nc-screen-stack > .is-on{ opacity:1; transform:none; }
.nc-screen-stack > img{ width:100%; height:100%; object-fit:cover; }

/* ringing screen (built in HTML) */
.nc-ring{ container-type:inline-size; position:absolute; inset:0; background:radial-gradient(80% 50% at 50% 38%, rgba(216,247,111,.16), transparent 70%), #000; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; font-family:var(--nc-sf); }
.nc-ring__label{ font-family:var(--nc-rd); font-weight:700; font-size:5cqw; color:var(--nc-lime); display:flex; gap:.4em; align-items:center; }
.nc-ring__time{ font-family:var(--nc-rd); font-weight:900; font-size:27cqw; letter-spacing:-.02em; line-height:1; margin-top:3cqw; }
.nc-ring__name{ font-size:5.4cqw; color:rgba(255,255,255,.6); margin-top:2cqw; }
.nc-ring__waves{ position:relative; width:30cqw; height:30cqw; margin-top:12cqw; display:grid; place-items:center; }
.nc-ring__waves i{ position:absolute; inset:0; border-radius:50%; border:.6cqw solid var(--nc-lime); opacity:0; animation:nc-wave 2.2s var(--nc-ease) infinite; }
.nc-ring__waves i:nth-child(2){ animation-delay:.7s } .nc-ring__waves i:nth-child(3){ animation-delay:1.4s }
.nc-ring__waves b{ width:18cqw; height:18cqw; border-radius:50%; background:var(--nc-lime); display:grid; place-items:center; color:#0b0d08; font-size:8cqw; animation:nc-bell 1.1s ease-in-out infinite; }
@keyframes nc-wave{ 0%{ transform:scale(.5); opacity:.9 } 100%{ transform:scale(1.6); opacity:0 } }
@keyframes nc-bell{ 0%,100%{ rotate:0deg } 10%{ rotate:-14deg } 20%{ rotate:12deg } 30%{ rotate:-8deg } 40%{ rotate:0deg } }
.nc-ring__cta{ margin-top:12cqw; width:78%; padding:4.4cqw 0; border-radius:5cqw; background:var(--nc-lime); color:#0b0d08; font-family:var(--nc-rd); font-weight:800; font-size:5.2cqw; }
.nc-ring__stop{ margin-top:3.4cqw; font-size:4.2cqw; color:rgba(255,255,255,.45); }

/* ── Interactive demo ── */
.nc-demo{ display:grid; gap:2.6rem; align-items:center; }
.nc-demo__device{ position:relative; padding:clamp(2rem,6vw,3.2rem) 0; }
.nc-demo__device > .nc-phone{ width:min(66vw,300px); margin-inline:auto; }
.nc-demo__device.is-ringing .nc-dev{ animation:nc-buzz .5s linear infinite; }
@keyframes nc-buzz{ 0%,100%{ transform:translate3d(0,0,0) rotate(0) } 20%{ transform:translate3d(-1.5px,0,0) rotate(-.6deg) } 40%{ transform:translate3d(1.5px,0,0) rotate(.6deg) } 60%{ transform:translate3d(-1px,0,0) rotate(-.3deg) } 80%{ transform:translate3d(1px,0,0) rotate(.3deg) } }
.nc-demo__glow{ display:none; }
.nc-game{ display:flex;  container-type:inline-size; display:flex; position:relative; background:#000; color:#fff; font-family:var(--nc-sf); flex-direction:column; padding:14cqw 6cqw 8cqw; }
.nc-game__status{ position:absolute; top:4.2cqw; left:9cqw; right:9cqw; display:flex; justify-content:space-between; font-weight:600; font-size:4cqw; }
.nc-game__pill{ align-self:center; display:inline-flex; align-items:center; gap:.5em; font-family:var(--nc-rd); font-weight:700; font-size:3.6cqw; color:var(--nc-lime); background:rgba(216,247,111,.1); padding:1.6cqw 3.4cqw; border-radius:999px; }
.nc-game__pill i{ width:2cqw; height:2cqw; border-radius:50%; background:var(--nc-lime); animation:nc-blink 1s steps(2) infinite; }
@keyframes nc-blink{ 50%{ opacity:.2 } }
.nc-game__title{ text-align:center; font-weight:600; font-size:5cqw; margin-top:4cqw; }
.nc-game__hint{ color:rgba(255,255,255,.5); font-size:4cqw; margin-top:5cqw; line-height:1.35; }
.nc-game__round{ font-size:4.2cqw; margin-top:auto; display:flex; align-items:center; gap:2.4cqw; }
.nc-game__dots{ display:flex; gap:1.4cqw; }
.nc-game__dots i{ width:2.4cqw; height:2.4cqw; border-radius:50%; background:rgba(255,255,255,.18); transition:background .3s, transform .4s var(--nc-spring); }
.nc-game__dots i.is-done{ background:var(--nc-lime); transform:scale(1.25); }
.nc-game__q{ font-family:var(--nc-rd); font-weight:800; font-size:17cqw; letter-spacing:-.02em; margin-top:4cqw; line-height:1; }
.nc-game__opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:3cqw; margin-top:9cqw; }
.nc-game__foot{ margin-top:auto; text-align:center; font-size:3.4cqw; color:rgba(255,255,255,.32); line-height:1.35; padding-inline:6cqw; }
.nc-game__opt{ appearance:none; border:0; cursor:pointer; font:inherit; font-family:var(--nc-rd); font-weight:800; font-size:8cqw; color:#fff; background:#1c1c1e; border-radius:5cqw; aspect-ratio:1/1.05; transition:transform .25s var(--nc-spring), background .25s; }
.nc-game__opt:hover{ background:#262628; }
.nc-game__opt:active{ transform:scale(.94); }
.nc-game__opt:focus-visible{ outline:2px solid var(--nc-lime); outline-offset:2px; }
.nc-game__opt.is-right{ background:var(--nc-lime); color:#0b0d08; }
.nc-game__opt.is-wrong{ background:#ff6b5a; animation:nc-no .4s; }
@keyframes nc-no{ 0%,100%{ translate:0 } 25%{ translate:-6px } 75%{ translate:6px } }
.nc-game__msg{ min-height:6cqw; text-align:center; font-family:var(--nc-rd); font-weight:700; font-size:4.6cqw; color:var(--nc-lime); margin-top:5cqw; }
.nc-game__done{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8cqw; background:radial-gradient(70% 45% at 50% 40%, rgba(216,247,111,.22), transparent 70%), #000; opacity:0; pointer-events:none; transition:opacity .6s var(--nc-ease); }
.nc-game.is-done .nc-game__done{ opacity:1; pointer-events:auto; }
.nc-game__done .nw{ font-size:14cqw; }
.nc-game__done h4{ font-size:8cqw; font-weight:700; letter-spacing:-.02em; margin-top:7cqw; }
.nc-game__streak{ display:flex; align-items:center; gap:2cqw; margin-top:5cqw; font-family:var(--nc-rd); font-weight:900; font-size:12cqw; }
.nc-game__streak small{ font-size:4cqw; font-weight:600; color:rgba(255,255,255,.55); }
.nc-game__again{ margin-top:10cqw; appearance:none; border:0; cursor:pointer; font-family:var(--nc-rd); font-weight:800; font-size:4.6cqw; color:#0b0d08; background:var(--nc-lime); border-radius:5cqw; padding:4cqw 9cqw; }
.nc-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.nc-confetti i{ position:absolute; top:42%; left:50%; width:2.4cqw; height:2.4cqw; border-radius:.5cqw; }
@media (min-width:900px){ .nc-demo{ grid-template-columns:1fr 1fr; gap:5vw; } }

/* ── Mission marquee (infinite, draggable) ── */
.nc-marquee{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:calc(clamp(3rem,8vw,5rem) - 14px); padding-block:14px; overflow:hidden; touch-action:pan-y; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.nc-marquee.is-drag{ cursor:grabbing; }
.nc-row{ display:flex; gap:clamp(.8rem,2vw,1.2rem); width:max-content; will-change:transform; }
.nc-tile{ flex:0 0 auto; width:clamp(12.8rem,52vw,15.2rem); overflow:hidden; display:flex; align-items:center; gap:.9rem; --ins:.6rem; padding:var(--ins) 1.1rem var(--ins) var(--ins); background:var(--nc-card); border:1px solid var(--nc-line); border-radius:calc(clamp(3rem,11vw,3.8rem) * .225 + var(--ins)); user-select:none; white-space:nowrap; transition:transform .5s var(--nc-spring), border-color .4s; }
.nc-tile img{ display:block; width:clamp(3rem,11vw,3.8rem); height:auto; aspect-ratio:1; pointer-events:none; -webkit-user-drag:none; }
.nc-tile b{ display:block; font-family:var(--nc-rd); font-weight:700; font-size:clamp(.86rem,3.4vw,1.02rem); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; }
.nc-tile > div{ min-width:0; }
.nc-tile span{ display:block; font-size:.78rem; color:var(--nc-faint); margin-top:.15rem; }
@media (hover:hover){ .nc-tile:hover{ transform:translateY(-4px); border-color:rgba(216,247,111,.35); } }

/* ── Cover-flow carousel ── */
.nc-flowc{ position:relative; margin-top:clamp(2.5rem,6vw,4rem); padding-top:clamp(2rem,5vw,3rem); height:clamp(31rem,124vw,41rem); touch-action:pan-y; user-select:none; cursor:grab; }
.nc-flowc__item{ position:absolute; left:50%; top:clamp(2rem,5vw,3rem); width:clamp(12.5rem,52vw,16rem); margin-left:calc(clamp(12.5rem,52vw,16rem) / -2); transition:transform .8s var(--nc-ease), opacity .6s var(--nc-ease); }
.nc-flowc__cap{ text-align:center; margin-top:1.1rem; font-family:var(--nc-rd); font-weight:700; font-size:1.05rem; transition:opacity .4s; }
.nc-flowc__item:not(.is-active) .nc-flowc__cap{ opacity:0; }
.nc-ctrl{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.4rem; }
.nc-btn{ width:3rem; height:3rem; border-radius:50%; border:1px solid var(--nc-line); background:rgba(255,255,255,.03); color:var(--nc-ink); cursor:pointer; font-size:1.1rem; display:grid; place-items:center; transition:border-color .3s, background .3s, transform .3s var(--nc-spring); }
.nc-btn:hover{ border-color:var(--nc-lime); background:rgba(216,247,111,.08); }
.nc-btn:active{ transform:scale(.92); }
.nc-btn:focus-visible{ outline:2px solid var(--nc-lime); outline-offset:3px; }
.nc-dots{ display:flex; gap:.45rem; }
.nc-dots i{ width:7px; height:7px; border-radius:99px; background:var(--nc-faint); transition:width .4s var(--nc-ease), background .3s; }
.nc-dots i.is-on{ width:22px; background:var(--nc-lime); }

/* ── Split layouts (flock, sleep) ── */
.nc-split{ display:grid; gap:3rem; align-items:center; margin-top:clamp(2.5rem,6vw,4rem); }
.nc-duo{ position:relative; display:flex; align-items:flex-start; justify-content:center; gap:5%; padding:clamp(2rem,6vw,3.2rem) 6%; }
.nc-duo .nc-phone{ width:44%; max-width:240px; }
.nc-duo .nc-phone:nth-child(2){ margin-top:12%; }
@media (min-width:900px){ .nc-split{ grid-template-columns:1fr 1fr; gap:5vw; } .nc-split--rev .nc-split__media{ order:-1; } }
.nc-chiplist{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.nc-chiplist span{ font-size:.85rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--nc-line); color:var(--nc-soft); background:rgba(255,255,255,.02); }
.nc-flockring{ display:flex; align-items:center; gap:1.2rem; margin-top:2rem; }
.nc-flockring svg{ width:5.5rem; height:5.5rem; transform:rotate(-90deg); }
.nc-flockring circle{ fill:none; stroke-width:9; }
.nc-flockring .bg{ stroke:rgba(255,255,255,.08); }
.nc-flockring .fg{ stroke:var(--nc-lime); stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:283; transition:stroke-dashoffset 1.8s var(--nc-ease) .3s; }
.nc-flockring.is-in .fg{ stroke-dashoffset:calc(283 - 283 * .6); }
.nc-flockring b{ font-family:var(--nc-rd); font-weight:900; font-size:2.4rem; }
.nc-flockring span{ color:var(--nc-soft); font-size:.95rem; display:block; }
.nc-avatars{ display:flex; margin-top:1.4rem; }
.nc-avatars i{ width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--nc-rd); font-weight:800; color:#0b0d08; border:3px solid #08080a; margin-left:-.55rem; transform:scale(0); transition:transform .6s var(--nc-spring); transition-delay:calc(var(--i) * 90ms + .4s); }
.nc-avatars i:first-child{ margin-left:0; }
.nc-flockring.is-in ~ .nc-avatars i, .is-in .nc-avatars i{ transform:scale(1); }

/* ── Widgets bento (straight Home Screen grid) ── */
.nc-bento{ display:grid; grid-template-columns:repeat(2,1fr); align-items:start; gap:clamp(.7rem,2.4vw,1.3rem); margin-top:clamp(2.5rem,6vw,4rem); padding:clamp(1.2rem,4vw,2.6rem); }
.nc-w{ transition:transform .6s var(--nc-spring); }
.nc-w img{ display:block; width:100%; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.nc-w--l{ grid-column:span 2; }
.nc-w--m{ grid-column:span 2; }
@media (hover:hover){ .nc-w:hover{ transform:translateY(-6px) scale(1.015); } }
@media (min-width:900px){
  .nc-bento{ grid-template-columns:repeat(4,minmax(0,200px)); grid-auto-flow:dense; justify-content:center; padding-block:clamp(2.4rem,4vw,3.4rem); }
  .nc-w--l{ grid-column:span 2; grid-row:span 2; }
}

/* ── Design language ── */
.nc-ds{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2.5rem,6vw,4rem); }
.nc-card{ background:var(--nc-card); border:1px solid var(--nc-line); border-radius:26px; padding:clamp(1.4rem,4vw,2.2rem); position:relative; overflow:hidden; }
.nc-card h4{ font-family:var(--nc-rd); font-weight:600; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--nc-faint); }
.nc-logo-card{ display:grid; place-items:center; min-height:16rem; background:radial-gradient(70% 70% at 50% 60%, rgba(31,130,96,.35), transparent 70%), var(--nc-card); }
.nc-logo-card .nw{ font-size:clamp(3.4rem,15vw,6.4rem); }
.nc-logo-card h4{ position:absolute; top:1.4rem; left:1.6rem; }
.nc-swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr)); gap:.6rem; margin-top:1.2rem; }
.nc-sw{ aspect-ratio:1; border-radius:18px; position:relative; display:flex; align-items:flex-end; padding:.55rem; font-size:.64rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:rgba(0,0,0,.6); transition:transform .5s var(--nc-spring); }
.nc-sw.is-dark{ color:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px var(--nc-line); }
@media (hover:hover){ .nc-sw:hover{ transform:translateY(-4px) scale(1.04); } }
.nc-type{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top:1rem; }
.nc-type b{ font-family:var(--nc-rd); font-weight:900; font-size:clamp(4rem,16vw,6rem); line-height:.85; letter-spacing:-.03em; }
.nc-type span{ text-align:right; color:var(--nc-soft); font-size:.9rem; line-height:1.5; }
.nc-icon-card{ display:grid; place-items:center; min-height:16rem; perspective:900px; }
.nc-icon{ width:min(48%,11rem); aspect-ratio:1; border-radius:22.5%; overflow:hidden; box-shadow:0 2.4rem 4rem -1.4rem rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)); transition:transform .6s var(--nc-ease); }
.nc-icon img{ display:block; width:100%; }
.nc-icon-card h4{ position:absolute; top:1.4rem; left:1.6rem; }
@media (min-width:900px){
  .nc-ds{ grid-template-columns:repeat(6,1fr); }
  .nc-logo-card{ grid-column:span 4; }
  .nc-icon-card{ grid-column:span 2; }
  .nc-pal-card{ grid-column:span 3; }
  .nc-type-card{ grid-column:span 3; }
}

/* ── Horizontal rails (onboarding, posters) ── */
.nc-rail{ display:flex; gap:clamp(.9rem,2.4vw,1.5rem); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(1.2rem,4vw,2.4rem); padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,4vw,2.4rem); margin-top:clamp(2rem,5vw,3rem); scrollbar-width:none; cursor:grab; }
.nc-rail::-webkit-scrollbar{ display:none; }
.nc-rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.nc-rail > *{ scroll-snap-align:start; flex:0 0 auto; }
.nc-rail img{ -webkit-user-drag:none; user-select:none; }
.nc-rail--onb > figure{ width:clamp(11rem,46vw,14rem); }
.nc-rail--onb > figure:nth-child(even){ margin-top:2.4rem; }
.nc-rail figcaption{ font-family:var(--nc-rd); font-weight:700; font-size:.98rem; margin-top:1rem; text-align:center; }
.nc-rail figcaption small{ display:block; font-family:var(--nc-sf); font-weight:400; color:var(--nc-faint); font-size:.82rem; margin-top:.25rem; }
/* Posters are 1242 px wide with a 48 px gap in the App Store layout: keep that ratio so the shared phone stays continuous across frames 1–2. */
.nc-rail--posters{ --pw:clamp(12rem,56vw,16rem); gap:calc(var(--pw) * 48 / 1242); }
.nc-rail--posters > figure{ width:var(--pw); }
.nc-poster{ border-radius:calc(var(--pw) * .07); overflow:hidden; box-shadow:0 2rem 3.4rem -1.4rem rgba(0,0,0,.9); }
.nc-poster img{ display:block; width:100%; }

.nc-railbar{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; }
.nc-rail.is-fit{ cursor:default; }
.nc-rail.is-fit > :first-child{ margin-left:auto; }
.nc-rail.is-fit > :last-child{ margin-right:auto; }
.nc-railbar[hidden]{ display:none; }
.nc-btn:disabled{ opacity:.3; pointer-events:none; }
.nc-rail:focus-visible{ outline:2px solid var(--nc-lime); outline-offset:4px; }
.nc-progress{ flex:1; height:2px; background:var(--nc-line); border-radius:2px; overflow:hidden; }
.nc-progress i{ display:block; height:100%; width:20%; background:var(--nc-lime); transform-origin:left; transition:transform .2s linear; }

/* ── Languages ── */
.nc-lang{ display:grid; gap:2.4rem; align-items:center; margin-top:clamp(2.5rem,6vw,4rem); }
.nc-hello{ font-family:var(--nc-rd); font-weight:900; font-size:clamp(2.4rem,9vw,4.6rem); letter-spacing:-.03em; line-height:1.1; min-height:1.15em; white-space:nowrap; color:var(--nc-lime); margin-top:1rem; }
.nc-hello span{ display:inline-block; transition:opacity .45s var(--nc-ease), transform .6s var(--nc-ease), filter .45s; }
.nc-hello span.is-out{ opacity:0; transform:translateY(-.35em); filter:blur(6px); }
.nc-hello span.is-pre{ opacity:0; transform:translateY(.35em); filter:blur(6px); transition:none; }
.nc-langs{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem; }
.nc-langs span{ font-size:.85rem; padding:.45rem .85rem; border-radius:999px; border:1px solid var(--nc-line); color:var(--nc-faint); transition:all .4s var(--nc-ease); }
.nc-langs span.is-on{ color:#0b0d08; background:var(--nc-lime); border-color:var(--nc-lime); }
.nc-locrail{ overflow:hidden; padding-block:clamp(2rem,5vw,3rem); margin-top:clamp(2.5rem,6vw,4rem); }
.nc-locrail__track{ display:flex; gap:clamp(.8rem,2vw,1.2rem); width:max-content; animation:nc-loc 60s linear infinite; }
.nc-locrail:hover .nc-locrail__track{ animation-play-state:paused; }
.nc-locrail figure{ width:clamp(9.5rem,36vw,12.5rem); flex:0 0 auto; }

.nc-locrail figcaption{ font-family:var(--nc-rd); font-weight:700; font-size:.9rem; margin-top:.8rem; color:var(--nc-soft); text-align:center; }
@keyframes nc-loc{ to{ transform:translateX(calc(-50% - clamp(.4rem,1vw,.6rem))) } }
@media (min-width:900px){ .nc-lang{ grid-template-columns:1.1fr .9fr; gap:5vw; } }

/* ── Principles ── */
.nc-principles{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2.5rem,6vw,4rem); }
.nc-pr{ background:var(--nc-card); border:1px solid var(--nc-line); border-radius:26px; padding:clamp(1.4rem,4vw,2rem); transition:border-color .4s, transform .5s var(--nc-spring); }
.nc-pr svg{ width:2.4rem; height:2.4rem; color:var(--nc-lime); }
.nc-pr h3{ font-size:1.3rem; font-weight:700; letter-spacing:-.02em; margin-top:1.4rem; }
.nc-pr p{ color:var(--nc-soft); line-height:1.55; margin-top:.6rem; font-size:1rem; }
@media (hover:hover){ .nc-pr:hover{ border-color:rgba(216,247,111,.3); transform:translateY(-4px); } }
@media (min-width:700px){ .nc-principles{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .nc-principles{ grid-template-columns:repeat(4,1fr); } }

/* ── Homepage featured card ── */
.work-card--feature{ grid-column:1 / -1; }
.work-card__media picture{ display:block; width:100%; height:100%; }
@media (max-width:699px){ .work-card--feature .work-card__media{ aspect-ratio:4/5 !important; } }
.work-card--feature .work-card__media{ aspect-ratio:16/10; border-color:rgba(216,247,111,.16); }
.work-card--feature:hover .work-card__media{ border-color:rgba(216,247,111,.5); }
.work-card--feature .work-card__meta h3{ font-size:clamp(1.15rem,2vw,1.5rem); min-height:0; }
.work-card--feature .work-card__meta{ grid-template-columns:minmax(0,1fr) auto; }
/* Card meta (all project cards): category sits flush right, like the featured card. */
.work-card__meta p{ text-align:right; }
.work-card--feature .work-card__meta p{ min-height:0; }
@media (min-width:900px){ .work-card--feature .work-card__media{ aspect-ratio:16/7; } }

@media (prefers-reduced-motion:reduce){
  .nc [data-nr]{ opacity:1; transform:none; transition:none; }
  .nc-hero__bg, .nc-hp > .nc-float, .nc-ring__waves i, .nc-ring__waves b, .nc-locrail__track, .nc-demo__device.is-ringing .nc-dev, .nc-game__pill i{ animation:none; }
  .nc-hero .nc-hp{ opacity:1; translate:0 0; scale:1; transition:none; }
  .nc-kinetic .w{ opacity:1; }
  .nc-flowc__item, .nc-screen-stack > *{ transition:none; }
}

/* ── Shake mission demo (MissionShakeGlass) ── */
.nc-shake .nc-game__hint{ margin-top:3cqw; }
.nc-glass{ position:relative; width:100%; aspect-ratio:1; margin-top:7cqw; border-radius:9cqw; overflow:hidden; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 .55cqw rgba(255,255,255,.15); }
.nc-glass canvas{ position:absolute; inset:0; width:100%; height:100%; }
.nc-glass b{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--nc-rd); font-weight:900; font-size:17cqw; font-variant-numeric:tabular-nums; color:#fff; transition:color .3s; }
.nc-glass.is-high b{ color:#172000; }
.nc-shake__label{ display:flex; align-items:center; justify-content:center; gap:2cqw; margin-top:4.5cqw; font-size:3.9cqw; font-weight:600; color:rgba(255,255,255,.55); }
.nc-shake__label svg{ width:5cqw; height:5cqw; }

.nc-demo__device .nc-dev{ transform-origin:50% 92%; }