
:root{--navy:#0b1630;--navy2:#13224a;--ink:#16203a;--orange:#ff6b1a;--lime:#b6f23a;--sky:#38bdf8;--bg:#f3f5fb;--card:#fff;--line:#e3e8f2;--muted:#5d6782;--ok:#0f9d58;--okbg:#e6f7ee;--amber:#b45309;--amberbg:#fff4de;--bad:#b42318;--badbg:#fdecea}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
h1,h2,h3,.logo,.disp{font-family:"Russo One","Exo 2",system-ui,sans-serif;font-weight:400;letter-spacing:.2px}
a{color:#1557d6;text-underline-offset:2px}a:hover{color:var(--orange)}
.chequer{height:8px;background:repeating-conic-gradient(#fff 0 25%,var(--navy) 0 50%) 0 0/16px 16px}
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 2px 10px #0003}
header .in{max-width:1120px;margin:auto;padding:10px 20px;display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap}
header .logo{display:flex;align-items:center;gap:8px;font-size:24px;color:#fff;text-decoration:none}header .logo b{color:var(--orange);font-weight:400}
header .logo svg{width:38px;height:24px}
header nav{display:flex;flex-wrap:wrap;gap:4px}
header nav a{color:#dbe3f5;text-decoration:none;font-size:15px;padding:6px 12px;border-radius:999px;font-weight:600}
header nav a:hover{background:#ffffff14;color:var(--lime)}
main{max-width:1120px;margin:auto;padding:22px 20px}
h1{font-size:clamp(26px,4vw,38px);margin:.25em 0 .35em;line-height:1.15}h2{font-size:22px;margin:1.6em 0 .5em}h3{font-size:18px}
.sheet{background:var(--card);border-radius:20px;padding:clamp(18px,3vw,34px);box-shadow:0 6px 24px #0b16300d;border:1px solid var(--line)}
.sheet>h1:first-child,.sheet>p:first-child+h1{border-left:6px solid var(--orange);padding-left:12px}
.sheet ul,.sheet ol{padding-left:22px}.sheet li{margin:.3em 0}
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:24px;padding:clamp(26px,4.5vw,52px);min-height:440px;display:flex;align-items:center;box-shadow:0 14px 40px #0b163040}
.hero .bg,.hero .bg img{position:absolute;inset:0;width:100%;height:100%}.hero .bg img{object-fit:cover;object-position:70% 50%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b1630f2 0%,#0b1630d0 34%,#0b163066 52%,#0b163000 70%),linear-gradient(0deg,#0b163066,transparent 30%)}
.hero:before{content:"";position:absolute;z-index:2;left:-40px;right:-40px;bottom:26px;height:8px;background:linear-gradient(90deg,var(--orange),var(--lime) 60%,transparent);transform:rotate(-2deg);opacity:.95}
.hero .txt{position:relative;z-index:3;max-width:600px}
.hero .credit{position:absolute;z-index:3;right:14px;bottom:10px;font-size:11px;color:#e3e9f7;background:#0b163099;padding:2px 8px;border-radius:999px}.hero .credit a{color:#fff}
.hero .kicker{display:inline-block;background:var(--lime);color:var(--navy);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.hero h1{font-size:clamp(30px,5vw,54px);margin:.3em 0;text-shadow:0 2px 14px #0008}.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{color:#e3e9f7;max-width:600px;font-size:16px;text-shadow:0 1px 8px #000a}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.step .n{flex:none;width:36px;height:36px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;font-family:"Russo One",sans-serif;font-size:18px}
.step:nth-child(2) .n{background:var(--sky)}.step:nth-child(3) .n{background:var(--lime);color:var(--navy)}
.step b{display:block}.step span{color:var(--muted);font-size:14px}
.quiz{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;background:var(--card);border-radius:20px;padding:20px;margin:18px 0;box-shadow:0 6px 24px #0b16300f;border:1px solid var(--line);border-top:6px solid var(--orange)}
.quiz label{font-weight:800;font-size:13px;display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px;color:var(--navy2)}
.quiz select{width:100%;appearance:none;-webkit-appearance:none;padding:11px 40px 11px 16px;border:2px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);background:#f7f9fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ff6b1a' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.quiz select:hover{border-color:#c6d0e6}.quiz select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px #ff6b1a26}
.quiz .toggles{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;grid-column:1/-1}
.chk{display:inline-flex!important;gap:8px;align-items:center;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:var(--ink)!important;background:#f7f9fe;border:2px solid var(--line);border-radius:999px;padding:8px 14px;margin:0!important;cursor:pointer}
.chk:has(input:checked){background:var(--okbg);border-color:#9fdcbc}.chk input{width:18px;height:18px;accent-color:var(--ok);margin:0}
.resulthead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.resulthead h2{margin:1.2em 0 .6em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.card{position:relative;background:var(--card);border-radius:18px;padding:18px;border:1px solid var(--line);box-shadow:0 4px 14px #0b16300d;display:flex;flex-direction:column;gap:8px;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #0b16301f}
.card h3{margin:0;font-size:19px;line-height:1.25}.card h3 a{color:var(--navy);text-decoration:none}.card h3 a:hover{color:var(--orange)}
.card.top{border:2px solid var(--orange);box-shadow:0 10px 30px #ff6b1a2e;background:linear-gradient(180deg,#fff7f1,#fff 40%)}
.ribbon{align-self:flex-start;background:var(--orange);color:#fff;font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.ribbon small{font-weight:600;text-transform:none;letter-spacing:0;opacity:.9}
.more{margin-top:auto;font-weight:700;font-size:14px;text-decoration:none}
.tag{display:inline-block;font-size:12px;font-weight:700;background:#eef2fb;color:#334166;border-radius:999px;padding:3px 10px;margin:0 4px 4px 0}
.tag.t-crawler{background:#e5f9d0;color:#3b6b06}.tag.t-basher{background:#ffe7d9;color:#b23f00}.tag.t-race{background:#dff3fe;color:#075985}
.tag.warn{background:var(--amberbg);color:var(--amber)}.tag.ok{background:var(--okbg);color:#0b6b3d}
.prices{font-size:14px;border-top:2px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.prices>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prices b{font-size:16px;color:var(--navy)}
.st{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:6px;background:#eef2fb;color:#334166}
.st.in{background:var(--okbg);color:#0b6b3d}.st.bo{background:var(--amberbg);color:var(--amber)}.st.out{background:var(--badbg);color:var(--bad)}
.muted{color:var(--muted);font-size:13px}
.note{background:#fff9eb;border:1px solid #fde7a8;border-left:6px solid #f5b100;border-radius:14px;padding:12px 16px;font-size:14px}
table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border-radius:14px;overflow:hidden;font-size:14px;border:1px solid var(--line)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child th,tr:last-child td{border-bottom:0}
th{background:#f4f6fc;width:32%;color:var(--navy2)}tr:hover td{background:#fbfcff}
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:800;padding:11px 18px;border-radius:999px;text-decoration:none;margin:0 8px 8px 0;box-shadow:0 6px 14px #ff6b1a40;transition:transform .15s,box-shadow .15s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px #ff6b1a55}.btn.alt{background:var(--navy2);box-shadow:0 6px 14px #13224a40}
.carhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.carhead .ticon{width:72px;height:72px;flex:none;border-radius:20px;display:grid;place-items:center;box-shadow:0 8px 18px #0b163026}.carhead .ticon svg{width:44px;height:44px}
.ticon.t-crawler{background:linear-gradient(135deg,#7bc62d,#3b6b06)}.ticon.t-basher{background:linear-gradient(135deg,#ff8a3d,#d9480f)}.ticon.t-race{background:linear-gradient(135deg,#38bdf8,#075985)}.ticon.t-other{background:linear-gradient(135deg,#5d6782,#16203a)}
footer .credit{color:#9fb0d6;font-size:12px}
.disc{font-size:12px;color:var(--muted);margin-top:4px}
.news{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:22px;padding:24px;margin-top:28px}
.news:after{content:"";position:absolute;right:0;top:0;bottom:0;width:90px;background:repeating-conic-gradient(#ffffff1f 0 25%,transparent 0 50%) 0 0/20px 20px}
.news h2{margin-top:0}.news .muted{color:#c3cde6}
.news input{padding:11px 16px;border:0;border-radius:999px;width:min(280px,100%);font-size:15px}
.news button{padding:11px 18px;border:0;border-radius:999px;background:var(--lime);color:var(--navy);font-weight:800;font-size:15px;opacity:.6}
.guides{list-style:none;padding:0!important;display:grid;gap:12px}.guides li{margin:0!important}
.guides a{display:block;background:#f7f9fe;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-weight:700;text-decoration:none;color:var(--navy)}.guides a:hover{border-color:var(--orange);color:var(--orange)}
footer{margin-top:40px;background:var(--navy);color:#c3cde6;font-size:13px}
footer .in{max-width:1120px;margin:auto;padding:26px 20px;display:grid;grid-template-columns:1fr 2fr;gap:24px}
footer a{color:var(--lime)}footer a:hover{color:#fff}footer .logo{font-size:22px;color:#fff;text-decoration:none}footer .logo b{color:var(--orange);font-weight:400}
footer .tagline{margin:.4em 0 0;color:#9fb0d6}footer p{margin:0 0 10px}
@media (max-width:760px){
 header{position:static}.hero:before{bottom:18px;height:6px}
 .hero{min-height:0;padding:210px 20px 44px;align-items:flex-end}.hero .bg{height:260px;bottom:auto}.hero .bg img{object-position:60% 50%}
 .hero .shade{background:linear-gradient(180deg,#0b163000 0,#0b163033 120px,#0b1630 255px)}.hero .credit{top:10px;bottom:auto;right:10px}
 .steps{grid-template-columns:1fr;gap:8px}.step{padding:10px 12px}footer .in{grid-template-columns:1fr}
 header .in{padding:8px 14px}header nav a{padding:5px 9px;font-size:14px}main{padding:16px 14px}
 table{display:block;overflow-x:auto}th{min-width:130px}td{min-width:150px}
 .cards{grid-template-columns:1fr}.btn{display:block;text-align:center}
}
@media (prefers-reduced-motion:reduce){.card,.btn{transition:none}.card:hover,.btn:hover{transform:none}}
