@import url("./assets/typography.css");

:root{
  --bg:#f5f7fb; --panel:#ffffff; --muted:#94a3b8; --text:#0f172a; --line:#e2e8f0;
  --accent:#2563eb; --accent-weak:#dbeafe; --accent-strong:#1d4ed8;
  --success:#16a34a; --shadow:0 18px 36px rgba(15,23,42,.08);
  --gold:#facc15; --gold-strong:#eab308; --gold-bg:#fff8db;
  --font-base:"Roboto","Go","Segoe UI","Helvetica",Arial,sans-serif;
  --font-size-base:16px;
  --line-height-base:1.6;
  --font-size-h1:1.9rem;
  --font-size-h2:1.5rem;
  --font-size-h3:1.2rem;
  --font-size-h4:1.05rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
  color:var(--text); background:var(--bg);
}
h1,h2,h3,h4{
  margin:0 0 8px;
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--text);
}
h1{font-size:var(--font-size-h1);}
h2{font-size:var(--font-size-h2);}
h3{font-size:var(--font-size-h3);}
h4{font-size:var(--font-size-h4);}
.shell{display:grid; grid-template-columns:240px 1fr; min-height:100dvh}
.side{
  position:sticky; top:0; height:100dvh; background:#ffffffcc; backdrop-filter:saturate(180%) blur(10px);
  border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px 12px;
  width:240px; overflow:auto;
}
.brand{display:flex; align-items:center; justify-content:center; padding:8px 10px; width:100%; text-decoration:none;}
.brand img{width:180px; height:auto; object-fit:contain}
.nav{display:flex; flex-direction:column; gap:8px; width:100%; margin-top:8px}
.nav a{
  --bg1:#fff; --bg2:#f9fbff;
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--text);
  padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  transition:.18s ease transform, .18s ease box-shadow, .18s ease border-color, .18s ease background;
}
.nav a:hover{
  transform:translateY(-1px);
  border-color:#bfd7ff;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
  box-shadow:0 6px 14px rgba(37,99,235,.12);
}
.nav a.active{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff; border-color:transparent;
  box-shadow:0 10px 20px rgba(37,99,235,.25);
}
.nav a svg{width:22px; height:22px; flex:0 0 22px; opacity:.9;}
.nav a span{
  flex:1;
  font-weight:600;
  letter-spacing:.01em;
}
.nav a.active svg{ opacity:1; filter:brightness(10) }
.nav a.nav-separator{
  margin-top:18px;
  position:relative;
}
.nav a.nav-separator::before{
  content:"";
  position:absolute;
  top:-10px;
  left:14px;
  right:14px;
  height:1px;
  background:var(--line);
}
.nav a.secure{
  background:linear-gradient(180deg,var(--gold-bg),#fffef4);
  border-color:#fde68a;
  color:#854d0e;
  font-weight:600;
}
.nav a.secure:hover{
  background:linear-gradient(180deg,#fff5b1,#fffef4);
  box-shadow:0 6px 14px rgba(250,204,21,.25);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.nav a.secure.active{
  background:linear-gradient(180deg,var(--gold),var(--gold-strong));
  color:#fff;
  border:none;
  box-shadow:0 10px 22px rgba(250,204,21,.35);
}
.mobile-nav{
  display:none;
  align-items:center;
  gap:10px;
}
.mobile-nav select{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
  min-width:220px;
}
.section-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 18px;
}
.section-header h2{
  margin:0;
  font-size:1.6rem;
  letter-spacing:.01em;
}
.section-header .section-lead{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}
.card.section-header{
  padding:20px;
  gap:8px;
}
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:2;
}
.topbar-left h1{ margin:0; font-size:var(--font-size-h1); letter-spacing:.01em }
.topbar-left p{ margin:6px 0 0; color:var(--muted); font-size:1rem }
.product-logo{ height:56px; width:auto; object-fit:contain }
main{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  margin:0 0 40px;
}
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow) }
.page-frame{
  padding:0;
  overflow:hidden;
}
.page-frame__body{
  padding:14px;
}
.hero{
  grid-column:1/-1; display:grid; gap:14px; text-align:center; justify-items:center; padding:32px;
  background:linear-gradient(145deg, rgba(37,99,235,0.16), rgba(255,255,255,0.95)); border:1px solid rgba(37,99,235,0.2);
  max-width:1280px; width:100%; margin:0 auto;
}
.hero h2{ margin:0; font-size:1.8rem }
.hero p{ margin:0; max-width:620px; color:#1f2937 }
.hero .cta{
  display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none; font-weight:600; transition:.18s ease all;
}
.hero .cta:hover{ background:var(--accent-strong); transform:translateY(-1px) }
.hero .cta svg{ width:18px; height:18px }
footer{ padding:18px 24px; color:var(--muted); text-align:right }

/* Layout helpers */
.columns{
  display:flex;
  gap:1rem;
}

@media (max-width:768px){
  .columns{
    flex-direction:column;
  }

  .navbar a{
    display:block;
    padding:0.5rem 0;
  }

  body{
    font-size:16px;
  }
}

/* Responsive */
@media (max-width: 960px){
  .shell{ grid-template-columns:1fr }
  .side{ display:none }
  .topbar{ position:sticky; top:0; z-index:10; gap:12px; padding:14px 16px; background:#fff; }
  .mobile-nav{ display:flex; width:100%; justify-content:flex-end; }
  .nav{ display:none }
  main{
    grid-template-columns:1fr;
    padding:12px;
    margin:0 0 32px;
    width:100%;
  }
  .product-logo{ height:46px; }
  .topbar-left h1{ font-size:1.4rem; }
  .topbar-left p{ font-size:.95rem; }
  .hero{ padding:20px; }
  .page-frame__body{ padding:12px; }
}