/* ==========================================================================
   KeepBerry landing — v2 (2026-09-17)
   Vibrant night hero, real app screenshots in iPhone 16 Pro / iMac frames.
   Brand: green #44C480 + indigo, Plus Jakarta Sans (headings) / Nunito (body).
   Responsive: ≥1180 desktop · 760–1179 tablet · <760 phone.
   ========================================================================== */
:root{
  --jk:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nu:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ink:#0A0F1C; --ink2:#334155; --muted:#64748B; --line:#E5E9F0;
  --g:#44C480; --night:#060A14;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--nu);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.jk{font-family:var(--jk)}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin:0 auto;position:relative}
section[id]{scroll-margin-top:80px}

/* ── buttons & pills ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font:800 16px var(--jk);white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid #A7F3D0;outline-offset:3px}
.btn-g{background:linear-gradient(135deg,#5CE39A,#2FB36B);color:#04150B;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 14px 40px rgba(68,196,128,.55)}
.btn-g:hover{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 18px 50px rgba(68,196,128,.7)}
.btn-w{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.24)}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-lg{min-height:62px;padding:0 34px;font-size:17px}
.btn.is-busy{opacity:.7;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;font:800 12.5px var(--jk);letter-spacing:.7px;text-transform:uppercase}
.grad{background:linear-gradient(92deg,#5CE39A 0%,#34D399 30%,#60A5FA 62%,#A78BFA 85%,#F472B6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-gi{background:linear-gradient(90deg,#16A34A,#6366F1);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-rv{background:linear-gradient(90deg,#EF4444,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font:800 clamp(38px,5vw,58px)/1.04 var(--jk);letter-spacing:-.04em}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card{background:#fff;border:1px solid var(--line);border-radius:26px}

/* ── device frames ───────────────────────────────────────────────────── */
.ip{position:relative;width:300px;border-radius:15.5%/7.2%;padding:0;
    background:linear-gradient(145deg,#9C978F,#45433F 28%,#1C1C1E 52%,#57544F 82%,#A7A199);
    box-shadow:0 0 0 1.5px rgba(255,255,255,.10) inset,0 40px 80px rgba(0,0,0,.45),0 14px 28px rgba(0,0,0,.25)}
.ip::before{content:"";position:absolute;inset:.9%;border-radius:15%/6.9%;background:#040404}
/* The frame takes its height from the screenshot (height:auto), so the image
   is never cropped. Using aspect-ratio on the padded frame made the inner box
   taller than a real screenshot, and object-fit:cover then cut both sides. */
/* Bezel = margin on the screenshot. Percent PADDING on .ip would resolve
   against the parent's width (the whole stage), not the phone. Percent
   margins on this child resolve against .ip's width, which is what we want. */
.ip picture{position:relative;display:block;margin:2.7%}
.ip img{position:relative;display:block;width:100%;height:auto;border-radius:13.4%/6.2%}
.ip .island{position:absolute;top:3.4%;left:50%;transform:translateX(-50%);width:30%;height:3.9%;border-radius:99px;background:#000;z-index:2}
.ip .b1,.ip .b2,.ip .b3{position:absolute;width:1.1%;min-width:2px;border-radius:3px;background:#77736C}
.ip .b1{left:-.9%;top:19%;height:6%} .ip .b2{left:-.9%;top:28%;height:9%} .ip .b3{right:-.9%;top:26%;height:11%}

.adr{position:relative;width:300px;border-radius:9.5%/4.3%;
    background:linear-gradient(150deg,#4A4D52,#1F2023 35%,#141517 60%,#3A3C40);
    box-shadow:0 0 0 1.5px rgba(255,255,255,.08) inset,0 40px 80px rgba(0,0,0,.45),0 14px 28px rgba(0,0,0,.25)}
.adr picture{position:relative;display:block;margin:2.2%}
.adr img{display:block;width:100%;height:auto;border-radius:8%/3.6%}
/* Screenshot already contains the punch-hole camera, so none is drawn here. */
.adr .pw,.adr .vol{position:absolute;right:-1%;width:1.2%;min-width:2px;border-radius:0 3px 3px 0;background:#5B5E63}
.adr .pw{top:30%;height:8%} .adr .vol{top:17%;height:11%}

.mbp{position:relative;width:860px;max-width:100%}
.mbp .lid{position:relative;padding:1.5% 1.5% 2.2%;border-radius:22px 22px 6px 6px;background:#0B0B0D;
  box-shadow:0 0 0 2px #2E2F33,0 0 0 3px #8D9096,0 50px 100px rgba(0,0,0,.45)}
.mbp .lid::before{content:"";position:absolute;top:1.5%;left:50%;transform:translateX(-50%);width:14%;height:2.6%;min-height:12px;border-radius:0 0 10px 10px;background:#0B0B0D;z-index:2}
.mbp .screen{border-radius:6px;overflow:hidden;background:#000;aspect-ratio:16/10}
.mbp .screen picture,.mbp .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.mbp .base{position:relative;width:114%;margin-left:-7%;height:0;padding-bottom:2.4%;border-radius:0 0 22px 22px/0 0 100% 100%;
  background:linear-gradient(180deg,#E9EBEE 0%,#C9CCD1 45%,#9A9DA3 100%);box-shadow:0 30px 50px rgba(0,0,0,.4)}
.mbp .base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:15%;height:45%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#8E9196,#B7BABF)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;transition:background .25s ease,box-shadow .25s ease}
.nav.is-stuck{background:rgba(6,10,20,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav .wrap{height:76px;display:flex;align-items:center;gap:36px;color:#fff}
.logo{display:flex;align-items:center;gap:11px;font:800 23px var(--jk);letter-spacing:-.6px;background:linear-gradient(90deg,#F472B6,#FBBF24 45%,#5CE39A);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo i{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#F472B6,#FBBF24 45%,#5CE39A);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(244,114,182,.42)}
.nav-links{display:flex;gap:28px;font:600 15.5px var(--jk);color:rgba(255,255,255,.75)}
.nav-links a:hover{color:#fff}
.nav-spacer{flex:1}
.nav-wa{font:700 15px var(--jk);color:rgba(255,255,255,.85)}
.nav .btn{min-height:46px;padding:0 22px;font-size:15px}
.nav-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:20px;cursor:pointer}
.nav-sheet{display:none}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;color:#fff;margin-top:-76px;padding-top:76px;background:
  radial-gradient(900px 600px at 78% 38%,rgba(99,102,241,.45),transparent 62%),
  radial-gradient(700px 560px at 12% 18%,rgba(68,196,128,.42),transparent 60%),
  radial-gradient(600px 420px at 55% 105%,rgba(236,72,153,.30),transparent 65%),var(--night)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%);pointer-events:none}
.hero-copy{text-align:center;padding:64px 0 0}
.hero h1{margin:26px auto 0;max-width:1080px;font-size:clamp(44px,7.4vw,92px);line-height:.98;letter-spacing:-.042em;font-weight:800}
.hero .lead{margin:26px auto 0;max-width:760px;color:rgba(255,255,255,.74)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hero-trust{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;margin-top:22px;font:700 14px var(--jk);color:rgba(255,255,255,.66)}
.stage{position:relative;height:760px;margin-top:60px}
.stage .mbp{position:absolute;left:50%;transform:translateX(-50%);top:92px}
.stage .ip,.stage .adr{position:absolute;width:236px;z-index:4}
.stage .ip.l{left:3%;top:262px;transform:rotate(-4deg)}
.stage .adr.r{right:3%;top:232px;width:240px;transform:rotate(4deg)}
.chip{position:absolute;z-index:6;border-radius:20px;padding:12px 16px;font:800 14px var(--jk);box-shadow:0 20px 50px rgba(0,0,0,.35);color:#fff;white-space:nowrap}
.chip-call{left:0;top:6px;border-radius:22px;padding:12px 14px;display:flex;align-items:center;gap:11px}
.chip-call .av{width:40px;height:40px;border-radius:99px;background:linear-gradient(135deg,#F59E0B,#EC4899);display:flex;align-items:center;justify-content:center;font:800 17px var(--jk)}
.chip-call small{display:block;font:600 12.5px var(--nu);color:rgba(255,255,255,.72)}
.chip-call .x,.chip-call .ok{width:34px;height:34px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-weight:800}
.chip-call .x{background:#EF4444} .chip-call .ok{background:#22C55E}
.chip-live{right:0;top:14px;border-radius:999px;padding:11px 18px}
.chip-live b{color:#4ADE80}
.chip-sec,.chip-lang{display:none}
.stats{border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);padding:40px 0;text-align:center;gap:20px}
.stats b{display:block;font:800 46px var(--jk)}
.stats span{color:rgba(255,255,255,.62);font-weight:700}

/* ── showcases ───────────────────────────────────────────────────────── */
.show{padding:130px 0;overflow:hidden}
.show .wrap{display:flex;align-items:center;gap:90px}
.show-media{position:relative;flex:0 0 520px;height:640px}
.show-copy{flex:1}
.show-copy .h2{margin-top:18px}
.show-copy .lead{margin-top:20px;color:var(--ink2)}
.ticks{display:grid;gap:14px;margin-top:30px}
.tick{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5;color:var(--ink2)}
.tick b{font-family:var(--jk);color:var(--ink)}
.tick i{flex-shrink:0;width:26px;height:26px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;color:#fff;font-size:14px;margin-top:1px}
.show-calls{background:radial-gradient(700px 500px at 20% 50%,rgba(239,68,68,.14),transparent 60%),radial-gradient(600px 500px at 35% 40%,rgba(99,102,241,.14),transparent 60%),#fff}
.show-calls .ip.a{position:absolute;left:40px;top:0;width:290px}
.show-calls .ip.b{position:absolute;left:240px;top:60px;width:270px;transform:rotate(5deg)}
.show-growth{background:linear-gradient(135deg,#ECFDF3,#EEF2FF 60%,#FDF2F8)}
.show-growth .show-media{flex-basis:600px}
.show-growth .ip.a{position:absolute;left:0;top:50px;width:260px;transform:rotate(-5deg)}
.show-growth .ip.b{position:absolute;left:170px;top:0;width:290px;z-index:2}
.show-growth .ip.c{position:absolute;left:360px;top:60px;width:250px;transform:rotate(6deg)}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.mini .card{padding:18px}
.mini em{font-style:normal;font-size:26px}
.mini b{display:block;font-family:var(--jk);margin-top:6px}
.mini span{color:var(--muted);font-size:14.5px}

.desk{padding:130px 0 150px;color:#fff;overflow:hidden;text-align:center;background:radial-gradient(900px 500px at 50% 100%,rgba(68,196,128,.35),transparent 60%),radial-gradient(700px 500px at 85% 10%,rgba(139,92,246,.35),transparent 60%),var(--night)}
.desk .h2{margin-top:18px;font-size:clamp(38px,5.4vw,64px)}
.desk .lead{margin:18px auto 0;max-width:720px;color:rgba(255,255,255,.72)}
.desk-stage{position:relative;height:660px;margin-top:60px}
.desk-stage .mbp{position:absolute;left:50%;transform:translateX(-50%);top:10px;width:980px}
.desk-stage .chip{text-align:left}
.desk-stage .chip b{display:block;font-size:28px}
.desk-stage .chip span{font-weight:700;color:rgba(255,255,255,.76)}
.desk-stage .c1{left:0;top:80px} .desk-stage .c2{right:0;top:300px}

/* ── features ────────────────────────────────────────────────────────── */
.features{padding:120px 0}
.center{text-align:center}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.feat{padding:24px}
.feat .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px}
.feat h3{margin-top:14px;font-size:18px}
.feat p{color:var(--muted);margin-top:4px}

/* ── demo: four platform cards ───────────────────────────────────────── */
.demo{padding:0 0 120px}
.demo-band{position:relative;overflow:hidden;border-radius:40px;padding:64px 56px 56px;color:#fff;background:linear-gradient(120deg,#0B5E36,#15924F 25%,#10B981 45%,#4F46E5 78%,#9333EA)}
.demo-band::before,.demo-band::after{content:"";position:absolute;border-radius:999px;pointer-events:none}
.demo-band::before{right:-140px;top:-180px;width:560px;height:560px;background:rgba(255,255,255,.08)}
.demo-band::after{left:30%;bottom:-260px;width:480px;height:480px;background:rgba(255,255,255,.06)}
.demo-head{position:relative;text-align:center;max-width:760px;margin:0 auto}
.demo-head .h2{margin-top:16px;font-size:clamp(36px,4.6vw,58px)}
.demo-head .lead{margin-top:14px;color:rgba(255,255,255,.88)}
.demo-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px;align-items:stretch}
.dcard{display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:26px;padding:22px;box-shadow:0 24px 60px rgba(8,20,40,.28);transition:transform .2s ease,box-shadow .2s ease}
.dcard:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(8,20,40,.36)}
.dcard-top{display:flex;align-items:center;gap:12px}
.dicon{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.dcard h3{font-size:19px;line-height:1.1}
.dtag{display:inline-block;margin-top:5px;font:700 12px var(--jk);color:var(--muted)}
.dqr{margin:18px auto 0;width:100%;max-width:200px;aspect-ratio:1;padding:10px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px #E5E9F0,0 0 0 7px #ECFDF3}
.dqr img{width:100%;height:100%;border-radius:10px}
.dhint{margin-top:14px;text-align:center;font:700 14px var(--jk);color:var(--ink2)}
.dhint-phone{display:none}
.dvisual{flex:1;margin-top:18px;display:flex;flex-direction:column;gap:14px}
.durl{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;background:#F1F5F9;font:700 13px var(--jk);color:var(--ink2)}
.durl i{width:8px;height:8px;border-radius:9px;background:#CBD5E1}
.durl i:nth-child(1){background:#F87171}.durl i:nth-child(2){background:#FBBF24}.durl i:nth-child(3){background:#34D399}
.durl span{margin-left:6px}
.dfile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#F0F9FF;border:1px solid #BAE6FD}
.dfile-ic{width:34px;height:34px;border-radius:10px;background:#0284C7;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.dfile div{min-width:0}
.dfile b{display:block;font:800 13.5px var(--jk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfile small{color:var(--muted);font-weight:700}
.dlogin{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:#FDF2F8;border:1px solid #FBCFE8;font:700 13.5px var(--jk);color:var(--ink2)}
.dlogin b{color:#BE185D}
.dlist{list-style:none;display:grid;gap:9px;font-size:14.5px;color:var(--ink2)}
.dlist li{display:flex;gap:9px;align-items:center}
.dlist li::before{content:"✓";width:20px;height:20px;border-radius:99px;background:#DCFCE7;color:#15803D;display:flex;align-items:center;justify-content:center;font:800 11px var(--jk);flex-shrink:0}
/* Buttons sit on the card floor so all four line up whatever sits above. */
.dbtn{margin-top:auto;width:100%;min-height:50px;font-size:15px}
.dvisual,.dhint{margin-bottom:20px}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(10,15,28,.25)}
.btn-dark:hover{background:#1E293B}
.dmeta{margin-top:10px;text-align:center;font:600 12.5px var(--nu);color:var(--muted)}
.dcard-android{box-shadow:0 0 0 3px #3DDC84,0 24px 60px rgba(8,20,40,.28)}

/* ── pricing ─────────────────────────────────────────────────────────── */
.pricing{padding:0 0 120px}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px;align-items:stretch}
.tier{padding:26px;display:flex;flex-direction:column}
.tier h3{font-size:19px}
.tier .scale-num{font:800 44px var(--jk);margin-top:8px}
.tier .for{color:var(--muted);font-size:14.5px;min-height:44px}
.tier ul{list-style:none;display:grid;gap:9px;margin-top:14px;color:var(--ink2);font-size:14.5px;flex:1}
.tier .btn{margin-top:22px;width:100%;min-height:48px}
.tier-hot{position:relative;padding:34px 26px 26px;border-radius:28px;color:#fff;transform:scale(1.06);background:linear-gradient(160deg,#15924F,#10B981 40%,#4F46E5);box-shadow:0 30px 70px rgba(79,70,229,.4)}
.tier-hot .for,.tier-hot ul{color:rgba(255,255,255,.9)}
.tier-hot .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 15px;border-radius:999px;background:linear-gradient(90deg,#FDE047,#FB923C);color:#1C1917;font:800 12.5px var(--jk)}
.tier-dark{padding:26px;border-radius:26px;background:var(--night);color:#fff;display:flex;flex-direction:column}
.tier-dark .scale-num{font-size:34px;margin-top:14px;line-height:1.1}
.tier-dark .for,.tier-dark ul{color:rgba(255,255,255,.72)}
.price-note{text-align:center;margin-top:34px;color:var(--muted);font-weight:700}

/* ── faq ─────────────────────────────────────────────────────────────── */
.faq{padding:0 0 120px}
.faq .wrap{display:flex;gap:60px;align-items:flex-start}
.faq-side{flex:0 0 380px;position:sticky;top:100px}
.faq-side .h2{font-size:clamp(34px,3.8vw,44px);margin-top:18px}
.faq-side .lead{margin-top:14px;color:var(--ink2)}
.faq-side .btn{margin-top:22px}
.faq-list{flex:1;display:grid;gap:12px}
.faq-list details{border:1px solid var(--line);border-radius:18px;background:#fff;transition:background .2s ease,border-color .2s ease}
.faq-list details[open]{background:#ECFDF3;border-color:#BBF7D0}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 24px;font:700 16.5px var(--jk)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:22px;line-height:1;color:var(--muted)}
.faq-list details[open] summary::after{content:"−";color:#15803D}
.faq-list details p{padding:0 24px 22px;color:var(--ink2);line-height:1.65}

/* ── final ───────────────────────────────────────────────────────────── */
.final{padding:120px 0 60px;color:#fff;text-align:center;overflow:hidden;background:radial-gradient(700px 400px at 50% 0%,rgba(68,196,128,.4),transparent 65%),radial-gradient(600px 400px at 90% 100%,rgba(99,102,241,.35),transparent 60%),var(--night)}
.final h2{font:800 clamp(44px,6.6vw,80px)/1 var(--jk);letter-spacing:-.04em}
.final .lead{margin-top:20px;color:rgba(255,255,255,.72)}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:110px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-weight:700}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer nav a:hover{color:#fff}
.footer .logo{font-size:19px}
.footer .logo i{width:30px;height:30px;border-radius:9px}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;min-height:54px;padding:0 20px;border-radius:999px;background:#25D366;color:#fff;display:flex;align-items:center;gap:9px;font:800 15px var(--jk);box-shadow:0 14px 34px rgba(37,211,102,.5)}

/* reveal (only when JS is on — content is never hidden without JS) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn:hover{transform:none}}

/* ── tablet ──────────────────────────────────────────────────────────── */
@media (max-width:1179px){
  .nav-links{display:none}
  .stage{height:600px}
  .stage .mbp{width:640px;top:84px}
  .stage .ip,.stage .adr{width:180px}
  .stage .ip.l{left:0;top:250px} .stage .adr.r{right:0;top:224px;width:184px}
  .chip-live{display:none}
  .stats .wrap{grid-template-columns:repeat(3,1fr)}
  .show .wrap{gap:50px}
  .show-media{flex-basis:420px;height:560px}
  .show-calls .ip.a{left:0;width:250px} .show-calls .ip.b{left:170px;width:230px}
  .show-growth .show-media{flex-basis:440px}
  .show-growth .ip.a{width:200px} .show-growth .ip.b{left:120px;width:230px} .show-growth .ip.c{left:250px;width:190px}
  .desk-stage{height:520px} .desk-stage .mbp{width:760px}
  .desk-stage .chip{display:none}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .tier-hot{transform:none}
  .faq .wrap{flex-direction:column;gap:30px}
  .faq-side{position:static;flex-basis:auto}
}

/* ── phone ───────────────────────────────────────────────────────────── */
@media (max-width:759px){
  .wrap{width:calc(100% - 32px)}
  .nav .wrap{height:64px;gap:12px}
  .hero{margin-top:-64px;padding-top:64px}
  .nav-wa,.nav .btn{display:none}
  .nav-burger{display:flex;align-items:center;justify-content:center}
  .nav-sheet{position:fixed;inset:64px 0 auto 0;z-index:49;background:rgba(6,10,20,.97);padding:18px 16px 24px;flex-direction:column;gap:6px}
  .nav-sheet.open{display:flex}
  .nav-sheet a{color:#fff;font:700 18px var(--jk);padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-sheet .btn{margin-top:12px;border-bottom:0}
  .logo{font-size:20px} .logo i{width:34px;height:34px}
  .hero-copy{padding-top:36px}
  .hero-copy .pill{font-size:11px;letter-spacing:.3px;padding:7px 12px}
  .hero-cta .btn{width:100%}
  .hero-trust{font-size:13px}
  .stage{height:auto;margin-top:40px;padding:0 0 120px}
  .stage .mbp{position:relative;left:auto;top:0;transform:none;width:94%;margin:0 auto}
  .stage .ip,.stage .adr{width:29%}
  .stage .ip.l{left:1%;top:auto;bottom:0;transform:rotate(-5deg)}
  .stage .adr.r{right:1%;top:auto;bottom:10px;width:29%;transform:rotate(5deg)}
  .chip-call{display:none}
  .chip-call .av{width:36px;height:36px;font-size:15px}
  .chip-call .x,.chip-call .ok{width:32px;height:32px}
  .chip-live{display:none}
  .stats .wrap{grid-template-columns:repeat(2,1fr);padding:30px 0}
  .stats b{font-size:34px}
  .show{padding:80px 0}
  .show .wrap{flex-direction:column;gap:36px}
  .show-calls .wrap{flex-direction:column-reverse}
  .show-media,.show-growth .show-media{flex-basis:auto;width:100%;height:auto;display:flex;justify-content:center;gap:12px}
  .show .ip.a,.show .ip.b,.show .ip.c{position:relative;left:auto;top:auto;transform:none;width:46%}
  .show-growth .ip.a{display:none}
  .mini{grid-template-columns:1fr 1fr}
  .desk{padding:80px 0 90px}
  .desk-stage{height:auto;margin-top:40px}
  .desk-stage .mbp{position:relative;left:auto;transform:none;width:92%;margin:0 auto}
  .desk-stage .chip{display:none}
  .features{padding:80px 0}
  .feat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
  .feat{padding:16px}
  .feat .ic{width:44px;height:44px;font-size:22px;border-radius:13px}
  .feat h3{font-size:16px}
  .feat p{font-size:14px}
  .demo{padding-bottom:80px}
  .demo-band{padding:40px 16px 18px;border-radius:28px}
  .demo-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .dqr{display:none}
  .dhint-desktop{display:none} .dhint-phone{display:inline}
  .dcard-android .dhint{margin-top:16px}
  .pricing{padding-bottom:80px}
  .tiers{grid-template-columns:1fr;margin-top:40px}
  .tier-hot{order:-1}
  .faq{padding-bottom:80px}
  .faq-list summary{padding:18px}
  .faq-list details p{padding:0 18px 18px}
  .final{padding:80px 0 40px}
  .footer{margin-top:70px;flex-direction:column;align-items:flex-start}
  .wa-float{right:14px;bottom:14px;min-height:50px;padding:0 16px}
  .wa-float span{display:none}
}

/* --- feature cards & demo band (flat icons, brand-aligned) --- */
.card.feat{background:#fff;border:1px solid #E8EDF4;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 28px -18px rgba(16,24,40,.28);transition:transform .18s ease,box-shadow .18s ease}
.card.feat:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(16,24,40,.05),0 20px 40px -20px rgba(16,24,40,.34)}
.card.feat .ic{display:flex;align-items:center;justify-content:center;border-radius:13px}
.card.feat .ic svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.demo-band{background:radial-gradient(120% 140% at 12% 0%,#16243B 0%,#0B1220 55%,#080D14 100%);border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.demo-band::before{content:'';position:absolute;inset:-40% -10% auto -10%;height:58%;background:linear-gradient(135deg,#F472B6,#FBBF24 45%,#5CE39A);filter:blur(90px);opacity:.30;pointer-events:none}
.demo-band::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#F472B6,#FBBF24 45%,#5CE39A)}
.demo-band>*{position:relative;z-index:1}
.dcard{border:1px solid #E8EDF4;box-shadow:0 2px 4px rgba(8,13,20,.06),0 26px 50px -28px rgba(8,13,20,.55);transition:transform .18s ease}
.dcard:hover{transform:translateY(-4px)}