/* ============================================================
   Siplia — siplia.app  ·  premium, modern, multilingual
   ============================================================ */

:root {
  --ink:      #0B1A2E;
  --ink-soft: #46586E;
  --blue-900: #0A357A;
  --blue-700: #1460B0;
  --blue-500: #2E86DE;
  --cyan-400: #38BDF8;
  --teal-300: #67E8F0;
  --blue-300: #93CDF4;
  --blue-50:  #EAF4FF;
  --bg:       #EAF3FF;
  --card:     rgba(255,255,255,0.66);
  --card-solid:#FFFFFF;
  --line:     rgba(20,96,176,0.12);
  --radius:   22px;
  --shadow:   0 24px 70px rgba(17, 78, 150, 0.16);
  --shadow-sm:0 10px 30px rgba(17, 78, 150, 0.10);
  --glow:     0 0 0 1px rgba(56,189,248,.25), 0 22px 56px rgba(46,134,222,.30);
  --grad:     linear-gradient(120deg, #1460B0 0%, #2E86DE 48%, #38BDF8 100%);
  --grad-vivid: linear-gradient(120deg, #1460B0, #2E86DE 40%, #38BDF8 75%, #67E8F0);
  --maxw:     1140px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:#EAF3FB; --ink-soft:#9DB3C8;
    --card:rgba(15,30,49,0.62); --card-solid:#0F1E31;
    --line:rgba(133,204,248,0.14); --blue-50:#10243B;
    --bg:#061222;
    --shadow:0 24px 70px rgba(0,0,0,.5); --shadow-sm:0 10px 30px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
body {
  font-family:var(--font); color:var(--ink); line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Very soft, low-contrast continuous base — no visible seams. */
  background:
    radial-gradient(1500px 860px at -12% 10%, rgba(56,189,248,.10), transparent 62%),
    radial-gradient(1500px 880px at 112% 42%, rgba(20,96,176,.08), transparent 62%),
    radial-gradient(1400px 820px at 50% 99%, rgba(103,232,240,.09), transparent 64%),
    linear-gradient(180deg, #EDF5FF 0%, #F5FAFF 50%, #EBF4FF 100%);
  background-repeat:no-repeat;
}
a { color:var(--blue-700); text-decoration:none; }
img { max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
[dir="rtl"] body { text-align:right; }

/* reveal */
.reveal { transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal { opacity:0; transform:translateY(26px); }
html.js .reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.06s}.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}.reveal[data-d="4"]{transition-delay:.24s}
.reveal[data-d="5"]{transition-delay:.30s}.reveal[data-d="6"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){*{animation:none!important}html.js .reveal{opacity:1;transform:none}}

/* ---------- Nav ---------- */
.nav { position:sticky; top:0; z-index:60; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:color-mix(in srgb, var(--bg) 70%, transparent); border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.scrolled { border-bottom-color:var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:66px; gap:14px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:850; font-size:23px; letter-spacing:-.5px;
  background:linear-gradient(115deg, var(--blue-700), var(--blue-500) 45%, var(--cyan-400));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:hue 7s ease infinite; }
.brand img { width:38px; height:38px; border-radius:10px; box-shadow:0 3px 14px rgba(20,96,176,.30); -webkit-text-fill-color:initial; }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-link { color:var(--ink-soft); font-size:15px; font-weight:500; }
.nav-link:hover { color:var(--blue-700); }
/* Legal pages (privacy/terms) use .nav-links — give it real spacing so
   the Privacy/Terms items never collide on a phone. */
.nav-links { display:flex; align-items:center; gap:24px; flex-wrap:nowrap; }
.nav-links a { color:var(--ink-soft); font-size:15px; font-weight:500; white-space:nowrap; }
.nav-links a:hover { color:var(--blue-700); }
@media (max-width:520px){
  .nav .wrap { gap:10px; }
  .nav-links { gap:18px; font-size:14px; }
  .nav-links a { font-size:14px; }
  /* On a phone the legal-page nav only needs Privacy + Terms — the brand
     logo already links home, so drop the secondary "Features" link to
     guarantee the two never collide. */
  .nav-links a[href="/#features"] { display:none; }
}
.nav-cta { padding:9px 18px; border-radius:999px; color:#fff!important; background:var(--grad); box-shadow:var(--shadow-sm); font-weight:600; font-size:15px; }

/* language switcher */
.lang { position:relative; }
.lang-btn { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--card-solid); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; }
.lang-btn svg { width:14px; height:14px; opacity:.7; }
.lang-menu { position:absolute; top:calc(100% + 8px); inset-inline-end:0; background:var(--card-solid); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:8px; display:none; grid-template-columns:1fr 1fr; gap:2px; min-width:230px; z-index:80; }
.lang-menu.open { display:grid; }
.lang-menu button { text-align:start; padding:8px 12px; border-radius:10px; border:0; background:transparent; color:var(--ink); font-size:14px; cursor:pointer; }
.lang-menu button:hover, .lang-menu button[aria-current="true"] { background:var(--blue-50); color:var(--blue-700); font-weight:600; }

/* ---------- Buttons ---------- */
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; padding:15px 26px; border-radius:999px;
  font-weight:650; font-size:16px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--grad); color:#fff; box-shadow:var(--glow); }
.btn-primary::after { content:""; position:absolute; top:0; inset-inline-start:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); transition:inset-inline-start .6s; }
.btn-primary:hover::after { inset-inline-start:130%; }
.btn-ghost { background:var(--card-solid); color:var(--blue-700); border:1px solid var(--line); box-shadow:var(--shadow-sm); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding:96px 0 128px; text-align:center; color:#fff;
  background:linear-gradient(160deg, #1F62B6 0%, #2E86DE 38%, #41A0E8 70%, #86CBF2 100%); }
.hero::before { content:""; position:absolute; inset:-25% -10% auto -10%; height:150%; z-index:0; pointer-events:none;
  background:
    radial-gradient(720px 480px at 80% 2%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(640px 460px at 6% 14%, rgba(130,235,240,.34), transparent 60%),
    radial-gradient(820px 560px at 52% 116%, rgba(255,255,255,.18), transparent 60%);
  animation:mesh 16s ease-in-out infinite alternate; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:200px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--bg)); }
@keyframes mesh { 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-3%,2%,0) scale(1.08)} }
.hero .wrap { position:relative; z-index:3; }

/* ---------- Bubbles (everywhere) ---------- */
/* Light sections → blue bubbles (visible on pale background).
   .light variant (dark boxes) → pale/white bubbles. */
.bubbles { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.bubbles span { position:absolute; bottom:-72px; border-radius:50%; animation:rise linear infinite;
  background:radial-gradient(circle at 32% 28%, rgba(46,134,222,.34), rgba(20,96,176,.14)); border:1px solid rgba(20,96,176,.16); opacity:.7; }
.bubbles.light span { background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.80), rgba(180,222,255,.30)); border-color:rgba(255,255,255,.28); opacity:.6; }
.bubbles span:nth-child(1){left:3%;width:14px;height:14px;animation-duration:17s}
.bubbles span:nth-child(2){left:11%;width:26px;height:26px;animation-duration:23s;animation-delay:3s}
.bubbles span:nth-child(3){left:19%;width:10px;height:10px;animation-duration:13s;animation-delay:1s}
.bubbles span:nth-child(4){left:28%;width:34px;height:34px;animation-duration:26s;animation-delay:6s}
.bubbles span:nth-child(5){left:37%;width:16px;height:16px;animation-duration:15s;animation-delay:2s}
.bubbles span:nth-child(6){left:45%;width:22px;height:22px;animation-duration:20s;animation-delay:4s}
.bubbles span:nth-child(7){left:53%;width:12px;height:12px;animation-duration:14s;animation-delay:7s}
.bubbles span:nth-child(8){left:61%;width:30px;height:30px;animation-duration:24s;animation-delay:1.5s}
.bubbles span:nth-child(9){left:69%;width:15px;height:15px;animation-duration:16s;animation-delay:5s}
.bubbles span:nth-child(10){left:77%;width:24px;height:24px;animation-duration:21s;animation-delay:3.5s}
.bubbles span:nth-child(11){left:85%;width:11px;height:11px;animation-duration:13s;animation-delay:2.5s}
.bubbles span:nth-child(12){left:91%;width:36px;height:36px;animation-duration:28s;animation-delay:6.5s}
.bubbles span:nth-child(13){left:96%;width:18px;height:18px;animation-duration:18s;animation-delay:4.5s}
.bubbles span:nth-child(14){left:7%;width:20px;height:20px;animation-duration:22s;animation-delay:8s}
.bubbles span:nth-child(15){left:15%;width:13px;height:13px;animation-duration:19s;animation-delay:2.2s}
.bubbles span:nth-child(16){left:33%;width:22px;height:22px;animation-duration:25s;animation-delay:5.5s}
.bubbles span:nth-child(17){left:50%;width:15px;height:15px;animation-duration:16s;animation-delay:9s}
.bubbles span:nth-child(18){left:65%;width:28px;height:28px;animation-duration:27s;animation-delay:3.2s}
.bubbles span:nth-child(19){left:74%;width:12px;height:12px;animation-duration:14s;animation-delay:6.5s}
.bubbles span:nth-child(20){left:88%;width:24px;height:24px;animation-duration:23s;animation-delay:1.2s}
.bubbles span:nth-child(21){left:23%;width:17px;height:17px;animation-duration:20s;animation-delay:7.5s}
.bubbles span:nth-child(22){left:58%;width:30px;height:30px;animation-duration:26s;animation-delay:4.2s}
@keyframes rise { 0%{transform:translateY(0) scale(.65);opacity:0} 12%{opacity:.55} 88%{opacity:.4} 100%{transform:translateY(-680px) scale(1.05);opacity:0} }

/* section content sits above its bubble layer */
.section > .wrap, .section > .section-head { position:relative; z-index:1; }

.hero-center { max-width:800px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }

/* ---------- Animated water drop (hero) ---------- */
.hero-drop { margin-bottom:26px; animation:float 6s ease-in-out infinite; filter:drop-shadow(0 24px 42px rgba(0,42,95,.40)); }
.hero-drop svg { width:122px; height:auto; display:block; }
.hero-drop .shine { animation:shimmer 3.6s ease-in-out infinite; transform-origin:center; }
@keyframes shimmer { 0%,100%{opacity:.35} 50%{opacity:.85} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:650; letter-spacing:.3px;
  color:#fff; background:rgba(255,255,255,.16); padding:8px 16px; border-radius:999px; margin-bottom:24px; border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(6px); }
.hero h1 { font-size:clamp(42px,7.4vw,70px); line-height:1.02; letter-spacing:-1.8px; font-weight:850;
  background:linear-gradient(120deg,#FFFFFF,#DFF3FF 55%,#9FE0FF); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:hue 7s ease infinite; }
@keyframes hue { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
/* Handwriting slogan — Apple's built-in cursive faces (no external font
   load → privacy-clean, instant). Inherits the white→blue gradient +
   hue animation from `.hero h1`; we only swap the family / size / spacing
   so cursive letters connect naturally. */
/* Self-hosted handwriting face (Caveat, OFL) — clean, legible, modern,
   and identical on every device. No external/Google-Fonts runtime call,
   so the privacy-first stance holds. */
@font-face {
  font-family: "Kalam";
  src: url("assets/fonts/kalam-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.hero-slogan {
  font-family: "Kalam", "Bradley Hand", cursive;
  font-size: clamp(54px, 9.2vw, 96px);
  line-height: 1.22;
  letter-spacing: .3px;
  font-weight: 700;
  padding: .04em .14em .16em;
  /* White inside, thin black outline. Solid white fill (overrides the
     gradient/clip from `.hero h1`) drawn ON TOP of the stroke
     (paint-order) so the letters never look hollow. */
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow: 0 5px 16px rgba(0, 0, 0, .18);
  animation: none;
}
/* Curly quotes — same white fill + thin black outline. */
.hero-slogan::before, .hero-slogan::after {
  -webkit-text-fill-color: #fff; color: #fff;
  -webkit-text-stroke: 1px #000; paint-order: stroke fill;
}
.hero-slogan::before { content: "\201C"; }
.hero-slogan::after  { content: "\201D"; }
.hero p.lede { font-size:19px; color:rgba(255,255,255,.92); margin:26px auto 32px; max-width:34em; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }
.hero .btn-primary { background:#fff; color:var(--blue-700); box-shadow:0 16px 44px rgba(0,0,0,.28); }
.store-note { font-size:13px; color:rgba(255,255,255,.85); margin-top:18px; display:flex; gap:8px; align-items:center; justify-content:center; }
.store-note::before { content:""; width:7px; height:7px; border-radius:50%; background:#86EFAC; box-shadow:0 0 0 4px rgba(134,239,172,.22); }

/* ---------- Section scaffold ---------- */
.section { padding:88px 0; position:relative; overflow:hidden; }
/* keep dark-box content above its inner bubble layer */
.privacy-band > :not(.bubbles), .cta-card > :not(.bubbles) { position:relative; z-index:1; }
.section-head { text-align:center; max-width:44em; margin:0 auto 52px; }
.section-head .kicker { display:inline-block; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--blue-500); margin-bottom:12px; }
.section-head h2 { font-size:clamp(30px,4.4vw,46px); letter-spacing:-1px; font-weight:850; line-height:1.08; }
.section-head p { color:var(--ink-soft); font-size:18px; margin-top:14px; }
/* decorative blob behind sections */
.deco { position:absolute; z-index:-1; border-radius:50%; filter:blur(48px); opacity:.5; }
.deco.a { width:360px; height:360px; background:rgba(56,189,248,.20); top:6%; left:-120px; }
.deco.b { width:420px; height:420px; background:rgba(20,96,176,.16); bottom:0; right:-150px; }

/* ---------- How it works ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step { background:var(--card); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); position:relative; }
.step .num { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-weight:850; color:#fff; background:var(--grad); margin-bottom:18px; box-shadow:var(--shadow-sm); }
.step h3 { font-size:19px; font-weight:750; margin-bottom:8px; }
.step p { color:var(--ink-soft); font-size:15px; }

/* ---------- Features ---------- */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature { background:var(--card); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s; }
.feature:hover { transform:translateY(-6px); box-shadow:var(--glow); border-color:transparent; }
.feature .ic { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.feature .ic svg { width:27px; height:27px; }
.feature h3 { font-size:19px; font-weight:750; margin-bottom:8px; letter-spacing:-.3px; }
.feature p { color:var(--ink-soft); font-size:15px; }

/* ---------- Water-views deck ---------- */
.deck { position:relative; height:540px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.deck .device { position:absolute; width:224px; margin:0; box-shadow:var(--shadow); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.deck .device::after { inset:-14px; opacity:.55; }
.deck .card-1{transform:translateX(-150px) rotate(-15deg);z-index:1}.deck .card-2{transform:translateX(-76px) rotate(-8deg);z-index:2}
.deck .card-3{transform:translateX(0) rotate(0);z-index:3}.deck .card-4{transform:translateX(76px) rotate(8deg);z-index:2}
.deck .card-5{transform:translateX(150px) rotate(15deg);z-index:1}
.deck:hover .card-1{transform:translateX(-228px) rotate(-19deg)}.deck:hover .card-2{transform:translateX(-114px) rotate(-10deg)}
.deck:hover .card-3{transform:translateY(-14px)}.deck:hover .card-4{transform:translateX(114px) rotate(10deg)}.deck:hover .card-5{transform:translateX(228px) rotate(19deg)}
.device { position:relative; border-radius:46px; padding:12px; background:linear-gradient(160deg,#0b2740,#15324d); box-shadow:var(--shadow), inset 0 0 0 2px rgba(255,255,255,.07); }
.device::after { content:""; position:absolute; inset:-30px; z-index:-1; background:radial-gradient(closest-side, rgba(56,189,248,.35), transparent); filter:blur(10px); }
.device img { width:100%; display:block; border-radius:34px; }

/* ---------- Showcase ---------- */
.showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.showcase figure { transition:transform .3s; }
.showcase figure:hover { transform:translateY(-6px); }
.showcase img { width:100%; display:block; border-radius:22px; box-shadow:var(--shadow-sm); border:1px solid var(--line); }

/* ---------- Privacy band ---------- */
.privacy-band { position:relative; overflow:hidden; border-radius:30px; padding:60px 40px; text-align:center; color:#fff; background:linear-gradient(125deg,#0E437F,#1460B0 50%,#2E86DE); box-shadow:var(--glow); }
.privacy-band::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 220px at 50% -10%, rgba(255,255,255,.28), transparent); }
.privacy-band .ic { width:62px; height:62px; border-radius:18px; display:grid; place-items:center; margin:0 auto 18px; background:rgba(255,255,255,.16); position:relative; }
.privacy-band .ic svg { width:32px; height:32px; }
.privacy-band h2 { font-size:clamp(26px,3.6vw,38px); font-weight:850; letter-spacing:-.6px; position:relative; }
.privacy-band p { opacity:.94; font-size:18px; max-width:40em; margin:14px auto 0; position:relative; }

/* ---------- CTA ---------- */
.cta-band { text-align:center; }
.cta-card { position:relative; overflow:hidden; background:var(--grad-vivid); color:#fff; border-radius:30px; padding:66px 32px; box-shadow:var(--glow); }
.cta-card::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 220px at 50% -20%, rgba(255,255,255,.32), transparent); }
.cta-card h2 { font-size:clamp(28px,4vw,42px); font-weight:850; letter-spacing:-.8px; position:relative; }
.cta-card p { opacity:.95; margin:16px auto 28px; max-width:34em; font-size:18px; position:relative; }
.cta-card .btn-primary { background:#fff; color:var(--blue-700); box-shadow:0 14px 38px rgba(0,0,0,.2); }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding:46px 0; color:var(--ink-soft); font-size:14px; }
.footer .wrap { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-links { display:flex; gap:24px; }
.footer-links a { color:var(--ink-soft); }
.footer-links a:hover { color:var(--blue-700); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta { position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--line); }
.mobile-cta a { display:flex; justify-content:center; width:100%; }

/* ---------- Legal ---------- */
.legal { padding:60px 0 90px; }
.legal .doc { max-width:760px; margin:0 auto; }
.legal h1 { font-size:clamp(32px,5vw,46px); letter-spacing:-.8px; font-weight:850; }
.legal .updated { color:var(--ink-soft); font-size:14px; margin-top:10px; }
.legal .placeholder { margin:28px 0; padding:16px 18px; border-radius:14px; background:var(--blue-50); color:var(--blue-900); font-size:14px; border:1px solid var(--line); }
.legal h2 { font-size:23px; font-weight:750; margin:40px 0 12px; letter-spacing:-.3px; }
.legal p, .legal li { color:var(--ink-soft); font-size:16px; }
.legal p { margin:12px 0; } .legal ul { margin:12px 0 12px 22px; } .legal li { margin:6px 0; }
.back-home { display:inline-block; margin-bottom:26px; font-weight:650; font-size:15px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{padding:70px 0 90px}
  .features,.steps{grid-template-columns:1fr;gap:16px}
  .showcase{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .nav-link{display:none}
  .section{padding:64px 0}
  .deck{height:420px}.deck .device{width:152px}
  .deck .card-1{transform:translateX(-92px) rotate(-14deg)}.deck .card-2{transform:translateX(-46px) rotate(-7deg)}
  .deck .card-4{transform:translateX(46px) rotate(7deg)}.deck .card-5{transform:translateX(92px) rotate(14deg)}
  .deck:hover .card-1{transform:translateX(-92px) rotate(-14deg)}.deck:hover .card-2{transform:translateX(-46px) rotate(-7deg)}
  .deck:hover .card-3{transform:none}.deck:hover .card-4{transform:translateX(46px) rotate(7deg)}.deck:hover .card-5{transform:translateX(92px) rotate(14deg)}
  .mobile-cta{display:block}
  body:has(.mobile-cta){padding-bottom:78px}
}
@media (max-width:420px){ .device{width:252px} .deck{height:380px} .deck .device{width:138px}
  .deck .card-1,.deck:hover .card-1{transform:translateX(-80px) rotate(-13deg)}.deck .card-2,.deck:hover .card-2{transform:translateX(-40px) rotate(-7deg)}
  .deck .card-4,.deck:hover .card-4{transform:translateX(40px) rotate(7deg)}.deck .card-5,.deck:hover .card-5{transform:translateX(80px) rotate(13deg)} }

/* ---------- Touch hardening (iOS / in-app browsers) ----------
   Instagram & Facebook render pages in a WKWebView. Two things there
   silently swallow the first tap on a link:

   1. Sticky :hover — none of the :hover rules above were guarded, so a
      touch device applies them on first tap and only navigates on the
      second. Neutralised for pointer-coarse devices below.
   2. Decorative absolutely-positioned ::before / ::after overlays that
      never opted out of hit-testing. .hero::before/::after already had
      pointer-events:none; the rest did not.

   Desktop behaviour is unchanged — everything here is inside
   `@media (hover: none)` or applies to purely decorative layers. */

.cta-card::before,
.privacy-band::before,
.btn-primary::after,
.deco,
.device::after { pointer-events: none; }

a, button, .btn { touch-action: manipulation; }

@media (hover: none) {
  .btn:hover { transform: none; }
  .btn-primary:hover::after { inset-inline-start: -120%; }
  .feature:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
  .showcase figure:hover { transform: none; }
  .nav-link:hover, .nav-links a:hover, .footer-links a:hover { color: inherit; }

  /* Give the tap real feedback so a press is never ambiguous. */
  .btn:active { transform: scale(.97); }
}