:root{
  --bg:#FAFAF8;
  --white:#FFFFFF;
  --indigo:#2d2d6b;
  --indigo-light:#4a4a8a;
  --text:#1a1a2e;
  --text-secondary:#555566;
  --text-muted:#888899;
  --line:rgba(0,0,0,.08);
  --card-shadow:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --card-shadow-hover:0 4px 12px rgba(0,0,0,.08);
  --indigo-tint:rgba(45,45,107,.06);
  --indigo-tint-hover:rgba(45,45,107,.04);
  --indigo-tint-border:rgba(45,45,107,.3);
  --radius:12px;
  --max:1100px;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ====== DARK THEME ====== */
[data-theme="dark"]{
  --bg:#121220;
  --white:#1a1a2e;
  --indigo:#7b7bcc;
  --indigo-light:#9595dd;
  --text:#e8e8f0;
  --text-secondary:#a0a0b8;
  --text-muted:#707088;
  --line:rgba(255,255,255,.08);
  --card-shadow:0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
  --card-shadow-hover:0 4px 12px rgba(0,0,0,.3);
  --indigo-tint:rgba(123,123,204,.12);
  --indigo-tint-hover:rgba(123,123,204,.08);
  --indigo-tint-border:rgba(123,123,204,.3);
}

/* Smooth transition when toggling theme (scoped to [data-theme] so no animation on initial load) */
[data-theme] body,
[data-theme] .topbar,
[data-theme] .card,
[data-theme] .founder-card,
[data-theme] .founders-section,
[data-theme] .contact-section,
[data-theme] input,
[data-theme] textarea,
[data-theme] select{
  transition:background .3s, color .3s, border-color .3s, box-shadow .3s;
}

@media(prefers-reduced-motion:reduce){
  [data-theme] body,
  [data-theme] .topbar,
  [data-theme] .card,
  [data-theme] .founder-card,
  [data-theme] .founders-section,
  [data-theme] .contact-section,
  [data-theme] input,
  [data-theme] textarea,
  [data-theme] select{
    transition:none;
  }
}

/* ====== THEME TOGGLE ====== */
.theme-toggle{
  width:34px; height:34px; border-radius:6px;
  border:1px solid var(--line); background:transparent;
  cursor:pointer; display:grid; place-items:center;
  color:var(--text-secondary);
  transition:color .15s, border-color .15s;
}
.theme-toggle:hover{color:var(--indigo); border-color:var(--indigo)}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon{width:18px; height:18px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

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

/* ====== PERSONA OVERLAY ====== */
.persona-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.persona-overlay.visible{
  opacity:1; visibility:visible;
}
.persona-overlay-inner{
  text-align:center;
  padding:48px 32px;
  max-width:600px; width:100%;
}
.persona-overlay-inner h2{
  font-size:28px; font-weight:700; color:#fff;
  margin-bottom:32px; letter-spacing:-.3px;
}
.persona-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:24px;
}
.persona-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:32px 24px; border-radius:var(--radius);
  background:var(--white); border:2px solid var(--line);
  cursor:pointer; transition:border-color .2s, transform .2s, box-shadow .2s;
  font-family:var(--sans); text-align:center;
  color:var(--text);
}
.persona-card:hover{
  border-color:var(--indigo);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.persona-card svg{color:var(--indigo); flex:none}
.persona-card strong{font-size:16px; font-weight:700}
.persona-card span{font-size:13px; color:var(--text-secondary); line-height:1.5}
.persona-skip{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:500;
  color:rgba(255,255,255,.7);
  transition:color .15s;
}
.persona-skip:hover{color:#fff}
@media(max-width:640px){
  .persona-cards{grid-template-columns:1fr}
  .persona-overlay-inner{padding:32px 20px}
  .persona-overlay-inner h2{font-size:22px}
}

/* ====== PERSONA TOGGLE ====== */
.persona-toggle{
  display:none;
  align-items:center;
  padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:600;
  font-family:var(--sans);
  background:var(--indigo-tint); color:var(--indigo);
  border:1px solid var(--indigo-tint-border);
  cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
.persona-toggle:hover{background:var(--indigo); color:#fff}
html[data-persona] .persona-toggle{display:inline-flex}
@media(max-width:860px){
  .persona-toggle{display:none !important}
}

/* ====== PERSONA CONTENT VISIBILITY ====== */
[data-persona-content]{display:none}
html:not([data-persona]) [data-persona-content="default"]{display:grid}
html[data-persona="startup"] [data-persona-content="startup"]{display:grid}
html[data-persona="enterprise"] [data-persona-content="enterprise"]{display:grid}

/* ====== TOPBAR ====== */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:36px; height:36px; border-radius:10px;
  object-fit:contain;
}
.brand-text h1{margin:0; font-size:15px; font-weight:700; letter-spacing:.3px; color:var(--indigo)}
.brand-text span{display:block; font-size:11px; color:var(--text-muted); margin-top:1px}

.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-size:13px; font-weight:500; color:var(--text-secondary);
  padding:6px 12px; border-radius:6px;
  transition:color .15s, background .15s;
}
.nav-links a:hover{color:var(--indigo); background:var(--indigo-tint-hover)}
.nav-links a.active{color:var(--indigo); font-weight:600}

.nav-right{display:flex; align-items:center; gap:10px}

/* Language toggle */
.lang-toggle{
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:6px;
  overflow:hidden; font-size:12px; font-weight:600;
}
.lang-toggle button{
  padding:5px 10px; border:none; background:transparent;
  color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:600;
  font-family:var(--sans); transition:all .15s;
}
.lang-toggle button.active{background:var(--indigo); color:#fff}

/* Currency toggle */
.currency-toggle{
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:6px;
  overflow:hidden; font-size:12px; font-weight:600;
}
.currency-toggle button{
  padding:5px 10px; border:none; background:transparent;
  color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:600;
  font-family:var(--sans); transition:all .15s;
}
.currency-toggle button.active{background:var(--indigo); color:#fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border-radius:8px;
  font-weight:600; font-size:13px; font-family:var(--sans);
  cursor:pointer; transition:all .15s; border:none;
  white-space:nowrap;
}
.btn-primary{
  background:var(--indigo); color:#fff;
}
.btn-primary:hover{background:var(--indigo-light)}
.btn-outline{
  background:transparent; color:var(--indigo);
  border:1px solid var(--indigo);
}
.btn-outline:hover{background:var(--indigo-tint-hover)}
.btn-ghost{
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--indigo); color:var(--indigo)}

.mobile-menu-btn{display:none; background:none; border:none; cursor:pointer; padding:4px}

@media(max-width:860px){
  .nav-links{display:none}
  .mobile-menu-btn{display:block}
  .nav-right .btn{display:none}
}

/* ====== SECTIONS ====== */
section{padding:96px 0 64px}
section:first-of-type{padding-top:130px}

.section-label{
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--indigo);
  margin-bottom:12px;
}
.section-title{
  font-size:36px; font-weight:700; letter-spacing:-.5px;
  line-height:1.15; color:var(--text);
  margin-bottom:16px;
}
.section-subtitle{
  font-size:16px; color:var(--text-secondary);
  max-width:600px; line-height:1.65;
}

/* ====== SECTION ILLUSTRATIONS ====== */
.section-illustration{width:100%; overflow:hidden; margin-bottom:24px}
.section-illustration svg{width:100%; height:auto; display:block}
.hero-illustration{margin-bottom:32px}
@media(max-width:640px){
  .hero-illustration{max-height:120px}
  .services-illustration{max-height:100px}
  .method-illustration{max-height:80px}
}

/* ====== HERO ====== */
.hero{padding:140px 0 80px; text-align:center}
.hero .container{max-width:800px}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:999px;
  background:var(--indigo-tint); color:var(--indigo);
  font-size:13px; font-weight:600;
  margin-bottom:24px;
}
.hero-badge svg{flex:none}
.hero-title{
  font-size:52px; font-weight:800; letter-spacing:-1.5px;
  line-height:1.08; color:var(--text);
  margin-bottom:20px;
}
.hero-lead{
  font-size:18px; color:var(--text-secondary);
  max-width:560px; margin:0 auto 32px; line-height:1.65;
}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:32px}
.hero-metrics{
  display:flex; gap:48px; justify-content:center; flex-wrap:wrap;
  padding-top:32px; border-top:1px solid var(--line);
}
.hero-metric{text-align:center}
.hero-metric b{display:block; font-size:20px; font-weight:800; color:var(--indigo); letter-spacing:-.3px}
.hero-metric span{font-size:13px; color:var(--text-muted)}

