/* Fortyse — Landing Page */
:root{
  --bg:#0b0e12;
  --bg-alt:#0f1319;
  --fg:#e8f0ff;
  --muted:#a5b1c2;
  --brand:#9be600; /* neon green close to the logo */
  --card:#0f141b;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(155,230,0,.12), transparent 40%), var(--bg);
  color:var(--fg);
  line-height:1.6;
}

.container{width:min(1120px, 92%); margin-inline:auto}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(180deg, rgba(11,14,18,.85), rgba(11,14,18,.5));
  border-bottom:1px solid var(--border);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg)}
.brand__logo{width:150px; height:auto}
.brand__name{font-weight:800; font-size:1.15rem; letter-spacing:.3px}

.nav{display:flex; gap:24px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:500}
.nav a:hover{color:var(--fg)}

.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer}
.hamburger span{width:24px; height:2px; background:var(--fg)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 18px; border-radius:14px; border:1px solid var(--border);
  text-decoration:none; color:var(--fg); font-weight:700; letter-spacing:.2px;
  box-shadow:var(--shadow);
}
.btn--primary{ background:linear-gradient(180deg, var(--brand), #7cc700); color:#0b0e12; border-color:transparent}
.btn--ghost{ background:transparent }
.btn--small{ padding:10px 12px; font-size:.9rem}
.btn--block{ width:100%}

.hero{ position:relative; padding:84px 0 40px }
.hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center }
h1{ font-size: clamp(2rem, 1.6rem + 2.5vw, 3.4rem); line-height:1.1; margin:0 0 14px; letter-spacing:-.6px}
.lead{ font-size:1.1rem; color:var(--muted) }
.accent{ color:var(--brand) }
.hero__ctas{ display:flex; gap:14px; margin:22px 0 }
.hero__badges{ display:flex; gap:10px; flex-wrap:wrap }
.badge{ border:1px dashed var(--border); padding:8px 12px; border-radius:999px; color:#c7d2e1; font-size:.9rem}

.hero__card{ display:flex; justify-content:center }
.security-card{
  width:min(420px, 100%); padding:24px; background:linear-gradient(180deg, #0e141c, #0b0f15);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: var(--shadow);
}
.security-card img{ width:56px; opacity:.95 }
.security-card h3{ margin:10px 0 6px }
.score{ display:flex; align-items:center; gap:12px; margin:10px 0 6px }
.score__ring{ width:56px; height:56px; border-radius:50%; position:relative; background:
  conic-gradient(var(--brand) calc(var(--val)*1%), rgba(255,255,255,.1) 0);
}
.score__ring::after{content:""; position:absolute; inset:6px; border-radius:50%; background:#0b0f15; border:1px solid var(--border)}
.score__label{ font-weight:800 }
.checks{ list-style:none; padding:0; margin:10px 0 0; color:#c5d0df}
.checks li{ display:flex; gap:8px; align-items:center}
.checks li::before{ content:"✓"; color:var(--brand) }

.hero__blur{ position:absolute; inset:auto -10% -20% -10%; height:220px; filter:blur(70px); background: radial-gradient(60% 60% at 60% 0%, rgba(155,230,0,.18), transparent)}

.section{ padding:74px 0 }
.section--alt{ background:var(--bg-alt) }
.section__header{ text-align:center; margin-bottom:34px }
.section__header p{ color:var(--muted) }

.grid{ display:grid; gap:20px }
.cards{ grid-template-columns: repeat(4, 1fr) }
.card{ background:var(--card); border:1px solid var(--border); padding:22px; border-radius:var(--radius) }
.card__icon{ font-size:1.6rem }
.card h3{ margin:8px 0 }
.card p{ color:var(--muted) }

.logos{ display:grid; grid-auto-flow:column; gap:34px; place-items:center; opacity:.6; font-size:40px }

.prices{ grid-template-columns: repeat(3, 1fr) }
.price{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; position:relative }
.price--featured{ outline:2px solid var(--brand) }
.ribbon{ position:absolute; top:16px; right:-8px; background:var(--brand); color:#0b0e12; padding:6px 10px; border-radius:8px; font-weight:800; font-size:.8rem }
.price__tag{ font-size:1.8rem; margin:.2rem 0 1rem }
.price__features{ list-style:none; padding:0; margin:0 0 18px; color:#c7d2e1 }
.price__features li{ margin:8px 0 }

.link{ background:none; color:var(--brand); border:0; font:inherit; cursor:pointer; text-decoration:underline dashed 1px }

.faq details{ background:var(--card); border:1px solid var(--border); padding:16px 18px; border-radius:14px; margin-bottom:10px }
.faq summary{ cursor:pointer; font-weight:700 }

.form{ background:var(--card); border:1px solid var(--border); padding:22px; border-radius:var(--radius) }
.form__grid{ grid-template-columns: repeat(2, 1fr) }
.form label{ display:grid; gap:8px; color:#c7d2e1 }
.form input, .form textarea, .form select{
  width:100%; padding:12px 14px; border-radius:12px; background:#0b0f15; color:var(--fg); border:1px solid var(--border)
}
.form .full{ grid-column: 1 / -1 }
.form__hint{ color:var(--muted); font-size:.9rem }

.footer{ border-top:1px solid var(--border); padding:28px 0; background:#0b0e12 }
.footer__grid{ display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center }
.footer__brand img{ width:40px; vertical-align:middle; margin-right:8px }
.footer__links{ display:flex; gap:18px }
.footer__links a{ color:#c5cfdf; text-decoration:none }
.footer__links a:hover{ color:var(--fg) }

/* Responsive */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr }
  .cards{ grid-template-columns: repeat(2, 1fr) }
  .prices{ grid-template-columns: 1fr }
}
@media (max-width: 720px){
  .nav{ display:none; position:absolute; right:4%; top:64px; background:var(--bg-alt); border:1px solid var(--border); border-radius:14px; padding:12px; flex-direction:column; gap:12px; width:min(260px, 92vw) }
  .hamburger{ display:flex }
  .footer__grid{ grid-template-columns:1fr }
}