:root{--bg:#eceef0;--bg2:#dfe2e5;--ink:#0d2b2a;--mute:#4b6866;--teal:#0f9d8a;--coral:#0f9d8a;--glass:rgba(255,255,255,.62);--card:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#0b1a1c;--bg2:#10292b;--ink:#e8f6f4;--mute:#9dbab7;--glass:rgba(16,41,43,.7);--card:#10292b}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
*{box-sizing:border-box;margin:0}
body{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
#bar{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--coral);transform-origin:left;transform:scaleX(0);z-index:60}
header{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:3vw;right:3vw;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 24px;border-radius:99px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
header>a{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:9px 18px;border-radius:99px;margin-left:4px}
nav a.on,nav a:hover{background:var(--ink);color:var(--bg)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.w{max-width:1200px;margin:0 auto;padding:0 5vw}
.sec{padding:12vh 0}
h1,h2{font-weight:800;letter-spacing:-.035em;line-height:.95}
h1{font-size:clamp(50px,7.6vw,110px)}h2{font-size:clamp(34px,4.6vw,64px);margin-bottom:20px}
h1 em,h2 em{font-style:normal;color:var(--teal)}h1 em.c{color:var(--coral)}
p{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--mute);font-weight:300;max-width:46ch}
.btn{display:inline-block;margin:28px 12px 0 0;padding:15px 30px;border-radius:99px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:500}
.btn.t{background:var(--teal);color:#fff}
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4vw;padding-top:110px;padding-bottom:6vh}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:-1}
.hv{position:relative;display:flex;justify-content:center}
.ph{width:250px;aspect-ratio:250/540;border-radius:40px;background:#0b0f10;padding:9px;box-shadow:0 40px 80px rgba(13,43,42,.28),0 0 0 2px #2b3437 inset}
.sc{position:relative;height:100%;border-radius:32px;overflow:hidden;background:#eef6f8}
.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.sc img.on{opacity:1}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:99px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:500;font-size:14px;box-shadow:0 12px 30px rgba(13,43,42,.15)}
.chip svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--teal);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mq{overflow:hidden;white-space:nowrap;padding:3vh 0;font-size:clamp(44px,8vw,110px);font-weight:800;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--teal)}
.mq span{display:inline-block;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.story{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.stick{position:sticky;top:max(96px,calc(50vh - 270px));height:540px;display:flex;justify-content:center;align-self:start}
.st{min-height:85vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .5s}
.st.on{opacity:1}
.st b{font-size:clamp(60px,8vw,110px);font-weight:800;color:var(--coral);line-height:1;letter-spacing:-.04em;margin-bottom:8px}
.cta{text-align:center;padding:14vh 5vw;background:var(--bg2);border-radius:48px;margin:0 3vw 6vh}
.cta p{margin:0 auto}
.pg{padding-top:150px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6vh}
.card{background:var(--card);border-radius:32px;overflow:hidden;padding:30px 30px 0;min-height:420px;display:flex;flex-direction:column}
.card.big{grid-column:span 2}
.card b{color:var(--coral);font-size:15px;font-weight:500;letter-spacing:.06em}
.card h3{font-size:28px;letter-spacing:-.02em;margin:8px 0 12px;line-height:1}
.card p{font-size:16px}
.card img{margin:auto auto 0;padding-top:24px;width:200px;max-width:70%;height:240px;object-fit:cover;object-position:top;border-radius:22px 22px 0 0}
.doc{max-width:760px}.doc h2{font-size:32px;margin:48px 0 12px}
.note{padding:18px 22px;border-radius:20px;background:var(--bg2);color:var(--ink);font-size:15px;margin-top:24px}
details{background:var(--card);border-radius:22px;padding:22px 26px;margin-bottom:12px;max-width:820px}
summary{font-weight:500;font-size:19px;cursor:pointer}
details p{margin-top:12px}
footer{padding:40px 5vw;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--mute);font-size:14px}
footer a{color:var(--mute);margin-left:18px}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (max-width:820px){
.hero,.story{grid-template-columns:1fr}.hero{padding-top:120px}
.stick{top:80px;height:300px;z-index:2;background:var(--bg);padding-bottom:12px}.stick .ph{width:140px}
.st{min-height:70vh}.bento{grid-template-columns:1fr}.card.big{grid-column:auto}
header{padding-left:18px}header>a{font-size:19px}nav a{padding:8px 11px;font-size:13px;margin-left:0}.chip{display:none}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.mq span{animation:none}html{scroll-behavior:auto}}

.rv{transition:opacity 1.3s,transform 1.3s cubic-bezier(.16,1,.3,1)}
.hs{height:100vh;height:100svh;display:flex;align-items:center;padding:0 7vw;position:relative}
.hs .txt{max-width:470px;position:relative;z-index:5}.hs.r .txt{margin-left:auto}
.hs.c{justify-content:center;text-align:center}.hs.c .txt{max-width:640px}.hs.c p{margin:0 auto}
.hs h1{font-size:clamp(44px,6.4vw,92px);margin-bottom:22px}.hs h2{margin-bottom:22px}
.tag{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block;transform:translateY(110%);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.in .ln>span{transform:none}.in .ln:nth-child(2)>span{transition-delay:.18s}.in .ln:nth-child(3)>span{transition-delay:.36s}
.hs .tag,.hs p,.hs .btn{opacity:0;transition:opacity 1.6s .5s}
.in .tag,.in p,.in .btn{opacity:1}
.ghost{position:absolute;left:5vw;top:50%;margin-top:-.4em;font-size:clamp(160px,28vw,420px);font-weight:800;letter-spacing:-.06em;line-height:.8;color:var(--ink);opacity:.045;pointer-events:none}
.hs.r .ghost{left:auto;right:5vw}
#glow{position:fixed;inset:0;z-index:-1;background:radial-gradient(34vw 34vw at 50% 50%,rgba(15,157,138,.14),transparent 70%)}
#stage{position:fixed;inset:0;z-index:3;perspective:1400px;pointer-events:none;display:flex;align-items:center;justify-content:center}
#phone{position:relative;width:250px;height:540px;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;border-radius:40px;background:#0b0f10;overflow:hidden}
.front{transform:translateZ(13px);padding:9px;box-shadow:inset 0 0 0 2px #2b3437}
#sp img{transition:none}
.back{transform:translateZ(-13px) rotateY(180deg);background:linear-gradient(135deg,#14524b,#0d2b2a);display:grid;place-items:center;color:#e8f6f4;font-weight:800;font-size:28px;letter-spacing:-.02em}
.edge{position:absolute;top:20px;bottom:20px;width:26px;left:112px;background:linear-gradient(#3a4548,#1d2527)}
.e1{transform:rotateY(90deg) translateZ(125px)}.e2{transform:rotateY(-90deg) translateZ(125px)}
.shadow{position:absolute;left:50%;bottom:-70px;width:240px;height:34px;margin-left:-120px;background:radial-gradient(closest-side,rgba(13,43,42,.28),transparent);transform:translateZ(-40px)}
@media (max-width:820px){.hs{align-items:flex-end;padding:0 5vw 6vh}.hs .txt{max-width:none;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:22px;border-radius:24px}.hs.r .txt{margin-left:0}.hs.c .txt{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}.hs h1{font-size:clamp(36px,10.5vw,50px)}.hs h2{font-size:clamp(30px,8.5vw,42px)}#phone{width:205px;height:444px}.edge{left:89.5px}.e1{transform:rotateY(90deg) translateZ(102.5px)}.e2{transform:rotateY(-90deg) translateZ(102.5px)}.ghost{display:none}}
@media (prefers-reduced-motion:reduce){.ln>span,.hs .tag,.hs p,.hs .btn{transition:none}}

header>a{display:flex;align-items:center;gap:10px}header>a img{width:30px;height:30px}
.back div{text-align:center}.back img{display:block;margin:0 auto 12px;width:84px}

body{padding-right:64px}
header{top:calc(env(safe-area-inset-top,0px) + 14px);left:auto;right:10px;bottom:auto;flex-direction:column;gap:14px;padding:14px 7px;width:50px}
header>a{font-size:0;perspective:240px;display:block}header>a img{width:32px;height:32px;display:block}
nav{display:flex;flex-direction:column;gap:6px}
nav a{writing-mode:vertical-rl;padding:14px 9px;margin:0;font-size:14px;letter-spacing:.06em}
.hl{width:64px;height:64px;display:block;margin-bottom:18px}
.hs .hl{opacity:0;transition:opacity 1.6s .3s}.in .hl{opacity:1}
.fb{display:flex;align-items:center;gap:8px}.fb img{width:22px;height:22px}
.card img{backface-visibility:hidden;will-change:transform}
@media (max-width:820px){body{padding-right:56px}header{right:6px;width:44px;padding:12px 5px}nav a{padding:12px 7px;font-size:13px}header>a img{width:28px;height:28px}.hs .hl{display:none}}

:root{--bg:#0c1214;--bg2:#141d20;--ink:#e8f0ef;--mute:#9db0ae;--glass:rgba(20,29,32,.68);--card:#141d20;color-scheme:dark}
.btn.t{color:#04211d}
.ph{box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 2px #2b3437 inset}
.shadow{background:radial-gradient(closest-side,rgba(15,157,138,.3),transparent)}
header>a img{background:#fff;border-radius:11px;padding:5px;width:36px;height:36px}
.hl{background:#fff;border-radius:22px;padding:10px;width:72px;height:72px}
.hs .txt{max-width:540px}#s0 .txt{max-width:min(700px,52vw)}
.hs h1{font-size:clamp(40px,5.4vw,80px)}.hs h2{font-size:clamp(32px,3.9vw,56px)}
.card.wide{grid-column:span 3}
.perm{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:5vh}
.pm{background:var(--card);border-radius:28px;padding:28px}.pm h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}.pm p{font-size:16px}
@media (max-width:820px){header>a img{width:32px;height:32px}.card.wide{grid-column:auto}.perm{grid-template-columns:1fr}.hs h1{font-size:clamp(34px,9.6vw,46px)}.hs h2{font-size:clamp(28px,8vw,38px)}}

#phone{width:250px;height:516px}
.face{outline:1px solid transparent}
.front,.back{backface-visibility:hidden}
.front{background:#050505;padding:8px;border:3px solid #a8a298;box-shadow:inset 0 0 0 1px #000;transform:translateZ(14px)}
.back{transform:translateZ(-14px) rotateY(180deg);display:block;background:linear-gradient(135deg,#cbc5bb,#8d877d 55%,#b9b3a9);border:3px solid #a8a298}
.sc{border-radius:29px;background:#000}
#sp img{inset:auto;left:0;top:-5.2%;width:100%;height:105.2%;object-fit:cover;object-position:center bottom}
.sl{position:absolute;background:none;border:3px solid;pointer-events:none}
.gl{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.17) 46%,rgba(255,255,255,.04) 56%,transparent 70%) var(--gx,50%) 0/300% 100% no-repeat,radial-gradient(120% 55% at 0% 0%,rgba(255,255,255,.09),transparent 60%)}
.di{position:absolute;z-index:3;top:10px;left:50%;width:74px;height:22px;margin-left:-37px;border-radius:12px;background:#000}
.di::after{content:"";position:absolute;right:8px;top:6px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a63,#05070d 65%)}
.hi{position:absolute;z-index:3;bottom:6px;left:50%;width:84px;height:4px;margin-left:-42px;border-radius:3px;background:#fff;mix-blend-mode:difference}
.bt{position:absolute;width:5px;border-radius:2px;background:linear-gradient(90deg,#6b675f,#cfc9bf,#6b675f);transform:translateZ(0)}
.cam{position:absolute;top:12px;left:12px;width:88px;height:88px;border-radius:26px;background:linear-gradient(145deg,#d8d2c8,#8f897f);box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.4)}
.lens{position:absolute;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a4a78,#0a0d16 40%,#000 70%);box-shadow:0 0 0 3px #7c776e,0 0 0 4.5px #cfc9bf,inset 0 0 0 2px #1a1a1a}
.flash{position:absolute;top:9px;right:9px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,#fff6d8,#d8c98a 60%,#7c776e)}
.back .bl{position:absolute;left:0;right:0;top:56%;transform:translateY(-50%);text-align:center;color:rgba(255,255,255,.92);font-weight:800;font-size:22px;letter-spacing:-.02em}
.back .bl img{display:block;margin:0 auto 10px;width:64px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
@media (max-width:820px){#phone{width:205px;height:423px}.back .bl img{width:52px}.cam{transform:scale(.85);transform-origin:0 0}}

.doc h1{font-size:clamp(34px,4.6vw,60px);margin-bottom:28px}
.doc h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;line-height:1.1;margin:52px 0 14px}
.doc h3{font-size:19px;font-weight:500;margin:30px 0 8px}
.doc p{max-width:none;margin:0 0 14px}
.doc ul{margin:0 0 16px 22px;color:var(--mute);font-weight:300;line-height:1.75;font-size:clamp(16px,1.35vw,19px)}

/* ===== v2: responsive + 3D + scroll effects ===== */
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
.rv,.rv.in{opacity:var(--p,1);transform:perspective(900px) translate3d(0,calc((1 - var(--p,1))*46px),0) rotateX(calc((1 - var(--p,1))*14deg));transform-origin:50% 100%;transition:none}
.orb{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;width:52vw;height:52vw;max-width:620px;max-height:620px;background:radial-gradient(circle,rgba(15,157,138,.26),transparent 68%)}
.orb.a{left:-14vw;top:8vh}.orb.b{right:-10vw;top:52vh;background:radial-gradient(circle,rgba(80,140,255,.16),transparent 68%)}
.card{position:relative;background:linear-gradient(160deg,var(--card),#0f1719);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.card::before{content:"";position:absolute;left:50%;bottom:-30%;width:90%;height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(15,157,138,.32),transparent);pointer-events:none}
.dev{position:relative;margin:auto auto 0;width:100%;height:300px;perspective:900px;animation:fl 6s ease-in-out infinite alternate}
@keyframes fl{to{transform:translateY(-10px)}}
.dev-in{position:absolute;left:50%;bottom:0;width:172px;height:280px;margin-left:-86px;transform-style:preserve-3d;will-change:transform}
.dev-in img{position:absolute;left:0;bottom:-8px;width:172px;height:280px;max-width:none;padding:0;margin:0;border:5px solid #a8a298;border-bottom:0;border-radius:28px 28px 0 0;object-fit:cover;object-position:top;background:#000;box-shadow:0 20px 40px rgba(0,0,0,.5);backface-visibility:hidden}
.dev-in img.b{transform:translate3d(-70px,-14px,-60px) rotateY(18deg);filter:brightness(.6)}
.dev-in img.c{transform:translate3d(70px,-26px,-110px) rotateY(-18deg);filter:brightness(.45)}
@media (min-width:821px) and (max-width:1100px){.hs .txt{max-width:44vw}#s0 .txt{max-width:46vw}.hs h1{font-size:clamp(38px,5vw,56px)}.bento{grid-template-columns:repeat(2,1fr)}.card.big,.card.wide{grid-column:span 2}}
@media (max-width:820px){
body{padding-right:0}
header{top:calc(env(safe-area-inset-top,0px) + 8px);left:8px;right:8px;width:auto;flex-direction:row;align-items:center;gap:6px;padding:6px 8px 6px 10px}
header>a{font-size:17px;display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);text-decoration:none}
nav{flex-direction:row;gap:2px}
nav a{writing-mode:horizontal-tb;padding:9px 11px;font-size:13px;letter-spacing:0}
.pg{padding-top:96px}.card{min-height:0;padding:24px 22px 0}.dev{height:270px}
.hs{height:100svh;min-height:100svh;align-items:flex-end;padding:0 3.5vw calc(env(safe-area-inset-bottom,0px) + 2.5svh)}
.hs .txt,.hs.r .txt{max-width:none;width:100%;margin:0;padding:clamp(14px,2.4svh,22px) clamp(14px,4.5vw,22px);background:rgba(14,22,25,.8)}
.hs.c .txt{background:none;padding:0}
#s0 .txt{max-width:none}
.hs h1{font-size:clamp(26px,min(8.6vw,4.7svh),44px);margin-bottom:clamp(8px,1.6svh,14px);overflow-wrap:break-word}
.hs h2{font-size:clamp(24px,min(7.8vw,4.2svh),38px);margin-bottom:clamp(8px,1.6svh,14px);overflow-wrap:break-word}
.hs p{font-size:clamp(12.5px,1.9svh,15px);line-height:1.5}
.tag{font-size:11px;margin-bottom:8px}#s0 .tag{display:none}
.hs .btn{margin:clamp(10px,2svh,16px) 8px 0 0;padding:clamp(9px,1.6svh,13px) 20px;font-size:14px}
footer{padding:28px 5vw calc(env(safe-area-inset-bottom,0px) + 28px)}footer a{margin:0 14px 0 0}
}
@media (max-width:360px){header>a{font-size:0}nav a{padding:8px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.dev{animation:none}.rv,.rv.in{opacity:1;transform:none}}
@media (min-width:821px) and (max-height:560px){.hs .hl,#s0 .tag{display:none}.hs h1{font-size:clamp(28px,8svh,44px);margin-bottom:10px}.hs h2{font-size:clamp(24px,7svh,36px)}.hs p{font-size:clamp(12px,3svh,15px);line-height:1.45}.hs .btn{margin-top:14px;padding:10px 22px}}

/* ===== v3: hidden native scrollbar + smooth hover FAQ ===== */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-3px) rotate(45deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
details.o summary::after{transform:translateY(3px) rotate(-135deg)}
details{transition:background .4s,box-shadow .4s}
details.o{background:var(--bg2);box-shadow:0 0 0 1px rgba(15,157,138,.35),0 18px 40px rgba(0,0,0,.25)}
.dc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1),opacity .45s ease}
details.o .dc{grid-template-rows:1fr;opacity:1}
.di2{overflow:hidden;min-height:0}
@media (prefers-reduced-motion:reduce){.dc,summary::after,details{transition:none}}

/* ===== v4: new sections, tabs, theme ===== */
@view-transition{navigation:auto}
.hs .d{margin-top:14px}.ex{display:block;margin-top:10px;color:var(--teal);font-size:15px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
.tabs button{font:inherit;font-size:14px;font-weight:500;padding:10px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--ink);cursor:pointer;transition:background .3s,color .3s,transform .3s}
.tabs button:hover{transform:translateY(-2px)}.tabs button.on{background:var(--teal);color:#04211d;border-color:var(--teal)}
.card.hide{display:none}.bento.flt .card{grid-column:auto}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:5vh}
.stp{background:var(--card);border-radius:28px;padding:28px}.stp span{display:block;font-size:64px;font-weight:800;line-height:1;color:var(--teal);margin-bottom:10px}
.stp h3{font-size:22px;letter-spacing:-.02em;margin-bottom:8px}.stp p{font-size:16px}
.q{width:100%;max-width:820px;font:inherit;font-size:17px;padding:16px 22px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:var(--card);color:var(--ink);margin-bottom:16px}.q:focus{outline:3px solid var(--teal)}
#th{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:15px;cursor:pointer}
.btn{transition:transform .25s ease}.hs .btn{transition:opacity 1.6s .5s,transform .25s}
:root[data-theme=light]{--bg:#eef2f3;--bg2:#dde6e7;--ink:#0d2b2a;--mute:#4b6866;--glass:rgba(255,255,255,.78);--card:#fff;color-scheme:light}
:root[data-theme=light] .card{background:var(--card);box-shadow:0 8px 30px rgba(13,43,42,.08)}:root[data-theme=light] .tabs button,:root[data-theme=light] .q{border-color:rgba(0,0,0,.16)}
@media (max-width:820px){.steps{grid-template-columns:1fr}.hs .d{display:none}:root[data-theme=light] .hs .txt{background:rgba(255,255,255,.88)}:root[data-theme=light] .hs.c .txt{background:none}}

/* ===== v5: spacing, moving border, Urdu ===== */
.sec.w{padding-left:5vw;padding-right:5vw}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}
.stp,.card,.pm,details{position:relative}
.stp::after,.card::after,.pm::after,details::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .4s;background:conic-gradient(from var(--a),transparent 0 62%,var(--teal) 82%,#8ff0df 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 2.6s linear infinite}
.stp:hover::after,.card:hover::after,.pm:hover::after,details:hover::after{opacity:1}
#lg{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--teal);color:#04211d;font:600 13px/1 inherit;font-family:inherit;cursor:pointer}
:root[lang=ur] body{font-family:"Noto Naskh Arabic","Bricolage Grotesque",system-ui,sans-serif}
:root[lang=ur] :is(.txt,.stp,.cta,.card,.pm,details,footer){direction:rtl;text-align:right}
:root[lang=ur] :is(h1,h2,h3,.tag,nav a){letter-spacing:0;line-height:1.5;text-transform:none}
:root[lang=ur] .hs.c .txt{text-align:center}
@media (prefers-reduced-motion:reduce){.stp::after,.card::after,.pm::after,details::after{animation:none}}


/* ===== v6: nav ===== */
header{background:linear-gradient(180deg,rgba(24,38,42,.88),rgba(9,16,18,.9));box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 44px rgba(15,157,138,.14);gap:12px}
header::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--a),rgba(255,255,255,.06) 0 60%,var(--teal) 85%,#8ff0df);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 6s linear infinite}
nav a{display:flex;align-items:center;gap:9px;transition:background .35s,color .35s,transform .35s,box-shadow .35s}
nav a svg{flex:none}
nav a:hover{background:rgba(15,157,138,.2);color:var(--ink);transform:scale(1.07)}
nav a.on{background:linear-gradient(160deg,var(--teal),#0a7a6b);color:#04211d;box-shadow:0 0 26px rgba(15,157,138,.55)}
:root[data-theme=light] header{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(226,236,237,.9))}
@media (max-width:820px){nav a svg{display:none}}
@media (prefers-reduced-motion:reduce){header::before{animation:none}}

/* ===== v7: Urdu hero fit, mobile nav fit, privacy RTL ===== */
:root[lang=ur] .doc{direction:rtl;text-align:right}:root[lang=ur] .doc :is(p,li){line-height:2}:root[lang=ur] .doc ul{padding:0 22px 0 0}
@media (min-width:821px){:root[lang=ur] .hs{padding-top:8svh;padding-bottom:8svh}:root[lang=ur] .hs h1{font-size:clamp(32px,min(4.6vw,8svh),68px);line-height:1.35}:root[lang=ur] .hs h2{font-size:clamp(28px,min(4vw,7svh),56px);line-height:1.35}:root[lang=ur] .hs p{font-size:clamp(14px,2.3svh,19px);line-height:1.9}:root[lang=ur] .hs .hl{width:auto;height:min(84px,9svh)}:root[lang=ur] .hs .btn{margin-top:2.4svh}}
header{max-width:calc(100vw - 16px);box-sizing:border-box}
@media (max-width:820px){header{gap:4px;padding:6px}header>a{flex:none}nav{flex:1 1 auto;min-width:0;justify-content:center}nav a{flex:1 1 auto;justify-content:center;white-space:nowrap;padding:9px 8px}#th,#lg{width:32px;height:32px}}
@media (max-width:560px){header>a{font-size:0;gap:0}}
@media (max-width:400px){nav a{padding:8px 5px;font-size:11.5px}#th,#lg{width:29px;height:29px;font-size:12px}}

/* ===== v7: Urdu hero spacing, small-screen nav ===== */
@media (min-width:821px){
:root[lang=ur] .hs h1{font-size:clamp(30px,min(4.4vw,6.2svh),60px);line-height:1.4;margin-bottom:2svh}
:root[lang=ur] .hs h2{font-size:clamp(28px,min(3.8vw,5.6svh),52px);line-height:1.4;margin-bottom:2svh}
:root[lang=ur] .hs p{font-size:clamp(14px,2.3svh,19px);line-height:1.8}
:root[lang=ur] .hs .btn{margin-top:2.4svh;padding:1.5svh 28px}
:root[lang=ur] .hs{padding-top:6svh;padding-bottom:6svh}
}
@media (max-width:820px){header{box-sizing:border-box;max-width:calc(100vw - 16px)}nav{flex:1;min-width:0;justify-content:space-around}}
@media (max-width:480px){
header{gap:4px;padding:5px 6px}header>a{font-size:0;gap:0;flex:none}
nav a{padding:8px 6px;font-size:12px}#th,#lg{width:30px;height:30px;font-size:12px}
}

/* ===== v8: Urdu reading order on inner pages ===== */
:root[lang=ur] main.pg{direction:rtl;text-align:right}
:root[lang=ur] main.pg h1{line-height:1.4;font-size:clamp(34px,6vw,76px)}
:root[lang=ur] main.pg h2{line-height:1.45}
:root[lang=ur] main.pg p,:root[lang=ur] main.pg li{line-height:1.9}