/* Logo strip */
.logo-strip{
  padding:40px 0 0;
  text-align:center;
}
.logo-strip p{font-size:13px; color:var(--text-muted); margin-bottom:20px; font-weight:500}
.logo-row{
  display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap;
}
.logo-item{
  font-size:14px; font-weight:600; color:var(--text-muted);
  opacity:.7; transition:opacity .15s;
}
.logo-item:hover{opacity:1}

@media(max-width:640px){
  .hero{padding:120px 0 60px}
  .hero-title{font-size:36px; letter-spacing:-1px}
  .hero-lead{font-size:16px}
  .hero-metrics{gap:32px}
}

/* ====== CARDS ====== */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--card-shadow);
  transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:var(--card-shadow-hover); transform:translateY(-1px)}
.card h3{font-size:18px; font-weight:700; margin-bottom:8px; letter-spacing:-.2px}
.card p{color:var(--text-secondary); font-size:14px; line-height:1.6}

.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}

/* ====== FOUNDERS ====== */
.founders-section{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.founder-card{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px;
}
.founder-avatar{
  width:56px; height:56px; border-radius:14px; flex:none;
  background:var(--indigo);
  display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:18px;
}
.founder-avatar img{
  width:56px; height:56px; border-radius:14px;
  object-fit:cover;
}
.founder-info h4{font-size:17px; font-weight:700; margin-bottom:2px}
.founder-info .role{font-size:13px; color:var(--text-muted); margin-bottom:10px}
.founder-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.chip{
  display:inline-flex; padding:3px 10px; border-radius:999px;
  background:var(--indigo-tint); color:var(--indigo);
  font-size:11px; font-weight:600;
}
.founder-info p{font-size:14px; color:var(--text-secondary); line-height:1.6}

@media(max-width:640px){
  .founder-card{flex-direction:column}
}

/* ====== RESULTS ====== */
.result-card{position:relative; overflow:hidden}
.result-card .result-number{
  font-size:28px; font-weight:800; color:var(--indigo);
  letter-spacing:-.5px; margin-bottom:8px;
}
.result-card h3{font-size:15px; font-weight:600; margin-bottom:6px}
.result-card p{font-size:14px; color:var(--text-secondary); line-height:1.6}

/* ====== SERVICES ====== */
.service-card h3{font-size:18px; font-weight:700; margin-bottom:10px; color:var(--text)}
.service-card p{margin-bottom:14px}
.service-card ul{list-style:none; padding:0}
.service-card ul li{
  font-size:14px; color:var(--text-secondary);
  padding:5px 0; padding-left:18px; position:relative;
}
.service-card ul li::before{
  content:""; position:absolute; left:0; top:12px;
  width:6px; height:6px; border-radius:50%;
  background:var(--indigo); opacity:.4;
}

/* ====== HOW WE WORK ====== */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:860px){.steps-grid{grid-template-columns:1fr}}
.step-card{text-align:center; padding:36px 28px}
.step-number{
  width:40px; height:40px; border-radius:10px;
  background:var(--indigo-tint); color:var(--indigo);
  font-weight:800; font-size:16px;
  display:inline-grid; place-items:center;
  margin-bottom:16px;
}
.step-card h3{font-size:18px; font-weight:700; margin-bottom:8px}
.step-card p{font-size:14px; color:var(--text-secondary); line-height:1.6}

