/* ===== Home — Portal hero + value narrative ===== */

/* intro gate (only with JS) */
.gate{ display:none; }
.js .gate{ display:flex; position:fixed; inset:0; z-index:200; background:var(--bg); flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.gate.hide{ display:none; }
.gate .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px; }
.js .gate h1{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,5vw,64px); line-height:1.0; letter-spacing:-0.02em; white-space:nowrap; }
.gate h1 em{ font-style:italic; color:var(--accent-2); }
.gate .tl{ font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); margin-top:22px; }
.enterBtn{ margin-top:48px; position:relative; width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:none; }
.enterBtn .rim{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-2); }
.enterBtn .orb{ position:absolute; top:50%; left:50%; width:150px; height:150px; transform:translate(-50%,-50%); }
.enterBtn .orb .dot{ position:absolute; top:-3px; left:50%; width:7px; height:7px; border-radius:50%; background:var(--accent); transform:translateX(-50%); }
.enterBtn .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink); transition:color .3s; }
.enterBtn:hover .lbl{ color:var(--accent); }
.enterBtn:hover .rim{ border-color:var(--accent-dim); }

/* home nav (slightly different from interior) */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:space-between; align-items:center; padding:20px clamp(22px,4vw,46px); }
.nav .mk{ font-family:var(--mono); font-size:13px; letter-spacing:0.2em; color:var(--ink); }
.nav .set{ display:flex; gap:22px; align-items:center; }
.nav .set a{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); transition:color .3s; }
.nav .set a:hover{ color:var(--accent); }
@media(max-width:680px){ .nav .set a{ display:none; } }

/* stage hero */
.stage{ position:relative; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.lock{ position:relative; z-index:30; text-align:center; padding:clamp(96px,15vh,150px) 20px 0; pointer-events:none; }
.lock .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.lock h1{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5.4vw,74px); line-height:0.94; letter-spacing:-0.02em; }
.lock h1 em{ font-style:italic; color:var(--accent-2); }
.lock .tl{ font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); margin-top:16px; }

.portals{ position:relative; z-index:10; flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(20px,4vw,80px); padding:clamp(30px,6vh,70px) clamp(24px,5vw,90px) clamp(50px,8vh,90px); }
.portal{ position:relative; display:flex; flex-direction:column; align-items:center; text-decoration:none; will-change:transform; }
.disc{ position:relative; width:min(34vw,360px); aspect-ratio:1; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color .4s var(--ease), transform .5s var(--ease); }
.portal:hover .disc{ border-color:var(--accent); transform:scale(1.04); }
.disc .tex{ position:absolute; inset:0; }
.portal.sys .tex{ background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 55%, transparent 78%); mask-image:radial-gradient(circle at 50% 50%, #000 55%, transparent 78%); }
.portal.film .tex{ background:repeating-linear-gradient(118deg,rgba(194,96,63,0.07) 0 2px,transparent 2px 12px),radial-gradient(circle at 50% 42%, rgba(194,96,63,0.2), transparent 62%); }
.disc .ring2{ position:absolute; width:74%; height:74%; border-radius:50%; border:1px solid var(--line); }
.disc .num{ position:relative; z-index:2; font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:0.1em; }
.disc .core-l{ position:absolute; z-index:2; bottom:30%; left:0; right:0; text-align:center; }
.portal.sys .disc .big{ font-weight:600; font-size:clamp(20px,2.2vw,30px); }
.portal.film .disc .big{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.5vw,34px); color:var(--accent-2); }
.pmeta{ margin-top:26px; text-align:center; }
.pmeta .lane{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.pmeta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,28px); line-height:1.1; }
.pmeta .nm{ font-family:var(--mono); font-size:12px; color:var(--ink-2); margin-top:8px; }
.pmeta .enter{ margin-top:16px; display:inline-flex; gap:9px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); }
.pmeta .enter .arr{ color:var(--accent); transition:transform .35s var(--ease); }
.portal:hover .pmeta .enter .arr{ transform:translateX(5px); }

.portals::before{ content:""; position:absolute; top:18%; bottom:18%; left:50%; width:1px; background:linear-gradient(transparent, var(--line) 20%, var(--line) 80%, transparent); z-index:1; }

.deco{ position:absolute; z-index:0; pointer-events:none; border:1px solid var(--line-2); border-radius:50%; will-change:transform; }
.deco.d1{ width:160px;height:160px; top:20%; left:6%; }
.deco.d2{ width:80px;height:80px; bottom:14%; right:8%; border-color:var(--accent-dim); }

@media(max-width:760px){ .portals{ grid-template-columns:1fr; gap:50px; } .portals::before{ display:none; } .disc{ width:min(64vw,320px); } }

