:root{
  --bg: #f3f8ff;
  --bg-2: #f9fbf4;
  --ink: #0f1b2d;
  --muted: #546072;
  --panel: #ffffff;
  --panel-soft: #f1f6ff;
  --primary: #36c2a1;
  --secondary: #2f8cff;
  --accent: #f4b74d;
  --accent-2: #ffe3b0;
  --line: rgba(15, 27, 45, 0.1);
  --shadow: 0 18px 36px rgba(15, 27, 45, 0.16);
  --shadow-soft: 0 10px 22px rgba(15, 27, 45, 0.12);
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 8% 10%, rgba(47,140,255,.2), transparent 60%),
    radial-gradient(800px 380px at 92% 12%, rgba(54,194,161,.18), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  line-height: 1.6;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: radial-gradient(rgba(15,27,45,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.25;
  pointer-events:none;
  z-index:-1;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

h1, h2, h3, .logo-text{
  font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
}

.container{max-width:1120px;margin:0 auto;padding:0 24px}

.header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .8);
  border-bottom: 1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{width:32px;height:32px;border-radius:12px;display:block;background:rgba(54,194,161,.2)}
.logo-text{font-weight:600;color:var(--ink);font-size:18px}
.nav{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background: var(--panel);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}
.nav-link{color:var(--ink);text-decoration:none;font-weight:500;font-size:14px}
.nav-link:focus-visible, .btn:focus-visible{
  outline:3px solid rgba(54,194,161,.35);
  outline-offset:2px;
  border-radius:12px;
}
.btn-nav{padding:.5rem .9rem;border:1px solid rgba(15,27,45,.12);border-radius:var(--radius-pill);text-decoration:none;background:var(--panel-soft)}
.lang-toggle{
  display:flex;gap:6px;align-items:center;
  background:var(--panel-soft);
  padding:4px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
}
.lang-btn{
  border:none;background:transparent;color:var(--ink);
  font-weight:600;font-size:12px;padding:6px 10px;border-radius:var(--radius-pill);
  cursor:pointer;
}
.lang-btn.active{
  background:var(--secondary);color:#fff;
}
.lang-btn:focus-visible{outline:3px solid rgba(47,140,255,.35);outline-offset:2px}

.hero{position:relative; overflow:hidden; padding:88px 0 72px}
.hero-bg{
  position:absolute; inset:-20% 0 -10% 0; z-index:-1;
  background:
    radial-gradient(520px 340px at 10% 10%, rgba(244,183,77,.3), transparent 65%),
    radial-gradient(520px 340px at 90% 20%, rgba(47,140,255,.22), transparent 65%);
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
}
.hero-content{max-width:560px}
.hero-title{font-size:46px;line-height:1.12;margin:16px 0 16px}
.hero-subtitle{font-size:18px;color:var(--muted);margin:0 0 22px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:13px}
.hero-badges span{background:rgba(47,140,255,.12);padding:6px 10px;border-radius:var(--radius-pill)}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;background:rgba(54,194,161,.18);
  border-radius:var(--radius-pill);font-weight:600;font-size:12px;color:var(--ink);
}
.pill-alt{background:rgba(47,140,255,.18)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;border-radius:var(--radius-pill);cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  border:0;
  box-shadow: 0 10px 20px rgba(15,27,45,.12);
  transform: translateY(0);
}
.btn-large{padding:12px 22px;font-weight:600}
.btn-primary{
  background:linear-gradient(180deg, #ffe08e 0%, var(--accent) 100%);
  color:var(--ink);
  box-shadow: inset 0 0 0 1px rgba(15,27,45,.12), 0 10px 20px rgba(15,27,45,.12);
}
.btn-secondary{
  background:linear-gradient(180deg, #cfe9ff 0%, var(--secondary) 100%);
  color:var(--ink);
  box-shadow: inset 0 0 0 1px rgba(47,140,255,.35), 0 10px 20px rgba(15,27,45,.12);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(15,27,45,.18);
  box-shadow:none;
}
.btn-ghost:hover{background:#f3f5f7;box-shadow:0 8px 18px rgba(15,27,45,.08)}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0); box-shadow: 0 6px 14px rgba(15,27,45,.16)}

.hero-mascot{display:flex;justify-content:center}
.mascot-card{
  position:relative;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:28px;
  box-shadow: var(--shadow);
  min-width:260px;
}
.mascot-glow{
  position:absolute;inset:-12% 15% 40% 15%;
  background:radial-gradient(circle, rgba(54,194,161,.35), transparent 70%);
  z-index:0;
}
.mascot-image{
  position:relative;
  z-index:1;
  width:min(240px, 70vw);
  height:auto;
  display:block;
  margin:0 auto 18px;
  filter: drop-shadow(0 18px 30px rgba(15,27,45,.22));
  animation: float 5s ease-in-out infinite;
}
.mascot-stats{
  display:flex;gap:18px;justify-content:center;z-index:1;position:relative;
}
.stat-number{font-weight:700;font-size:20px;color:var(--ink)}
.stat-label{display:block;font-size:12px;color:var(--muted)}

.section{padding:72px 0}
.section-soft{background:linear-gradient(180deg, rgba(54,194,161,.08) 0%, transparent 100%)}
.section-gradient{background:linear-gradient(180deg, rgba(47,140,255,.08) 0%, rgba(244,183,77,.1) 100%)}
.section-head{text-align:center;max-width:720px;margin:0 auto 28px}
.section-title{font-size:32px;margin:0 0 10px;color:var(--ink)}
.section-subtitle{margin:0;color:var(--muted)}

.grid{display:grid;gap:18px}
.value-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.steps{grid-template-columns:repeat(3,1fr)}
.audience-grid{grid-template-columns:repeat(2,1fr)}
.comparison-grid{grid-template-columns:repeat(2,1fr)}

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:22px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform: translateY(-4px);box-shadow: 0 16px 30px rgba(15,27,45,.18)}

.problem-section .section-title{color:#1f252b}
.problem-section .section-subtitle{color:#4f5a66;white-space:pre-line}
.problem-section .section-title,
.problem-section .value-card h3{
  font-family:"Poppins","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:500;
}
.problem-section .value-grid{grid-template-columns:repeat(4, minmax(200px, 1fr));gap:12px}
.problem-section .value-card{
  background:#f8f9fb;
  border:1px solid #e1e6ec;
  border-radius:22px;
  padding:26px 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.problem-section .value-card-media{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  margin:0 auto 12px;
}
.problem-section .value-card h3{margin-top:0;color:#1f252b}
.problem-section .value-card p{color:#5a6572}
.problem-closing{
  margin:20px auto 0;
  text-align:center;
  max-width:680px;
  color:#3d464f;
}

.audience-section .section-subtitle{color:#4a5562}
.audience-section .audience-grid{
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
  margin-top:10px;
}
.audience-section .audience-card{
  display:flex;
  flex-direction:column;
  border-radius:24px;
  padding:30px;
  border:1px solid #e1e5ea;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.audience-card-primary{
  background:#f6f7f9;
  border-color:#d9dee5;
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
}
.audience-card-primary h3{
  margin:0 0 8px;
  font-size:28px;
  color:#18202a;
}
.audience-card-secondary{
  background:#ffffff;
  border-color:#e5e8ed;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.audience-kicker{
  margin:0 0 6px;
  font-size:16px;
  color:#2b3440;
}
.audience-lead{
  margin:0 0 8px;
  color:#3e4854;
  font-weight:600;
}
.audience-body{
  margin:0;
  color:#4d5762;
  white-space:pre-line;
  max-width:56ch;
}
.audience-list{
  margin:16px 0 22px;
  padding-left:18px;
  color:#4a5461;
}
.audience-list-secondary{margin-bottom:18px}
.audience-cta-primary{margin-top:auto}
.audience-cta-secondary{align-self:flex-start}
.audience-closing{
  margin:14px auto 0;
  text-align:center;
  color:#5a6572;
  font-size:14px;
}

@media (min-width: 900px){
  .problem-section .value-card{position:relative}
  .problem-section .value-card:not(:first-child)::before{
    content:'';
    position:absolute;
    left:-12px;
    top:28px;
    width:12px;
    height:1px;
    background:#d6dbe1;
  }
}

.step-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:12px;margin-bottom:10px;
  background:rgba(47,140,255,.15);color:var(--ink);font-weight:700;
}
.step-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-height:320px;
  padding:28px;
}
.step-card h3{margin:0}
.step-body{
  width:100%;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:16px;
  align-items:center;
}
.step-text p{margin:0}
.step-media{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  margin:0;
  border:1px solid rgba(15,27,45,.08);
  box-shadow: 0 8px 18px rgba(15,27,45,.12);
}
@media (max-width: 900px){
  .step-card{min-height:0}
  .step-body{grid-template-columns:1fr}
  .step-media{height:210px;margin-top:8px}
}

.capsule-tag{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:rgba(54,194,161,.18);font-size:12px;font-weight:600;margin-bottom:10px;
}
.capsule-time{margin-top:14px;color:var(--muted);font-size:13px}

.usecase-label{margin:16px 0 8px;font-weight:600;color:var(--ink)}
.usecase-list{margin:0;padding-left:18px;color:var(--muted)}
.comparison-list{margin:0;padding-left:18px;color:var(--muted)}
.comparison-card h3{margin-top:0}

.blog-hero .hero-grid{
  grid-template-columns:1.05fr .95fr;
  gap:28px;
}
.blog-featured{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.blog-section .section-subtitle{color:var(--muted)}
.blog-grid{grid-template-columns:repeat(3, minmax(220px, 1fr))}
.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.post-tag{
  display:inline-flex;
  align-self:flex-start;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:rgba(244,183,77,.25);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}
.post-title{margin:0}
.post-excerpt{margin:0;color:var(--muted)}
.post-meta{
  display:flex;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.post-hero .hero-title{max-width:760px}
.post-body{
  max-width:780px;
}
.post-body p{color:var(--muted)}
.post-body h2{
  margin:26px 0 10px;
  font-size:24px;
  color:var(--ink);
}
.post-body img{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin:16px 0;
  display:block;
}
.post-list{
  margin:16px 0 20px;
  padding-left:18px;
  color:var(--muted);
}



.cta-card{
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;
  padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--panel) 0%, rgba(47,140,255,.12) 100%);
  box-shadow:0 14px 28px rgba(15,27,45,.16);
}
.cta-points{display:flex;gap:20px;margin-top:18px}

.waitlist-form{display:flex;flex-direction:column;gap:12px}
.waitlist-form label{font-weight:600;color:var(--ink)}
.waitlist-row{display:flex;gap:12px;flex-wrap:wrap}
.waitlist-row input[type="text"]{flex:1;min-width:180px}
.waitlist-row input[type="email"]{flex:1;min-width:220px}
input[type="email"],
input[type="text"]{
  width:100%;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:#fff;font-size:16px;color:var(--ink);
  box-shadow:var(--shadow-soft);
}
input[type="email"]::placeholder,
input[type="text"]::placeholder{color:#9aa5b4}
input[type="email"].error{border-color:#e35b4f}
.error-text{color:#b53f35;font-size:13px;margin:0}
.waitlist-note{color:var(--muted);margin:0;font-size:14px}
.cta-secondary{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.cta-secondary-text{margin:0;color:var(--muted)}
.success-message{
  display:flex;gap:10px;align-items:center;justify-content:flex-start;
  background:rgba(54,194,161,.18);border:1px solid rgba(54,194,161,.35);
  border-radius:var(--radius);padding:16px;margin-top:16px;color:var(--ink);
}
.success-icon{
  background:var(--primary);color:var(--ink);border-radius:50%;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;
}

.footer{padding:32px 0;background:var(--panel);color:var(--ink);border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer a{color:var(--ink);text-decoration:none;font-weight:600}
.footer a:hover{text-decoration:underline}
.footer-copy{margin:0;color:var(--muted)}

.reveal{
  opacity:0; transform:translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible{opacity:1; transform:translateY(0)}

.hero-title, .hero-subtitle, .hero-ctas, .hero-badges, .pill{
  animation: fadeUp .8s ease both;
}
.hero-title{animation-delay:.05s}
.hero-subtitle{animation-delay:.12s}
.hero-ctas{animation-delay:.2s}
.hero-badges{animation-delay:.26s}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes float{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .blog-hero .hero-grid{grid-template-columns:1fr}
  .hero-content{max-width:640px}
  .hero-ctas{justify-content:center}
  .hero-badges{justify-content:center}
  .value-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .audience-grid{grid-template-columns:1fr}
  .comparison-grid{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr}
  .cta-points{justify-content:center}
}
@media (max-width: 1024px){
  .audience-section .audience-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  }
}
@media (max-width: 720px){
  .header-inner{flex-direction:column;gap:12px;padding:12px 0}
  .nav{width:100%;justify-content:center}
  .hero{padding:72px 0 56px}
  .section{padding:56px 0}
  .section-title{font-size:28px}
  .hero-title{font-size:34px}
  .steps{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .cta-points{flex-direction:column}
  .waitlist-row{flex-direction:column}
}
@media (max-width: 900px){
  .audience-section .audience-grid{grid-template-columns:1fr}
  .audience-section .audience-card{padding:26px}
  .audience-card-primary h3{font-size:24px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}