/* ============================================================================
   Kokarako — marketing site styles (futuristic dark theme)
   ============================================================================ */
:root{
  --bg:#070b16; --bg2:#0b1124;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#eaf0fb; --muted:#9aa7c2; --faint:#6b7896;
  --amber:#f59e0b; --amber2:#fbbf24; --orange:#fb923c;
  --cyan:#22d3ee; --indigo:#6366f1; --violet:#a855f7;
  --radius:18px; --maxw:1140px;
  --grad-brand:linear-gradient(135deg,#fbbf24,#f59e0b 45%,#fb923c);
  --grad-text:linear-gradient(120deg,#fde68a,#f59e0b 40%,#22d3ee 90%);
  --glow-amber:0 0 0 1px rgba(245,158,11,.35),0 14px 40px -10px rgba(245,158,11,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
/* ambient background glows + grid */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -8%, rgba(245,158,11,.20), transparent 60%),
    radial-gradient(55vw 55vw at 92% 4%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(70vw 50vw at 50% 110%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle at 50% 0,#000,transparent 75%);
}
h1,h2,h3,.brand b{font-family:"Space Grotesk","Inter",sans-serif; letter-spacing:-.02em; line-height:1.12}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.grad-text{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(7,11,22,.6); border-bottom:1px solid var(--border)}
nav .container{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:20px; background:var(--grad-brand); box-shadow:var(--glow-amber)}
.brand b{font-size:17px}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{color:var(--muted); font-size:14.5px; font-weight:500; transition:.2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex; align-items:center; gap:12px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px;
  font-weight:600; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:.22s; white-space:nowrap}
.btn-primary{background:var(--grad-brand); color:#1a1206; box-shadow:var(--glow-amber)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(245,158,11,.5),0 20px 50px -12px rgba(245,158,11,.7)}
.btn-ghost{background:var(--glass); border-color:var(--border-2); color:var(--text)}
.btn-ghost:hover{background:var(--glass-2); border-color:var(--amber)}
.btn-sm{padding:9px 16px; font-size:13.5px; border-radius:10px}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding:84px 0 60px; text-align:center}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  background:var(--glass); border:1px solid var(--border-2); color:var(--muted);
  font-size:13px; font-weight:600; margin-bottom:26px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.hero h1{font-size:clamp(38px,6.5vw,72px); font-weight:700}
.hero p.sub{max-width:660px; margin:22px auto 0; color:var(--muted); font-size:clamp(16px,2vw,19px)}
.hero-cta{display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap}
.hero-note{margin-top:16px; color:var(--faint); font-size:13px}

/* glass dashboard mockup */
.mock{max-width:920px; margin:64px auto 0; border-radius:24px; padding:14px;
  background:linear-gradient(180deg,var(--glass-2),var(--glass)); border:1px solid var(--border-2);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8); animation:float 7s ease-in-out infinite}
.mock-bar{display:flex; gap:7px; padding:6px 10px 12px}
.mock-bar i{width:11px;height:11px;border-radius:50%;display:block}
.mock-bar i:nth-child(1){background:#ff5f57}.mock-bar i:nth-child(2){background:#febc2e}.mock-bar i:nth-child(3){background:#28c840}
.mock-body{border-radius:16px; background:rgba(4,7,16,.7); border:1px solid var(--border); padding:18px;
  display:flex; flex-direction:column; gap:14px}
.mock-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.mock-tile{background:var(--glass); border:1px solid var(--border); border-radius:13px; padding:14px; text-align:left}
.mock-tile small{color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.mock-tile b{display:block; margin-top:6px; font-size:21px; font-family:"Space Grotesk"}
.mock-tile.t1 b{color:var(--amber2)} .mock-tile.t2 b{color:var(--cyan)} .mock-tile.t3 b{color:#34d399} .mock-tile.t4 b{color:var(--violet)}
/* lower: revenue chart + active-batches list */
.mock-lower{display:grid; grid-template-columns:1.5fr 1fr; gap:12px}
.mock-panel{background:var(--glass); border:1px solid var(--border); border-radius:13px; padding:14px 15px}
.mp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.mp-head span:first-child{color:var(--muted); font-size:12.5px; font-weight:600}
.mp-tag{font-size:11px; font-weight:700; color:#34d399; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.25); padding:2px 8px; border-radius:999px}
.bars{display:flex; align-items:flex-end; gap:9px; height:108px}
.bars span{flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--amber2),rgba(245,158,11,.22)); box-shadow:0 0 14px -4px rgba(245,158,11,.55)}
.bars span:last-child{background:linear-gradient(180deg,var(--cyan),rgba(34,211,238,.2)); box-shadow:0 0 14px -4px rgba(34,211,238,.6)}
.ml-row{display:flex; align-items:center; gap:10px; padding:7px 0}
.ml-row+.ml-row{border-top:1px solid var(--border)}
.ml-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.22);flex-shrink:0}
.ml-txt{flex:1; min-width:0}
.ml-txt b{display:block; font-size:12.5px; color:var(--text); font-family:"Inter"; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ml-txt small{color:var(--faint); font-size:11px}
.ml-bar{width:58px; height:6px; border-radius:999px; background:var(--glass-2); overflow:hidden; flex-shrink:0}
.ml-bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--amber),var(--amber2))}

/* ── Sections ────────────────────────────────────────────────────────────── */
section{padding:72px 0}
.eyebrow{color:var(--amber); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-align:center}
.section-title{font-size:clamp(28px,4vw,44px); font-weight:700; text-align:center; margin:12px auto 0; max-width:18ch}
.section-sub{color:var(--muted); text-align:center; max-width:620px; margin:16px auto 0; font-size:16.5px}

/* features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px}
.card{background:var(--glass); border:1px solid var(--border); border-radius:var(--radius); padding:26px; position:relative; overflow:hidden; transition:.25s}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(245,158,11,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.25s}
.card:hover{transform:translateY(-5px); background:var(--glass-2); border-color:transparent}
.card:hover::after{opacity:1}
.card .ico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:25px;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); margin-bottom:16px}
.card h3{font-size:18px; margin-bottom:8px}
.card p{color:var(--muted); font-size:14.5px}

/* pills */
.pills{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:44px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  background:var(--glass); border:1px solid var(--border-2); font-size:14px; font-weight:600; color:var(--text)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; counter-reset:s}
.step{background:var(--glass); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:relative}
.step::before{counter-increment:s; content:"0" counter(s); font-family:"Space Grotesk"; font-size:40px; font-weight:700;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:12px}
.step h3{font-size:18px; margin-bottom:7px} .step p{color:var(--muted); font-size:14.5px}

/* security callout */
.security{background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(34,211,238,.06));
  border:1px solid var(--border-2); border-radius:26px; padding:48px; text-align:center; position:relative; overflow:hidden}