/* contact / closing */
.contact{ border-top:1px solid var(--line); padding:clamp(56px,9vh,110px) clamp(20px,4vw,44px) 40px; text-align:center; max-width:1200px; margin:0 auto; }
.contact .big{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,66px); line-height:1.02; letter-spacing:-0.015em; }
.contact .big em{ font-style:italic; color:var(--accent-2); }
.ctas{ display:flex; gap:13px; flex-wrap:wrap; margin-top:30px; justify-content:center; }
.cta{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; padding:14px 22px; border:1px solid var(--line-2); border-radius:2px; color:var(--ink); transition:all .3s var(--ease); white-space:nowrap; }
.cta:hover{ border-color:var(--accent); color:var(--accent); }
.cta--p{ background:var(--accent); color:#0b0a09; border-color:var(--accent); }
.cta--p:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#0b0a09; }
.end{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:clamp(46px,8vh,84px); padding-top:22px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--ink-3); text-align:left; }

/* value narrative */
.wrapw{ max-width:1180px; margin:0 auto; padding:0 clamp(22px,4vw,56px); }
.vk{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:30px; }
.vk .ln{ width:36px; height:1px; background:var(--accent); }

.thesis{ border-top:1px solid var(--line); padding:clamp(80px,14vh,160px) 0; position:relative; overflow:hidden; }
.thesis h2{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,5.2vw,66px); line-height:1.04; letter-spacing:-0.02em; max-width:18ch; }
.thesis h2 em{ font-style:italic; color:var(--accent-2); }
.thesis p{ margin-top:30px; max-width:56ch; font-size:clamp(17px,1.7vw,20px); line-height:1.62; color:var(--ink-2); }
.thesis .deco.d3{ width:120px; height:120px; top:34%; right:7%; }

.engine{ border-top:1px solid var(--line); padding:clamp(70px,11vh,130px) 0; }
.engine .elead{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,64px); }
.engine h2{ font-family:var(--serif); font-weight:300; font-size:clamp(28px,4.4vw,56px); line-height:1.0; letter-spacing:-0.02em; }
.engine h2 em{ font-style:italic; color:var(--accent-2); }
.engine .enote{ font-family:var(--serif); font-size:clamp(16px,1.6vw,20px); color:var(--ink-2); max-width:36ch; line-height:1.4; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.step{ padding:clamp(28px,3vw,40px) clamp(20px,2vw,34px) 8px; border-right:1px solid var(--line); }
.step:last-child{ border-right:none; }
.step .sn{ font-family:var(--mono); font-size:13px; color:var(--accent); margin-bottom:20px; }
.step h3{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2vw,26px); line-height:1.12; margin-bottom:14px; }
.step p{ color:var(--ink-2); font-size:15px; line-height:1.6; }
@media(max-width:760px){ .steps{ grid-template-columns:1fr; } .step{ border-right:none; border-bottom:1px solid var(--line); } }

.offer{ border-top:1px solid var(--line); padding:clamp(70px,11vh,130px) 0; }
.ogrid{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.oitem{ display:block; text-decoration:none; padding:clamp(30px,3vw,44px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .35s var(--ease); }
.oitem:nth-child(2n){ border-right:none; }
.oitem:nth-child(n+3){ border-bottom:none; }
.oitem:hover{ background:var(--bg-2); }
.oitem .ol{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.oitem h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.08; margin-bottom:12px; }
.oitem p{ color:var(--ink-2); font-size:15px; line-height:1.55; margin-bottom:20px; max-width:42ch; }
.omore{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
@media(max-width:680px){ .ogrid{ grid-template-columns:1fr; } .oitem,.oitem:nth-child(2n){ border-right:none; } .oitem{ border-bottom:1px solid var(--line); } .oitem:last-child{ border-bottom:none; } }

.proof2{ border-top:1px solid var(--line); padding:clamp(70px,11vh,130px) 0; position:relative; overflow:hidden; }
.pcols{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.pcol{ padding:clamp(28px,3vw,44px) clamp(20px,2.5vw,40px); }
.pcol:first-child{ border-right:1px solid var(--line); }
.pcol .ph{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; background:none; border:none; position:static; }
.pcol .ph::after{ display:none; }
.pli{ display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--line); align-items:baseline; }
.pli:first-of-type{ border-top:none; }
.pli .py{ font-family:var(--mono); font-size:12px; color:var(--ink-3); min-width:62px; }
.pli .pt{ font-size:16px; color:var(--ink); line-height:1.4; }
.pli .pt small{ display:block; color:var(--ink-3); font-size:12.5px; font-family:var(--mono); letter-spacing:0.02em; margin-top:4px; }
.plinks{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:30px; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--ink-3); }
.plinks span{ text-transform:uppercase; letter-spacing:0.16em; }
.plinks a{ color:var(--ink-2); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .3s,border-color .3s; }
.plinks a:hover{ color:var(--accent); border-color:var(--accent); }
.proof2 .deco.d4{ width:90px;height:90px; bottom:14%; left:6%; }
@media(max-width:680px){ .pcols{ grid-template-columns:1fr; } .pcol:first-child{ border-right:none; border-bottom:1px solid var(--line); } }

.closing{ border-top:1px solid var(--line); padding:clamp(80px,13vh,150px) 0 40px; text-align:center; }
.closing .ck{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:24px; }
.closing h2{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,5.4vw,72px); line-height:1.0; letter-spacing:-0.02em; }
.closing h2 em{ font-style:italic; color:var(--accent-2); }
.closing p{ margin:26px auto 0; max-width:52ch; font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--ink-2); }
.closing .ctas{ justify-content:center; margin-top:38px; }