/* Brand tokens taken from softwindtech.com's Elementor kit (post-13.css):
   accent #EF4823, primary #161616, muted #BAB9B6; headings "Anta", body "DM Sans".
   Hero maroon (#3b1717) and grid (#472323) measured from the live render. */

@font-face{font-family:"Anta";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/anta-400.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("fonts/dmsans-var.woff2") format("woff2")}

:root{
  --accent:#EF4823; --accent-hover:#ff5c38;
  --ink:#161616; --ink-2:#1d1d1d; --ink-3:#242424;
  --hero:#3b1717; --hero-grid:rgba(255,255,255,.045);
  --text:#f9f9fa; --text-2:#e3e3e3; --muted:#bab9b6; --faint:#7f8080;
  --line:rgba(255,255,255,.09);
  --pass:#2fbf71; --warn:#f3b23e; --fail:#e5484d; --info:#49b6e6;
  --head:"Anta",sans-serif; --body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --maxw:1140px; --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font:400 16px/1.63 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;line-height:1.24;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- buttons (site style: orange pill + white chevron disc) ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font:500 15px/1 var(--body);padding:14px 16px 14px 26px;border-radius:999px;white-space:nowrap;transition:background .2s,transform .08s}
.btn:hover{background:var(--accent-hover)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.6;cursor:default}
.btn-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--accent);font-size:20px;line-height:1;padding-bottom:3px}
.btn-sm{padding:11px 12px 11px 20px;font-size:14px} .btn-sm .btn-ico{width:26px;height:26px;font-size:17px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- hero: maroon + grid, rounded bottom edge like the main site ---------- */
.hero{position:relative;background-color:var(--hero);color:var(--text);border-radius:0 0 40px 40px;overflow:hidden;
  background-image:
    radial-gradient(70% 55% at 50% 105%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size:auto, 48px 48px, 48px 48px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px}
.logo img{display:block;height:42px;width:auto}
.menu{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.menu a{font:500 15px/1 var(--body);color:var(--text-2);text-decoration:none;transition:color .2s}
.menu a:hover{color:var(--accent)}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 38s linear infinite}
.marquee span{font:500 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:11px 0}
@keyframes marquee{to{transform:translateX(-50%)}}

.hero-body{text-align:center;padding-top:64px;padding-bottom:70px}
.tabs{display:inline-flex;gap:4px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:30px;max-width:100%}
.tab{background:transparent;color:var(--muted);border:0;cursor:pointer;font:500 14px/1 var(--body);padding:10px 18px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
.tab.active{background:var(--accent);color:#fff}
.tab:not(.active):hover{color:var(--text)}

h1{font-size:clamp(34px,5.2vw,58px);max-width:860px;margin:0 auto 18px;color:var(--text)}
.hl{position:relative;display:inline-block;color:var(--accent);padding:0 .08em}
.hl .doodle{position:absolute;left:-16%;top:-30%;width:132%;height:160%;overflow:visible;pointer-events:none}
.hl .doodle path{fill:none;stroke:#f9f9fa;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:620;stroke-dashoffset:620;animation:draw 1.1s .25s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sub{font-size:17px;color:var(--text-2);max-width:620px;margin:0 auto 34px}

form#scanForm{display:flex;gap:10px;max-width:720px;margin:0 auto;background:rgba(22,22,22,.72);border:1px solid var(--line);padding:8px;border-radius:999px;backdrop-filter:blur(6px)}
#url{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:400 16px/1 var(--body);padding:12px 20px;outline:none}
#url::placeholder{color:var(--faint)}
.hint{color:var(--muted);font-size:13px;margin-top:14px}

/* ---------- main ---------- */
main{padding-top:40px;padding-bottom:40px}
#status{display:none;text-align:center;padding:30px 0;color:var(--muted)}
#status.on{display:block}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:sp .8s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
.steps{font-size:14px;min-height:20px}

#result{display:none}
#result.on{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.scorecard{display:flex;gap:24px;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:24px;flex-wrap:wrap}
.ring{--p:0;--col:var(--accent);width:120px;height:120px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--col) calc(var(--p)*1%), #2b2b2b 0);display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--ink-2)}
.ring b{position:relative;font:400 32px/1 var(--head)}
.ring span{position:relative;color:var(--muted);font-size:12px;margin-top:4px}
.scoremeta{flex:1;min-width:220px}
.scoremeta h2{font-size:22px;margin-bottom:4px}
.scoremeta .url{color:var(--accent);font-size:14px;word-break:break-all}
.pills{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pill{font:500 12px/1 var(--body);padding:7px 12px;border-radius:999px;border:1px solid var(--line)}
.pill.pass{color:var(--pass)} .pill.warn{color:var(--warn)} .pill.fail{color:var(--fail)} .pill.info{color:var(--info)}

.checks{margin-top:16px;display:grid;gap:12px}
.check{background:var(--ink-2);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;padding:18px 20px}
.check.pass{border-left-color:var(--pass)} .check.warn{border-left-color:var(--warn)}
.check.fail{border-left-color:var(--fail)} .check.info{border-left-color:var(--info)}
.check .top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.check .name{font-family:var(--head);font-size:17px}
.badge{font:500 11px/1 var(--body);letter-spacing:.06em;padding:5px 9px;border-radius:6px;text-transform:uppercase}
.badge.pass{background:rgba(47,191,113,.15);color:var(--pass)} .badge.warn{background:rgba(243,178,62,.15);color:var(--warn)}
.badge.fail{background:rgba(229,72,77,.15);color:var(--fail)} .badge.info{background:rgba(73,182,230,.15);color:var(--info)}
.check .detail{color:var(--text-2);font-size:15px;margin:10px 0 0}
.check .fix{margin-top:10px;font-size:14px;color:var(--muted);background:var(--ink-3);border-radius:8px;padding:10px 12px}
.check .fix b{color:var(--accent);font-weight:500}
.bots{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.bot{font-size:12px;padding:4px 9px;border-radius:6px;border:1px solid var(--line)}
.bot.allowed{color:var(--pass)} .bot.blocked{color:var(--fail);border-color:rgba(229,72,77,.4)}

.cta{margin-top:28px;background:var(--hero);border-radius:var(--r);padding:34px 28px;text-align:center;
  background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);background-size:48px 48px}
.cta h3{font-size:26px;margin-bottom:8px}
.cta p{color:var(--text-2);max-width:620px;margin:0 auto 20px}
.err{display:none;margin-top:8px;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.35);color:#ffb3b6;border-radius:12px;padding:14px 16px;text-align:center}
.err.on{display:block}

.about{margin-top:56px}
.section-title{font-size:30px;text-align:center;margin-bottom:22px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.about-item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.about-item h3{font-size:19px;margin-bottom:8px}
.about-item p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- footer (main-site structure) ---------- */
.site-footer{position:relative;margin-top:64px;border-top:1px solid var(--line);background:#111}
/* the site's footer star, as a faint shape (the SVG itself is black-filled) */
.site-footer::after{content:"";position:absolute;right:48px;top:44px;width:120px;height:120px;background:rgba(255,255,255,.06);
  -webkit-mask:url("assets/footer-star.svg") no-repeat center/contain;mask:url("assets/footer-star.svg") no-repeat center/contain;pointer-events:none}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding-top:56px;padding-bottom:40px}
.footer-brand img{height:45px;width:auto;display:block;margin-bottom:14px}
.footer-tag{color:var(--muted);margin:0 0 18px;max-width:360px}
.footer-contact{list-style:none;margin:0;padding:0;color:var(--muted);font-size:14px;display:grid;gap:6px}
.site-footer h4{font-size:16px;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer li a{color:var(--muted);text-decoration:none;font-size:15px;transition:color .2s}
.site-footer li a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;padding-bottom:28px;color:var(--faint);font-size:13px}
.footer-links{display:flex;gap:18px} .footer-links a{color:var(--faint);text-decoration:none} .footer-links a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .menu{display:none}
  .site-footer::after{display:none}
  .about-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hero{border-radius:0 0 26px 26px}
  .hero-body{padding-top:44px;padding-bottom:48px}
  .nav .btn-sm{display:none}
  form#scanForm{flex-direction:column;border-radius:22px;padding:10px}
  form#scanForm .btn{justify-content:center}
  .footer-grid{grid-template-columns:1fr}
  .tabs{display:flex;width:100%;justify-content:center}
  .tab{padding:10px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .hl .doodle path{animation:none;stroke-dashoffset:0}
  .spin{animation-duration:1.6s}
  *{scroll-behavior:auto}
}