.security .lock{font-size:40px; margin-bottom:16px}
.security h2{font-size:clamp(26px,3.5vw,38px)}
.security p{color:var(--muted); max-width:640px; margin:16px auto 0; font-size:16.5px}

/* cta */
.cta{text-align:center; background:radial-gradient(60% 100% at 50% 0,rgba(245,158,11,.16),transparent),var(--glass);
  border:1px solid var(--border-2); border-radius:28px; padding:60px 30px; margin-bottom:10px}
.cta h2{font-size:clamp(28px,4.5vw,48px)}
.cta p{color:var(--muted); margin:14px auto 30px; max-width:520px; font-size:17px}

/* footer */
footer{border-top:1px solid var(--border); padding:46px 0 40px; margin-top:40px}
footer .row{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
footer .links{display:flex; gap:24px; flex-wrap:wrap}
footer .links a{color:var(--muted); font-size:14px; transition:.2s}
footer .links a:hover{color:var(--amber)}
footer .copy{color:var(--faint); font-size:13px; margin-top:22px}

/* ── Legal / privacy page ────────────────────────────────────────────────── */
.legal{max-width:820px; margin:0 auto; padding:54px 22px 90px}
.legal-head{text-align:center; margin-bottom:14px}
.legal-head h1{font-size:clamp(30px,5vw,46px)}
.legal-head .updated{color:var(--faint); font-size:13.5px; margin-top:10px}
.lang-toggle{display:flex; gap:6px; justify-content:center; margin:26px auto 40px; width:max-content;
  background:var(--glass); border:1px solid var(--border-2); border-radius:999px; padding:5px}
.lang-btn{padding:8px 18px; border-radius:999px; background:transparent; border:none; color:var(--muted);
  font-weight:600; font-size:14px; cursor:pointer; transition:.2s; font-family:inherit}
.lang-btn.active{background:var(--grad-brand); color:#1a1206}
.legal-body h2{font-size:21px; margin:34px 0 10px; color:var(--text)}
.legal-body p{color:var(--muted); margin:10px 0; font-size:15.5px}
.legal-body ul{color:var(--muted); margin:10px 0 10px 4px; padding-left:22px; font-size:15.5px}
.legal-body li{margin:7px 0}
.legal-body strong{color:var(--text)}
.legal-body .intro{color:#c4cfe6; font-size:16.5px}
[lang="ml"] .legal-body, .ml-text{font-family:"Noto Sans Malayalam","Inter",sans-serif; line-height:1.85}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1; transform:none}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* responsive */
@media(max-width:860px){
  .features,.steps{grid-template-columns:1fr}
  .mock-tiles{grid-template-columns:repeat(2,1fr)}
  .mock-lower{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(max-width:520px){
  .mock-tiles{grid-template-columns:1fr 1fr}
  .security,.cta{padding:38px 20px}
  .btn{padding:11px 18px}
}