@import url('/shared/common.css');

/* Local font (optional). Place files into /landing/fonts/. Falls back to system fonts. */
@font-face{
  font-family:'Inter';
  src: local('Inter var'), local('InterVariable'),
       url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:'Inter';
  src: local('Inter var Italic'), local('InterVariable-Italic'),
       url('/fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --bg:#0b0d12;--card:#11141b;--muted:#a8b0c3;--text:#e9edf7;--primary:#4ea8ff;--accent:#8b5cf6;--ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;
  --ring: 0 0 0 2px rgba(78,168,255,.35);
  --header-h: 56px;
  --topbar-h: 36px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter','InterVariable',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.content-narrow{max-width:820px}

/* Hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 600px at 20% -10%, rgba(78,168,255,.16), rgba(78,168,255,0) 55%),
  radial-gradient(900px 420px at 85% -20%, rgba(139,92,246,.16), rgba(139,92,246,0) 58%)}
.hero .container{padding:82px 20px 0px; text-align:center; position:relative; z-index:3}
.hero::before{content:"";position:absolute;inset:-25% -10% -10% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px 320px at 18% 0%, rgba(142,197,252,.22), rgba(142,197,252,0) 60%),
    radial-gradient(560px 280px at 85% -8%, rgba(139,92,246,.24), rgba(139,92,246,0) 58%),
    radial-gradient(420px 220px at 60% 10%, rgba(176,230,0,.12), rgba(176,230,0,0) 55%);
  filter: blur(10px);
  animation: aurora 18s ease-in-out infinite alternate;
}
.headline{font-weight:900;font-size:56px;line-height:1.08;letter-spacing:-.02em;margin:0 0 20px}
.sub{color:var(--muted);font-size:18px;max-width:760px;margin:12px auto 0}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0;justify-content:center}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;color:#9fb0ce;justify-content:center}
.badge{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.18);padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px}
/* hero subtle depth */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:140px;z-index:2;pointer-events:none;background:linear-gradient(180deg, rgba(11,13,18,0), rgba(11,13,18,.65) 55%, rgba(11,13,18,1))}
/* Sections */
section{padding-block:88px;position:relative}
section+section{border-top:none}
h2{font-size:34px;margin:0 0 18px;text-align:center}
.container > h2 + .muted{ text-align:center; margin:8px auto 28px }
.muted{color:var(--muted)}
/* Legal/content pages: left-align headings inside narrow content blocks */
.content-narrow h1,.content-narrow h2,.content-narrow h3{ text-align:left }
/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.card{background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:18px}
.card h3{margin:8px 0 6px;font-size:18px}
.icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(78,168,255,.15);color:#bfe0ff;border:1px solid rgba(78,168,255,.35)}
/* Features */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.feature{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:16px}
.feature .check{color:var(--ok)}
/* Unified hover for cards */
.card,.feature,.tpl,.price,.quote,.carousel .item.card,.faq-item{position:relative;transition:border-color .2s ease, box-shadow .25s ease, background .25s ease}
.card:hover,.feature:hover,.tpl:hover,.price:hover,.quote:hover,.carousel .item.card:hover,.faq-item:hover{border-color:rgba(148,163,184,.28);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.card::after,.feature::after,.tpl::after,.price::after,.quote::after,.carousel .item.card::after,.faq-item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(240px 180px at var(--mx,50%) var(--my,50%), rgba(142,197,252,.12), rgba(139,92,246,.10) 35%, transparent 70%)}
.card:hover::after,.feature:hover::after,.tpl:hover::after,.price:hover::after,.quote:hover::after,.carousel .item.card:hover::after,.faq-item:hover::after{opacity:1}
/* Advantages */
.adv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.adv .big{font-size:16px;font-weight:600;color:#dfe7fb}
/* Templates */
.templates{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:28px}
.tpl{background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:0;overflow:hidden}
.tpl .img{aspect-ratio:4/3;background:linear-gradient(135deg,#1b2433,#0f1724);border-bottom:1px solid rgba(148,163,184,.08);position:relative;display:grid;place-items:center}
.tpl .emoji{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.25);box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:28px;color:#0b0d12}
.tpl .body{padding:14px}
/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(2,310px);gap:30px;margin-top:28px;align-items:stretch;justify-content:center}
.price{background:#121826;border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:24px 24px 10px;display:flex;flex-direction:column;min-height:460px;width:100%;margin:0}
.price h3{margin:6px 0 4px}
.price .amt{font-size:34px;font-weight:800}
.note{margin-top:10px;color:#9fb0ce}
.price .cta{justify-content:flex-start}
.btn.success{background:#B0E600;color:#0b0d12;border-color:#b9ff00}
.badge-pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(176,230,0,.18);color:#c8ff3d;border:1px solid rgba(176,230,0,.35)}
/* Carousel (Why / Testimonials) */
.carousel{position:relative;margin-top:28px}
.carousel .track{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.carousel .track>.item{scroll-snap-align:start;min-width:320px}
.carousel .nav{display:none}
.carousel .nav button{background:#0f131a;border:1px solid rgba(148,163,184,.25);color:#dbe7ff;border-radius:10px;padding:8px 10px;font-weight:800}
.carousel .dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.carousel .dot{width:6px;height:6px;border-radius:50%;background:rgba(148,163,184,.35)}
.carousel .dot.active{background:#8b5cf6}
.list-check{list-style:none;padding:0;margin:12px 0 0}
.list-check li{position:relative;padding-left:22px;margin:10px 0;line-height:1.6}
.list-check li:before{content:"";position:absolute;left:2px;top:calc(0.95em - 5px);transform:translateY(-50%) rotate(45deg);width:8px;height:8px;border-radius:2px;border:2px solid #22c55e;border-top-color:transparent;border-left-color:transparent}
/* force mute gradient backgrounds inside carousel items to solid card */
.carousel .item.card{background:var(--card)!important}
/* hide native scrollbar for tracks */
.carousel .track{scrollbar-width:none}
.carousel .track::-webkit-scrollbar{display:none}
/* Testimonials */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.quote{background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:16px}
/* FAQ */
.faq{max-width:900px;margin:28px auto 0}
.faq-item{border:1px solid rgba(148,163,184,.18);border-radius:12px;margin:10px 0;background:var(--card)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer}
.faq-q span{position:relative;display:inline-block;width:16px;height:16px;font-size:0}
.faq-q span::before,.faq-q span::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#c7d2e9;border-radius:2px;transform:translate(-50%,-50%) rotate(0);transition:transform .22s ease, opacity .22s ease}
.faq-q span::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.open .faq-q span::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);opacity:0}
.faq-a{padding:0 16px 14px 16px;color:#b6c1d8;display:none}

/* Responsive */
@media (max-width: 1100px){.templates{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 900px){.steps{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:1fr}.adv{grid-template-columns:1fr}.testis{grid-template-columns:1fr}.pricing{grid-template-columns:1fr;justify-content:stretch}.templates{grid-template-columns:repeat(2,1fr)}}
/* Mobile dropdown panel */
.mobile-panel{position:fixed;top:calc(var(--topbar-h) + var(--header-h));left:0;right:0;background:#0f131a;border-bottom:1px solid rgba(148,163,184,.12);box-shadow:0 10px 20px rgba(0,0,0,.25);display:none;z-index:998}
.mobile-panel .container{display:grid;gap:10px;padding:12px 20px}
body.menu-open .mobile-panel{display:block}
.topbar.hide ~ .mobile-panel{top:var(--header-h)}
@media (max-width: 680px){section{padding-block:72px}.steps{grid-template-columns:1fr}.hero .container{padding:36px 20px 0px}footer .row{flex-direction:column;align-items:flex-start;gap:8px}.nav{padding-left:20px;padding-right:10px}.topbar .container{padding:6px 12px;font-size:13px}.topbar .badge{display:none}}
@media (max-width: 520px){.headline{font-size:36px}.templates{grid-template-columns:1fr}}


/* Tables (legal pages) */
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid rgba(148,163,184,.16);border-radius:12px;overflow:hidden;background:var(--card)}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(148,163,184,.12);vertical-align:top}
.table thead th{background:#0f131a;color:#dbe7ff;position:sticky;top:0;z-index:1}
.table tbody tr:nth-child(odd){background:rgba(148,163,184,.04)}
.table tbody tr:last-child td{border-bottom:0}
@media (max-width:520px){.table th,.table td{padding:10px 12px;font-size:14px}}