/* ===========================================================
   DeliberaOS — marketing site stylesheet
   Brand: navy #12283F (primary) · action blue #2563EB (interface)
   gold #C9922E (ceremonial accent — never body text)
   Type: Inter (UI/headings) · Source Serif 4 (formal titles)
   JetBrains Mono (citations, step numbers, legal badges)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --navy: #12283F;
  --navy-2: #0E2033;
  --navy-tint: #1A3A5C;
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --gold: #C9922E;
  --gold-light: #E8B860;
  --ink: #12283F;
  --ink-soft: #4B5C71;
  --line: #E1E5EB;
  --paper: #FFFFFF;
  --paper-2: #F6F8FA;
  --green: #1E8E5A;
  --amber: #C9922E;
  --red: #B3432E;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 12px 32px rgba(18,40,63,0.10);
  --shadow-lg: 0 24px 64px rgba(18,40,63,0.16);
  --maxw: 1180px;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 28px; }
section{ padding: 96px 0; }
.section-head{ max-width: 680px; margin: 0 0 52px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.02em; color: var(--navy); }
h2{ font-size: clamp(28px,3.4vw,38px); line-height:1.18; }
h3{ font-size: 20px; line-height:1.3; }
.section-head p{ color: var(--ink-soft); font-size:17px; margin-top:14px; }
.serif-title{ font-family: var(--font-serif); font-weight:600; letter-spacing:-0.01em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-ui); font-weight:700; font-size:15px;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--blue); color:#fff; box-shadow: 0 8px 20px rgba(37,99,235,0.28); }
.btn-primary:hover{ background: var(--blue-dark); transform: translateY(-1px); }
.btn-ghost-light{ border-color: rgba(255,255,255,0.34); color:#fff; }
.btn-ghost-light:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.btn-ghost-dark{ border-color: rgba(18,40,63,0.22); color: var(--navy); }
.btn-ghost-dark:hover{ border-color: var(--navy); background: rgba(18,40,63,0.04); }
.btn-gold{ background: var(--gold); color: var(--navy); box-shadow: 0 8px 20px rgba(201,146,46,0.30); }
.btn-gold:hover{ background: var(--gold-light); transform: translateY(-1px); }
.btn-sm{ padding: 9px 18px; font-size:13.5px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.brand-logo svg{ height:32px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:600; color: var(--ink-soft); transition: color .15s ease; }
.nav-links a:hover{ color: var(--navy); }
.nav-links-entrar{ display:none; }
.header-actions{ display:flex; align-items:center; gap:14px; }

.lang-switcher{ position:relative; }
.lang-current{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.04em;
  color: var(--ink-soft); background: var(--paper-2); border:1px solid var(--line);
  padding:8px 12px; border-radius: 999px; text-transform:uppercase;
}
.lang-current:hover{ border-color: var(--navy); color: var(--navy); }
.lang-current svg{ width:12px; height:12px; }
.lang-menu{
  position:absolute; top: calc(100% + 8px); right:0;
  background:#fff; border:1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding:6px; min-width:168px;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 200;
}
.lang-switcher.open .lang-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.lang-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600; color: var(--ink);
}
.lang-menu a:hover{ background: var(--paper-2); }
.lang-menu a.active{ color: var(--blue); }
.lang-menu .code{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); text-transform:uppercase; }

.nav-toggle{ display:none; background:none; border:0; padding:8px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:22px; height:2px; background: var(--navy); border-radius:2px; position:relative; transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 600px at 82% -10%, rgba(37,99,235,0.28), transparent 60%), linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 108px 0 96px;
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image: url('assets/pattern-on-dark.png');
  background-size: 900px auto; background-repeat: repeat; opacity:0.10; mix-blend-mode: screen;
}
.hero .wrap{ position:relative; z-index:2; max-width: 900px; }
.hero .eyebrow{ color: var(--gold-light); }
.hero h1{ color:#fff; font-size: clamp(34px, 5vw, 54px); line-height:1.12; max-width: 860px; }
.hero p.lead{ color: rgba(255,255,255,0.78); font-size:19px; max-width:680px; margin: 24px 0 36px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- pillars ---------- */
.pillars-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; }
.pillar-card{
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pillar-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); border-color: rgba(37,99,235,0.25); }
.pillar-num{ font-family: var(--font-mono); font-size:13px; color: var(--gold); font-weight:600; letter-spacing:0.08em; }
.pillar-card h3{ margin: 12px 0 10px; }
.pillar-card p{ color: var(--ink-soft); font-size:15.2px; margin:0; }

