/* Localify v1.0 */
:root{
  --ink:#0B1220; --ink-2:#080D18; --panel:#131B2E;
  --bg:#F5F7FC; --card:rgba(255,255,255,.78); --line:rgba(11,18,32,.10);
  --body:#414B61; --muted:#566078; --muted-d:#97A2BC; --body-d:#B9C2D8;
  --blue:#1D4ED8; --teal-d:#0D9488; --violet-d:#6D28D9;
  --blue-l:#60A5FA; --teal:#2DD4BF; --violet:#A78BFA;
  --grad:linear-gradient(90deg,var(--blue) 0%,var(--teal-d) 55%,var(--violet-d) 115%);
  --grad-dark:linear-gradient(90deg,var(--blue-l) 0%,var(--teal) 55%,var(--violet) 115%);
  --grad-btn:linear-gradient(95deg,#1D4ED8,#6D28D9);
  --radius:18px; --radius-panel:28px; --maxw:1140px;
}
@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/bricolage-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-600.woff2') format('woff2');font-weight:600;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--blue)}
h1,h2,h3{font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.on-dark .grad,.grad-d{background:var(--grad-dark);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(245,247,252,.85);border-bottom:1px solid rgba(11,18,32,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--blue);font-weight:600}
.nav-links a:hover{color:var(--blue)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background .15s ease,border-color .15s ease}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 10px 26px rgba(67,56,202,.32);position:relative;overflow:hidden}
.btn-primary:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 32px rgba(67,56,202,.42)}
.btn-primary:active{transform:translateY(0)}
.on-dark .btn-primary{box-shadow:0 12px 32px rgba(124,58,237,.45)}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);transform:skewX(-20deg);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{left:-60%}55%{left:130%}100%{left:130%}}
.btn-ghost{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid rgba(11,18,32,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.95);border-color:rgba(11,18,32,.32);color:var(--ink)}
.on-dark .btn-ghost{background:rgba(255,255,255,.04);color:#E8EDF8;border-color:rgba(255,255,255,.24)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-primary::after{animation:none;display:none}
  .btn{transition:none}
  .btn-primary:hover{transform:none}
}

/* Sections */
.section{padding:88px 0}
.section-tight{padding:64px 0}
.hero{position:relative;background:
  radial-gradient(700px 420px at 85% -10%,rgba(45,212,191,.22),transparent 70%),
  radial-gradient(760px 480px at -8% 110%,rgba(29,78,216,.16),transparent 70%),
  radial-gradient(600px 320px at 50% 106%,rgba(124,58,237,.12),transparent 70%),var(--bg)}
.panel{position:relative;overflow:hidden;width:min(1380px,calc(100% - 28px));margin:0 auto;border-radius:var(--radius-panel);color:#EDF1FA;background:
  radial-gradient(640px 380px at 90% -8%,rgba(45,212,191,.28),transparent 70%),
  radial-gradient(720px 460px at -8% 112%,rgba(124,58,237,.32),transparent 70%),
  radial-gradient(520px 360px at 50% 55%,rgba(29,78,216,.16),transparent 70%),var(--ink)}
.panel .wrap{position:relative;z-index:1}
.panel h2,.panel h3{color:#fff}
.panel p{color:var(--body-d)}
.grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;pointer-events:none}

