/* Layout: quiet single column, centered hero under the brand mark, then plain ruled lists instead of cards. One dark look taken from the logo. */
:root{
  color-scheme:dark;
  --bg:#070914; --raise:#0E1224; --line:#1D2340; --ink:#F1F3FA; --muted:#9298B5; --dim:#636A8A; --blue:#4C7DFF;
  --font:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:rgba(76,125,255,.4)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(2.4rem, 6.2vw, 4.4rem);line-height:1.04}
h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);line-height:1.12}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
p{margin:0}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:30;background:var(--bg)}
header.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:rgba(7,9,20,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.brand img{width:34px;height:34px;border-radius:50%}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem}
.nav ul a:hover{color:var(--ink)}
@media (max-width:680px){.nav ul{gap:18px}.nav ul li.opt{display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font:700 .96rem/1 var(--font);text-decoration:none;background:var(--ink);color:var(--bg);transition:background .2s, transform .2s}
.btn:hover{background:#fff;transform:translateY(-1px)}

/* hero */
.hero{position:relative;padding-block:96px 104px;text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;left:50%;top:-140px;width:900px;max-width:200%;height:620px;transform:translateX(-50%);z-index:-1;background:radial-gradient(closest-side, rgba(56,98,255,.22), transparent)}
.hero .wrap{display:grid;justify-items:center;gap:26px}
.mark{width:96px;height:96px;border-radius:50%}
.hero p{font-size:1.18rem;color:var(--muted);max-width:56ch}
@media (max-width:600px){.hero{padding-block:64px 72px}.mark{width:76px;height:76px}}

/* sections */
section{padding-block:96px;border-top:1px solid var(--line)}
.head{display:grid;gap:14px;max-width:640px;margin-bottom:44px}
.head p{color:var(--muted);font-size:1.08rem}
@media (max-width:700px){section{padding-block:68px}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps li{display:grid;gap:10px;align-content:start}
.steps .num{font-weight:800;font-size:2rem;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.steps p{color:var(--muted);font-size:.97rem}
.steps .you .num{color:var(--ink)}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* criteria */
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:28px}}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rules li{padding:22px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.rules p{color:var(--muted)}

/* examples */
.ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--line)}
.ex div{padding:24px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.ex p{color:var(--muted);font-size:.98rem}
@media (max-width:720px){.ex{grid-template-columns:1fr}}

/* phases */
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.phase{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:grid;gap:10px;align-content:start}
.phase .when{font-size:.84rem;font-weight:600;color:var(--blue)}
.phase p{color:var(--muted);font-size:.97rem}
@media (max-width:780px){.phases{grid-template-columns:1fr}}

/* principles */
.princ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.princ div{display:grid;gap:8px}
.princ p{color:var(--muted);font-size:.97rem}
@media (max-width:780px){.princ{grid-template-columns:1fr;gap:26px}}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:700;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.4rem;font-weight:400;color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:66ch}

/* contact */
.contact{text-align:center}
.contact .wrap{display:grid;justify-items:center;gap:20px}
.contact p{color:var(--muted);font-size:1.08rem;max-width:52ch}

/* legal */
.legal{padding-block:56px}
.legal details{border-top:1px solid var(--line)}
.legal details:last-child{border-bottom:1px solid var(--line)}
.legal summary{cursor:pointer;padding:18px 0;font-weight:700;color:var(--muted)}
.legal summary:hover{color:var(--ink)}
.legal .body{padding-bottom:22px;color:var(--muted);display:grid;gap:10px;font-size:.94rem;max-width:72ch}
.legal h4{margin:6px 0 0;color:var(--ink);font-size:.94rem;font-weight:700}

/* footer */
footer{border-top:1px solid var(--line);padding-block:56px 40px}
.foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.foot .tag{color:var(--muted);font-size:.93rem}
.xbtn{margin-top:8px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);text-decoration:none;transition:box-shadow .2s, transform .2s}
.xbtn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.xbtn img{display:block;width:20px;height:20px}
.xfb{color:#fff;font:800 1.25rem/1 "Helvetica Neue", Arial, sans-serif}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:16px}
.flinks a{text-decoration:none;color:var(--muted);font-size:.92rem}
.flinks a:hover{color:var(--ink)}
.copy{color:var(--dim);font-size:.82rem;margin-top:4px}


/* motion */
.mark-wrap{position:relative;display:grid;place-items:center}
.mark-wrap::before{content:"";position:absolute;width:190%;height:190%;border-radius:50%;background:radial-gradient(closest-side, rgba(70,110,255,.45), transparent);animation:breathe 6s ease-in-out infinite;z-index:-1}
.mark{position:relative;animation:float 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero .in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .in:nth-child(2){animation-delay:.08s}.hero .in:nth-child(3){animation-delay:.16s}.hero .in:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rv{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.pre{opacity:0;transform:translateY(16px)}
.steps .num{transition:color .5s ease}
.steps.wait .num{color:var(--dim)}
.steps.wait .you .num{color:var(--dim)}
.ex div h3,.rules h3{transition:color .2s}
.ex div:hover h3,.rules li:hover h3{color:var(--blue)}
.phase{transition:border-color .25s, transform .25s}
.phase:hover{border-color:#2E3766}
.nav ul a,.flinks a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s, background-size .25s}
.nav ul a:hover,.flinks a:hover{background-size:100% 1px}
.faq details p,.legal .body{animation:none}
.faq details[open] p{animation:rise .35s ease both}
@media (prefers-reduced-motion: reduce){.mark-wrap::before,.mark,.hero .in,.faq details[open] p{animation:none}.rv.pre{opacity:1;transform:none}.steps.wait .num{color:var(--blue)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}

.legal-page{display:grid;gap:14px;max-width:68ch}
.legal-page h3{margin-top:12px}
.legal-page p{color:var(--muted)}