/* Steadfast Web Studio — porcelain / ink / signal blue / marigold */
:root{
  --porcelain:#eef1f4; --paper:#ffffff; --ink:#121a2b; --slate:#5a6478; --line:#d5dbe3;
  --signal:#2f4bff; --signal-ink:#1d33d6; --marigold:#ffb224; --good:#0f8a5f; --bad:#c43c2f;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--porcelain);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.02;margin:0}
h1{font-size:clamp(2.6rem,6.2vw,5.2rem);font-variation-settings:"opsz" 96}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:1.3rem;letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1em}
a{color:var(--signal-ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:20}
.muted{color:var(--slate)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 1rem/1 var(--body);padding:15px 22px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;background:var(--signal);color:#fff}
.btn:hover{background:var(--signal-ink)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.quiet:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.6;cursor:wait}

/* header */
header.top{position:sticky;top:0;z-index:10;background:rgba(238,241,244,.86);backdrop-filter:saturate(1.4) blur(10px)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font:700 1.08rem/1 var(--display);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand i{width:30px;height:30px;border-radius:9px;background:var(--ink);display:grid;place-items:center}
.brand i::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--marigold);transform:rotate(45deg)}
nav.links{display:flex;gap:26px;align-items:center}
nav.links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
nav.links a:hover{color:var(--signal-ink)}
nav.links .btn{padding:11px 16px;color:#fff;white-space:nowrap}

/* hero builder */
.hero{padding:40px 0 90px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero h1{max-width:11ch}
.hero .lead{font-size:1.2rem;color:var(--slate);max-width:34em;margin:22px 0 30px}
.builder{background:var(--paper);border-radius:20px;padding:22px;box-shadow:0 1px 0 var(--line),0 24px 50px -30px rgba(18,26,43,.35);max-width:520px}
.builder .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-size:.85rem;font-weight:600;color:var(--slate)}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--porcelain);border:1.5px solid transparent;border-radius:10px;padding:12px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);background:#fff}
.builder .go{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.builder .go small{color:var(--slate)}

.stage{position:relative;display:grid;place-items:center;min-height:700px;padding-bottom:48px}
.stage::before{content:"";position:absolute;inset:6% 4%;border-radius:40px;background:radial-gradient(120% 90% at 30% 20%,var(--sb, #dfe6ff),transparent 60%),radial-gradient(90% 80% at 80% 90%,var(--sa, #ffe7bd),transparent 60%);transition:background .5s;filter:blur(28px);opacity:.9}
.phone{position:relative;width:322px;height:640px;border-radius:48px;background:#0d1320;padding:11px;box-shadow:0 50px 80px -40px rgba(18,26,43,.6),inset 0 0 0 2px #2a3245}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:20px;background:#0d1320;z-index:3}
.screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:var(--p-bg);color:var(--p-fg);font-family:var(--body);transition:background .45s,color .45s}
.screen .scroll{height:100%;overflow-y:auto;scrollbar-width:none}
.screen .scroll::-webkit-scrollbar{display:none}
.p-head{display:flex;align-items:center;gap:10px;padding:56px 18px 12px}
.p-logo{width:38px;height:38px;border-radius:11px;background:var(--p-accent);color:var(--p-on);display:grid;place-items:center;font:700 .95rem/1 var(--display);transition:background .45s}
.p-name{font:700 1rem/1.15 var(--display);letter-spacing:-.01em}
.p-sub{font-size:.72rem;opacity:.7}
.p-hero{margin:6px 12px 0;border-radius:22px;padding:22px 18px 20px;background:var(--p-panel);transition:background .45s}
.p-hero h4{font:700 1.6rem/1.05 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.p-hero p{font-size:.85rem;opacity:.8;margin:0 0 16px}
.p-cta{display:block;text-align:center;font-weight:700;font-size:.95rem;border-radius:14px;padding:13px;background:var(--p-accent);color:var(--p-on);transition:background .45s}
.p-cta2{display:block;text-align:center;font-weight:600;font-size:.85rem;margin-top:8px;padding:10px;border-radius:14px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.85}
.p-badges{display:flex;gap:6px;flex-wrap:wrap;padding:14px 14px 4px}
.p-badges span{font-size:.7rem;font-weight:600;padding:6px 9px;border-radius:99px;background:var(--p-panel)}
.p-list{padding:6px 14px 12px}
.p-item{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;border-bottom:1px solid var(--p-line);font-size:.88rem}
.p-item b{font-weight:600}
.p-item span{font-size:.78rem;opacity:.7}
.p-foot{padding:14px 18px 26px;font-size:.72rem;opacity:.7}
.swap{animation:swap .45s ease}
@keyframes swap{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
.stage .tag{position:absolute;bottom:0;font-size:.85rem;color:var(--slate);background:rgba(255,255,255,.75);padding:7px 12px;border-radius:99px}

/* sections */
section{padding:96px 0}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head p{font-size:1.12rem;color:var(--slate);margin-top:16px}
.ink{background:var(--ink);color:#e9edf5}
.ink h2,.ink h3{color:#fff}
.ink .muted,.ink .sec-head p{color:#a8b2c6}

/* checker */
.checker{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.check-form{display:flex;gap:10px;margin-top:8px}
.check-form .btn{white-space:nowrap}
.check-form input{background:#1d2740;color:#fff}
.check-form input:focus{background:#24304d}
.check-form input::placeholder{color:#8792aa}
.report{background:#18213a;border-radius:20px;padding:26px;min-height:340px}
.report .score{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.report .score b{font:700 4rem/1 var(--display);letter-spacing:-.03em}
.report ul{list-style:none;padding:0;margin:18px 0 0}
.report li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px solid #2a3552}
.report li i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8rem;margin-top:2px}
.report li.ok i{background:rgba(15,138,95,.25);color:#5fe0ad}
.report li.no i{background:rgba(196,60,47,.25);color:#ff8f82}
.report li small{display:block;color:#a8b2c6}
.report .empty{color:#a8b2c6;display:grid;place-items:center;min-height:290px;text-align:center}
.scan{height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--marigold),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:scan 1.1s linear infinite;margin:20px 0}
@keyframes scan{from{background-position:-40% 0}to{background-position:140% 0}}

/* features: asymmetric list, not cards */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.feature{padding:26px 0;border-top:1.5px solid var(--ink)}
.feature h3{margin-bottom:8px}
.feature p{color:var(--slate);margin:0}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.trades button{font:500 .92rem/1 var(--body);padding:10px 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.trades button:hover{border-color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;counter-reset:s}
.step{counter-increment:s;position:relative;padding-top:64px}
.step::before{content:counter(s);position:absolute;top:0;left:0;font:700 3.2rem/1 var(--display);color:var(--signal)}
.step p{color:var(--slate)}

/* pricing table */
.price-table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:20px;overflow:hidden}
.price-table th,.price-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.price-table thead th{font:700 1.25rem/1.1 var(--display);padding-top:26px}
.price-table thead th small{display:block;font:400 .88rem/1.4 var(--body);color:var(--slate);margin-top:6px}
.price-table .amt{font:700 2.6rem/1 var(--display);letter-spacing:-.03em}
.price-table .pick{background:#f3f5ff}
.price-table td.y::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--signal);margin-right:8px}
.price-table td.n{color:#aab2c0}
.price-table tbody th{font-weight:500;color:var(--slate);width:34%}
.care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.care div{padding-top:18px;border-top:1.5px solid var(--ink)}
.care b{font-family:var(--display);font-size:1.15rem}
.care p{color:var(--slate);margin:6px 0 0}

/* faq */
.faq>*{max-width:820px}
details{border-top:1.5px solid var(--ink);padding:20px 0}
details:last-child{border-bottom:1.5px solid var(--ink)}
summary{cursor:pointer;font:600 1.12rem/1.3 var(--display);list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--signal)}
details[open] summary::after{content:"–"}
details p{color:var(--slate);margin:12px 0 0;max-width:68ch}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
form.card{background:var(--paper);border-radius:20px;padding:28px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp{position:absolute;left:-5000px}
.msg{display:none;padding:12px 14px;border-radius:10px;margin-top:12px}
.msg.ok{display:block;background:#e3f6ee;color:#0b5c40}
.msg.err{display:block;background:#fdeceb;color:#8f2a20}
.note{font-size:.9rem;color:var(--slate)}

footer{background:var(--ink);color:#a8b2c6;padding:54px 0;font-size:.93rem}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer a{color:#fff}
footer .brand{color:#fff}

/* legal pages */
.legal{max-width:760px;padding:60px 0}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:10px}
.legal h2{font-size:1.5rem;margin:1.8em 0 .5em}
.legal li{margin:.4em 0}

@media (max-width:920px){
  .hero .left{display:contents}.hero .intro{order:1}.hero .stage{order:2;min-height:0}.hero .builder{order:3}
  .hero .wrap{gap:28px}
  .hero .wrap,.checker,.contact{grid-template-columns:1fr}
  .stage{min-height:600px}
  .features,.steps,.care{grid-template-columns:1fr}
  nav.links a:not(.btn){display:none}
  .price-table thead th{font-size:1rem}.price-table .amt{font-size:1.8rem}
  .price-table th,.price-table td{padding:12px 10px;font-size:.88rem}
}
@media (max-width:520px){.builder .row,.two{grid-template-columns:1fr}.check-form{flex-direction:column}.phone{transform:scale(.92)}}