/* Odysseus Security — v9 (full-bleed, airy, modern) */
:root{
  --bg0:#050814; --bg1:#071736; --bg2:#040818;
  --text:#F2F6FF; --muted:rgba(242,246,255,.74); --muted2:rgba(242,246,255,.56);
  --gold:#D1B173; --gold2:#F0E1C1; --blue:#55B8FF;
  --shadow:0 30px 90px rgba(0,0,0,.45); --shadow2:0 18px 60px rgba(0,0,0,.30);
  --r2:28px;
  --pad:clamp(18px,3vw,40px);
  --padY:clamp(56px,8vw,120px);
  --max:min(1500px, calc(100vw - (var(--pad)*2)));
  --h1:clamp(46px,6vw,92px);
  --h2:clamp(30px,3.2vw,54px);
  --h3:clamp(18px,2vw,22px);
  --p:clamp(15px,1.25vw,18px);
  --ease:cubic-bezier(.2,.85,.2,1);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; color:var(--text);
  font:400 var(--p)/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  letter-spacing:.01em; overflow-x:hidden;
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(85,184,255,.22), transparent 60%),
    radial-gradient(1100px 900px at 80% 20%, rgba(209,177,115,.16), transparent 55%),
    radial-gradient(1400px 900px at 60% 95%, rgba(85,184,255,.12), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 55%,var(--bg2));
}
a{color:inherit;text-decoration:none;}
a.underline{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
.wrap{width:var(--max);margin:0 auto;}
.full{width:100%;padding-left:var(--pad);padding-right:var(--pad);}
.mw{max-width:64ch;}
.mw2{max-width:54ch;}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 14px;border-radius:999px;background:#fff;color:#000;z-index:9999;}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px);
  background:linear-gradient(180deg,rgba(5,8,20,.78),rgba(5,8,20,.40));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;min-width:220px;}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));}