/* Dot motif */
.dots{position:absolute;pointer-events:none;background-image:radial-gradient(circle,rgba(16,185,129,.9) 3px,transparent 3.5px);background-size:23px 23px;-webkit-mask-image:radial-gradient(circle at 55% 45%,#000,transparent 66%);mask-image:radial-gradient(circle at 55% 45%,#000,transparent 66%);opacity:.5}
.dots::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(245,158,11,.85) 3px,transparent 3.5px);background-size:23px 23px;background-position:11px 11px;-webkit-mask-image:radial-gradient(circle at 55% 45%,transparent 30%,#000 52%,transparent 74%);mask-image:radial-gradient(circle at 55% 45%,transparent 30%,#000 52%,transparent 74%);opacity:.8}
.dots-tr{top:-36px;right:-36px;width:340px;height:340px}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 22px rgba(11,18,32,.05);padding:24px}
.card-glow{border:1px solid transparent;background:linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)) padding-box,linear-gradient(120deg,rgba(29,78,216,.85),rgba(13,148,136,.85),rgba(109,40,217,.85)) border-box;box-shadow:0 0 28px rgba(45,212,191,.20),0 12px 28px rgba(11,18,32,.07)}
.panel .card-glow,.card-glow-dark{border:1px solid transparent;background:linear-gradient(rgba(19,27,46,.8),rgba(19,27,46,.8)) padding-box,linear-gradient(120deg,rgba(96,165,250,.9),rgba(45,212,191,.9),rgba(167,139,250,.9)) border-box;box-shadow:0 0 30px rgba(45,212,191,.2)}
.slot{border:1.5px dashed rgba(11,18,32,.25);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;color:var(--muted);padding:12px;min-height:170px}
.panel .slot{border-color:rgba(255,255,255,.25);color:var(--muted-d)}
.chip{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.chip-blue{background:rgba(29,78,216,.10)} .chip-teal{background:rgba(13,148,136,.12)} .chip-violet{background:rgba(109,40,217,.10)}
.badge{font-size:11px;font-weight:600;letter-spacing:.03em;color:#0f5f56;background:rgba(45,212,191,.18);border:1px solid rgba(15,95,86,.25);border-radius:999px;padding:3px 10px}

/* Grids */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento .feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;gap:12px}
.split{display:flex;gap:56px;align-items:center}
.split>.copy{flex:0 0 54%;display:flex;flex-direction:column;gap:16px}
.split>.aside{flex:1;min-width:0}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;font-weight:600;padding:18px 22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open]{border:1px solid transparent;background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) padding-box,linear-gradient(120deg,rgba(29,78,216,.7),rgba(13,148,136,.7),rgba(109,40,217,.7)) border-box}
.faq .a{padding:0 22px 18px;color:var(--body);font-size:15px}

/* Forms */
label{font-size:14px;font-weight:600;display:block;margin-bottom:6px}
input,select,textarea{width:100%;min-height:46px;padding:10px 14px;border:1px solid rgba(11,18,32,.16);border-radius:10px;font:inherit;color:var(--ink);background:#fff}
textarea{resize:vertical}
.field{margin-bottom:16px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Footer */
.footer{background:var(--ink-2);color:var(--body-d);margin-top:64px}
.footer .cols{display:flex;gap:48px;align-items:flex-start;padding:56px 0 8px}
.footer h4{margin:0 0 4px;font:600 13px/1 'Instrument Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7C879F}
.footer a{color:var(--body-d);text-decoration:none;font-size:14px}
.footer a:hover{color:#fff}
.fcol{display:flex;flex-direction:column;gap:10px}
.fbrand{width:320px}
.fslogan{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;background:var(--grad-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.fbottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0 36px;font-size:13px;color:#7C879F}
.femail{color:var(--teal)!important;font-weight:600}

/* Utilities */
.center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.lead{font-size:18px;color:var(--body)}
.small{font-size:14px;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.prose{max-width:760px}
.prose h2{font-size:26px;margin:32px 0 10px}
.prose p,.prose li{color:var(--body);font-size:15px}
.prose ul{padding-left:22px;margin:10px 0}

/* Responsive */
@media (max-width:900px){
  .split{flex-direction:column;align-items:stretch;gap:28px}
  .split>.copy{flex:1}
  .g3{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer .cols{flex-wrap:wrap;gap:32px}
}
@media (max-width:760px){
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:20px;gap:18px;margin:0}
  .nav-links.open{display:flex}
  .burger{display:block}
  .section{padding:60px 0}
  h1{font-size:38px!important}
  h2{font-size:30px!important}
  .panel{width:calc(100% - 20px);border-radius:20px}
  .g2,.bento{grid-template-columns:1fr}
  .bento .feature{grid-column:auto;grid-row:auto}
  .dots-tr{width:220px;height:220px}
}
