@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#faf8f5;
  --bg-white:#ffffff;
  --bg-alt:#f3f0eb;
  --bg-dark:#1a1a1a;
  --bg-dark-card:rgba(255,255,255,.06);
  --text:#1a1a1a;
  --text-secondary:#555555;
  --text-muted:#999999;
  --accent:#1a1a1a;
  --accent-hover:#333333;
  --accent-soft:rgba(26,26,26,.06);
  --gradient-warm:linear-gradient(135deg,#f9a87c 0%,#f472b6 50%,#c084fc 100%);
  --gradient-warm-soft:linear-gradient(135deg,rgba(249,168,124,.15) 0%,rgba(244,114,182,.1) 50%,rgba(192,132,252,.08) 100%);
  --coral:#f9a87c;
  --pink:#f472b6;
  --purple:#c084fc;
  --green:#34d399;
  --cyan:#06b6d4;
  --amber:#fbbf24;
  --border:#e8e4df;
  --border-light:#f0ece7;
  --radius:12px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:100px;
  --max-w:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.08);
  --nav-height:64px;
}

html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}

.container{max-width:var(--max-w);margin:0 auto;padding:0 40px}

/* ── Nav ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:12px 24px;
}
nav .nav-inner{
  max-width:var(--max-w);margin:0 auto;
  background:var(--bg-white);
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;height:52px;
}
nav .logo{font-size:1.1rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
nav .nav-links{display:flex;gap:0;align-items:center}
nav .nav-links>a,nav .nav-links>.nav-dropdown>a{
  color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color .2s;
  padding:16px 14px;display:inline-flex;align-items:center;gap:4px;
}
nav .nav-links>a:hover,nav .nav-links>.nav-dropdown:hover>a{color:var(--text)}
nav .nav-links .btn{margin-left:12px}
nav .nav-links .btn-primary{color:#fff}
nav .nav-right{display:flex;align-items:center;gap:8px}
nav .nav-right .nav-signin{font-size:.875rem;font-weight:500;color:var(--text-secondary);padding:8px 16px;transition:color .2s}
nav .nav-right .nav-signin:hover{color:var(--text)}

/* ── Nav Dropdowns ── */
.nav-dropdown{position:relative}
.nav-dropdown .caret{
  display:inline-block;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;margin-left:4px;transition:transform .2s;
}
.nav-dropdown:hover .caret{transform:rotate(180deg)}
.mega-menu{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 32px;box-shadow:var(--shadow-lg);min-width:280px;z-index:200;
  margin-top:8px;
}
.mega-menu::before{
  content:'';position:absolute;left:0;right:0;top:-12px;height:12px;
}
.mega-menu-wide{min-width:720px}
.mega-menu-medium{min-width:480px}
.nav-dropdown:hover .mega-menu{display:flex;gap:32px}
.mega-col{min-width:180px}
.mega-col h5{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-muted);margin-bottom:14px;
}
.mega-col a{
  display:block;padding:8px 0;font-size:.875rem;color:var(--text-secondary);
  transition:color .15s;
}
.mega-col a:hover{color:var(--text)}
.mega-col .mega-desc{
  display:block;font-size:.75rem;color:var(--text-muted);margin-top:2px;line-height:1.4;
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 28px;border-radius:var(--radius-pill);
  font-weight:600;font-size:.875rem;transition:all .2s;
  cursor:pointer;border:none;letter-spacing:-.01em;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.btn-primary::after{content:'→';margin-left:2px}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--text);color:var(--text)}
.btn-ghost{background:transparent;color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.2)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff}
.btn-group{display:flex;gap:12px;flex-wrap:wrap}
.btn-group-center{justify-content:center}

/* ── Typography ── */
h1{font-size:clamp(2.75rem,5.5vw,4.25rem);font-weight:700;line-height:1.06;letter-spacing:-.04em;color:var(--text)}
h2{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--text)}
h3{font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--text)}
p{color:var(--text-secondary);line-height:1.7}
.subhead{font-size:clamp(1rem,1.8vw,1.15rem);color:var(--text-secondary);line-height:1.75;max-width:580px}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ── Section Label ── */
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-muted);margin-bottom:16px;
}

/* ── Hero ── */
.hero{padding:140px 0 80px;position:relative;overflow:hidden}
.hero .container{position:relative;z-index:1}
.hero h1{margin-bottom:20px}
.hero .subhead{margin-bottom:36px}
.hero.hero-center{text-align:center}
.hero.hero-center .subhead{margin-left:auto;margin-right:auto}
.hero.hero-center .btn-group{justify-content:center}