.brand .name{font-weight:800;letter-spacing:.02em;}
.brand .tag{font-size:12px;color:var(--muted2);margin-top:-2px;}
.menu{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:650;}
.menu a{padding:8px 10px;border-radius:999px;}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.06);}
.cta{display:flex;align-items:center;gap:10px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);font-weight:750;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  transition:transform .22s var(--ease), filter .22s var(--ease), background .22s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.07);}
.btn:active{transform:translateY(0);}
.btn.primary{
  border:0;color:#071023;
  background:linear-gradient(135deg,rgba(85,184,255,.98),rgba(209,177,115,.92));
  box-shadow:0 22px 70px rgba(85,184,255,.22),0 20px 80px rgba(209,177,115,.14);
}
.btn.primary:hover{filter:saturate(1.06);}
.burger{display:none;width:44px;height:44px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);}
.sheet{position:fixed;inset:0;z-index:60;display:none;}
.sheet.on{display:block;}
.sheet .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);}
.sheet .panel{
  position:absolute;right:14px;top:14px;bottom:14px;width:min(420px,calc(100vw - 28px));
  border-radius:var(--r2);border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(10,24,54,.92),rgba(5,8,20,.92));
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;
}
.sheet a{padding:12px 12px;border-radius:16px;color:var(--muted);border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);}
.sheet a:hover{color:var(--text);background:rgba(255,255,255,.06);}
.sheet .row{display:flex;gap:10px;margin-top:10px;}
.sheet .row .btn{width:100%;}
.hero{position:relative;z-index:1;padding:calc(var(--padY) - 20px) 0 calc(var(--padY) - 40px);}
.hero:before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 22% 20%, rgba(85,184,255,.22), transparent 60%),
    radial-gradient(1000px 700px at 78% 15%, rgba(209,177,115,.18), transparent 60%),
    radial-gradient(1200px 700px at 70% 90%, rgba(85,184,255,.10), transparent 60%);
  opacity:.9;
}
.heroInner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3.5vw,42px);align-items:center;}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--muted);font-weight:750;}
.kicker .dot{width:9px;height:9px;border-radius:99px;background:linear-gradient(135deg,var(--blue),var(--gold));box-shadow:0 0 0 7px rgba(85,184,255,.14);}
.h1{font-size:var(--h1);line-height:1.0;letter-spacing:-0.04em;margin:14px 0 12px;}
.grad{background:linear-gradient(90deg,var(--text),rgba(242,246,255,.82),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sub{margin:0;color:var(--muted);}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.pill{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--muted2);}
.heroVisual{
  position:relative;border-radius:32px;border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 30% 20%, rgba(85,184,255,.18), transparent 60%),
    radial-gradient(900px 520px at 70% 70%, rgba(209,177,115,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow2);
  min-height:clamp(360px,36vw,540px);overflow:hidden;
}
.heroVisual .glow{position:absolute;inset:-2px;background:radial-gradient(700px 320px at 50% 0%, rgba(255,255,255,.18), transparent 55%);opacity:.35;}
.heroVisual svg{position:absolute;inset:0;width:100%;height:100%;opacity:.92;}
.heroVisual .panel{
  position:absolute;left:18px;right:18px;bottom:18px;
  border-radius:22px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);backdrop-filter:blur(10px);
  padding:16px;
}
.heroVisual .panel .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mini{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);padding:12px;}
.mini b{display:block;}
.mini span{color:var(--muted2);font-size:13px;}
.section{position:relative;z-index:1;padding:calc(var(--padY) - 34px) 0;}
.section.slim{padding:calc(var(--padY) - 60px) 0;}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px;}
.h2{font-size:var(--h2);letter-spacing:-0.03em;line-height:1.05;margin:0;}
.lead{margin:0;color:var(--muted);}
.grid{display:grid;gap:clamp(14px,2.2vw,22px);}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
.card{
  border-radius:var(--r2);border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  padding:clamp(16px,2vw,22px);
}
.card h3{margin:0 0 10px;font-size:var(--h3);letter-spacing:-0.01em;}
.card p{margin:0;color:var(--muted);}
.feature{display:flex;gap:14px;align-items:flex-start;}
.ico{
  width:46px;height:46px;border-radius:18px;
  background:linear-gradient(135deg,rgba(85,184,255,.22),rgba(209,177,115,.18));
  border:1px solid rgba(255,255,255,.10);
  display:grid;place-items:center;flex:0 0 auto;
}
.ico svg{width:22px;height:22px;opacity:.95;}
.feature b{display:block;}
.feature span{display:block;color:var(--muted2);font-size:13px;margin-top:4px;}
.banner{
  border-radius:34px;border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(85,184,255,.22), transparent 60%),
    radial-gradient(900px 380px at 75% 85%, rgba(209,177,115,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  padding:clamp(18px,2.4vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.banner p{margin:0;color:var(--muted);max-width:80ch;}
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px);}
.field{display:flex;flex-direction:column;gap:8px;}
label{color:var(--muted);font-size:13px;font-weight:750;letter-spacing:.02em;}
input,select,textarea{
  width:100%;padding:14px 14px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);outline:none;
}
textarea{min-height:170px;resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:rgba(85,184,255,.55);box-shadow:0 0 0 7px rgba(85,184,255,.12);}
.notice{margin-top:14px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--muted);}
.notice.ok{border-color:rgba(83,240,198,.35);background:rgba(83,240,198,.08);color:rgba(242,246,255,.90);}
.notice.bad{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08);color:rgba(242,246,255,.90);}
.footer{padding:48px 0 60px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted2);}
.footerGrid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:22px;}
.footer a{color:var(--muted);}
.footer a:hover{color:var(--text);}
.small{font-size:13px;color:var(--muted2);}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease), transform .75s var(--ease);}
.reveal.on{opacity:1;transform:none;}
.pagewipe{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:
    radial-gradient(1100px 680px at 18% 30%, rgba(85,184,255,.22), transparent 60%),
    radial-gradient(1100px 680px at 75% 55%, rgba(209,177,115,.18), transparent 60%),
    rgba(5,8,20,.92);
  backdrop-filter:blur(16px);
  clip-path:circle(0% at 92% 10%);
  transition:clip-path .52s var(--ease);
}
.pagewipe.on{clip-path:circle(150% at 70% 30%);}
@media (max-width:1020px){
  .heroInner{grid-template-columns:1fr;}
  .menu{display:none;}
  .burger{display:inline-flex;align-items:center;justify-content:center;}
  .g3{grid-template-columns:1fr;}
  .g2{grid-template-columns:1fr;}
  .form{grid-template-columns:1fr;}
  .footerGrid{grid-template-columns:1fr;}
  .heroVisual .panel .row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .reveal,.pagewipe,.btn{transition:none!important;}
}