/* ---------- legal profile (dark, institutional) ---------- */
.legal-section{
  position:relative; overflow:hidden;
  background: var(--navy); color:#fff;
  border-radius: 28px;
  padding: 72px 0;
}
.legal-section::before{
  content:''; position:absolute; inset:0;
  background-image: url('assets/pattern-on-dark.png');
  background-size: 900px auto; background-repeat: repeat; opacity:0.08;
}
.legal-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center; }
.legal-section .eyebrow{ color: var(--gold-light); }
.legal-section h2{ color:#fff; }
.legal-section p{ color: rgba(255,255,255,0.76); font-size:16.5px; margin-top:16px; }
.legal-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.legal-badge{
  font-family: var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.03em;
  color:#fff; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22);
  padding:9px 16px; border-radius:999px;
}
.legal-seal{ display:flex; justify-content:center; }
.legal-seal svg{ width:200px; height:200px; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.35)); }
.legal-seal svg circle:first-of-type{ stroke:#fff; }
.legal-seal svg text{ fill:#fff !important; }
.legal-seal svg text tspan, .legal-seal svg textPath{ fill: inherit; }

/* ---------- for whom ---------- */
.segments-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.segment-card{ border:1px solid var(--line); border-radius: var(--radius); padding:26px 24px; }
.segment-card h3{ font-size:17px; }
.segment-card p{ color: var(--ink-soft); font-size:14.6px; margin: 10px 0 0; }

/* ---------- how it works ---------- */
.steps-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step{ position:relative; padding-top: 8px; border-top: 3px solid var(--gold); }
.step-n{ font-family: var(--font-mono); font-size:26px; font-weight:600; color: var(--navy-tint); opacity:0.35; }
.step h3{ margin: 10px 0 8px; font-size:17.5px; }
.step p{ color: var(--ink-soft); font-size:14.6px; margin:0; }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 8px; }
.price-card{
  border:1px solid var(--line); border-radius: var(--radius); padding: 32px 28px;
  background: var(--paper-2);
}
.price-card h3{ font-size:16.5px; color: var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.price-value{ font-family: var(--font-serif); font-size: 34px; font-weight:600; color: var(--navy); margin: 14px 0 10px; }
.price-card p.desc{ color: var(--ink-soft); font-size:14.8px; margin:0; }
.pricing-note{ font-size:13.5px; color: var(--ink-soft); margin-top:18px; font-style:italic; }
.pricing-cta{ margin-top: 26px; }

/* ---------- cta banner ---------- */
.cta-banner{
  position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: 28px; color:#fff; padding: 76px 60px; text-align:center;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background-image: url('assets/pattern-on-dark.png');
  background-size: 900px auto; background-repeat: repeat; opacity:0.09;
}
.cta-banner-inner{ position:relative; z-index:2; max-width: 620px; margin:0 auto; }
.cta-gavel{ width:56px; height:56px; margin: 0 auto 26px; opacity:0.9; }
.cta-gavel svg{ width:100%; height:100%; display:block; }
.cta-gavel svg rect{ fill:#fff; }
.cta-gavel svg rect:nth-of-type(2){ fill: var(--gold); }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: rgba(255,255,255,0.78); font-size:16.5px; margin: 16px 0 30px; }

/* ---------- footer ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,0.7); padding: 64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand svg{ height:30px; width:auto; margin-bottom:14px; }
.footer-brand p{ font-size:14px; color: rgba(255,255,255,0.6); max-width:260px; }
.footer-byline{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.05em; color: rgba(255,255,255,0.42); margin-top:14px; text-transform:uppercase; }
.footer-col h4{ font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: rgba(255,255,255,0.44); margin:0 0 16px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:14.5px; color: rgba(255,255,255,0.78); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; color: rgba(255,255,255,0.42); flex-wrap:wrap; gap:12px; }

/* ---------- misc ---------- */
.divider{ display:block; width:100%; height:24px; margin: 0 auto; }
.divider img{ width:100%; }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:1000; }
.skip-link:focus{ left:16px; top:16px; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .nav-links{
    display:none; position:absolute; top:76px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); flex-direction:column;
    align-items:flex-start; gap:0; padding: 8px 28px 20px; box-shadow: var(--shadow);
  }
  .nav-links.nav-open{ display:flex; }
  .nav-links a{ width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-links-entrar{ display:block; color: var(--blue) !important; }
  .nav-toggle{ display:block; }
  .legal-inner{ grid-template-columns: 1fr; }
  .legal-seal{ order:-1; }
  .pillars-grid{ grid-template-columns: 1fr; }
  .segments-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps-row{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .header-actions .btn-ghost-dark{ display:none; }
}
@media (max-width: 640px){
  section{ padding: 64px 0; }
  .hero{ padding: 96px 0 72px; }
  .segments-grid{ grid-template-columns: 1fr; }
  .steps-row{ grid-template-columns: 1fr; }
  .cta-banner{ padding: 56px 26px; }
  .footer-grid{ grid-template-columns: 1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}