/* ── Sections ── */
.section{padding:100px 0}
.section-alt{background:var(--bg-white)}
.section-dark{background:var(--bg-dark);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p,.section-dark .subhead{color:rgba(255,255,255,.6)}
.section-dark .section-label{color:var(--coral)}

/* ── Split Layout ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split-center{align-items:center}

/* ── Cards ── */
.card-grid{display:grid;gap:20px;margin-top:40px}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:32px;
  transition:box-shadow .3s,transform .3s;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{font-size:.925rem;margin-bottom:0}
.card-link{
  display:inline-flex;align-items:center;gap:4px;margin-top:16px;font-size:.875rem;font-weight:600;
  color:var(--text);text-decoration:none;transition:color .2s;
}
.card-link:hover{color:var(--text-secondary)}
.card-link::after{content:'→'}

.card-gradient{border:none;color:#fff}
.card-gradient h3,.card-gradient p{color:#fff}
.card-gradient p{opacity:.85}
.card-gradient-1{background:linear-gradient(135deg,#f9a87c,#f472b6)}
.card-gradient-2{background:linear-gradient(135deg,#34d399,#06b6d4)}
.card-gradient-3{background:linear-gradient(135deg,#c084fc,#818cf8)}
.card-gradient-4{background:linear-gradient(135deg,#fbbf24,#f97316)}

.section-dark .card{background:var(--bg-dark-card);border-color:rgba(255,255,255,.08)}
.section-dark .card h3{color:#fff}
.section-dark .card p{color:rgba(255,255,255,.55)}

/* ── Visual Card (placeholder for images) ── */
.visual-card{
  background:var(--gradient-warm);
  border-radius:var(--radius-xl);padding:48px 32px;
  box-shadow:var(--shadow-sm);
  min-height:300px;
  display:flex;align-items:center;justify-content:center;
}
.visual-card p{color:rgba(255,255,255,.8);font-size:.875rem;text-align:center}

/* ── Stats / Metrics ── */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-top:48px}
.metric,.metric-card{text-align:center;background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px 24px;transition:box-shadow .3s,transform .3s}
.metric:hover,.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.metric .value,.metric-value{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:8px}
.metric .label,.metric-label{font-size:.875rem;color:var(--text-muted);line-height:1.5}
.metric-heading{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;font-weight:600}

.section-dark .metric,.section-dark .metric-card{background:var(--bg-dark-card);border-color:rgba(255,255,255,.08)}
.section-dark .metric .value,.section-dark .metric-value{color:#fff}
.section-dark .metric .label,.section-dark .metric-label{color:rgba(255,255,255,.5)}
.section-dark .metric-heading{color:rgba(255,255,255,.4)}

/* ── Feature Grid ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.feature-card{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:32px;
  transition:box-shadow .3s,transform .3s;
}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.feature-card h3{margin-bottom:12px}
.feature-card p{font-size:.925rem;margin-bottom:0}
.section-alt .feature-card{background:var(--bg-white)}
.section-dark .feature-card{background:var(--bg-dark-card);border-color:rgba(255,255,255,.08)}
.section-dark .feature-card h3{color:#fff}
.section-dark .feature-card p{color:rgba(255,255,255,.55)}

/* ── Feature List ── */
.feature-list{list-style:none;margin-top:20px}
.feature-list li{
  padding:12px 0 12px 28px;position:relative;
  color:var(--text-secondary);border-bottom:1px solid var(--border-light);
  font-size:.925rem;
}
.feature-list li:last-child{border-bottom:none}
.feature-list li::before{
  content:'';position:absolute;left:0;top:18px;
  width:8px;height:8px;border-radius:50%;background:var(--coral);
}

/* ── Compliance / Badges ── */
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.badge-row span{
  background:var(--bg-white);padding:10px 20px;border-radius:var(--radius);
  border:1px solid var(--border);font-size:.8rem;font-weight:600;color:var(--text);
}
.section-dark .badge-row span{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7);
}

/* ── FAQ ── */
.faq-list{margin-top:48px;max-width:760px;margin-left:auto;margin-right:auto}
.faq-item{border-bottom:1px solid var(--border);padding:24px 0}
.faq-item:first-child{border-top:1px solid var(--border)}
details.faq-item{cursor:pointer}
details.faq-item summary{font-size:1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:"+";font-size:1.25rem;font-weight:300;color:var(--text-muted);transition:transform .2s}
details[open].faq-item summary::after{content:"\2212"}
details.faq-item p{margin-top:12px;font-size:.925rem;color:var(--text-secondary)}

/* ── CTA Section ── */
.cta-section{text-align:center;padding:80px 0;background:var(--bg-dark);color:#fff;border-radius:var(--radius-xl);margin:0 24px 80px}
.cta-section h2{color:#fff;margin-bottom:16px}
.cta-section .subhead{margin-left:auto;margin-right:auto;color:rgba(255,255,255,.6);margin-bottom:32px}
.cta-section .btn-primary{background:#fff;color:var(--text)}
.cta-section .btn-primary:hover{background:rgba(255,255,255,.9);box-shadow:0 6px 20px rgba(255,255,255,.2)}
.cta-section .btn-ghost{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}

/* ── Footer ── */
footer{background:var(--bg);color:var(--text);padding:64px 0 32px;border-top:1px solid var(--border)}
.footer-top{display:grid;grid-template-columns:1.8fr repeat(7,1fr);gap:32px 24px;margin-bottom:48px}
.footer-col h4{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:14px}
.footer-col a{display:block;color:var(--text-secondary);font-size:.8rem;padding:3px 0;transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-brand{font-size:1.2rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.footer-tagline{color:var(--text-muted);font-size:.85rem;line-height:1.6;max-width:260px}
.footer-demos{border-top:1px solid var(--border);padding-top:20px;margin-bottom:24px}
.footer-demos h4{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:10px}
.footer-demos a{color:var(--text-secondary);font-size:.8rem;transition:color .2s}
.footer-demos a:hover{color:var(--text)}
.footer-demos .demo-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-bottom span,.footer-bottom a{color:var(--text-muted);font-size:.8rem}
.footer-bottom a:hover{color:var(--text-secondary)}
.footer-legal{display:flex;gap:20px}

/* ── Proof / Logo Strip ── */
.proof-strip{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;align-items:center;padding:24px 0}
.proof-strip span{font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--text-muted)}

/* ── Case Study Cards ── */
.case-card{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:32px;
  transition:box-shadow .3s,transform .3s;
}
.case-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.case-card h3{font-size:1rem;margin-bottom:12px;line-height:1.5}
.case-card a{color:var(--text);font-size:.875rem;font-weight:600}

/* ── Content links ── */
.section p a,.section li a,.section h3 a,.section h4 a,.section .copy-block a,.card p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.section p a:hover,.section li a:hover,.section h3 a:hover,.section h4 a:hover,.section .copy-block a:hover,.card p a:hover{color:var(--text);text-decoration-color:var(--text)}

/* ── Spacing helpers ── */
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}
.mb-40{margin-bottom:40px}
.mb-48{margin-bottom:48px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}
.mt-48{margin-top:48px}
.gap-48{gap:48px}
.gap-64{gap:64px}

/* ── Tables ── */
.table-wrap{overflow-x:auto;margin:24px 0}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.table-wrap th,.table-wrap td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.table-wrap thead th{background:var(--bg);font-weight:600;position:sticky;top:0}
.table-wrap tbody tr:hover{background:rgba(0,0,0,.02)}
.table-wrap td:first-child{font-weight:500}

/* ── Responsive ── */
@media(max-width:1100px){
  .footer-top{grid-template-columns:1.5fr repeat(3,1fr);row-gap:32px}
  .footer-top>div:first-child{grid-column:1 / -1}
}
@media(max-width:960px){
  .card-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .mega-menu-wide{min-width:560px}
}
@media(max-width:768px){
  .split{grid-template-columns:1fr;gap:48px}
  .card-grid.cols-2,.card-grid.cols-3,.feature-grid{grid-template-columns:1fr}
  nav .nav-links .nav-dropdown,nav .nav-links>a:not(.btn){display:none}
  .section{padding:64px 0}
  .hero{padding:100px 0 56px}
  .container{padding:0 24px}
  nav{padding:8px 16px}
  .footer-top{grid-template-columns:repeat(3,1fr)}
  .footer-top>div:first-child{grid-column:1 / -1}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .mega-menu{display:none !important}
  .cta-section{margin:0 16px 64px;border-radius:var(--radius-lg)}
}
@media(max-width:480px){
  .metrics-grid{grid-template-columns:1fr}
  .btn-group{flex-direction:column;align-items:stretch}
  .btn-group .btn{text-align:center}
  .footer-top{grid-template-columns:repeat(2,1fr)}
  .footer-top>div:first-child{grid-column:1 / -1}
}