/* Compact RoderStudio story: the same 3D device geometry as the portfolio sequence. */
.wc-root{position:relative;min-height:250svh;background:#f8fbff;color:#172333;font-family:'Plus Jakarta Sans',sans-serif}
.wc-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#fff 5%,#f5f8fd 100%);isolation:isolate}
.wc-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(42,78,140,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(42,78,140,.05) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.wc-kicker{display:block;color:#3b82f6;text-transform:uppercase;letter-spacing:.22em;font-size:.73rem;font-weight:800}
.wc-intro{position:absolute;z-index:3;top:46%;left:50%;width:min(92%,1200px);text-align:center;transform:translate(-50%,-50%)}
.wc-intro h2{margin:1rem 0 0;font-size:clamp(3rem,7vw,7.5rem);line-height:1;letter-spacing:-.075em;color:#172333;font-weight:900}.wc-intro h2 span{color:#4389ec}
.wc-content{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:center;gap:min(3vw,45px);width:min(92%,1380px);margin:auto;opacity:0;transform:translateY(7vh)}
.wc-model{position:relative;width:100%;height:min(72vh,700px)}.wc-model::after{content:"";position:absolute;left:10%;right:10%;bottom:8%;height:15%;background:radial-gradient(ellipse,rgba(27,49,82,.17),transparent 70%);filter:blur(20px);z-index:-1}.wc-model-canvas{display:block;width:100%;height:100%}.wc-model-fallback{display:none;position:absolute;top:45%;left:15%;font-size:clamp(2rem,4vw,4rem);font-weight:900}.wc-model-fallback span,.wc-phone-content span{color:#4a94ef}.wc-no-webgl .wc-model-canvas{display:none}.wc-no-webgl .wc-model-fallback{display:block}
.wc-reasons{display:grid;gap:1rem}.wc-reason{display:flex;align-items:flex-start;gap:1rem;padding:1.35rem 1.5rem;border:1px solid #dbe6f3;border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 15px 45px rgba(35,65,106,.09);opacity:0;transform:translateY(35px)}.wc-reason>span{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:12px;background:#eaf3ff;color:#2976d7;font-weight:900;font-size:.8rem}.wc-reason h3{font-size:clamp(1rem,1.35vw,1.25rem);margin:0 0 .4rem;letter-spacing:-.035em}.wc-reason p{margin:0;color:#65768e;font-size:.88rem;line-height:1.55}
.wc-outro{position:absolute;z-index:4;left:50%;bottom:clamp(1.5rem,3vh,3rem);width:max-content;max-width:90%;text-align:center;transform:translateX(-50%);opacity:0}.wc-outro p{margin:0 0 .8rem;color:#516780;font-weight:700}.wc-outro a{display:inline-flex;align-items:center;gap:1.6rem;padding:.9rem 1.25rem;border-radius:13px;background:#172b4b;color:#fff;text-decoration:none;font-weight:800;box-shadow:0 15px 35px rgba(22,54,110,.22)}.wc-outro a:hover{background:#347fde}
.wc-phone{display:none}
@media(max-width:900px){.wc-content{gap:0;grid-template-columns:1fr 1fr}.wc-model{height:55vh}.wc-reason{padding:1rem}.wc-reason p{font-size:.8rem}}
@media(max-width:700px){.wc-root{min-height:230svh}.wc-stage{min-height:560px}.wc-intro h2{font-size:clamp(2.8rem,11vw,4.2rem)}.wc-content{display:flex;flex-direction:column;justify-content:center;gap:1rem;top:1rem;bottom:5rem}.wc-model{height:31vh;min-height:180px}.wc-model-canvas,.wc-model-fallback{display:none!important}.wc-phone{display:block;position:relative;width:min(44vw,195px);height:min(30vh,285px);margin:auto;border:6px solid #0b1221;border-radius:31px;background:radial-gradient(circle at 75% 60%,#214c99,#071124 65%);box-shadow:0 18px 35px rgba(20,50,90,.28);overflow:hidden}.wc-phone-island{position:absolute;top:5px;left:50%;width:70px;height:16px;transform:translateX(-50%);border-radius:12px;background:#02050b}.wc-phone-content{padding:32px 13px 12px;color:#fff}.wc-phone-content strong{font-size:.8rem}.wc-phone-content small{display:block;margin:2rem 0 .7rem;color:#8cbbff;font-size:.42rem;letter-spacing:.1em;text-transform:uppercase}.wc-phone-content h3{font-size:1rem;line-height:1.1;letter-spacing:-.05em}.wc-phone-content p{font-size:.38rem;color:#bacce7}.wc-reasons{gap:.55rem;width:100%}.wc-reason{padding:.65rem .75rem;border-radius:13px;gap:.6rem}.wc-reason>span{width:27px;height:27px;font-size:.6rem}.wc-reason h3{font-size:.83rem;margin:0 0 .12rem}.wc-reason p{font-size:.62rem;line-height:1.35}.wc-outro{bottom:1rem}.wc-outro p{font-size:.68rem}.wc-outro a{font-size:.73rem;padding:.65rem .8rem}}
@media(prefers-reduced-motion:reduce){.wc-root{min-height:auto}.wc-stage{position:relative;min-height:0;height:auto;padding:5rem 1rem}.wc-intro,.wc-content,.wc-outro{position:relative;left:auto;top:auto;bottom:auto;transform:none!important;opacity:1!important;width:min(100%,1100px);margin:0 auto 2rem}.wc-content{display:grid}.wc-reason{opacity:1!important;transform:none!important}.wc-model{height:400px}}

/* The blue presentation panel enters after the intro and fills the stage. */
.wc-root{min-height:315svh}
.wc-blue-card{position:absolute;z-index:2;left:50%;top:50%;width:85vw;height:85svh;min-height:0;border:1px solid rgba(255,255,255,.12);border-radius:38px;background:radial-gradient(ellipse at 32% 35%,rgba(82,155,255,.32),transparent 48%),linear-gradient(145deg,#1d4b9e 0%,#102759 50%,#070f22 100%);box-shadow:0 38px 100px rgba(8,28,71,.43),inset 0 1px 2px rgba(255,255,255,.25);transform:translate(-50%,calc(-50% + 120svh));will-change:transform}
.wc-blue-card::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse at center,#000,transparent 78%)}
.wc-content{z-index:4;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);width:min(96%,1480px)}
.wc-model{height:min(79vh,750px)}
.wc-reason{border-color:rgba(177,210,255,.2);background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:0 18px 45px rgba(0,0,0,.2);color:#fff;backdrop-filter:blur(16px)}
.wc-reason>span{background:rgba(132,190,255,.19);color:#a9d1ff}
.wc-reason p{color:#b9cceb}
.wc-outro p{color:#d8e8ff}
.wc-outro a{background:#fff;color:#102b59;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.wc-outro a:hover{background:#c9e3ff;color:#09234d}
.wc-model::after{background:radial-gradient(ellipse,rgba(0,0,0,.38),transparent 70%)}
@media(max-width:900px){.wc-content{grid-template-columns:1fr 1fr}.wc-model{height:62vh}}
@media(max-width:700px){.wc-root{min-height:300svh}.wc-blue-card{width:92vw;height:88svh;border-radius:26px}.wc-content{width:94%;top:.5rem;bottom:4.8rem}.wc-model{height:33vh}.wc-reason{padding:.75rem}.wc-reason p{color:#c4d5ee}.wc-outro{bottom:.8rem}}
@media(prefers-reduced-motion:reduce){.wc-blue-card{position:absolute;inset:0;width:100%!important;height:100%!important;transform:none!important;border-radius:0!important}.wc-intro{color:#fff}.wc-intro h2{color:#fff}.wc-content,.wc-outro{z-index:4}}
/* GSAP owns the centered transform; avoid applying the centering twice. */
.wc-blue-card{transform:none}
@media(prefers-reduced-motion:reduce){.wc-blue-card{left:0;top:0;width:100%!important;height:100%!important}}

/* Scroll beats: laptop, then three reasons, then the invitation and closing lid. */
.wc-root{min-height:330svh}
@media(min-width:901px){.wc-reasons{margin-left:-4vw}}
@media(max-width:700px){.wc-root{min-height:320svh}.wc-reasons{margin-left:0}}

/* A slimmer, dimensional phone for the mobile RoderStudio story. */
@media(max-width:700px){
  .wc-model{height:36dvh;min-height:265px}
  .wc-phone{width:min(38vw,162px);height:min(36dvh,315px);max-height:315px;border:4px solid #18243a;border-radius:30px;background:linear-gradient(148deg,#29394e,#111c2f 30%,#080e1b);box-shadow:0 0 0 1px #8a9cb2,0 0 0 3px #313d50,0 20px 35px rgba(0,5,18,.3),inset 0 1px 1px rgba(255,255,255,.34);overflow:visible}
  .wc-phone::before{content:"";position:absolute;inset:3px;border-radius:24px;background:radial-gradient(ellipse at 75% 65%,#1e56ad 0%,#0b1f45 50%,#030811 100%);z-index:0}
  .wc-phone::after{content:"";position:absolute;left:50%;bottom:8px;width:40%;height:3px;border-radius:10px;transform:translateX(-50%);background:rgba(235,246,255,.76);box-shadow:0 0 2px rgba(255,255,255,.35)}
  .wc-phone-island{z-index:2;top:8px;width:54px;height:14px;border-radius:12px;background:#01040a;box-shadow:0 1px 1px rgba(255,255,255,.15)}
  .wc-phone-content{position:relative;z-index:1;padding:34px 11px 12px}
  .wc-phone-content strong{font-size:.69rem;letter-spacing:-.04em}
  .wc-phone-content small{margin:2.1rem 0 .6rem;font-size:.39rem}
  .wc-phone-content h3{font-size:.87rem}
  .wc-phone-content p{font-size:.37rem;line-height:1.45}
}

/* Pull the reasons toward the MacBook; their reveal stays controlled by scroll. */
@media(min-width:901px){.wc-reasons{margin-left:-10vw}}
.wc-reason{will-change:transform;transition:border-color .4s,background .4s,box-shadow .4s}
.wc-reason:hover{border-color:rgba(184,218,255,.55);background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.1));box-shadow:0 26px 52px rgba(0,0,0,.31),inset 0 1px rgba(255,255,255,.22)}
@media(prefers-reduced-motion:reduce){.wc-reason:hover{transform:none!important}}