:root { --cream:#fbe392; --white:#f8f8fa; --bg:#08040c; }
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;color:var(--white);background:var(--bg);font-family:'Nunito Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}
.hero{position:relative;width:100%;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;background:#08040c}
.hero-bg{position:absolute;inset:0;z-index:-2;background:url('assets/First back.webp') center center/cover no-repeat}
.shell{position:relative;width:min(100%,1920px);height:max(900px,56.25vw);max-height:1080px;min-height: min(900px,100svh);margin:0 auto}
.header{position:absolute;inset:0 0 auto 0;height:120px;z-index:10;display:flex;align-items:flex-start}
.logo{position:absolute;left:8.65%;top:0;width:197px;line-height:0}.logo img{width:100%;height:auto}
.nav{position:absolute;top:38px;left:33.8%;display:flex;gap:clamp(30px,4.5vw,92px);align-items:center;white-space:nowrap;font-size:14px}.nav a{transition:color .2s}.nav a:hover{color:var(--cream)}
.header-right{position:absolute;right:7.15%;top:0;display:flex;gap:45px;align-items:flex-start}
.nav-cta{position:relative;display:grid;place-items:center;width:198px;height:52px;margin-top:20px;font-size:14px;font-weight:800;white-space:nowrap}.nav-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.nav-cta span{position:relative;z-index:1;transform:translateY(-2px)}
.lang{display:flex;align-items:flex-start;gap:14px}.lang button{background:transparent;border:0;color:#baa96c;font-size:14px;font-family:inherit;padding:34px 0 0}.lang .lang-active{width:50px;height:74px;padding:34px 0 0;background:var(--cream);color:#061736;border-left:3px solid #061736;border-right:3px solid #061736;clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);font-weight:800}
.copy{position:absolute;left:8.65%;top:18.2%;z-index:4;width:50%;pointer-events:none}.copy h1{font-family:Oswald,Impact,sans-serif;font-size:clamp(85px,8.25vw,158px);font-weight:500;line-height:.995;letter-spacing:.005em;margin:0;white-space:nowrap}.copy h1 span{display:block}.copy h1 .gold{color:var(--cream)}.copy p{font-size:clamp(20px,1.62vw,31px);font-weight:400;line-height:1.27;margin:48px 0 0;letter-spacing:.005em;max-width:700px}
.main-cta{position:relative;display:grid;place-items:center;width:394px;height:113px;margin-top:58px;pointer-events:auto;font-family:Oswald,Impact,sans-serif;font-size:29px;font-weight:500;white-space:nowrap}.main-cta img{position:absolute;width:100%;height:100%;inset:0}.main-cta span{position:relative;z-index:1;transform:translateY(-3px)}
.scene{position:absolute;inset:0 0 0 43%;z-index:2;pointer-events:none}.scene img{display:block;position:absolute;object-fit:contain}.crosses{width:539px;height:916px;right:3.2%;top:9.4%;opacity:.87}.figure{width:539px;height:665px;left:19.7%;top:15.4%;z-index:5}.card{filter:drop-shadow(0 15px 20px rgba(0,0,0,.23))}.card-back{width:336px;left:13%;top:14.5%;z-index:2}.card-top{width:163px;left:44%;top:10%;z-index:1;filter:blur(1.3px)}.card-left{width:292px;left:8.0%;top:44%;z-index:4}.card-right{width:300px;left:62.5%;top:23%;z-index:3}.pin{width:230px;left:61.5%;top:56%;z-index:6}
.benefits{position:absolute;left:8.65%;bottom:12%;z-index:8;display:flex;gap:64px;align-items:center}.benefit{display:flex;align-items:center;gap:18px}.benefit img{width:50px;height:45px;object-fit:contain}.benefit span{font-family:Oswald,Impact,sans-serif;font-weight:400;font-size:23px;line-height:1.04;white-space:nowrap}
@media(max-width:1400px) and (min-width:851px){.shell{height:75vw;min-height:760px}.logo{width:160px}.nav{left:32%;gap:25px;font-size:12px}.header-right{right:4%}.copy{top:22%}.copy h1{font-size:9vw}.copy p{font-size:1.65vw;margin-top:25px}.main-cta{width:290px;height:84px;margin-top:32px;font-size:21px}.scene{transform:scale(.82);transform-origin:70% 24%}.benefits{bottom:10%;gap:27px}.benefit{gap:10px}.benefit img{width:37px}.benefit span{font-size:16px}}
@media(max-width:850px){.hero{min-height:100svh}.hero-bg{background-position:64% center}.shell{width:100%;height:auto;max-height:none;min-height:1050px;padding:0 24px 38px}.header{position:relative;height:100px}.logo{left:0;width:134px}.nav{display:none}.header-right{right:0;gap:13px}.nav-cta{display:none}.lang button{padding-top:23px;font-size:12px}.lang .lang-active{height:58px;width:43px;padding-top:23px}.copy{position:relative;top:auto;left:auto;width:100%;padding-top:25px}.copy h1{font-size:clamp(63px,13.8vw,112px)}.copy p{font-size:clamp(16px,3.65vw,23px);margin-top:22px;max-width:550px}.copy p br{display:none}.main-cta{width:min(320px,90%);height:92px;font-size:23px;margin-top:20px}.scene{position:relative;inset:auto;margin-left:-24px;width:calc(100% + 48px);height:480px;transform:none}.crosses{height:480px;width:280px;right:-5%;top:0}.figure{width:min(65%,400px);height:auto;left:25%;top:4%}.card-back{width:34%;left:10%;top:6%}.card-top{width:17%;left:59%;top:2%}.card-left{width:32%;left:4%;top:43%}.card-right{width:32%;left:67%;top:25%}.pin{width:23%;left:71%;top:59%}.benefits{position:relative;left:auto;bottom:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px 15px;margin-top:10px}.benefit{gap:11px}.benefit img{width:36px;height:36px}.benefit span{font-size:16px}}
@media(max-width:430px){.shell{min-height:950px}.copy h1{font-size:13.4vw}.scene{height:390px}.benefit span{font-size:14px}.benefits{margin-top:10px}.figure{left:22%;width:69%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Hero v2: consistent stacking and corrected CTA shadow */
.main-cta { filter:none; isolation:isolate; transition:transform .25s ease,filter .25s ease; }
.main-cta img { filter:none; }
.main-cta:hover { transform:translateY(-3px); filter:drop-shadow(0 8px 14px rgba(0,0,0,.32)); }
.main-cta:active { transform:translateY(0); }
.main-cta:focus-visible,.nav-cta:focus-visible,.lang button:focus-visible {outline:2px solid var(--cream);outline-offset:5px;}
.scene img { backface-visibility:hidden; will-change:transform; }
@media(prefers-reduced-motion:reduce){.main-cta,.nav-cta{transition:none}.scene img{will-change:auto}}

/* v3: one live text layer over SVG shapes without outlined text. */
.nav-cta,.main-cta{isolation:isolate;transform-origin:center;}
.nav-cta img,.main-cta img,.nav-cta span,.main-cta span{pointer-events:none;}
.nav-cta,.main-cta{filter:none;transition:filter .2s ease;}
.nav-cta:hover,.main-cta:hover{filter:brightness(.83) drop-shadow(0 5px 10px rgba(0,0,0,.20));animation:cta-twitch .34s ease-in-out 1;}
.nav-cta:active,.main-cta:active{filter:brightness(.76);animation:none;transform:translateY(1px)}
@keyframes cta-twitch{0%,100%{transform:translate3d(0,0,0) rotate(0)}20%{transform:translate3d(-1.4px,0,0) rotate(-.3deg)}45%{transform:translate3d(1.6px,-.6px,0) rotate(.25deg)}70%{transform:translate3d(-.7px,.5px,0) rotate(-.1deg)}}
.benefit{transition:filter .25s ease;cursor:default;}
.benefit:hover{filter:brightness(1.32);}
@media(prefers-reduced-motion:reduce){.nav-cta:hover,.main-cta:hover{animation:none}.benefit{transition:none}}

/* v4: three hero characters. Each scene uses the same reference-sized coordinate plane. */
.hero-bg{z-index:-3}.hero-bg.bg-green{background-image:url('assets/green-bg.webp');z-index:-2;opacity:0}.hero-bg.bg-cyan{background-image:url('assets/cyan-bg.webp');z-index:-1;opacity:0}
.scenes{position:absolute;inset:0 0 0 43%;z-index:2;pointer-events:none}
.scenes .scene{inset:0;opacity:0;visibility:hidden;z-index:1;pointer-events:none}
.scenes .scene.is-current{opacity:1;visibility:visible;z-index:2}
.scene .token{display:block;position:absolute;object-fit:contain;filter:drop-shadow(0 9px 13px rgba(0,0,0,.15))}
.scene-green .figure,.scene-cyan .figure{width:561px;height:693px;left:20%;top:14.5%;z-index:5}
.scene-green .green-card-1{width:235px;left:4%;top:49%;z-index:3}
.scene-green .green-card-2{width:246px;left:61%;top:36%;z-index:4}
.scene-green .green-card-3{width:204px;left:51%;top:11%;z-index:2;filter:blur(1.1px)}
.scene-green .green-token-1{width:109px;left:3%;top:36%;z-index:5}
.scene-green .green-token-2{width:179px;left:51%;top:57%;z-index:6}
.scene-green .green-token-3{width:179px;left:15%;top:11%;z-index:3}
.scene-green .green-token-4{width:58px;left:76%;top:25%;z-index:6}
.scene-cyan .figure{left:21%;top:21%;width:561px;height:693px}
.scene-cyan .cyan-card-1{width:235px;left:8%;top:45%;z-index:3}
.scene-cyan .cyan-card-2{width:306px;left:60%;top:31%;z-index:3}
.scene-cyan .cyan-card-3{width:194px;left:10%;top:16%;z-index:3}
.scene-cyan .cyan-card-4{width:166px;left:33%;top:10%;z-index:2;filter:blur(1px)}
.scene-cyan .cyan-card-5{width:337px;left:47%;top:9%;z-index:2}
@media(max-width:1400px) and (min-width:851px){.scenes{transform:scale(.82);transform-origin:70% 24%}.scenes .scene{transform:none}}
@media(max-width:850px){.scenes{position:relative;inset:auto;margin-left:-24px;width:calc(100% + 48px);height:480px;transform:none}.scenes .scene{position:absolute;inset:0;transform:none}.scene-green .figure,.scene-cyan .figure{width:65%;height:auto;left:25%;top:4%}.scene-green .green-card-1{width:25%;left:4%;top:45%}.scene-green .green-card-2{width:27%;left:68%;top:28%}.scene-green .green-card-3{width:22%;left:54%;top:0}.scene-green .green-token-1{width:15%;left:4%;top:24%}.scene-green .green-token-2{width:18%;left:68%;top:60%}.scene-green .green-token-3{width:18%;left:19%;top:2%}.scene-green .green-token-4{width:8%;left:88%;top:18%}.scene-cyan .figure{width:66%;height:auto;left:23%;top:10%}.scene-cyan .cyan-card-1{width:27%;left:4%;top:45%}.scene-cyan .cyan-card-2{width:29%;left:68%;top:25%}.scene-cyan .cyan-card-3{width:23%;left:7%;top:12%}.scene-cyan .cyan-card-4{width:18%;left:40%;top:3%}.scene-cyan .cyan-card-5{width:31%;left:59%;top:3%}}
@media(max-width:430px){.scenes{height:390px}}

/* v5: left-to-right, extensible character carousel. Backgrounds always match scenes. */
.scenes{overflow:visible}
.scenes .scene{will-change:transform,opacity}
.scenes .scene.is-current{visibility:visible}
@media(prefers-reduced-motion:reduce){.scenes .scene{will-change:auto}}


/* v6: storyboard-accurate desktop placements based on provided screenshots */
@media (min-width: 851px){
  .scene .crosses{width:520px;height:885px;right:2.8%;top:10.1%;opacity:.84}

  /* Scene 1 — Purple / Льоша */
  .scene-purple .figure{width:555px;height:auto;left:25.3%;top:18.4%;z-index:5}
  .scene-purple .card-back{width:286px;left:18.5%;top:19.0%;z-index:2}
  .scene-purple .card-top{width:154px;left:52.4%;top:11.8%;z-index:1;filter:blur(1.2px)}
  .scene-purple .card-left{width:255px;left:8.5%;top:54.5%;z-index:4}
  .scene-purple .card-right{width:273px;left:69.3%;top:31.2%;z-index:3}
  .scene-purple .pin{width:176px;left:73.5%;top:63.6%;z-index:6}

  /* Scene 2 — Green / Відьма */
  .scene-green .crosses{right:2.6%;top:10.3%}
  .scene-green .figure{width:525px;height:auto;left:30.6%;top:17.6%;z-index:5}
  .scene-green .green-card-1{width:242px;left:12.2%;top:55.0%;z-index:3}
  .scene-green .green-card-2{width:236px;left:30.8%;top:22.9%;z-index:4}
  .scene-green .green-card-3{width:188px;left:60.1%;top:12.1%;z-index:2;filter:blur(1.15px)}
  .scene-green .green-token-1{width:131px;left:23.8%;top:13.6%;z-index:4}
  .scene-green .green-token-2{width:116px;left:9.1%;top:43.6%;z-index:5}
  .scene-green .green-token-3{width:171px;left:69.6%;top:67.0%;z-index:6}
  .scene-green .green-token-4{width:47px;left:83.7%;top:32.0%;z-index:6}

  /* Scene 3 — Cyan / Багаторукий */
  .scene-cyan .crosses{right:2.8%;top:10.0%}
  .scene-cyan .figure{width:526px;height:auto;left:28.9%;top:22.2%;z-index:5}
  .scene-cyan .cyan-card-1{width:236px;left:17.8%;top:18.8%;z-index:3}
  .scene-cyan .cyan-card-2{width:150px;left:49.2%;top:11.0%;z-index:2;filter:blur(1.2px)}
  .scene-cyan .cyan-card-3{width:214px;left:62.8%;top:14.1%;z-index:3}
  .scene-cyan .cyan-card-4{width:263px;left:8.6%;top:54.0%;z-index:3;filter:none}
  .scene-cyan .cyan-card-5{width:279px;left:69.5%;top:39.3%;z-index:3}
}




/* v7: exact desktop placements traced from approved mockups */
@media (min-width: 851px){
  /* Purple scene */
  .scene-purple .figure{width:35.0%;height:auto;left:34.0%;top:18.7%;z-index:5}
  .scene-purple .card-back{width:23.0%;left:21.4%;top:16.9%;z-index:2}
  .scene-purple .card-top{width:15.3%;left:49.1%;top:11.4%;z-index:1;filter:blur(1.25px)}
  .scene-purple .card-left{width:19.4%;left:10.0%;top:44.9%;z-index:6}
  .scene-purple .card-right{width:24.6%;left:60.1%;top:24.3%;z-index:6}
  .scene-purple .pin{width:15.2%;left:67.2%;top:54.6%;z-index:7}

  /* Green scene */
  .scene-green .figure{width:30.7%;height:auto;left:33.2%;top:19.8%;z-index:5}
  .scene-green .green-card-1{width:20.3%;left:9.6%;top:48.7%;z-index:6}
  .scene-green .green-card-2{width:18.3%;left:23.1%;top:23.7%;z-index:6}
  .scene-green .green-card-3{width:15.4%;left:51.6%;top:11.5%;z-index:2;filter:blur(1.15px)}
  .scene-green .green-card-4{width:21.9%;left:59.0%;top:35.2%;z-index:6}
  .scene-green .green-token-1{width:12.3%;left:8.35%;top:39.6%;z-index:7}
  .scene-green .green-token-2{width:18.1%;left:60.8%;top:59.9%;z-index:7}
  .scene-green .green-token-3{width:12.0%;left:21.7%;top:11.7%;z-index:3}
  .scene-green .green-token-4{width:5.9%;left:71.1%;top:26.2%;z-index:7}

  /* Cyan scene */
  .scene-cyan .figure{width:31.7%;height:auto;left:32.4%;top:22.5%;z-index:5}
  .scene-cyan .cyan-card-1{width:19.5%;left:21.0%;top:14.6%;z-index:6}
  .scene-cyan .cyan-card-2{width:12.2%;left:40.5%;top:11.3%;z-index:2;filter:blur(1.2px)}
  .scene-cyan .cyan-card-3{width:18.7%;left:57.2%;top:13.2%;z-index:6}
  .scene-cyan .cyan-card-4{width:23.4%;left:10.6%;top:46.2%;z-index:6}
  .scene-cyan .cyan-card-5{width:27.5%;left:61.1%;top:38.6%;z-index:6}
}


/* v8: final authoritative desktop placements from approved mockups */
@media (min-width: 851px){
  .scene .crosses{width:540px;height:920px;right:2.2%;top:6.9%;opacity:.84}

  /* Purple scene */
  .scene-purple .figure{width:500px;height:auto;left:295px;top:178px;z-index:5}
  .scene-purple .card-back{width:282px;left:82px;top:145px;z-index:2}
  .scene-purple .card-top{width:176px;left:454px;top:56px;z-index:1;filter:blur(1.4px)}
  .scene-purple .card-left{width:248px;left:-28px;top:515px;z-index:6}
  .scene-purple .card-right{width:300px;left:760px;top:246px;z-index:6}
  .scene-purple .pin{width:175px;left:820px;top:617px;z-index:7}

  /* Green scene */
  .scene-green .figure{width:462px;height:auto;left:332px;top:178px;z-index:5}
  .scene-green .green-token-3{width:108px;left:225px;top:88px;z-index:2}
  .scene-green .green-card-2{width:214px;left:276px;top:176px;z-index:6}
  .scene-green .green-card-3{width:162px;left:602px;top:102px;z-index:2;filter:blur(1.25px)}
  .scene-green .green-token-4{width:48px;left:857px;top:266px;z-index:7}
  .scene-green .green-card-1{width:232px;left:145px;top:526px;z-index:6}
  .scene-green .green-token-1{width:118px;left:102px;top:434px;z-index:7}
  .scene-green .green-card-4{width:245px;left:760px;top:346px;z-index:6}
  .scene-green .green-token-2{width:172px;left:808px;top:640px;z-index:7}

  /* Cyan scene */
  .scene-cyan .figure{width:472px;height:auto;left:350px;top:221px;z-index:5}
  .scene-cyan .cyan-card-1{width:225px;left:208px;top:165px;z-index:6}
  .scene-cyan .cyan-card-2{width:140px;left:465px;top:78px;z-index:2;filter:blur(1.35px)}
  .scene-cyan .cyan-card-3{width:210px;left:700px;top:120px;z-index:6}
  .scene-cyan .cyan-card-4{width:257px;left:118px;top:517px;z-index:6}
  .scene-cyan .cyan-card-5{width:285px;left:800px;top:400px;z-index:6}
}


/* v10: restore missing top blurred card in purple scene */
@media (min-width: 851px){
  .scene-purple .card-top{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    width:165px !important;
    left:470px !important;
    top:72px !important;
    z-index:3 !important;
    filter:blur(1.45px) !important;
  }
}


/* v13: enforce hard scene isolation; old cards must never persist */
.scenes .scene:not(.is-current){display:none !important;visibility:hidden !important;opacity:0 !important}
.scenes .scene.is-current{display:block;visibility:visible}


/* v16 — Second screen: exact 1649×927 reference canvas. Scale uniformly to viewport. */
.how-section{position:relative;height:290vh;background:#050508;isolation:isolate}
.how-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(ellipse 38% 60% at 49% 51%,#10101b 0%,#050509 75%,#020305 100%)}
.how-noise{position:absolute;inset:0;pointer-events:none;opacity:.24;background:radial-gradient(circle at 21% 21%,#44445444,transparent 22%)}
.how-shell{position:absolute;left:50%;top:50%;width:1649px;height:927px;min-height:0;max-height:none;max-width:none;padding:0;margin:0;transform:translate(-50%,-50%) scale(var(--how-fit,1));transform-origin:center center;overflow:visible}
.how-header{position:absolute;inset:0;height:95px;z-index:15;pointer-events:none}
.how-header .logo{left:143px;top:0;width:168px;pointer-events:auto}
.how-header .header-right{right:120px;top:0;pointer-events:auto}
.how-header .nav{display:none}
.how-pattern{position:absolute;left:575px;top:114px;width:505px;height:688px;object-fit:fill;opacity:.52;z-index:0;pointer-events:none}
.how-copy{position:absolute;left:824.5px;top:499px;width:675px;transform:translate3d(-50%,-50%,0);z-index:3;text-align:center;will-change:transform,opacity,filter;pointer-events:auto}
.how-copy h2{font-family:'Oswald',sans-serif;font-size:85px;line-height:1.03;font-weight:500;letter-spacing:0;margin:0 0 32px;white-space:nowrap}
.how-copy h2 .gold{color:var(--cream)}
.how-copy p{font-family:'Nunito Sans',sans-serif;font-size:15px;line-height:1.5;font-weight:400;margin:0 auto 22px;max-width:650px;color:#c4bfd0}
.how-copy p:first-of-type{color:#a59bcb}
.how-copy .how-cta{margin:43px auto 0;width:339px;height:98px;font-size:28px}
.how-collage{position:absolute;inset:0;z-index:5;pointer-events:none}
.how-item{position:absolute;display:block;max-width:none;max-height:none;object-fit:contain;transform-origin:50% 50%;will-change:transform,filter}
/* Screenshot's exact static lineup, using the user's own already-rotated PNGs */
.how-card-left-top{left:-30px;top:30px;width:179px;z-index:4}
.how-card-left-main{left:-94px;top:137px;width:402px;z-index:5}
.how-card-left-bottom{left:116px;top:393px;width:234px;z-index:7}
.how-card-left-red{left:-82px;top:436px;width:259px;z-index:7}
.how-board-left{left:-132px;top:606px;width:523px;z-index:3}
.how-token-front{left:335px;top:708px;width:253px;z-index:11}
.how-token-center{left:313px;top:209px;width:89px;z-index:8}
.how-token-right{left:1332px;top:572px;width:68px;z-index:9}
.how-card-right-top{left:1300px;top:167px;width:178px;z-index:5}
.how-card-right-main{left:1311px;top:287px;width:368px;z-index:6}
.how-card-right-bottom-left{left:1324px;top:652px;width:222px;z-index:6}
.how-card-right-bottom-right{left:1437px;top:697px;width:262px;z-index:6}
.how-board-right{left:1435px;top:-7px;width:345px;z-index:3}
@media(max-width:750px){.how-section{height:240vh}.how-sticky{height:100svh}}
@media(prefers-reduced-motion:reduce){.how-section{height:100svh}.how-copy,.how-item{will-change:auto}}


/* v17: ONE site-wide navigation; never clipped by section boundaries. */
.site-header {
 position:fixed !important;
 inset:0 auto auto 50% !important;
 transform:translateX(-50%);
 width:min(100%,1920px);
 height:120px;
 z-index:1000;
 pointer-events:none;
}
.site-header .logo,.site-header .nav,.site-header .header-right{pointer-events:auto}
.site-header .logo{left:8.65%;top:0}
.site-header .nav{left:33.8%;top:38px}
.site-header .header-right{right:7.15%;top:0}
@media(max-width:1400px) and (min-width:851px){
 .site-header .logo{width:160px}
 .site-header .nav{left:32%;gap:25px;font-size:12px}
 .site-header .header-right{right:4%}
}
@media(max-width:850px){
 .site-header{height:100px}
 .site-header .logo{left:24px;width:134px}
 .site-header .nav,.site-header .nav-cta{display:none}
 .site-header .header-right{right:24px}
}
/* v17: prevent hard clipping of the collage at the section entrance. */
.how-section{overflow:visible !important;isolation:isolate}
.how-sticky{isolation:isolate}
.how-collage{
 opacity:var(--how-entry,1);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.64) 8%,black 17%,black 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.64) 8%,black 17%,black 100%);
}
/* On entry, the fade dissolves both the card edges and the section seam. */
.how-sticky::before{
 content:"";position:absolute;inset:0;
 pointer-events:none;z-index:0;
 background:linear-gradient(to bottom,#050508 0%,rgba(5,5,8,.85) 5%,transparent 20%);
 opacity:var(--how-seam,1);
}
@media(prefers-reduced-motion:reduce){.how-collage{opacity:1;mask-image:none;-webkit-mask-image:none}}


/* v18 — third screen: fixed-reference layout copied from provided 1920x1080 art */
.personality{position:relative;min-height:100svh;background:#030305;isolation:isolate;overflow:hidden}
.personality-stage{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 32% 58% at 51% 54%,rgba(50,36,75,.38),transparent 84%),#020203}
.personality-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 49% 50%,rgba(43,32,62,.21),transparent 47%)}
.personality-canvas{width:1920px;height:1080px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--personality-fit,1));transform-origin:center center}
.personality-intro{position:absolute;top:210px;left:310px;width:1300px;text-align:center;z-index:1}
.personality-intro h2{font-family:Oswald,Impact,sans-serif;font-size:91px;line-height:1.055;letter-spacing:0;font-weight:500;margin:0;white-space:nowrap}
.personality-intro h2 span{display:block}
.personality-gold{color:var(--cream)}
.personality-intro p{font-family:'Nunito Sans',sans-serif;color:#b4adc7;font-size:16px;line-height:1.47;margin:59px auto 0}
.personality-formula{position:absolute;inset:0;pointer-events:none}
.personality-term{position:absolute;top:593px;width:257px;height:245px;display:flex;flex-direction:column;align-items:flex-start;gap:32px;opacity:0;transform:translate3d(0,42px,0) scale(.92);filter:blur(7px);will-change:opacity,transform,filter}
.personality-term>img:not(.result-base){width:257px;height:187px;object-fit:contain;display:block}
.personality-term>span{font-size:29px;line-height:1;font-family:'Nunito Sans',sans-serif;color:#f5f3f6;font-weight:400;white-space:nowrap}
.term-1{left:139px}.term-2{left:484px}.term-3{left:829px}.term-4{left:1174px}.term-result{left:1518px}
.term-result>span{color:var(--cream)}
.result-base{width:257px;height:187px;object-fit:contain}
.result-stack{position:absolute;left:-1px;top:-43px;width:257px;height:226px;z-index:3}
.result-card{position:absolute;width:180px;height:auto;object-fit:contain;opacity:0;filter:blur(8px);transform:translate3d(0,56px,0) rotate(-11deg) scale(.76);transform-origin:50% 50%;will-change:opacity,transform,filter}
.result-card-1{left:48px;top:0;z-index:1}.result-card-2{left:36px;top:8px;z-index:2}.result-card-3{left:27px;top:16px;z-index:3}.result-card-4{left:20px;top:24px;z-index:4}
.formula-sign{position:absolute;top:651px;width:41px;height:41px;opacity:0;transform:scale(.55);will-change:opacity,transform}
.sign-1{left:427px}.sign-2{left:771px}.sign-3{left:1116px}.sign-4{left:1460px;top:661px;height:19px}
.personality-cta{position:absolute;left:764px;top:923px;width:394px;height:113px;margin:0;opacity:0;transform:translateY(25px);will-change:transform,opacity;font-size:28px}
.personality.is-revealed .personality-term{animation:personalityTile .72s cubic-bezier(.16,.83,.22,1) forwards}
.personality.is-revealed .term-1{animation-delay:.13s}.personality.is-revealed .term-2{animation-delay:.50s}.personality.is-revealed .term-3{animation-delay:.87s}.personality.is-revealed .term-4{animation-delay:1.24s}.personality.is-revealed .term-result{animation-delay:1.61s}
.personality.is-revealed .formula-sign{animation:personalitySign .45s ease-out forwards}
.personality.is-revealed .sign-1{animation-delay:.37s}.personality.is-revealed .sign-2{animation-delay:.74s}.personality.is-revealed .sign-3{animation-delay:1.11s}.personality.is-revealed .sign-4{animation-delay:1.48s}
.personality.is-revealed .result-card{animation:personalityDeal .66s cubic-bezier(.13,.83,.22,1.08) forwards}
.personality.is-revealed .result-card-1{animation-delay:2.05s}.personality.is-revealed .result-card-2{animation-delay:2.35s}.personality.is-revealed .result-card-3{animation-delay:2.65s}.personality.is-revealed .result-card-4{animation-delay:2.95s}
.personality.is-revealed .personality-cta{animation:personalityCta .65s ease-out 3.16s forwards}
@keyframes personalityTile{to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}}
@keyframes personalitySign{to{opacity:1;transform:scale(1)}}
@keyframes personalityDeal{0%{opacity:0;filter:blur(8px);transform:translate3d(95px,-100px,0) rotate(18deg) scale(.72)}72%{opacity:1;filter:blur(0);transform:translate3d(-5px,4px,0) rotate(-2deg) scale(1.04)}100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes personalityCta{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.personality-term,.formula-sign,.result-card,.personality-cta{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}}


/* v19 — continuous backgrounds across the three sections, no hard bands. */
:root { --continuous-dark: #020305; }
html, body { background:var(--continuous-dark); }
/* Keep the outgoing hero atmosphere until the very edge, then dissolve it
   into the same near-black used at the entrance to the next scene. */
.hero::after {
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;
  height:clamp(75px,13vh,170px);
  background:linear-gradient(to bottom,transparent 0%,rgba(2,3,5,.45) 68%,var(--continuous-dark) 100%);
  z-index:7;
  pointer-events:none;
}
.how-section { background:var(--continuous-dark); }
.how-sticky {
  background:radial-gradient(ellipse 38% 60% at 49% 51%,#10101b 0%,#050509 70%,var(--continuous-dark) 100%);
}
/* The vignette fades into the SAME shade as the preceding and following
   scenes, rather than introducing a visible horizontal background edge. */
.how-sticky::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,var(--continuous-dark) 0%,transparent 15%,transparent 84%,var(--continuous-dark) 100%);
  pointer-events:none;
  z-index:1;
}
/* Don't let the vignette cover the text and foreground images. */
.how-shell { z-index:2; }
.personality { background:var(--continuous-dark); }
.personality-stage {
  background:radial-gradient(ellipse 32% 58% at 51% 54%,rgba(50,36,75,.38),transparent 84%),var(--continuous-dark);
}
.personality-stage::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(95px,17vh,200px);
  pointer-events:none;
  z-index:0;
  background:linear-gradient(to bottom,var(--continuous-dark),rgba(2,3,5,0));
}
/* Reuse exactly the existing SVG crosses from the second screen. */
.personality-crosses {
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(72vw,850px);
  height:min(88vh,860px);
  object-fit:fill;
  opacity:.40;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(ellipse at center,black 12%,transparent 83%);
  mask-image:radial-gradient(ellipse at center,black 12%,transparent 83%);
}
.personality-glow {z-index:0;}
.personality-canvas {z-index:1;}
@media(max-width:750px) {
  .hero::after {height:80px;}
  .personality-crosses {width:100vw;height:70vh;opacity:.31;}
}


/* v20: cross-section cards, NOT another background gradient.
   Fixed global overlay lets the cards overlap previous/next sections. */
.how-portal{
 position:fixed;inset:0;z-index:50;
 overflow:visible;pointer-events:none;
 opacity:0;visibility:hidden;
 contain:layout style;
}
.how-portal-canvas{
 position:absolute;left:50%;top:50%;width:1649px;height:927px;
 transform:translate(-50%,-50%) scale(var(--how-fit,1));
 transform-origin:center center;
 overflow:visible;
}
/* The entire collage has left its clipped sticky parent. Do not fade or
   mask individual asset boundaries: only fade the GLOBAL overlay in/out. */
.how-portal .how-collage{
 position:absolute;inset:0;opacity:1!important;
 -webkit-mask-image:none!important;mask-image:none!important;
 overflow:visible;isolation:isolate;
}
.how-portal .how-item{max-width:none;pointer-events:none}
.site-header{z-index:1000}
@media(prefers-reduced-motion:reduce){.how-portal{transition:none}}


/* v21 — Screen 4: horizontal story scroller */
.stories-section{position:relative;height:600vh;background:var(--continuous-dark);isolation:isolate;overflow:hidden}
.stories-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(ellipse 34% 56% at 49% 50%,rgba(33,28,53,.38),transparent 72%),var(--continuous-dark)}
.stories-stage{position:relative;min-height:100%;overflow:hidden}
.stories-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 49% 47%,rgba(37,29,68,.38),transparent 38%)}
.stories-canvas{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--stories-fit,1));transform-origin:center center}
.stories-crosses{position:absolute;right:90px;top:118px;width:690px;height:820px;opacity:.34;z-index:0;pointer-events:none}
.stories-title-wrap{position:absolute;left:300px;top:145px;width:1320px;text-align:center;z-index:3}
.stories-title-wrap h2{margin:0;font-family:Oswald,Impact,sans-serif;font-size:91px;line-height:1.04;font-weight:500;letter-spacing:0;white-space:nowrap}.stories-title-wrap h2 span{display:block}.stories-gold{color:var(--cream)}
.stories-progress{position:absolute;left:142px;bottom:141px;display:flex;align-items:center;gap:30px;z-index:5}.stories-progress-count{font-family:Oswald,Impact,sans-serif;font-size:27px;line-height:1;color:#b7afd1;letter-spacing:.01em}.stories-progress-current{color:var(--cream)}
.stories-progress-bars{display:flex;align-items:center;gap:12px}.stories-progress-bars span{display:block;width:36px;height:7px;border-radius:999px;background:#43406a;transition:background .3s ease,transform .3s ease}.stories-progress-bars span.is-active{background:var(--cream);transform:scaleX(1.08)}
.stories-arrow{position:absolute;left:675px;top:782px;width:368px;height:118px;z-index:4;opacity:.96}.stories-arrow svg{width:100%;height:100%}
.stories-cta{position:absolute;left:763px;top:903px;width:394px;height:113px;margin:0;z-index:6;font-size:28px}
.stories-viewport{position:absolute;inset:0;z-index:3;overflow:hidden}
.stories-track{display:flex;height:100%;width:11520px;will-change:transform}
.story-slide{position:relative;flex:0 0 1920px;height:1080px}
.story-bubble{position:absolute;left:122px;width:864px;border-radius:999px;padding:29px 42px 29px 144px;display:flex;align-items:center;min-height:150px;background:linear-gradient(90deg,rgba(8,8,15,.96),rgba(15,16,35,.88));backdrop-filter:blur(2px);opacity:0;transform:translate3d(-45px,0,0);filter:blur(10px);will-change:transform,opacity,filter}
.story-bubble.question{top:471px;border:2px solid rgba(251,227,146,.95);box-shadow:0 0 0 1px rgba(251,227,146,.18) inset}
.story-bubble.answer{top:648px;border:2px solid rgba(255,255,255,.95)}
.story-icon{position:absolute;left:29px;top:50%;transform:translateY(-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:Oswald,Impact,sans-serif;font-size:48px;line-height:1;border:2px solid rgba(251,227,146,.82);box-shadow:0 10px 24px rgba(0,0,0,.34) inset,0 2px 10px rgba(0,0,0,.35)}
.story-icon-question{background:radial-gradient(circle at 34% 30%,#1f214d 0%,#0f1538 53%,#521e6d 100%);color:var(--cream)}
.story-icon-answer{background:radial-gradient(circle at 34% 30%,#642239 0%,#370917 56%,#18050b 100%);color:#f3dfa1}
.story-text{font-size:15px;line-height:1.42;color:#efeff6;max-width:675px}.story-text strong{font-size:17px;color:var(--cream);font-weight:700}.story-bubble.answer .story-text strong{color:#f0d46e}
.story-visuals{position:absolute;inset:0}.story-asset{position:absolute;display:block;object-fit:contain;opacity:0;filter:blur(12px) drop-shadow(0 18px 20px rgba(0,0,0,.32));transform-origin:center center;will-change:transform,opacity,filter}
.story-slide .card-front{width:356px}.story-slide .card-back{width:336px}.story-slide .asset-figure{width:395px}
.visual-1 .card-front{left:1120px;top:412px;transform:translate3d(110px,84px,0) rotate(-15deg) scale(.78)}
.visual-1 .card-back{left:1398px;top:383px;transform:translate3d(120px,-90px,0) rotate(18deg) scale(.78)}
.visual-1 .asset-figure{left:1237px;top:640px;transform:translate3d(0,115px,0) scale(.82)}
.visual-2 .card-front{left:1120px;top:512px;transform:translate3d(120px,84px,0) rotate(-12deg) scale(.78)}
.visual-2 .card-back{left:1412px;top:446px;transform:translate3d(125px,-82px,0) rotate(17deg) scale(.78)}
.visual-3 .card-front{left:1135px;top:474px;transform:translate3d(110px,88px,0) rotate(-12deg) scale(.76)}
.visual-3 .card-back{left:1439px;top:433px;transform:translate3d(125px,-82px,0) rotate(18deg) scale(.78)}
.visual-4 .card-front{left:1132px;top:486px;transform:translate3d(110px,84px,0) rotate(-12deg) scale(.78)}
.visual-4 .card-back{left:1428px;top:442px;transform:translate3d(125px,-80px,0) rotate(16deg) scale(.78)}
.visual-5 .card-front{left:1130px;top:496px;transform:translate3d(110px,84px,0) rotate(-12deg) scale(.78)}
.visual-5 .card-back{left:1450px;top:430px;transform:translate3d(125px,-84px,0) rotate(18deg) scale(.78)}
.visual-6 .card-front{left:1126px;top:438px;width:388px;transform:translate3d(110px,80px,0) rotate(-9deg) scale(.79)}
.visual-6 .card-back{left:1452px;top:409px;width:360px;transform:translate3d(125px,-84px,0) rotate(15deg) scale(.8)}
.story-slide.is-active .story-bubble.question{animation:storyBubbleIn .58s cubic-bezier(.19,.84,.22,1) forwards}
.story-slide.is-active .story-bubble.answer{animation:storyBubbleIn .58s cubic-bezier(.19,.84,.22,1) .23s forwards}
.story-slide.is-active .story-asset{animation:storyAssetIn .7s cubic-bezier(.15,.86,.18,1.04) forwards}
.story-slide.is-active .card-front{animation-delay:.48s}.story-slide.is-active .card-back{animation-delay:.72s}.story-slide.is-active .asset-figure{animation-delay:.96s}
.story-slide.is-active .pink-sheet{animation-delay:.72s}
@keyframes storyBubbleIn{0%{opacity:0;transform:translate3d(-48px,0,0) scale(.98);filter:blur(12px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes storyAssetIn{0%{opacity:0;filter:blur(13px) drop-shadow(0 18px 20px rgba(0,0,0,.32));}60%{opacity:1;filter:blur(0) drop-shadow(0 18px 20px rgba(0,0,0,.32));}100%{opacity:1;filter:blur(0) drop-shadow(0 18px 20px rgba(0,0,0,.32));transform:translate3d(0,0,0) rotate(0deg) scale(1)}}
.story-slide:not(.is-active) .story-bubble,.story-slide:not(.is-active) .story-asset{animation:none}
.stories-sticky::before,.stories-sticky::after{content:"";position:absolute;left:0;right:0;height:clamp(95px,17vh,200px);pointer-events:none;z-index:0}.stories-sticky::before{top:0;background:linear-gradient(to bottom,var(--continuous-dark),rgba(2,3,5,0))}.stories-sticky::after{bottom:0;background:linear-gradient(to top,var(--continuous-dark),rgba(2,3,5,0))}
@media(prefers-reduced-motion:reduce){.stories-section{height:auto;min-height:100svh}.stories-sticky{position:relative;height:auto;min-height:100svh}.stories-canvas{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;padding:140px 24px 60px}.stories-viewport{position:relative;overflow:visible}.stories-track{display:block;width:auto;height:auto}.story-slide{height:auto;padding-bottom:32px}.story-bubble,.story-asset{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;position:relative;left:auto;top:auto;margin:0 auto 18px;width:min(100%,880px)}.stories-title-wrap,.stories-progress,.stories-arrow,.stories-cta,.stories-crosses{position:relative;left:auto;top:auto;right:auto;bottom:auto;margin:0 auto}.stories-crosses{display:none}.stories-title-wrap{width:100%;padding:0 0 30px}.stories-title-wrap h2{font-size:min(15vw,62px);white-space:normal}.stories-cta{margin-top:20px}.stories-progress{justify-content:center;margin:16px 0 30px}.stories-arrow{display:none}.story-visuals{position:relative;min-height:0;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.story-asset{width:min(42vw,260px)!important}}


/* v22 — fixed story canvas: NO translating the entire strip outside viewport. */
.stories-section{height:690vh;overflow:visible}
.stories-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stories-viewport{position:absolute;inset:0;overflow:visible}
.stories-track{position:relative;display:block;width:1920px;height:1080px;transform:none!important;will-change:auto}
.story-slide{position:absolute;inset:0;width:1920px;height:1080px;flex:none;opacity:0;visibility:hidden;transform:translate3d(85px,0,0);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s;pointer-events:none}
.story-slide.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s;pointer-events:auto}
.story-slide.is-leaving{opacity:0;visibility:visible;transform:translate3d(-100px,0,0);transition:opacity .35s ease,transform .5s ease;pointer-events:none}
.stories-progress-bars button{display:block;width:36px;height:7px;padding:0;border:0;border-radius:999px;background:#43406a;cursor:pointer;transition:background .24s,transform .24s;pointer-events:auto}
.stories-progress-bars button:hover,.stories-progress-bars button:focus-visible{background:#d5c5a0;transform:scale(1.12);outline-offset:5px}
.stories-progress-bars button.is-active{background:var(--cream);transform:scaleX(1.08)}
.story-icon-img{position:absolute;left:29px;top:50%;width:84px;height:84px;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.story-slide .card-front,.story-slide .card-back{width:340px}
.story-slide .asset-figure{width:395px}
/* Matches actual compositions: two 340px cards offset on the right side. */
.visual-1 .card-front{left:1120px;top:455px}
.visual-1 .card-back{left:1427px;top:418px}
.visual-1 .asset-figure{left:1305px;top:661px;width:365px}
.visual-2 .card-front,.visual-3 .card-front,.visual-4 .card-front,.visual-5 .card-front{left:1138px;top:495px}
.visual-2 .card-back,.visual-3 .card-back,.visual-4 .card-back,.visual-5 .card-back{left:1445px;top:425px}
.visual-6 .card-front{left:1134px;top:480px;width:352px}
.visual-6 .card-back{left:1450px;top:418px;width:370px}
.story-slide.is-active .story-bubble.question{animation:storyBubbleIn .56s cubic-bezier(.19,.84,.22,1) .08s both}
.story-slide.is-active .story-bubble.answer{animation:storyBubbleIn .56s cubic-bezier(.19,.84,.22,1) .37s both}
.story-slide.is-active .story-asset{animation:storyAssetIn .72s cubic-bezier(.15,.86,.18,1.04) both}
.story-slide.is-active .card-front{animation-delay:.85s}
.story-slide.is-active .card-back{animation-delay:1.14s}
.story-slide.is-active .asset-figure{animation-delay:1.43s}
.story-slide:not(.is-active) .story-bubble,.story-slide:not(.is-active) .story-asset{opacity:0;animation:none}
@media(prefers-reduced-motion:reduce){.stories-section{height:auto}.story-slide{position:relative;opacity:1;visibility:visible;transform:none;transition:none}.stories-track{width:100%;height:auto}.stories-progress-bars button{display:none}}

/* v23: manual six-state carousel; wheel/trackpad scrolls page normally. */
.stories-section{height:100vh;height:100svh;overflow:visible}
.stories-sticky{position:relative;top:auto;height:100vh;height:100svh}
.stories-progress{left:142px;right:115px;bottom:140px;width:auto;z-index:12;gap:25px}
.stories-progress-bars{flex:1;display:flex;gap:22px;max-width:950px;align-items:center}
.stories-progress-bars button{flex:1;width:auto;height:3px;background:#45405f;border-radius:2px;min-width:40px}
.stories-progress-bars button.is-active{background:#fbe392;transform:none}
.stories-arrows{margin-left:auto;display:flex;gap:20px;align-items:center}
.stories-arrows button{width:42px;height:42px;padding:6px;border-radius:50%;display:grid;place-items:center;background:transparent;border:1.5px solid #a89bcf;color:#b5a5e0;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.stories-arrows button:first-child{background:#fbe392;border-color:#fbe392;color:#19183a}
.stories-arrows button:hover:not(:disabled){filter:brightness(1.2);transform:scale(1.07)}
.stories-arrows button:disabled{opacity:.35;cursor:default}
.stories-arrows svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.story-slide .story-asset{z-index:1}
.visual-1 .asset-figure{z-index:3}
/* Actual first-scene mockup: 'За півком!' left, cat card behind on right,
   statue and token in front lower-right. */
.visual-1 .card-front{left:1090px;top:470px;width:355px}
.visual-1 .card-back{left:1395px;top:478px;width:322px}
.visual-1 .asset-figure{left:1275px;top:665px;width:400px}
@media(prefers-reduced-motion:reduce){
 .stories-section{height:100svh}.stories-sticky{position:relative;height:100svh}
 .stories-canvas{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--stories-fit,1))}
 .stories-viewport{position:absolute;inset:0;overflow:visible}.stories-track{width:1920px;height:1080px}
 .story-slide{position:absolute;inset:0;width:1920px;height:1080px;opacity:0;visibility:hidden}
 .story-slide.is-active{opacity:1;visibility:visible}.stories-progress-bars button{display:block}
 .story-bubble,.story-asset{position:absolute;opacity:1;animation:none!important}
}


/* v24 — clear section 3 CTA; controlled whitespace and three-zone navigation in section 4 */
.personality-cta{display:none!important}
/* All positions below use the original 1920×1080 artboard, scaled by --stories-fit. */
.stories-title-wrap{top:115px}
.story-bubble.question{top:411px}
.story-bubble.answer{top:577px}
.story-visuals{transform:translateY(-54px)}
.stories-arrow{top:707px}
.stories-cta{left:763px;top:827px;width:394px;height:113px}
/* Navigation is independent of the CTA: left controls / centered steps / right counter. */
.stories-progress{position:absolute;left:110px;right:110px;bottom:44px;height:52px;display:block;width:auto;margin:0;z-index:15;pointer-events:none}
.stories-arrows{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;display:flex;gap:18px;pointer-events:auto}
.stories-progress-bars{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:690px;max-width:none;display:flex;justify-content:center;gap:20px;margin:0;pointer-events:auto}
.stories-progress-bars button{height:4px;width:auto;min-width:0;flex:1}
.stories-progress-count{position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:30px;line-height:1;pointer-events:none}
.stories-arrows button{width:45px;height:45px}

/* v25: exact artboard spacing, original supplied arrow, deliberate taller screen. */
.stories-section{height:var(--stories-section-height,1260px)!important;min-height:0!important;overflow:visible!important}
.stories-sticky{position:relative!important;top:auto!important;height:100%!important;min-height:0!important;overflow:visible!important}
.stories-stage{height:100%!important;min-height:0!important;overflow:visible!important}
.stories-canvas{position:absolute!important;left:50%!important;top:0!important;width:1920px!important;height:1260px!important;transform:translateX(-50%) scale(var(--stories-fit,1))!important;transform-origin:center top!important}
.stories-title-wrap{top:115px!important}
.story-bubble.question{top:485px!important}
.story-bubble.answer{top:673px!important}
.story-visuals{transform:translateY(50px)!important}
.stories-arrow{left:686px!important;top:875px!important;width:330px!important;height:113px!important}
.stories-arrow img{display:block;width:100%;height:100%;object-fit:contain}
.stories-progress{left:110px!important;right:110px!important;top:1040px!important;bottom:auto!important;height:52px!important}
.stories-cta{left:763px!important;top:1134px!important;width:394px!important;height:113px!important}
.stories-crosses{height:950px!important}
@media(prefers-reduced-motion:reduce){.stories-section{height:auto!important}.stories-canvas{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important}.stories-sticky,.stories-stage{height:auto!important}}


/* Screen 5: idea -> reality */
.reality-section{position:relative;min-height:100svh;background:var(--continuous-dark);isolation:isolate;overflow:hidden}
.reality-stage{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 34% 58% at 50% 54%,rgba(42,31,70,.34),transparent 74%),var(--continuous-dark)}
.reality-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 49% 43%,rgba(33,28,67,.28),transparent 40%)}
.reality-canvas{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--reality-fit,1));transform-origin:center center;z-index:1}
.reality-crosses{position:absolute;right:52px;top:42px;width:812px;height:880px;opacity:.34;z-index:0;pointer-events:none}
.reality-intro{position:absolute;left:410px;top:112px;width:1100px;text-align:center;z-index:2}
.reality-intro h2{margin:0;font-family:Oswald,Impact,sans-serif;font-size:91px;line-height:1.05;font-weight:500;letter-spacing:0;white-space:nowrap}.reality-intro h2 span{display:block}.reality-gold{color:var(--cream)}
.reality-flow{position:absolute;inset:0;z-index:2;pointer-events:none}
.reality-step{position:absolute;width:270px;opacity:0;transform:translate3d(0,42px,0) scale(.92);filter:blur(7px);will-change:opacity,transform,filter}
.reality-badge{display:block;width:257px;height:187px;object-fit:contain;margin:0 0 44px}
.reality-step h3{margin:0 0 32px;font-family:Oswald,Impact,sans-serif;font-size:28px;line-height:1.06;font-weight:500;color:var(--cream);letter-spacing:0;max-width:270px}
.reality-step p{margin:0;max-width:257px;font-size:15px;line-height:1.55;color:#d4cedf;font-family:'Nunito Sans',sans-serif}
.reality-step.step-1{left:136px;top:340px}
.reality-step.step-2{left:474px;top:340px}
.reality-step.step-3{left:816px;top:340px}
.reality-step.step-4{left:1159px;top:340px}
.reality-step.step-5{left:1497px;top:340px}
.reality-chevron{position:absolute;top:413px;width:22px;height:40px;opacity:0;transform:scale(.82);will-change:opacity,transform}
.reality-chevron.chev-1{left:418px}.reality-chevron.chev-2{left:760px}.reality-chevron.chev-3{left:1103px}.reality-chevron.chev-4{left:1442px}
.reality-bottom{position:absolute;left:0;right:0;top:853px;height:175px;z-index:2}
.reality-curve{position:absolute;left:138px;top:22px;width:1640px;height:120px;display:block;opacity:0;transform:translateY(24px);filter:blur(5px)}
.reality-day{position:absolute;font-family:'Nunito Sans',sans-serif;font-size:16px;line-height:1;color:#ffffff;opacity:0;transform:translateY(18px)}
.reality-day-start{left:136px;top:24px}.reality-day-end{right:138px;top:24px}
.reality-dot{position:absolute;top:118px;width:28px;height:28px;border-radius:50%;background:#f3dc88;box-shadow:0 0 0 3px rgba(243,220,136,.12);opacity:0;transform:scale(.72)}
.reality-dot.dot-start{left:138px}.reality-dot.dot-end{right:138px}
.reality-cta{position:absolute;left:763px;top:78px;width:394px;height:113px;margin:0;opacity:0;transform:translateY(24px);will-change:opacity,transform;font-size:28px}
.reality.is-revealed .reality-step{animation:personalityTile .72s cubic-bezier(.16,.83,.22,1) forwards}
.reality.is-revealed .step-1{animation-delay:.12s}.reality.is-revealed .step-2{animation-delay:.47s}.reality.is-revealed .step-3{animation-delay:.82s}.reality.is-revealed .step-4{animation-delay:1.17s}.reality.is-revealed .step-5{animation-delay:1.52s}
.reality.is-revealed .reality-chevron{animation:personalitySign .45s ease-out forwards}
.reality.is-revealed .chev-1{animation-delay:.30s}.reality.is-revealed .chev-2{animation-delay:.65s}.reality.is-revealed .chev-3{animation-delay:1.00s}.reality.is-revealed .chev-4{animation-delay:1.35s}
.reality.is-revealed .reality-curve{animation:realityCurve .72s ease-out 1.84s forwards}
.reality.is-revealed .reality-day,.reality.is-revealed .reality-dot{animation:realityDay .56s ease-out 2.02s forwards}
.reality.is-revealed .reality-cta{animation:personalityCta .65s ease-out 2.14s forwards}
@keyframes realityCurve{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes realityDay{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reality-step,.reality-chevron,.reality-curve,.reality-day,.reality-dot,.reality-cta{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}}


/* v30 — requested UI refinements */
:root{--logo-scale-desktop:.70}

/* Smaller primary logo site-wide */
.logo{width:138px!important}
.how-header .logo{width:118px!important}
@media(max-width:1400px) and (min-width:851px){
  .logo,.site-header .logo{width:112px!important}
}
@media(max-width:850px){
  .logo,.site-header .logo{width:94px!important}
  .how-header .logo{width:94px!important}
}

/* Language switcher: use provided SVG backing for active state, no black side stripes */
.lang{gap:12px}
.lang button{position:relative}
.lang .lang-active{
  width:49px!important;
  height:73px!important;
  padding:30px 0 0!important;
  background:transparent url('assets/lang-active-bg.svg') center/100% 100% no-repeat!important;
  border:0!important;
  clip-path:none!important;
  color:#061736!important;
  font-weight:800;
}
@media(max-width:850px){
  .lang .lang-active{width:43px!important;height:64px!important;padding-top:22px!important}
}

/* All large CTAs: same hover behaviour — brighten + zoom, no shake, no darkening */
.nav-cta,.main-cta{
  transform-origin:center center;
  transition:transform .22s ease,filter .22s ease!important;
  filter:none!important;
  will-change:transform,filter;
}
.nav-cta:hover,.main-cta:hover,
.nav-cta:focus-visible,.main-cta:focus-visible{
  transform:scale(1.05)!important;
  filter:brightness(1.12) drop-shadow(0 10px 16px rgba(0,0,0,.24))!important;
  animation:none!important;
}
.nav-cta:active,.main-cta:active{
  transform:scale(1.02)!important;
  filter:brightness(1.06) drop-shadow(0 7px 12px rgba(0,0,0,.20))!important;
  animation:none!important;
}
@media(prefers-reduced-motion:reduce){
  .nav-cta,.main-cta{transition:none!important}
}

/* Remove CTA after screen 4 and keep more air before screen 5 */
.stories-cta{display:none!important}
.stories-section{margin-bottom:165px!important}

/* Screen 5 starts lower, with more separation from previous section */
.reality-section{margin-top:0!important;min-height:1180px!important;overflow:visible!important}
.reality-stage{min-height:1180px!important;overflow:visible!important}
.reality-canvas{top:90px!important;transform:translate(-50%,0) scale(var(--reality-fit,1))!important;transform-origin:center top!important}

/* Keep bottom timeline/CTA readable after the section shift */
@media(max-width:850px){
  .stories-section{margin-bottom:110px!important}
  .reality-section,.reality-stage{min-height:980px!important}
  .reality-canvas{top:60px!important}
}


/* v31: stable CTA reveal, stronger luminous hover, smoother stage transitions */
.nav-cta,.main-cta{transition:transform .26s cubic-bezier(.2,.75,.25,1),filter .26s ease!important;}
.nav-cta:hover,.main-cta:hover,.nav-cta:focus-visible,.main-cta:focus-visible{
  transform:scale(1.05)!important;
  filter:brightness(1.5) saturate(1.2) drop-shadow(0 0 18px rgba(255,231,139,.33))!important;
  animation:none!important;
}
/* The entrance animation is fill-forwards. Disabling it on hover used to reveal opacity:0. */
.reality.is-revealed .reality-cta:is(:hover,:focus-visible){opacity:1!important;}
.reality.is-revealed .reality-cta{pointer-events:auto;}
/* Faster, less resource-intensive second-screen scroll sequence. */
.how-section{height:235vh!important;}
.how-item{backface-visibility:hidden;transform:translateZ(0);}
@media(max-width:750px){.how-section{height:210vh!important;}}
@media(prefers-reduced-motion:reduce){.how-section{height:100svh!important}}

.reality.cta-ready .reality-cta{opacity:1!important;animation:none!important;transform:translateY(0);}
.reality.cta-ready .reality-cta:hover,.reality.cta-ready .reality-cta:focus-visible{transform:scale(1.05)!important;}

/* v32 — tighter separation between stories/process; more space within process */
.stories-section{margin-bottom:32px!important}
.reality-canvas{top:12px!important}
/* Increase title-to-cards separation without moving the heading. */
.reality-step.step-1,.reality-step.step-2,.reality-step.step-3,.reality-step.step-4,.reality-step.step-5{top:423px}
.reality-chevron{top:496px}
/* Follow the cards downward with the timeline and CTA to preserve breathing room. */
.reality-bottom{top:935px}
.reality-section,.reality-stage{min-height:1210px!important}
@media(max-width:850px){
 .stories-section{margin-bottom:22px!important}
 .reality-canvas{top:8px!important}
 .reality-section,.reality-stage{min-height:980px!important}
}


/* Screen 6 · Pricing / custom sets. Layout based on provided 1920×1171 reference. */
.pricing-section{position:relative;background:#020204;min-height:1140px;overflow:hidden;isolation:isolate;scroll-margin-top:90px}
.pricing-backdrop{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 33% 51% at 47% 50%,rgba(38,29,62,.32),transparent 85%),#020204;pointer-events:none}
.pricing-inner{position:relative;width:min(1690px,calc(100% - 100px));margin:0 auto;padding:135px 0 110px}
.pricing-heading{text-align:center;margin:0 auto 46px}
.pricing-heading h2{font:500 clamp(54px,5.1vw,91px)/1.04 Oswald,Impact,sans-serif;margin:0;letter-spacing:0}
.pricing-heading h2 span{display:block}.pricing-heading .gold{color:var(--cream)}
.pricing-heading p{font:400 15px/1.55 'Nunito Sans',sans-serif;color:#e8e4ec;margin:35px auto 0}.pricing-heading .muted-accent{color:#ab9ac7}
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:75px;align-items:stretch}
.pricing-option{display:flex;flex-direction:column;align-items:flex-start;min-width:0;opacity:0;filter:blur(7px);transform:translate3d(0,48px,0) scale(.95);will-change:transform,opacity,filter}
.pricing-tile{display:block;width:313px;height:227px;max-width:100%;object-fit:contain;object-position:top left;margin-bottom:33px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.1))}
.pricing-option h3{margin:0 0 13px;color:var(--cream);font:400 24px/1.2 Oswald,Impact,sans-serif;white-space:normal}
.pricing-lead{margin:0 0 21px;min-height:41px;color:#ad9dcc;font:400 15px/1.34 'Nunito Sans',sans-serif}
.pricing-option ul{margin:0 0 38px;padding-left:18px;color:#c5c2cd;font:400 15px/1.55 'Nunito Sans',sans-serif}
.pricing-option li{margin-bottom:5px}.pricing-option li::marker{color:#fff}
.pricing-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%}
.pricing-price{color:var(--cream);font:500 45px/1 Oswald,Impact,sans-serif;letter-spacing:-1.5px;white-space:nowrap}
.pricing-choose{position:relative;display:grid;place-items:center;flex:0 0 151px;height:52px;font:800 13px/1 'Nunito Sans',sans-serif;white-space:nowrap;isolation:isolate;transform-origin:center;transition:transform .26s cubic-bezier(.2,.75,.25,1),filter .26s ease}
.pricing-choose img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.pricing-choose span{position:relative;z-index:1;transform:translateY(-1px);pointer-events:none}
.pricing-choose:is(:hover,:focus-visible){transform:scale(1.05);filter:brightness(1.5) saturate(1.2) drop-shadow(0 0 18px rgba(255,231,139,.33))}
.pricing-choose:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
.pricing-section.is-revealed .pricing-option{animation:personalityTile .75s cubic-bezier(.16,.83,.22,1) both}
.pricing-section.is-revealed .pricing-option:nth-child(1){animation-delay:.12s}.pricing-section.is-revealed .pricing-option:nth-child(2){animation-delay:.39s}.pricing-section.is-revealed .pricing-option:nth-child(3){animation-delay:.66s}.pricing-section.is-revealed .pricing-option:nth-child(4){animation-delay:.93s}
@media(max-width:1500px){.pricing-inner{width:min(1360px,calc(100% - 80px))}.pricing-grid{gap:35px}.pricing-price{font-size:37px}.pricing-choose{flex-basis:135px;height:48px;font-size:12px}.pricing-option h3{font-size:22px}}
@media(max-width:1050px){.pricing-inner{width:min(820px,calc(100% - 50px));padding:125px 0 95px}.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:54px;row-gap:70px}.pricing-option{min-height:570px}.pricing-option ul{margin-bottom:35px}}
@media(max-width:570px){.pricing-inner{width:calc(100% - 44px);padding:112px 0 85px}.pricing-heading h2{font-size:clamp(43px,11vw,65px)}.pricing-heading p{font-size:14px}.pricing-grid{grid-template-columns:1fr;gap:60px}.pricing-option{min-height:0}.pricing-tile{margin-bottom:24px}.pricing-lead{min-height:0}.pricing-bottom{justify-content:flex-start;gap:22px;margin-top:16px}.pricing-option ul{margin-bottom:10px}.pricing-price{font-size:38px}}
@media(prefers-reduced-motion:reduce){.pricing-option{opacity:1;filter:none;transform:none}.pricing-section.is-revealed .pricing-option{animation:none}.pricing-choose{transition:none}}

/* v36 — body-copy readability in the three requested sections.
   Heading sizes and all six story-slide compositions remain unchanged. */
.how-copy p { font-size:18px; line-height:1.47; }
.personality-intro p { font-size:19px; line-height:1.47; }
/* Applies to the question and answer of ALL six story states. */
.story-slide .story-text { font-size:18px; line-height:1.38; }
.story-slide .story-text strong { font-size:19px; }
/* Rebalance internal vertical padding for longer answers without moving bubbles. */
.story-slide .story-bubble { padding-top:22px; padding-bottom:22px; }


/* v37 — body-copy spacing and pricing controls. Heading sizes untouched. */
.how-copy p:last-of-type{color:#fff!important}
.personality-intro p{font-size:22px!important;line-height:1.5!important}
.reality-step p{font-size:17px!important;line-height:1.55!important}
.reality-bottom .reality-cta{top:143px!important}
.reality-section,.reality-stage{min-height:1290px!important}
.pricing-lead,.pricing-option ul{font-size:17px!important}
.pricing-heading p{font-size:17px!important}
.pricing-choose{flex-basis:196px!important;height:68px!important;font-size:16px!important}
.pricing-bottom{gap:12px!important}
@media(max-width:1500px){
 .pricing-choose{flex-basis:177px!important;height:62px!important;font-size:14px!important}
 .pricing-price{font-size:36px!important}
}
@media(max-width:1050px){.pricing-bottom{flex-wrap:wrap;row-gap:14px}}
@media(max-width:570px){
 .personality-intro p{font-size:22px!important}
 .pricing-lead,.pricing-option ul{font-size:17px!important}
 .pricing-heading p{font-size:16px!important}
 .pricing-choose{flex-basis:196px!important;height:68px!important;font-size:16px!important}
}

/* v38 — match both subtitles without changing headline sizes. */
.personality-intro p,
.pricing-heading p {
  font-family:'Nunito Sans',sans-serif;
  font-size:22px!important;
  font-weight:400;
  line-height:1.5!important;
}


/* v39 — place the process timeline and CTA in the centre of the free
   vertical space before pricing, without moving the cards or headings. */
.reality-bottom {
  top: 1110px !important;
}
/* Retain the existing timeline arc, date labels, dots and CTA as a group. */


/* v40 FAQ section */
.faq-section{position:relative;min-height:1300px;background:var(--continuous-dark,#020204);overflow:hidden;isolation:isolate;scroll-margin-top:90px;padding:74px 0 120px}
.faq-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse 26% 48% at 50% 53%,rgba(47,36,73,.34),transparent 75%);pointer-events:none}
.faq-crosses{position:absolute;left:50%;top:66px;transform:translateX(-50%);width:min(1750px,92vw);height:calc(100% - 120px);object-fit:cover;opacity:.18;pointer-events:none;mix-blend-mode:screen}
.faq-inner{position:relative;z-index:1;width:min(1680px,calc(100% - 120px));margin:0 auto}
.faq-heading{text-align:center;margin-bottom:74px}
.faq-heading h2{margin:0;font-family:Oswald,Impact,sans-serif;font-size:90px;line-height:1.03;font-weight:500}
.faq-heading h2 span{display:block}
.faq-heading .gold{color:var(--cream)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 45px;align-items:start}
.faq-column{display:grid;gap:42px}
.faq-item{position:relative;border:3px solid var(--cream);border-radius:54px;background:linear-gradient(90deg,rgba(5,5,10,.98) 0%,rgba(6,7,20,.98) 58%,rgba(15,12,37,.93) 100%);box-shadow:0 0 0 1px rgba(255,239,184,.07) inset;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.faq-item:is(:hover,:focus-within){box-shadow:0 0 0 1px rgba(255,239,184,.11) inset,0 0 30px rgba(48,34,83,.18)}
.faq-question{width:100%;display:flex;align-items:center;gap:31px;background:none;border:0;color:inherit;padding:29px 34px 28px 29px;text-align:left;cursor:pointer;font:inherit}
.faq-token{width:58px;height:58px;flex:0 0 58px;object-fit:contain;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
.faq-question-text{flex:1 1 auto;color:var(--cream);font:500 28px/1.35 'Nunito Sans',sans-serif;letter-spacing:0}
.faq-toggle{position:relative;flex:0 0 48px;width:48px;height:48px;border:2px solid rgba(237,236,244,.92);border-radius:50%;display:grid;place-items:center;color:#f3f1f7;transition:transform .25s ease,border-color .25s ease}
.faq-toggle-lines{position:relative;width:18px;height:10px;display:block}
.faq-toggle-lines::before,.faq-toggle-lines::after{content:'';position:absolute;top:3px;width:12px;height:2px;background:currentColor;border-radius:999px}
.faq-toggle-lines::before{left:0;transform:rotate(45deg);transform-origin:left center}
.faq-toggle-lines::after{right:0;transform:rotate(-45deg);transform-origin:right center}
.faq-item.is-open .faq-toggle{transform:rotate(180deg)}
.faq-answer-wrap{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.24,.78,.21,1),opacity .25s ease;opacity:0}
.faq-item.is-open .faq-answer-wrap{opacity:1}
.faq-answer{display:flex;align-items:flex-start;gap:31px;padding:0 34px 34px 29px}
.faq-answer-text{margin:0;color:#f3f0f6;font:400 28px/1.42 'Nunito Sans',sans-serif;max-width:880px}
.faq-item.is-open .faq-question{padding-bottom:18px}
.faq-question:focus-visible{outline:2px solid var(--cream);outline-offset:6px;border-radius:44px}
@media(max-width:1440px){.faq-inner{width:min(1680px,calc(100% - 64px))}.faq-heading h2{font-size:74px}.faq-question-text,.faq-answer-text{font-size:24px}.faq-grid,.faq-column{gap:28px}}
@media(max-width:980px){.faq-section{min-height:auto;padding:60px 0 90px}.faq-crosses{width:100vw;height:100%;top:0;opacity:.13}.faq-grid{grid-template-columns:1fr;gap:24px}.faq-column{gap:24px}.faq-heading{margin-bottom:42px}.faq-heading h2{font-size:56px}.faq-question{gap:18px;padding:22px 18px}.faq-answer{gap:18px;padding:0 18px 24px}.faq-token{width:46px;height:46px;flex-basis:46px}.faq-question-text,.faq-answer-text{font-size:20px;line-height:1.4}.faq-toggle{width:42px;height:42px;flex-basis:42px}}


/* v41 — FAQ typography, clean shared carousel arrow, even rhythm */
.faq-section { padding-top:110px; padding-bottom:125px; min-height:0; }
.faq-heading { margin-bottom:84px; }
.faq-grid { column-gap:45px; align-items:start; }
.faq-column { gap:32px; align-content:start; }
.faq-question { min-height:116px; gap:26px; padding:24px 30px 24px 26px; }
.faq-question-text { font-family:'Nunito Sans',sans-serif; font-size:28px; line-height:1.35; font-weight:600; }
.faq-answer { gap:26px; padding:0 30px 29px 26px; }
.faq-answer-text { font-family:'Nunito Sans',sans-serif; font-size:26px; line-height:1.42; font-weight:400; }
.faq-item.is-open .faq-question { padding-bottom:19px; }
/* Remove the pair of rotated CSS borders that caused rendering artifacts. */
.faq-toggle-lines { display:none!important; }
.faq-toggle-lines::before,.faq-toggle-lines::after { content:none!important; }
.faq-toggle { display:grid; place-items:center; transform:none!important; border:2px solid rgba(237,236,244,.92); }
.faq-toggle svg { display:block; width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transform:rotate(45deg); transition:transform .3s ease; }
.faq-item.is-open .faq-toggle svg { transform:rotate(225deg); }
.faq-answer-wrap { transition:max-height .34s cubic-bezier(.24,.78,.21,1),opacity .25s ease; }
@media(max-width:1440px) and (min-width:981px){
  .faq-section { padding-top:96px; padding-bottom:110px; }
  .faq-heading { margin-bottom:70px; }
  .faq-grid { column-gap:32px; }
  .faq-column { gap:28px; }
  .faq-question-text { font-size:24px; }
  .faq-answer-text { font-size:22px; }
  .faq-question { min-height:106px; padding:22px 24px; gap:22px; }
  .faq-answer { gap:22px; padding:0 24px 26px; }
}
@media(max-width:980px){
  .faq-section { padding:64px 0 88px; }
  .faq-heading { margin-bottom:48px; }
  .faq-grid,.faq-column { gap:22px; }
  .faq-question { min-height:88px; padding:18px 20px; gap:18px; }
  .faq-question-text { font-size:20px; font-weight:600; }
  .faq-answer { padding:0 20px 22px; gap:18px; }
  .faq-answer-text { font-size:18px; font-weight:400; }
  .faq-item.is-open .faq-question { padding-bottom:14px; }
  .faq-toggle svg { width:26px; height:26px; }
}
@media(prefers-reduced-motion:reduce){ .faq-toggle svg,.faq-answer-wrap { transition:none; } }

/* v42 — match the Frame 58 FAQ artboard proportions.
   All eight questions/answers, fonts and language variants remain unchanged. */
@media (min-width:981px) {
  .faq-section {
    min-height:1020px;
    padding:54px 0 120px;
    overflow:visible;
  }
  .faq-inner {
    width:min(1480px, calc(100% - 100px));
  }
  .faq-heading {
    margin:0 auto 103px;
  }
  .faq-heading h2 {
    font-size:94px;
    line-height:1.04;
  }
  .faq-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:46px;
    align-items:start;
  }
  .faq-column {
    gap:42px;
  }
  .faq-item {
    border-width:2px;
    border-radius:54px;
  }
  .faq-question,
  .faq-item.is-open .faq-question {
    min-height:104px;
    padding:19px 24px;
    gap:19px;
  }
  .faq-question-text {
    font-size:21px;
    font-weight:600;
    line-height:1.35;
  }
  .faq-answer {
    padding:5px 25px 28px 24px;
    gap:19px;
  }
  .faq-answer-text {
    font-size:19px;
    font-weight:400;
    line-height:1.5;
  }
  .faq-token {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .faq-toggle {
    width:34px;
    height:34px;
    flex-basis:34px;
    border-width:1.5px;
  }
  .faq-toggle svg {
    width:24px;
    height:24px;
  }
}
@media (min-width:981px) and (max-width:1440px) {
  .faq-inner{width:min(1330px,calc(100% - 64px));}
  .faq-heading h2{font-size:78px;}
  .faq-question-text{font-size:20px;}
  .faq-answer-text{font-size:18px;}
  .faq-grid{column-gap:32px;}
  .faq-column{gap:32px;}
}


/* v43 — cinematic final CTA: proportional reference scene (1725 × 864) */
.final-section{position:relative;height:195svh;background:#030306;isolation:isolate;scroll-margin-top:0}
.final-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#030306}
.final-background{position:absolute;inset:0;background:radial-gradient(ellipse 33% 63% at 50% 87%,rgba(58,54,85,.38),transparent 95%),radial-gradient(ellipse 36% 48% at 50% 48%,rgba(23,20,41,.70),transparent 90%),#030306;pointer-events:none}
.final-canvas{position:absolute;width:1725px;height:864px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--final-fit,1));transform-origin:center center;overflow:visible}
.final-crosses{position:absolute;left:540px;top:225px;width:646px;height:620px;object-fit:fill;opacity:.44;pointer-events:none;z-index:0}
.final-objects{position:absolute;inset:0;pointer-events:none;z-index:1}
.final-object{position:absolute;display:block;max-width:none;object-fit:contain;will-change:transform;opacity:0;transform-origin:center center;filter:drop-shadow(0 13px 13px rgba(0,0,0,.16));backface-visibility:hidden}
.final-left-top{width:260px;left:-99px;top:-112px;z-index:4}
.final-left-main{width:460px;left:-103px;top:77px;z-index:5}
.final-left-bottom{width:315px;left:124px;top:440px;z-index:5}
.final-left-blur{width:287px;left:-205px;top:615px;z-index:3;filter:blur(5px)}
.final-left-token{width:126px;left:300px;top:118px;z-index:6;filter:blur(2.5px)}
.final-right-top{width:260px;left:1100px;top:-106px;z-index:4}
.final-right-main{width:510px;left:1273px;top:-82px;z-index:6;filter:blur(2.8px)}
.final-right-bottom-left{width:326px;left:1284px;top:422px;z-index:6}
.final-right-bottom-right{width:349px;left:1447px;top:490px;z-index:4}
.final-right-token{width:107px;left:1282px;top:390px;z-index:7}
.final-right-token-small{width:118px;left:1266px;top:605px;z-index:7}
.final-content{position:absolute;z-index:10;left:420px;top:163px;width:885px;text-align:center;pointer-events:none}
.final-content h2{margin:0;color:var(--cream);font:500 89px/1.09 Oswald,Impact,sans-serif;letter-spacing:.004em;white-space:nowrap}
.final-content h2 span{display:block}.final-content h2 .final-white{color:#f6f5fa}
.final-content p{font:400 17px/1.52 'Nunito Sans',sans-serif;color:#d3cce3;margin:30px auto 0;width:850px;max-width:100%}
.final-content p span{display:block}
.final-button-motion{width:435px;height:122px;margin:42px auto 0;pointer-events:auto;animation:finalTwitch 4.3s ease-in-out infinite;transform-origin:center}
.final-cta{width:100%!important;height:100%!important;margin:0!important;font-size:30px!important;opacity:1!important;visibility:visible!important;transform:none;pointer-events:auto}
.final-cta:is(:hover,:focus-visible){transform:scale(1.05)!important;filter:brightness(1.54) saturate(1.2) drop-shadow(0 0 25px rgba(251,227,146,.47))!important;animation:none!important}
@keyframes finalTwitch{0%,69%,74%,80%,100%{transform:translate3d(0,0,0) rotate(0deg)}71%{transform:translate3d(-3px,0,0) rotate(-.42deg)}72.8%{transform:translate3d(3px,-1px,0) rotate(.45deg)}77%{transform:translate3d(-2px,0,0) rotate(-.26deg)}}
.final-section.is-visible .final-object{animation:finalReveal .78s ease-out forwards}
.final-section.is-visible .final-left-main{animation-delay:.09s}.final-section.is-visible .final-right-main{animation-delay:.17s}.final-section.is-visible .final-left-bottom{animation-delay:.25s}.final-section.is-visible .final-right-bottom-left{animation-delay:.32s}.final-section.is-visible .final-left-token{animation-delay:.40s}.final-section.is-visible .final-right-token{animation-delay:.46s}.final-section.is-visible .final-right-token-small{animation-delay:.51s}
@keyframes finalReveal{0%{opacity:0}100%{opacity:1}}
@media(max-width:850px){.final-section{height:130svh}.final-canvas{transform:translate(-50%,-50%) scale(var(--final-fit,.45))}.final-sticky{height:100svh}}
@media(prefers-reduced-motion:reduce){.final-section{height:100svh}.final-object{opacity:1!important;animation:none!important;transform:none!important}.final-button-motion{animation:none!important}}


/* v44: final cards on a fixed global layer, identical boundary solution to screen two. */
.final-portal{
  position:fixed;inset:0;z-index:60;overflow:visible;
  pointer-events:none;opacity:0;visibility:hidden;
  contain:layout style;
}
.final-portal-canvas{
  position:absolute;left:50%;top:50%;width:1725px;height:864px;
  transform:translate(-50%,-50%) scale(var(--final-fit,1));
  transform-origin:center center;overflow:visible;
}
.final-portal .final-objects{
  position:absolute;inset:0;isolation:isolate;
  overflow:visible;pointer-events:none;
}
.final-portal .final-object{pointer-events:none}
.final-portal.is-visible .final-object{animation:finalReveal .78s ease-out forwards}
.final-portal.is-visible .final-left-main{animation-delay:.09s}
.final-portal.is-visible .final-right-main{animation-delay:.17s}
.final-portal.is-visible .final-left-bottom{animation-delay:.25s}
.final-portal.is-visible .final-right-bottom-left{animation-delay:.32s}
.final-portal.is-visible .final-left-token{animation-delay:.40s}
.final-portal.is-visible .final-right-token{animation-delay:.46s}
.final-portal.is-visible .final-right-token-small{animation-delay:.51s}
/* A transparent-to-clear black veil behind the fixed navigation. */
body::before{
  content:"";position:fixed;top:0;left:0;width:100%;height:165px;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.77) 18%,
    rgba(0,0,0,.46) 52%,
    rgba(0,0,0,.15) 78%,
    rgba(0,0,0,0) 100%);
  z-index:990;pointer-events:none;
}
.site-header{z-index:1000!important}
@media(max-width:850px){body::before{height:128px}}
@media(prefers-reduced-motion:reduce){
  .final-portal .final-object{opacity:1!important;animation:none!important;transform:none!important}
}


/* v45: composition matched to supplied Frame 68; keep the v44 unclipped portal. */
.final-portal .final-left-top{width:250px;left:-100px;top:-120px;z-index:3}
.final-portal .final-left-main{width:457px;left:-107px;top:44px;z-index:5}
.final-portal .final-left-bottom{width:292px;left:175px;top:522px;z-index:4}
.final-portal .final-left-blur{width:270px;left:-195px;top:607px;z-index:3;filter:blur(5px)}
.final-portal .final-left-front-card{width:120px;left:55px;top:415px;z-index:4;opacity:.8}
.final-portal .final-right-top{width:255px;left:1165px;top:-155px;z-index:3}
.final-portal .final-right-main{width:450px;left:1280px;top:-54px;z-index:4;filter:blur(2px)}
.final-portal .final-right-bottom-left{width:335px;left:1290px;top:415px;z-index:4}
.final-portal .final-right-bottom-right{width:350px;left:1460px;top:482px;z-index:4}
.final-portal .final-right-added-card{width:155px;left:1485px;top:535px;z-index:5}
.final-portal .final-figurine{height:auto;object-fit:contain;filter:drop-shadow(0 17px 14px rgba(0,0,0,.35));z-index:8}
.final-portal .final-figurine-shopper{width:164px;left:465px;top:77px}
.final-portal .final-figurine-woman{width:200px;left:301px;top:466px}
.final-portal .final-figurine-toilet{width:235px;left:1242px;top:215px}
.final-portal .final-figurine-cat{width:150px;left:1346px;top:625px}
/* Cards may overlap the previous section, while content maintains its own layer. */
.final-portal{overflow:visible!important}
.final-portal-canvas,.final-portal .final-objects{overflow:visible!important}

/* v46 — bring the process path closer to the five columns, while preserving
   approx. 200px centre-to-centre separation from the CTA. */
.reality-bottom {top:860px!important;}
.reality-bottom .reality-cta {top:245px!important;}

/* v47: move process timeline and CTA together 100px downward. */
.reality-bottom{top:960px!important}

/* v48 — mobile-only layouts based on supplied iPhone compositions. Desktop untouched. */
@media (max-width: 850px) {
 .personality,.personality-stage{height:auto!important;min-height:0!important;overflow:visible!important}
 .personality-stage{padding:48px 0 65px!important}
 .personality-canvas{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important;display:flex!important;flex-direction:column;align-items:center}
 .personality-intro{position:relative!important;top:auto!important;left:auto!important;width:calc(100% - 35px)!important;margin:0 auto 46px!important}
 .personality-intro h2{font-size:clamp(26px,7.3vw,40px)!important;line-height:1.06!important;white-space:normal!important}
 .personality-intro p{display:none!important}
 .personality-formula{position:relative!important;inset:auto!important;width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;pointer-events:auto!important}
 .personality-term{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:19px!important;opacity:1!important;filter:none!important;transform:none!important;animation:none!important;margin:0!important}
 .personality-term>img:not(.result-base){width:min(68vw,280px)!important;height:auto!important;max-height:none!important;object-fit:contain!important}
 .personality-term>span{font-size:clamp(27px,7.8vw,35px)!important;line-height:1.15!important;white-space:normal!important;text-align:center!important}
 .formula-sign{position:relative!important;left:auto!important;top:auto!important;width:42px!important;height:42px!important;margin:23px auto 32px!important;opacity:1!important;filter:none!important;transform:none!important;animation:none!important;object-fit:contain!important}
 .formula-sign.sign-4{height:27px!important;margin:25px auto 30px!important}
 .personality-term.term-result{min-height:355px!important;justify-content:flex-start!important}
 .term-result .result-base{width:min(68vw,280px)!important;height:auto!important}
 .result-stack{left:50%!important;top:0!important;width:260px!important;height:255px!important;transform:translateX(-50%)!important}
 .result-card{width:180px!important;opacity:1!important;filter:none!important;animation:none!important}
 .result-card-1{transform:rotate(-19deg)!important}.result-card-2{transform:rotate(12deg)!important}.result-card-3{transform:rotate(-9deg)!important}.result-card-4{transform:rotate(9deg)!important}
 .term-result>span{margin-top:2px!important}
 .personality-crosses{opacity:.08!important}
 .stories-section{height:auto!important;min-height:0!important;overflow:hidden!important;margin:0!important}
 .stories-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:46px 0 38px!important}
 .stories-stage{min-height:0!important;overflow:visible!important}
 .stories-canvas{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important;display:flex!important;flex-direction:column!important}
 .stories-static{display:contents!important}
 .stories-title-wrap{position:relative!important;left:auto!important;top:auto!important;width:calc(100% - 40px)!important;margin:0 auto 26px!important;order:0!important}
 .stories-title-wrap h2{font-size:clamp(25px,7.4vw,39px)!important;line-height:1.02!important;white-space:normal!important}
 .stories-title-wrap h2 span{display:inline!important}
 .stories-title-wrap h2 span:first-child::after,.stories-title-wrap h2 span:nth-child(2)::after{content:' '!important}
 .stories-viewport{position:relative!important;inset:auto!important;overflow:visible!important;order:1!important;width:100%!important;height:565px!important}
 .stories-track{position:relative!important;width:100%!important;height:100%!important;transform:none!important}
 .story-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important}
 .story-bubble{left:7%!important;width:86%!important;min-height:0!important;height:auto!important;border-radius:30px!important;padding:21px 18px 21px 88px!important;transform:none;box-sizing:border-box!important}
 .story-bubble.question{top:0!important;min-height:133px!important}.story-bubble.answer{top:145px!important;min-height:155px!important}
 .story-icon-img{left:16px!important;width:52px!important;height:52px!important}
 .story-text{font-size:13px!important;line-height:1.38!important}.story-text strong{font-size:13px!important}
 .story-visuals{position:absolute!important;inset:auto 0 0!important;height:235px!important;overflow:visible!important}
 .story-slide .story-asset{width:170px!important;height:auto!important;max-height:230px!important;object-fit:contain!important}
 .story-slide .card-front{left:19%!important;top:12px!important;transform:rotate(-8deg)}
 .story-slide .card-back{left:48%!important;top:8px!important;transform:rotate(10deg)}
 .story-slide .asset-figure{left:35%!important;top:76px!important;width:170px!important;max-height:180px!important}
 .stories-progress{position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;order:2!important;width:86%!important;margin:6px auto 0!important;display:flex!important;flex-direction:column!important;gap:14px!important;align-items:center!important}
 .stories-progress-count{display:none!important}.stories-progress-bars{width:100%!important;justify-content:space-between!important;gap:7px!important}
 .stories-progress-bars button{width:auto!important;flex:1!important;height:1px!important;border-radius:0!important}
 .stories-arrows{display:flex!important;gap:15px!important;align-items:center!important;justify-content:center!important}
 .stories-arrows button{width:37px!important;height:37px!important;border-radius:50%!important}
 .stories-arrow,.stories-crosses{display:none!important}
 .mobile-stories-cta{display:flex!important;order:3!important;position:relative!important;width:calc(100% - 58px)!important;max-width:390px!important;height:98px!important;margin:27px auto 0!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;color:#ffe694!important;font-family:Oswald,Impact,sans-serif!important;font-size:clamp(22px,6.4vw,30px)!important;background:center/100% 100% no-repeat url('assets/BTN_background.svg')!important}
}
@media (min-width:851px){.mobile-stories-cta{display:none!important}}

/* v49: mobile hero typography and carousel navigation containment. */
@media (max-width:850px) {
  .copy{min-width:0!important;max-width:100%!important;overflow:visible!important}
  .copy h1{font-size:clamp(39px,11.5vw,78px)!important;line-height:1.04!important;white-space:normal!important;overflow-wrap:normal!important;max-width:100%!important}
  .copy h1 span{white-space:normal!important}
  .copy p{max-width:100%!important;overflow-wrap:break-word!important}
  .stories-progress{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;z-index:15!important;overflow:visible!important}
  .stories-progress-bars{position:relative!important;min-width:0!important;max-width:100%!important;flex:none!important}
  .stories-progress-bars button{min-width:0!important}
  .stories-arrows{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0 auto!important;width:auto!important;height:auto!important;flex:none!important;z-index:16!important}
  .stories-arrows button{position:relative!important;left:auto!important;top:auto!important;flex:0 0 37px!important;display:grid!important;place-items:center!important;padding:6px!important}
  .stories-arrows svg{display:block!important;width:100%!important;height:100%!important}
}
@media (max-width:430px){
  .copy h1{font-size:clamp(38px,11vw,48px)!important}
}


/* v50 — mobile How It Works: match supplied vertical reference, desktop intact. */
@media(max-width:850px){
 .how-section{height:auto!important;min-height:0!important;overflow:hidden!important;background:#030305!important}
 .how-sticky{position:relative!important;top:auto!important;height:975px!important;min-height:975px!important;overflow:hidden!important;background:radial-gradient(ellipse 75% 65% at 50% 78%,#111019 0%,#030305 70%)!important}
 .how-shell{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:975px!important;transform:none!important;max-width:none!important;overflow:visible!important;z-index:5!important}
 .how-pattern{display:none!important}
 .how-copy{position:absolute!important;top:61px!important;left:50%!important;width:calc(100% - 52px)!important;max-width:380px!important;margin:0!important;transform:translateX(-50%)!important;text-align:center!important;opacity:1!important;filter:none!important;z-index:6!important}
 .how-copy h2{font-size:clamp(29px,8vw,36px)!important;line-height:1.04!important;margin:0 0 32px!important;white-space:normal!important;font-weight:500!important}
 .how-copy p{font-size:13.5px!important;line-height:1.55!important;margin:0 auto 21px!important;max-width:345px!important;color:#c5c0d2!important}
 .how-copy p:first-of-type{color:#a99ccc!important}
 .how-copy p:last-of-type{color:#d4d1d8!important}
 .how-copy .how-cta{display:flex!important;width:100%!important;max-width:335px!important;height:96px!important;margin:47px auto 0!important;font-size:clamp(23px,6.5vw,29px)!important;position:relative!important}
 .how-portal{position:absolute!important;inset:0!important;width:100%!important;height:975px!important;opacity:1!important;visibility:visible!important;pointer-events:none!important;z-index:3!important;overflow:hidden!important;mask-image:none!important;-webkit-mask-image:none!important}
 .how-portal-canvas{position:absolute!important;left:50%!important;top:0!important;width:390px!important;height:975px!important;transform:translateX(-50%) scale(min(1, calc(100vw / 390px)))!important;transform-origin:top center!important;overflow:visible!important}
 .how-portal .how-collage{position:absolute!important;inset:0!important;opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important}
 .how-portal .how-item{position:absolute!important;height:auto!important;max-width:none!important;filter:none!important;transform:none!important}
 .how-card-left-top{left:-78px!important;top:533px!important;width:130px!important}
 .how-card-left-main{left:-86px!important;top:625px!important;width:215px!important}
 .how-card-left-bottom{left:-45px!important;top:762px!important;width:175px!important}
 .how-card-left-red{left:-70px!important;top:842px!important;width:160px!important}
 .how-board-left{left:-142px!important;top:794px!important;width:320px!important}
 .how-token-front{left:130px!important;top:869px!important;width:125px!important;filter:blur(3px)!important}
 .how-token-center{left:145px!important;top:668px!important;width:54px!important}
 .how-token-right{left:203px!important;top:785px!important;width:54px!important}
 .how-card-right-top{left:274px!important;top:565px!important;width:130px!important}
 .how-card-right-main{left:234px!important;top:645px!important;width:210px!important}
 .how-card-right-bottom-left{left:272px!important;top:844px!important;width:155px!important}
 .how-card-right-bottom-right{left:300px!important;top:908px!important;width:155px!important}
 .how-board-right{left:296px!important;top:524px!important;width:185px!important}
}
@media(max-width:370px){
 .how-copy{width:calc(100% - 36px)!important}
 .how-copy h2{font-size:29px!important}
 .how-copy p{font-size:12.5px!important}
 .how-copy .how-cta{margin-top:35px!important}
}

/* v51 mobile refinements: smooth handoff, correctly centered CTA and carousel. */
@media(max-width:850px){
 .how-section{position:relative!important;z-index:1!important;overflow:visible!important;background:#030305!important}
 .how-sticky{overflow:hidden!important}
 .how-sticky::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:150px!important;z-index:4!important;pointer-events:none!important;background:linear-gradient(to bottom,transparent,#030305 95%)!important}
 .how-copy .how-cta{box-sizing:border-box!important;display:grid!important;place-items:center!important;width:min(335px,100%)!important;max-width:100%!important;height:96px!important;padding:0 24px!important;margin:47px auto 0!important;font-size:clamp(19px,5.8vw,27px)!important;line-height:1.05!important;text-align:center!important;white-space:nowrap!important}
 .how-copy .how-cta img{inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important}
 .how-copy .how-cta span{display:block!important;width:100%!important;max-width:100%!important;position:relative!important;inset:auto!important;transform:none!important;white-space:nowrap!important;text-align:center!important;letter-spacing:-.02em!important}
 .personality-section{position:relative!important;z-index:2!important;background:#030305!important}
 .stories-progress{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:2px 42px!important;row-gap:18px!important;align-items:center!important;justify-items:center!important;width:calc(100% - 64px)!important;max-width:400px!important;height:62px!important;margin:12px auto 0!important;padding:0!important;inset:auto!important;transform:none!important}
 .stories-progress-bars{grid-row:1!important;grid-column:1!important;position:relative!important;width:100%!important;max-width:100%!important;height:2px!important;margin:0!important;display:flex!important;gap:8px!important;align-items:center!important}
 .stories-progress-bars button{flex:1 1 0!important;width:0!important;min-width:0!important;height:2px!important;padding:0!important;margin:0!important}
 .stories-arrows{grid-row:2!important;grid-column:1!important;position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:16px!important;width:100%!important;height:42px!important;margin:0!important;inset:auto!important;transform:none!important}
 .stories-arrows button{position:relative!important;flex:0 0 38px!important;width:38px!important;height:38px!important;margin:0!important;inset:auto!important}
}
@media(max-width:370px){.how-copy .how-cta{font-size:19px!important}}

/* v52: reserve real vertical space for carousel art before controls. */
@media (max-width:850px){
 .stories-viewport{height:710px!important;min-height:710px!important;overflow:visible!important}
 .story-visuals{bottom:35px!important;top:auto!important;height:280px!important}
 .stories-progress{margin-top:22px!important;isolation:isolate!important;z-index:30!important}
 .stories-progress-bars{z-index:31!important}
 .stories-arrows{z-index:31!important}
 .stories-progress-bars button,.stories-arrows button{pointer-events:auto!important}
}
@media(max-width:370px){.stories-viewport{height:690px!important;min-height:690px!important}}

/* v53: larger, more readable story cards, brought closer to the answer. */
@media (max-width:850px){
 .stories-viewport{height:625px!important;min-height:625px!important}
 .story-visuals{top:325px!important;bottom:auto!important;height:290px!important;overflow:visible!important}
 .story-slide .story-asset{width:clamp(190px,53vw,225px)!important;max-height:285px!important}
 .story-slide .card-front{left:11%!important;top:10px!important;transform:rotate(-7deg)!important}
 .story-slide .card-back{left:46%!important;top:0!important;transform:rotate(9deg)!important}
 .story-slide .asset-figure{left:31%!important;top:105px!important;width:clamp(170px,46vw,195px)!important;max-height:190px!important}
 .stories-progress{margin-top:28px!important}
}
@media(max-width:370px){
 .stories-viewport{height:610px!important;min-height:610px!important}
 .story-visuals{top:320px!important}
 .story-slide .story-asset{width:190px!important}
 .story-slide .asset-figure{width:170px!important;top:98px!important}
}

/* v54: mobile-only hero clearance, centering, and symmetrical benefit grid. */
@media (max-width:850px){
 .hero .shell{padding-left:20px!important;padding-right:20px!important;min-height:0!important;padding-bottom:45px!important}
 .hero .header{height:118px!important}
 .hero .copy{padding-top:28px!important;width:100%!important;max-width:100%!important;text-align:center!important;margin:0 auto!important;left:auto!important;top:auto!important}
 .hero .copy h1{font-size:clamp(37px,10.7vw,76px)!important;line-height:1.08!important;text-align:center!important;margin:0 auto!important;max-width:100%!important}
 .hero .copy p{text-align:center!important;margin:25px auto 0!important;max-width:520px!important;line-height:1.35!important}
 .hero .main-cta{display:grid!important;place-items:center!important;margin:30px auto 0!important;width:min(320px,100%)!important;max-width:100%!important;height:90px!important;font-size:clamp(19px,5.5vw,25px)!important;text-align:center!important}
 .hero .main-cta span{display:block!important;max-width:100%!important;white-space:nowrap!important;text-align:center!important}
 .hero .scenes{margin-top:20px!important;margin-left:-20px!important;width:calc(100% + 40px)!important}
 .hero .benefits{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:480px!important;margin:20px auto 0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important;row-gap:22px!important;justify-items:stretch!important;align-items:center!important}
 .hero .benefit{min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;justify-content:flex-start!important}
 .hero .benefit img{width:34px!important;height:36px!important;flex:0 0 34px!important}
 .hero .benefit span{font-size:clamp(12px,3.5vw,17px)!important;white-space:normal!important;line-height:1.08!important}
}
@media(max-width:430px){
 .hero .header{height:118px!important}
 .hero .copy{padding-top:27px!important}
 .hero .copy h1{font-size:clamp(35px,10.5vw,46px)!important}
 .hero .scenes{height:410px!important}
 .hero .benefits{margin-top:12px!important}
}

/* v55: mobile-only scroll disappearance for collage, removing hard section cut. */
@media(max-width:850px){
 .how-portal{transition:none!important;will-change:opacity!important}
 .how-sticky::after{height:0!important;background:none!important;content:none!important}
 .how-portal .how-collage{overflow:visible!important}
}

/* v65 desktop: staged card entrance + gentle parallax. Mobile rules unchanged. */
@media (min-width:851px){
 .how-portal .how-item{will-change:transform,opacity;filter:none;}
 .how-copy{z-index:3;}
}

/* v66: desktop-only spaced side compositions, mobile unaffected. */
@media(min-width:851px){
 .how-portal .how-card-left-top{left:25px;top:25px;width:118px}
 .how-portal .how-card-left-main{left:10px;top:165px;width:236px}
 .how-portal .how-card-left-bottom{left:265px;top:305px;width:115px}
 .how-portal .how-card-left-red{left:8px;top:460px;width:155px}
 .how-portal .how-board-left{left:35px;top:655px;width:280px}
 .how-portal .how-token-front{left:300px;top:740px;width:115px}
 .how-portal .how-token-center{left:282px;top:145px;width:65px}
 .how-portal .how-token-right{left:1265px;top:580px;width:55px}
 .how-portal .how-card-right-top{left:1350px;top:135px;width:120px}
 .how-portal .how-card-right-main{left:1400px;top:305px;width:220px}
 .how-portal .how-card-right-bottom-left{left:1310px;top:625px;width:135px}
 .how-portal .how-card-right-bottom-right{left:1495px;top:760px;width:140px}
 .how-portal .how-board-right{left:1490px;top:0;width:155px}
}

/* v68: Desktop-only heading scale. Mobile remains unchanged. */
@media (min-width:851px){
 .hero .copy h1{font-size:clamp(51px,4.95vw,94.8px)!important;}
 .how-copy h2{font-size:63.75px!important;}
 .personality-intro h2{font-size:68.25px!important;}
 .stories-title-wrap h2{font-size:68.25px!important;}
 .reality-intro h2{font-size:68.25px!important;}
 .pricing-heading h2{font-size:clamp(40.5px,3.825vw,68.25px)!important;}
 .faq-heading h2{font-size:70.5px!important;}
 .final-content h2{font-size:66.75px!important;}
}
@media (min-width:851px) and (max-width:1440px){
 .hero .copy h1{font-size:5.4vw!important;}
 .faq-heading h2{font-size:58.5px!important;}
}

/* v69: desktop screen 4 and 5 fit exactly inside one viewport. */
@media(min-width:851px){
 .stories-section{height:100svh!important;min-height:100svh!important;max-height:100svh!important;margin-bottom:0!important;overflow:hidden!important}
 .stories-sticky,.stories-stage{height:100svh!important;min-height:100svh!important;overflow:hidden!important}
 .stories-canvas{top:50%!important;transform:translate(-50%,-50%) scale(var(--stories-fit,1))!important;transform-origin:center center!important}
 .reality-section,.reality-stage{height:100svh!important;min-height:100svh!important;max-height:100svh!important;overflow:hidden!important;margin:0!important}
 .reality-canvas{top:50%!important;transform:translate(-50%,-50%) scale(var(--reality-fit,1))!important;transform-origin:center center!important}
}

/* v72 — desktop screen 2: three supplied transparent horizontal strips. */
.how-v72-art{display:none}
@media(min-width:851px){
 .how-section{height:145svh!important;isolation:isolate}
 .how-sticky{height:100svh!important;overflow:hidden!important}
 .how-portal{display:none!important}
 .how-shell{position:absolute!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important;overflow:visible!important}
 .how-pattern{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;}
 .how-v72-art{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
 .how-v72-layer{position:absolute;display:block;width:max(2200px,124vw);max-width:none;height:auto;left:50%;transform:translate3d(calc(-50% + var(--v72-shift,0px)),var(--v72-entrance,0px),0);opacity:var(--v72-opacity,0);will-change:transform,opacity;pointer-events:none;}
 .how-v72-cards{top:43%;z-index:1}
 .how-v72-figures{top:43%;z-index:2}
 .how-v72-tokens{top:39%;z-index:3}
 .how-copy{position:absolute!important;left:50%!important;top:12%!important;width:min(1100px,82vw)!important;height:79%!important;transform:translateX(-50%)!important;display:grid!important;grid-template-columns:36% 64%;grid-template-rows:auto auto 1fr;align-content:start;align-items:start;column-gap:22px;text-align:left!important;z-index:6!important;pointer-events:none!important}
 .how-copy h2{grid-column:1;grid-row:1 / span 2;white-space:normal!important;line-height:1.12!important;margin:0!important;font-size:clamp(48px,4.2vw,72px)!important}
 .how-copy p{grid-column:2;max-width:630px!important;margin:0 0 19px!important;font-size:clamp(13px,1.04vw,17px)!important;line-height:1.45!important;text-align:left!important}
 .how-copy p:first-of-type{grid-row:1}
 .how-copy p:nth-of-type(2){grid-row:2}
 .how-copy .how-cta{position:absolute!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;margin:0!important;pointer-events:auto!important;z-index:10!important}
}
@media(min-width:851px) and (max-height:700px){
 .how-copy{top:10%!important;height:84%!important}
 .how-v72-cards,.how-v72-figures{top:39%}
 .how-v72-tokens{top:35%}
 .how-copy h2{font-size:clamp(42px,3.8vw,62px)!important}
 .how-copy .how-cta{height:75px!important;width:280px!important;font-size:23px!important}
}
@media(max-width:850px){.how-v72-art{display:none!important}}
@media(prefers-reduced-motion:reduce){.how-v72-layer{transition:none!important}}

/* v73: layer tokens behind the cards; faster, stronger final CTA vibration on desktop. */
@media (min-width:851px){
 .how-v72-tokens{z-index:0!important}
 .how-v72-cards{z-index:1!important}
 .how-v72-figures{z-index:2!important}
 .final-button-motion{animation:finalTwitchV73 2.15s ease-in-out infinite!important}
}
@keyframes finalTwitchV73{
 0%,60%,81%,100%{transform:translate3d(0,0,0) rotate(0deg)}
 63%{transform:translate3d(-8px,1px,0) rotate(-1.2deg)}
 66%{transform:translate3d(9px,-2px,0) rotate(1.3deg)}
 69%{transform:translate3d(-7px,1px,0) rotate(-1deg)}
 72%{transform:translate3d(7px,-1px,0) rotate(.95deg)}
 75%{transform:translate3d(-4px,0,0) rotate(-.55deg)}
 78%{transform:translate3d(3px,0,0) rotate(.35deg)}
}
@media(prefers-reduced-motion:reduce){.final-button-motion{animation:none!important}}

/* v74: scroll-linked horizontal panorama. Desktop only; keep background unchanged. */
@media(min-width:851px){
 .how-section{height:185svh!important}
 .how-v72-layer{transition:none!important}
}

/* v75: mobile second-screen horizontal scroll panorama. Desktop remains v74. */
@media (max-width:850px){
 .how-section{height:185svh!important;min-height:0!important;overflow:visible!important;isolation:isolate!important}
 .how-sticky{position:sticky!important;top:0!important;height:100svh!important;min-height:0!important;overflow:hidden!important}
 .how-shell{height:100%!important;inset:0!important;z-index:5!important;overflow:visible!important}
 .how-portal{display:none!important;visibility:hidden!important;opacity:0!important}
 .how-v72-art{display:block!important;position:absolute!important;inset:0!important;z-index:2!important;overflow:hidden!important;pointer-events:none!important}
 .how-v72-layer{display:block!important;position:absolute!important;left:50%!important;top:auto!important;width:max(1120px,260vw)!important;max-width:none!important;height:auto!important;opacity:var(--v72-opacity,1)!important;transform:translate3d(calc(-50% + var(--v72-shift,0px)),var(--v72-entrance,0px),0)!important;will-change:transform,opacity!important;pointer-events:none!important}
 .how-v72-tokens{top:61%!important;z-index:0!important}
 .how-v72-cards{top:61%!important;z-index:1!important}
 .how-v72-figures{top:61%!important;z-index:2!important}
 .how-copy{z-index:6!important;pointer-events:none!important}
 .how-copy .how-cta{pointer-events:auto!important}
}
@media(max-width:850px) and (max-height:700px){
 .how-copy{top:22px!important}
 .how-copy h2{margin-bottom:15px!important}
 .how-copy p{margin-bottom:12px!important;line-height:1.4!important}
 .how-copy .how-cta{margin-top:18px!important;height:75px!important}
 .how-v72-tokens,.how-v72-cards,.how-v72-figures{top:64%!important}
}
@media(max-width:850px) and (prefers-reduced-motion:reduce){
 .how-v72-layer{opacity:1!important;--v72-entrance:0px!important;--v72-shift:0px!important}
}

/* v78 — static mobile illustration, no sticky-scroll animation. Desktop unchanged. */
.how-mobile-static-v78{display:none}
@media(max-width:850px){
 .how-section{height:auto!important;min-height:0!important;overflow:hidden!important}
 .how-sticky{position:relative!important;top:auto!important;height:clamp(800px,calc(100vw * 1.80 + 220px),1050px)!important;min-height:0!important;overflow:hidden!important}
 .how-shell{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important}
 .how-v72-art,.how-v72-layer,.how-portal,.how-mobile-png{display:none!important;visibility:hidden!important}
 .how-copy{z-index:6!important;pointer-events:auto!important}
 .how-mobile-static-v78{display:block!important;position:absolute!important;left:50%!important;top:clamp(445px,calc(100vw * .95 + 100px),590px)!important;width:min(120vw,580px)!important;max-width:none!important;height:auto!important;transform:translateX(-50%)!important;opacity:1!important;filter:none!important;z-index:2!important;pointer-events:none!important}
}
@media(max-width:370px){.how-mobile-static-v78{top:445px!important;width:124vw!important}}

/* v80: prevent the second section's illustration from painting over the hero.
   Keep the desktop scroll panorama unchanged. */
@media (max-width:850px){
  .hero{position:relative!important;isolation:isolate!important;overflow:hidden!important;}
  .how-section{position:relative!important;z-index:1!important;overflow:hidden!important;overflow:clip!important;isolation:isolate!important;contain:paint!important;}
  .how-sticky{position:relative!important;overflow:hidden!important;overflow:clip!important;isolation:isolate!important;}
  .how-shell{overflow:hidden!important;overflow:clip!important;}
  .how-mobile-static-v78{clip-path:inset(0 0 0 0);}
}

/* v81: mobile artwork in normal document flow, visible and never overlaps hero. */
@media(max-width:850px){
 .how-section{height:auto!important;min-height:0!important;overflow:hidden!important;contain:none!important;isolation:isolate!important;}
 .how-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;contain:none!important;}
 .how-shell{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;transform:none!important;padding:0 0 18px!important;}
 .how-copy{position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:calc(100% - 52px)!important;max-width:380px!important;margin:0 auto!important;padding-top:61px!important;opacity:1!important;visibility:visible!important;}
 .how-mobile-static-v78{display:block!important;position:relative!important;top:auto!important;left:50%!important;width:min(120vw,580px)!important;max-width:none!important;height:auto!important;margin:20px 0 0!important;transform:translateX(-50%)!important;opacity:1!important;visibility:visible!important;clip-path:none!important;filter:none!important;z-index:2!important;}
 .how-portal,.how-v72-art,.how-mobile-png{display:none!important;}
}

/* v83: timeline removed on all breakpoints, retain the CTA */
.reality-bottom .reality-day,.reality-bottom .reality-curve,.reality-bottom .reality-dot,.reality-bottom::before {display:none!important;content:none!important}
@media (max-width:850px) {.reality-bottom {height:0!important;min-height:0!important;margin:0!important;padding:0!important}}