/* ====== PRICING ====== */
.pricing-grid{grid-template-columns:repeat(2,1fr); gap:20px; max-width:700px; margin:0 auto}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}
.price-card{padding:32px; position:relative}
.price-card.featured{border-color:var(--indigo); border-width:2px}
.price-tag{
  display:inline-flex; padding:4px 12px; border-radius:999px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  background:var(--indigo-tint); color:var(--indigo);
  margin-bottom:16px;
}
.price-card.featured .price-tag{background:var(--indigo); color:#fff}
.price-card h3{font-size:18px; font-weight:700; margin-bottom:6px}
.price-amount{
  font-size:28px; font-weight:800; color:var(--indigo);
  letter-spacing:-.5px; margin:12px 0 16px;
}
.price-amount small{font-size:14px; color:var(--text-muted); font-weight:500}
.price-card ul{list-style:none; padding:0}
.price-card ul li{
  font-size:14px; color:var(--text-secondary);
  padding:5px 0; padding-left:20px; position:relative;
}
.price-card ul li::before{
  content:""; position:absolute; left:0; top:11px;
  width:8px; height:8px; border-radius:50%;
  border:2px solid var(--indigo); opacity:.3;
}
.pricing-note{text-align:center; margin-top:28px; font-size:15px; color:var(--text-secondary)}
.pricing-note a{color:var(--indigo); font-weight:600; border-bottom:1px solid var(--indigo-tint-border)}
.pricing-note a:hover{border-color:var(--indigo)}

/* ====== CONTACT ====== */
.contact-section{background:var(--white); border-top:1px solid var(--line)}
.contact-form{max-width:540px; margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px}
input, textarea, select{
  width:100%;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  border-radius:8px;
  padding:10px 14px;
  font-family:var(--sans);
  font-size:14px;
  transition:border-color .15s;
  outline:none;
}
input:focus, textarea:focus, select:focus{border-color:var(--indigo)}
textarea{min-height:100px; resize:vertical}
select{cursor:pointer; appearance:auto}

.form-footer{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:8px;
}
.form-footer span{font-size:12px; color:var(--text-muted)}

/* ====== FOOTER ====== */
.site-footer{
  padding:32px 0;
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
  border-top:1px solid var(--line);
}
.site-footer a{color:var(--indigo); font-weight:500}
.site-footer a:hover{text-decoration:underline}

/* ====== REVEAL ANIMATION ====== */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.on{opacity:1; transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}