@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@300;400;500&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{--coal:#090d10;--ivory:#eeeee7;--light:#9edfe5;--muted:#9faeb3;--gutter:clamp(24px,6vw,100px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--coal);color:var(--ivory);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}h1,h2,p{margin:0}button{color:inherit}img{display:block;max-width:100%;height:auto}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--light);outline-offset:6px}[hidden]{display:none!important}.skip{position:fixed;z-index:200;top:12px;left:20px;padding:15px;background:var(--ivory);color:var(--coal);transform:translateY(-160%)}.skip:focus{transform:none}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:98px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;background:#090d10eb}.brand img{width:218px}.topbar nav{display:flex;align-items:center;gap:44px;font-size:14px}.solutions-link{color:#b7c3c7}.topbar details{position:relative}.topbar summary{list-style:none;display:flex;gap:27px;align-items:center;padding:14px 0;border-bottom:1px solid #c4d8dd55}.topbar summary::-webkit-details-marker{display:none}.demo-links{position:absolute;right:0;top:56px;min-width:245px;background:#102027;border:1px solid #41606b;padding:12px 24px;box-shadow:0 20px 50px #0006}.demo-links a{display:block;padding:18px 0;border-bottom:1px solid #ffffff20;font-size:15px}.demo-links a:last-child{border:0}.demo-links a:hover{color:var(--light)}
.story{height:420svh;position:relative}.stage{height:100svh;min-height:660px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:var(--coal)}#gpuSurface{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.hero-copy{position:absolute;z-index:3;left:var(--gutter);top:25%;transform-origin:top left;width:42%;pointer-events:none}.product-brand{font-size:12px;letter-spacing:.26em;font-weight:500;margin-bottom:22px;color:#bcc8cc}h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(80px,9.6vw,156px);font-weight:300;line-height:.95;letter-spacing:-.072em}h1 em{font-style:normal;color:var(--light)}.launch-status{font-size:12px;letter-spacing:.17em;margin-top:30px;color:#d6e5e7;display:flex;gap:16px;align-items:center}.launch-status span{color:var(--light)}.info-link{pointer-events:auto;display:inline-flex;gap:36px;font-size:14px;padding:15px 0;margin-top:13px;border-bottom:1px solid #b7c9cf55}.info-link:hover{color:var(--light)}
.narrative{position:absolute;z-index:3;left:56%;right:var(--gutter);top:18%;text-align:right;pointer-events:none}.scene-caption{font-family:Manrope,sans-serif;font-size:clamp(18px,1.65vw,26px);font-weight:400;line-height:1.5;letter-spacing:-.025em;color:#c9d4d8}.image-note{font-size:11px;color:#b1c4cb;line-height:1.6;margin-top:12px;opacity:0;visibility:hidden}.scene-endpoints{position:absolute;inset:0;pointer-events:none;z-index:3;font-size:10px;letter-spacing:.19em;color:#abc9d0}.scene-endpoints span{position:absolute;transform:translate(-50%,-50%)}.stage-bottom{position:absolute;bottom:35px;left:var(--gutter);right:var(--gutter);z-index:4;display:flex;align-items:end;justify-content:space-between;gap:30px;border-top:1px solid #b3cdd323;padding-top:24px}.current-offer{font-size:16px;line-height:1.6;color:#b7c4c9}.current-offer>span{display:block;font-size:10px;letter-spacing:.12em;color:#82989f;margin-bottom:8px}.scroll-cue{font-size:10px;letter-spacing:.11em;display:flex;gap:20px;align-items:center;color:#a3bac1;padding-bottom:6px}.progress{width:90px;height:1px;background:#c1d9df33}.progress i{display:block;height:1px;width:0;background:var(--light)}.motion-toggle{background:none;border:0;border-bottom:1px solid #71878e;font-size:11px;color:#b1c3ca;padding:8px 0;margin-bottom:0}.fallback-poster{display:none;position:absolute;z-index:1;width:44%;right:5%;top:38%;box-shadow:0 30px 70px #0009;border:1px solid #5b787f55}.proof-end{padding:60px var(--gutter);display:flex;justify-content:space-between;gap:50px;border-top:1px solid #ffffff20;background:#10191e}.proof-end p{font-size:11px;letter-spacing:.15em;color:var(--light)}.proof-end h2{font-family:Manrope,sans-serif;font-weight:400;font-size:26px;letter-spacing:-.04em;margin:16px 0}.proof-end span{display:block;color:#a6b6bd;font-size:14px;line-height:1.7;max-width:540px}.proof-end nav{display:flex;flex-direction:column;align-items:start;gap:18px;font-size:13px}.review-tools{position:fixed;z-index:100;bottom:0;left:0;right:0;display:flex;align-items:center;gap:20px;background:#e8eee9;color:#13242b;padding:14px 24px;font-size:12px}.review-tools input{flex:1;accent-color:#315a65}.review-tools a{text-decoration:underline}.review-mode .stage-bottom{bottom:70px}.review-mode .proof-end{display:none}.review-mode .story{height:100svh}
@media(max-width:1100px){.hero-copy{top:27%}h1{font-size:clamp(76px,10vw,110px)}.stage-bottom{gap:18px}.scroll-cue{gap:12px}.progress{width:50px}.current-offer{font-size:14px}.brand img{width:190px}.topbar nav{gap:24px}}


.no-js .story,.no-gpu .story,.compact .story{height:auto}.no-js .stage,.no-gpu .stage,.compact .stage{position:relative}.no-js .fallback-poster,.no-gpu .fallback-poster{display:block}.no-js .scene-endpoints,.no-gpu .scene-endpoints{display:none}.no-js .motion-toggle,.no-gpu .motion-toggle{display:none}.no-js #gpuSurface,.no-gpu #gpuSurface{display:none}.reduced-motion *{transition:none!important;scroll-behavior:auto!important}.reduced-motion .story{height:auto}.reduced-motion .stage{position:relative}.no-js .image-note,.no-gpu .image-note{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.scene-caption{white-space:pre-line}.frame-mode .story{height:100svh}.frame-mode .proof-end{display:none}
@media(min-width:701px){.narrative{top:15%}}


/* C4.2A — Navigation refinement only. Original cinematic scene remains untouched. */
.topbar nav{gap:clamp(20px,2.7vw,42px)}
.topbar nav>a,.topbar summary{transition:color .25s ease}
.topbar nav>a:hover,.topbar summary:hover{color:var(--ivory)}
.nav-plans{display:inline-flex;gap:12px;align-items:center;color:var(--ivory);font-weight:500;white-space:nowrap}
.nav-plans span{color:var(--light);font-size:12px;transition:transform .25s ease}
.nav-plans:hover span{transform:translate(2px,-2px)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.2vw,28px);margin-top:27px;pointer-events:auto}
.hero-actions a{display:inline-flex;justify-content:space-between;align-items:center;gap:clamp(14px,1.8vw,28px);min-height:47px;font-size:13px;letter-spacing:.006em;white-space:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.hero-primary{padding:0 19px 0 20px;background:var(--ivory);color:var(--coal);border:1px solid var(--ivory);font-weight:600;border-radius:3px}
.hero-primary:hover{background:var(--light);border-color:var(--light);transform:translateY(-2px)}
.hero-primary span{font-size:17px;font-weight:400}
.hero-secondary{padding:0 0 1px;color:var(--ivory);border-bottom:1px solid #8ab9c2;min-height:44px}
.hero-secondary:hover{color:var(--light);border-color:var(--light)}
.hero-secondary span{color:var(--light);font-size:14px}
.proof-end{align-items:center;min-height:255px;gap:clamp(35px,5vw,90px);background:#10171b}
.proof-copy{max-width:720px}
.proof-end h2{font-size:clamp(25px,3.15vw,46px);line-height:1.12;max-width:640px;margin:19px 0 13px;font-weight:300}
.proof-end span{font-size:14px;max-width:510px}
.proof-actions{min-width:min(265px,100%);width:min(280px,100%)}
.proof-actions a{display:flex;align-items:center;justify-content:space-between;gap:30px;width:100%;padding:14px 0;border-bottom:1px solid #57646a80;transition:color .22s ease,border-color .22s ease}
.proof-actions a:hover{color:var(--light);border-color:var(--light)}
.proof-actions a span{color:var(--light)}
.proof-actions .proof-primary{border-color:#a7d8df;color:var(--ivory);font-weight:600}
@media(max-width:1100px){.topbar nav{gap:20px}}


@media(prefers-reduced-motion:reduce){.nav-plans span,.hero-actions a,.proof-actions a{transition:none!important;transform:none!important}}


/* C4.2B — visual refinement of buttons, typography and background */
:root{
  --coal:#07131a;
  --coal-deep:#040b10;
  --coal-surface:#091821;
  --ivory:#f3f1ea;
  --light:#9fe7ef;
  --light-strong:#c7f8ff;
  --light-soft:#78b9c3;
  --muted:#95aab1;
}
html{
  background:
    radial-gradient(circle at 15% 12%, rgba(74,164,184,.14), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(102,180,207,.08), transparent 22%),
    linear-gradient(180deg, #08151c 0%, #071219 42%, #050d12 100%);
}
body{
  background:transparent;
  color:var(--ivory);
}
.topbar{
  height:96px;
  background:rgba(7, 17, 24, .72);
  border-bottom:1px solid rgba(157, 217, 227, .09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:0 16px 50px rgba(0,0,0,.22);
}
.topbar nav{
  gap:14px;
}
.topbar nav>a,.topbar summary{
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(156,220,229,.12);
  background:rgba(10,26,34,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.solutions-link,.nav-plans,.topbar summary{
  display:inline-flex;
  align-items:center;
  color:#e7f0f2;
}
.topbar nav>a:hover,.topbar summary:hover{
  border-color:rgba(159,231,239,.35);
  background:rgba(13,33,42,.72);
  color:var(--light-strong);
}
.demo-links{
  top:62px;
  background:rgba(9,24,33,.95);
  border:1px solid rgba(159,231,239,.18);
  border-radius:20px;
  padding:14px 22px;
  box-shadow:0 24px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.demo-links a{border-bottom-color:rgba(255,255,255,.12)}
.stage{
  background:
    radial-gradient(circle at 14% 16%, rgba(35,104,120,.14), transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(109,191,206,.10), transparent 20%),
    linear-gradient(180deg, rgba(8,20,28,.98) 0%, rgba(5,12,17,.98) 100%);
}
.hero-copy{
  top:23.5%;
}
.product-brand{
  color:#b6d9de;
  margin-bottom:20px;
}
h1{
  font-family:'Space Grotesk', 'Manrope', Arial, sans-serif;
  font-size:clamp(82px,9.8vw,158px);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.075em;
  text-wrap:balance;
  text-shadow:0 10px 34px rgba(0,0,0,.18);
}
h1 em{
  color:var(--light-strong);
  font-weight:300;
}
.launch-status{
  margin-top:22px;
  color:#d7e8eb;
}
.hero-actions{
  margin-top:32px;
  gap:16px;
}
.hero-actions a{
  min-height:54px;
  padding-inline:20px;
  border-radius:16px;
  border:1px solid transparent;
  font-size:13px;
  letter-spacing:.005em;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hero-primary{
  background:linear-gradient(180deg, #f5f2ea 0%, #ddd8cb 100%);
  color:#07131a;
  border-color:rgba(255,255,255,.45);
}
.hero-primary:hover{
  background:linear-gradient(180deg, #ffffff 0%, #e8fbff 100%);
  color:#051018;
  border-color:rgba(199,248,255,.8);
  box-shadow:0 16px 36px rgba(0,0,0,.24), 0 0 0 1px rgba(199,248,255,.15) inset;
}
.hero-secondary{
  background:rgba(10,27,36,.45);
  color:var(--ivory);
  border:1px solid rgba(159,231,239,.18);
  border-bottom:1px solid rgba(159,231,239,.18);
}
.hero-secondary:hover{
  background:rgba(13,34,43,.8);
  color:var(--light-strong);
  border-color:rgba(159,231,239,.4);
}
.hero-secondary span,
.hero-primary span{
  color:inherit;
  opacity:.9;
}
.narrative{
  top:14%;
}
.scene-caption{
  color:#d5e3e7;
}
.stage-bottom{
  border-top-color:rgba(166,210,219,.12);
}
.scroll-cue,
.current-offer,
.motion-toggle{
  color:#b0c1c7;
}
.progress{
  background:rgba(201,227,233,.18);
}
.progress i{
  background:linear-gradient(90deg, rgba(159,231,239,.65), rgba(199,248,255,1));
}
.proof-end{
  background:
    linear-gradient(180deg, rgba(8,18,24,.96) 0%, rgba(5,11,16,.98) 100%);
  border-top:1px solid rgba(255,255,255,.08);
}
.proof-actions{
  width:min(330px,100%);
  gap:0;
}
.proof-actions a{
  padding:18px 18px;
  border:1px solid rgba(120,173,182,.18);
  border-radius:18px;
  background:rgba(9,24,32,.42);
  margin-bottom:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.proof-actions a:hover{
  background:rgba(13,31,39,.72);
  border-color:rgba(159,231,239,.34);
}
.proof-actions .proof-primary{
  background:linear-gradient(180deg, rgba(12,33,43,.94) 0%, rgba(8,23,31,.94) 100%);
  border-color:rgba(159,231,239,.34);
  box-shadow:0 16px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(199,248,255,.08);
}
.proof-actions .proof-primary:hover{
  border-color:rgba(199,248,255,.5);
  background:linear-gradient(180deg, rgba(15,38,49,.98) 0%, rgba(9,25,34,.98) 100%);
}
.proof-end h2{
  font-weight:300;
}
@media(max-width:1100px){
  .topbar nav{gap:10px}
  .topbar nav>a,.topbar summary{padding:0 14px}
}





/* C4.2C — Space Grotesk + aviso Render no intrusivo en navegación normal */
h1{letter-spacing:-.072em;font-weight:400}
h1 em{font-weight:400;letter-spacing:-.075em}
.demo-notice{
  box-sizing:border-box;
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(548px,calc(100% - 32px));
  max-width:calc(100% - 32px);
  max-height:min(92dvh,750px);
  margin:0;
  overflow:auto;
  padding:0;
  border:1px solid rgba(160,226,237,.22);
  border-radius:24px;
  color:#f3f4ee;
  background:radial-gradient(ellipse at 100% 0%, rgba(44,111,132,.2),transparent 56%),linear-gradient(155deg,#10232b 0%,#08151d 55%,#060e14 100%);
  box-shadow:0 30px 115px rgba(0,0,0,.65),0 1px 0 rgba(227,248,251,.06) inset;
  font-family:'DM Sans',Arial,sans-serif;
  text-align:left;
  overscroll-behavior:contain;
}
.demo-notice::backdrop{background:rgba(2,8,12,.77);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.demo-notice__inner{padding:clamp(24px,5vw,42px)}
.demo-notice__head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.demo-notice__eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.17em;font-weight:600;color:#b5dae1}
.demo-notice__signal{height:7px;width:7px;background:#a4e3eb;border-radius:50%;box-shadow:0 0 0 5px rgba(164,227,235,.11)}
.demo-notice__close{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;border:1px solid rgba(198,238,242,.15);background:rgba(255,255,255,.04);color:#c8dce1;font-size:24px;line-height:1;transition:background .2s ease,color .2s ease}
.demo-notice__close:hover,.demo-notice__close:focus-visible{background:rgba(155,226,238,.15);color:#fff}
.demo-notice__label{font-size:12px;letter-spacing:.14em;color:#a6bac1;margin:39px 0 15px}
.demo-notice h2{font-family:'Space Grotesk',Arial,sans-serif;font-weight:400;letter-spacing:-.063em;font-size:clamp(42px,7vw,66px);line-height:.98}
.demo-notice h2 em{font-style:normal;color:#a9e8f0}
.demo-notice__description{margin-top:24px;font-size:15px;line-height:1.75;color:#b8cbd0;max-width:440px}
.demo-notice__foot{margin-top:33px;padding-top:23px;border-top:1px solid rgba(171,219,228,.15)}
.demo-notice__hint{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#89aab2}
.demo-notice__hint>span{font-size:22px;line-height:10px}
.demo-notice__buttons{margin-top:22px;display:flex;gap:11px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.demo-notice__back,.demo-notice__open{min-height:48px;border-radius:12px;padding:0 18px;display:inline-flex;justify-content:center;align-items:center;gap:19px;font-weight:600;font-size:13px;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.demo-notice__back{background:transparent;border:1px solid rgba(158,213,221,.25);color:#d7e6e8}
.demo-notice__back:hover{background:rgba(148,220,229,.1)}
.demo-notice__open{color:#07141b;background:#eff1ea;border:1px solid rgba(255,255,255,.5)}
.demo-notice__open:hover{background:#c9f2f5;transform:translateY(-1px)}
.demo-notice__open span{font-size:17px;font-weight:400}

@media(prefers-reduced-motion:reduce){.demo-notice__close,.demo-notice__back,.demo-notice__open{transition:none!important;transform:none!important}}



/* Formation: bounded CSS 3D surfaces, no perpetual animation. C4.2C styles remain in baseline.css. */
.story{height:340svh}.stage{min-height:720px}.hero-copy{top:25%;width:43%;transform:none!important}.formation-title{position:relative}h1{color:#b4c5cc}h1 em{color:#9fbfc8}.title-drawing{position:absolute;inset:0;overflow:visible;pointer-events:none;font-family:'Space Grotesk',sans-serif;letter-spacing:-.072em;font-weight:400}.title-drawing text{fill:none;dominant-baseline:alphabetic}.title-outline text{stroke:#c3edf0;stroke-width:.5;opacity:.45}.title-material text{fill:var(--ivory)}.title-material .word-facil{fill:var(--light-strong)}.title-trace text{stroke:#c7f8ff;stroke-width:1;stroke-dasharray:90 500;filter:drop-shadow(0 0 3px #9fe7ef66)}.formation-space{position:absolute;width:50%;height:72%;left:49%;top:15%;perspective:1100px;pointer-events:none}.formation-camera{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}.fragment{position:absolute;left:0;top:0;overflow:hidden;background:#10232b;border:1px solid #a5dce62b;box-shadow:0 12px 26px #0005;backface-visibility:hidden;transform-origin:center;isolation:isolate}.fragment-source{position:absolute;inset:0;background-repeat:no-repeat;background-color:#0b171d;background-size:auto 250%;filter:saturate(.55);box-shadow:inset 0 0 30px #0003}.fragment-source span{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:#06131ee8;color:#d6edf0;font-size:9px;letter-spacing:.12em}.source-barber{background-image:url('assets/original-1.webp');background-position:10% 10%;background-size:230%}.source-restaurant{background-image:url('assets/original-2.webp');background-position:40% 25%;background-size:190%}.source-estetica{background-image:url('assets/original-3.webp');background-position:48% 28%;background-size:210%}.source-time{background-image:url('assets/original-4.webp');background-position:95% 15%;background-size:230%}.source-agenda{background-image:url('assets/original-4.webp');background-position:55% 45%;background-size:210%}.source-reserva{background-image:url('assets/original-1.webp');background-position:5% 100%;background-size:220%}.fragment-final{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}.concept-screen{position:absolute;width:216px;height:432px;background:#e9eeeb;color:#112e35;padding:36px 19px 20px;overflow:hidden}.concept-kicker{font-size:9px;letter-spacing:.15em}.concept-screen strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:26px;letter-spacing:-.07em;line-height:1.1;margin:12px 0 8px;font-weight:500}.concept-screen small{font-size:9px;color:#49656a}.concept-image{height:216px;width:310px;background:url('assets/original-4.webp') 84% 40%/auto 216px;margin:24px 0 0 -19px;border-block:1px solid #ced9d7}.concept-screen p{font-size:8px;letter-spacing:.09em;margin-top:16px;font-weight:600}.device{position:absolute;left:-120px;top:-235px;width:240px;height:470px;transform-style:preserve-3d}.device-depth{position:absolute;inset:0;border-radius:34px;background:linear-gradient(110deg,#88a9b1,#182e37 12%,#06121b 52%,#4d7580);transform:translateZ(-8px);box-shadow:0 30px 70px #0006;clip-path:inset(50% 0 round 34px)}.device-rim{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b0d8e0;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}.device-speaker{position:absolute;top:14px;left:95px;width:50px;height:3px;background:#050d12;border-radius:2px;transform:scaleX(0);z-index:2}.connections{position:absolute;left:-400px;top:-350px;width:800px;height:700px;overflow:visible;transform:translateZ(-20px);fill:none;stroke:#80cbd7;stroke-width:.65}.connections path{stroke-dasharray:1000;stroke-dashoffset:1000}.concept-disclaimer{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#a1b9c1;font-size:10px;letter-spacing:.035em}.narrative{top:16%;left:55%;right:7%;text-align:right}.scene-caption{font-size:20px}.image-note{font-size:10px}.stage-bottom{bottom:28px}.proof-links{padding:24px 6vw;font-size:13px;color:#b7dce3}.proof-links a{text-decoration:underline;text-underline-offset:5px}.hero-actions a span{transition:transform .2s}.hero-actions a:hover span{transform:translate(2px,-2px)}.fallback-poster{display:none!important}.no-js .formation-space{display:none}.no-js .fallback-poster{display:block!important}.no-js .title-drawing{display:none}.no-js h1,.reduced-motion h1{color:var(--ivory)}.no-js h1 em,.reduced-motion h1 em{color:var(--light-strong)}.review-mode .story,.frame-mode .story{height:100svh}.review-mode .proof-links,.frame-mode .proof-links{display:none}.reduced-motion .story{height:auto}.reduced-motion .stage{position:relative}.review-mode .stage-bottom{bottom:76px}.review-mode .formation-space{height:66%}
@media(max-width:1100px) and (min-width:701px){.hero-actions{gap:10px}.hero-actions a{font-size:11px;padding-inline:13px}.scene-caption{font-size:17px}.formation-space{left:48%;width:51%}}



@media(prefers-reduced-motion:reduce){.hero-actions a span{transition:none}.title-trace{display:none}}
/* Short mobile viewports scroll the title naturally before holding the scene. */



/* C4.3.1 — refinements: authentic transparent asset, reversible title resolution, and unified final device */
:root {--formation-resolve:0;--formation-reveal:0;--formation-join:0;}
/* Brand remains the actual official bitmap artwork: only the baked solid background was masked. */
.topbar .brand{display:flex;align-items:center;padding:5px 1px;border:0;background:none;box-shadow:none;flex-shrink:0}
.topbar .brand img{width:clamp(174px,15vw,225px);height:auto;filter:drop-shadow(0 3px 9px rgba(0,0,0,.16))}
.topbar{background:rgba(6,17,24,.81);border-bottom-color:rgba(180,230,238,.08)}
/* Reversible two-layer handoff: outline/trace builds, then disappears completely; one real h1 remains. */
.formation-title{isolation:isolate}
.formation-title h1{opacity:var(--formation-resolve,0);color:var(--ivory);text-shadow:0 1px 0 rgba(255,255,255,.03);will-change:opacity}
.formation-title h1 em{color:var(--light-strong)}
.formation-title .title-drawing{opacity:calc(1 - var(--formation-resolve,0));filter:drop-shadow(0 2px 9px rgba(67,167,184,.12))}
.title-outline text{stroke:rgba(167,222,233,.65);stroke-width:.54}
.title-material text{stroke:none}
.title-trace text{stroke:#c7f8ff;stroke-width:.85}
.no-js .formation-title h1,.reduced-motion .formation-title h1{opacity:1}
.no-js .formation-title .title-drawing,.reduced-motion .formation-title .title-drawing{display:none}
/* Unified product view: complete screen covers the panel seams at the end. */
.device-screen{position:absolute;z-index:3;inset:10px 10px 10px;overflow:hidden;border-radius:25px;background:#eef2ed;color:#0c2c32;opacity:var(--formation-reveal,0);transform:translateZ(2px);backface-visibility:hidden;display:flex;flex-direction:column;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.device-screen__top{display:flex;justify-content:space-between;align-items:center;padding:27px 18px 0;font-family:'DM Sans',sans-serif;font-size:7px;font-weight:600;letter-spacing:.13em;color:#5b7378}
.device-screen__top span:last-child{color:#2b7d85}
.device-screen__brand{font-family:'Space Grotesk',sans-serif;font-size:27px;line-height:1.08;letter-spacing:-.065em;margin:25px 18px 5px;font-weight:500}
.device-screen__brand em{font-style:normal;color:#276c76}
.device-screen__sub{font-size:8px;line-height:1.45;color:#63777b;padding:0 18px 18px}
.device-screen__photo{min-height:200px;flex:1;background:url('assets/original-4.webp') center/cover no-repeat;border-top:1px solid #dae2e1;border-bottom:1px solid #dae2e1;position:relative}
.device-screen__photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 80%,rgba(8,43,44,.08))}
.device-screen__tag{margin:18px 18px 0;font-size:8px;font-weight:700;letter-spacing:.1em;color:#245963}
.device-screen__caption{margin:6px 18px 20px;font-size:7px;line-height:1.45;color:#6b878b}
.device-speaker{z-index:5}
.fragment{will-change:transform,opacity}
.fragment-final{background:transparent}
/* Give copy room: caption no longer competes with phone at final zoom. */
.narrative{right:6%;top:16%;max-width:26vw}
.scene-caption{font-size:clamp(16px,1.35vw,20px)}
.image-note{opacity:.62}
.concept-disclaimer{bottom:4px;letter-spacing:.04em}
@media(max-width:1100px) and (min-width:701px){.topbar .brand img{width:175px}.topbar nav{gap:9px}.narrative{font-size:15px}}




@media(prefers-reduced-motion:reduce){.formation-title h1{opacity:1}.formation-title .title-drawing{display:none}}