/* ===========================================================================
   Kanakku Pillai — the public site
   ===========================================================================
   A LIQUID-GLASS TREATMENT, AND WHAT THAT COSTS.

   The look Apple introduced with iOS 26 is layered translucency: panels that
   let a moving ground show through, with a bright edge where the light catches
   them. It is reproduced here with backdrop-filter, a lit border and two slow
   gradient blobs — no images, no library, nothing to download.

   That last part is not incidental. This site is for people on cheap Android
   phones over mobile data in Sri Lanka. Every megabyte is a second of waiting
   and a slice of a prepaid bundle, so the whole page is three files and no
   external request. A landing page for a money app that takes eight seconds to
   appear has already made its argument, and lost it.

   WHERE THE GLASS IS ALLOWED TO FAIL. backdrop-filter is not universal and is
   expensive on weak GPUs. Every glass surface therefore has a solid colour
   underneath it that is legible on its own; @supports adds the blur only where
   it works. Nothing here depends on the effect to be readable.

   MOTION IS OPTIONAL AND MEANS SOMETHING. Reveals are scroll-driven where the
   browser supports it, so they cost no JavaScript. prefers-reduced-motion
   turns all of it off — for a vestibular disorder this is not a preference.
   =========================================================================== */

:root {
  --red: #A4161A;
  --red-lit: #E5383B;

  /* RED AS TEXT IS NOT THE SAME COLOUR AS RED AS A FILL.
     The brand red reads beautifully on paper — 7.4:1 — and is nearly
     invisible on the dark ground at 2.53:1, which is below the 3:1 floor even
     for large bold type. A white button on brand red is unaffected, because
     there the red is the background and white does the contrasting.
     So: --red stays the brand fill, --red-ink is the one that carries words,
     and only the second changes between the two grounds. */
  --red-ink: #A4161A;
  --caption: #4A4A55;    /* 8.9:1 on --paper */
  --ink: #0B0B0F;
  --paper: #FBF9F7;
  --muted: #6B6B76;
  --line: rgba(11, 11, 15, .10);

  /* The glass itself, as tokens, so a surface is never hand-mixed. */
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-shadow: 0 10px 40px rgba(11, 11, 15, .10);

  --r: 22px;
  --pad: clamp(20px, 5vw, 80px);
  --font: "Noto Sans Tamil", "Nirmala UI", "Iskoola Pota", system-ui,
          -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F4F3F6;
    --paper: #0B0B0F;
    --muted: #A6A6B2;      /* 8.16:1 on --paper */
    --line: rgba(255, 255, 255, .12);
    --red-ink: #F26E70;    /* 6.77:1 — the brand red is 2.53:1 here */
    --caption: #C4C4CE;    /* 11.9:1 on --paper */
    --glass-bg: rgba(28, 28, 36, .55);
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

.skip {
  position: absolute; left: -999px;
  background: var(--red); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; top: 0; z-index: 100; }

/* --------------------------------------------------------------------------
   The ground the glass sits on
   -------------------------------------------------------------------------- */
/* Fixed, behind everything, and drifting. Glass with nothing moving behind it
   is just a grey box — the effect is entirely in the parallax. */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax;
  background: radial-gradient(circle at 35% 35%, var(--red-lit), transparent 62%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(2) {
  width: 52vmax; height: 52vmax; right: -16vmax; top: 28vmax;
  background: radial-gradient(circle at 60% 40%, #F5B700, transparent 62%);
  opacity: .34;
  animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vmax, -8vmax, 0) scale(1.1); } }

/* --------------------------------------------------------------------------
   Glass
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r);
  position: relative;
}
/* The specular edge — a hairline of light along the top, which is what makes
   a translucent rectangle read as a physical pane rather than a tint. */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.85), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
  }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 12px; z-index: 40;
  margin: 12px auto; width: min(1140px, calc(100% - 24px));
  display: flex; align-items: center; gap: 18px;
  padding: 10px 10px 10px 16px; border-radius: 100px;
  transition: box-shadow .3s, transform .3s;
}
.nav.tight { box-shadow: 0 14px 44px rgba(11,11,15,.16); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { border-radius: 9px; }
.brand b { display: block; font-size: 15px; line-height: 1.1; }
.brand i { display: block; font-size: 11px; font-style: normal; color: var(--muted); letter-spacing: .04em; }
.nav nav { margin-left: auto; display: flex; gap: 4px; }
.nav nav a {
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 12px; border-radius: 100px; transition: background .2s;
}
.nav nav a:hover { background: rgba(164,22,26,.10); color: var(--red-ink); }
.nav .cta {
  background: var(--red); color: #fff; text-decoration: none; font-weight: 700;
  font-size: 14px; padding: 10px 18px; border-radius: 100px; white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.nav .cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(164,22,26,.4); }
@media (max-width: 820px) { .nav nav { display: none; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  max-width: 1140px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) var(--pad) 40px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 940px) { .hero { grid-template-columns: 1fr; } }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-ink); margin: 0 0 14px;
}
h1 {
  font-size: clamp(40px, 7.5vw, 76px); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 20px; font-weight: 800;
}
h1 span { display: block; }
.grad {
  background: linear-gradient(105deg, var(--red), var(--red-lit) 55%, #F5B700);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 46ch; margin: 0 0 28px; }
.lede b { color: var(--ink); }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 100px; transition: transform .2s, box-shadow .2s;
}
.btn.primary { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(164,22,26,.32); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(164,22,26,.44); }
.btn.ghost { border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--red-ink); color: var(--red-ink); }
.btn.big { padding: 17px 40px; font-size: 17px; }
.micro { font-size: 13px; color: var(--muted); margin: 16px 0 0; }

/* --------------------------------------------------------------------------
   The demo phone
   -------------------------------------------------------------------------- */
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phone {
  width: min(340px, 100%); padding: 14px; border-radius: 34px;
  display: flex; flex-direction: column; gap: 10px;
  /* A slight tilt that rights itself on hover: enough to read as an object,
     not so much that the text inside is hard to read. */
  transform: perspective(1100px) rotateY(-7deg) rotateX(3deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.phone:hover, .phone:focus-within { transform: perspective(1100px) rotateY(0) rotateX(0); }
.phone-top {
  font-size: 12px; font-weight: 700; color: var(--muted);
  display: flex; align-items: center; gap: 7px; padding: 2px 4px 8px;
  border-bottom: 1px solid var(--line);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
.thread { min-height: 190px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.bub {
  font-size: 13.5px; padding: 10px 13px; border-radius: 16px; max-width: 88%;
  animation: pop .34s cubic-bezier(.2,.9,.3,1.3) both;
}
.bub.me { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 5px; }
.bub.kp { align-self: flex-start; background: rgba(11,11,15,.06); border-bottom-left-radius: 5px; }
@media (prefers-color-scheme: dark) { .bub.kp { background: rgba(255,255,255,.09); } }
.bub .amt { font-weight: 700; }
.bub .ok { color: #2ecc71; font-weight: 700; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.typing { display: inline-flex; gap: 3px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.chips button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 100px; color: var(--ink);
  border: 1px solid var(--line); background: transparent;
  transition: background .2s, border-color .2s, transform .15s;
}
.chips button:hover { background: rgba(164,22,26,.10); border-color: var(--red-ink); color: var(--red-ink); }
.chips button:active { transform: scale(.96); }
/* A CAPTION IS NOT BODY COPY. --muted is tuned for 15px paragraphs; at
   12.5px it sits near the floor, and this one sits under a translucent
   panel over a moving ground, so its effective contrast varies as the
   aurora drifts beneath it. It gets its own colour with headroom to spare
   in both themes, and it no longer fades in — instructions that animate are
   instructions somebody misses. */
.phone-note {
  font-size: 13px; color: var(--caption); text-align: center; margin: 0;
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.strip { padding: 8px var(--pad) 0; }
.strip-in {
  max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; text-align: center;
}
.strip-in div b {
  display: block; font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--red-ink);
  line-height: 1;
}
.strip-in div span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 620px) { .strip-in { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

.band { max-width: 1140px; margin: 0 auto; padding: clamp(56px, 9vw, 110px) var(--pad); }
.band h2 {
  font-size: clamp(28px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 12px; font-weight: 800;
}
.muted { color: var(--muted); }
.sub { color: var(--muted); font-size: clamp(15px, 1.8vw, 18px); margin: 0 0 36px; max-width: 58ch; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card { padding: 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(11,11,15,.15); }
.card .ico { font-size: 26px; margin-bottom: 10px; }
.card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------------------------
   WhatsApp band
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 13px; color: var(--muted); font-size: 15px; }
.ticks li b { color: var(--ink); }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--red-ink); font-weight: 800;
}
.chat { padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.msg { font-size: 13.5px; padding: 11px 14px; border-radius: 15px; max-width: 84%; }
.msg.in { align-self: flex-end; background: #DCF8C6; color: #0B0B0F; border-bottom-right-radius: 5px; }
.msg.out { align-self: flex-start; background: rgba(255,255,255,.9); color: #0B0B0F; border-bottom-left-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.msg.short { max-width: 55%; }
.msg .btns { display: flex; gap: 6px; margin-top: 10px; }
.msg .btns b {
  flex: 1; text-align: center; font-size: 12px; padding: 7px; border-radius: 8px;
  background: rgba(164,22,26,.10); color: var(--red);
}
.wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.wave i {
  width: 2.5px; background: #128C7E; border-radius: 2px;
  animation: eq 1.1s ease-in-out infinite;
}
.wave i:nth-child(1){height:5px;animation-delay:0s}   .wave i:nth-child(2){height:11px;animation-delay:.1s}
.wave i:nth-child(3){height:7px;animation-delay:.2s}   .wave i:nth-child(4){height:13px;animation-delay:.3s}
.wave i:nth-child(5){height:6px;animation-delay:.4s}   .wave i:nth-child(6){height:10px;animation-delay:.5s}
.wave i:nth-child(7){height:4px;animation-delay:.6s}
@keyframes eq { 50% { transform: scaleY(.4); } }

/* --------------------------------------------------------------------------
   Languages, FAQ, close
   -------------------------------------------------------------------------- */
.lang-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 700px) { .lang-row { grid-template-columns: 1fr; } }
.lang-row div { padding: 22px; text-align: center; border-radius: var(--r); }
.lang-row b { display: block; font-size: 21px; margin-bottom: 6px; }
.lang-row span { color: var(--muted); font-size: 14px; }

.faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq summary {
  cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red-ink); font-size: 24px; font-weight: 400; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 20px; color: var(--muted); max-width: 68ch; }

.final { padding: 0 var(--pad) clamp(56px, 9vw, 110px); }
.final-in {
  max-width: 1140px; margin: 0 auto; padding: clamp(40px, 7vw, 76px) 30px; text-align: center;
}
.final-in h2 { font-size: clamp(28px, 4.6vw, 46px); margin: 0 0 10px; font-weight: 800; letter-spacing: -.02em; }
.final-in p { color: var(--muted); margin: 0 0 28px; }

footer { border-top: 1px solid var(--line); padding: 40px var(--pad) 26px; }
.foot-in {
  max-width: 1140px; margin: 0 auto; display: flex; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; align-items: center;
}
.foot-in > div { display: flex; align-items: center; gap: 12px; }
.foot-in img { border-radius: 8px; }
.foot-in p { margin: 0; font-size: 14px; line-height: 1.4; }
.foot-in nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-in nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-in nav a:hover { color: var(--red-ink); }
.copy { max-width: 1140px; margin: 26px auto 0; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
/* Scroll-driven where supported — the animation is handed to the compositor
   and costs no JavaScript at all. site.js only fills in for browsers without
   animation-timeline, and does nothing where this rule applies. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* The JavaScript fallback. Hidden only once JS confirms it will un-hide them —
   without the .js class a reader with scripts blocked sees everything. */
@media (prefers-reduced-motion: no-preference) {
  @supports not (animation-timeline: view()) {
    .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
    .js .reveal.seen { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .wave i, .typing i { animation: none !important; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { transition-duration: .01ms !important; }
}

/* The product's name, under the Tamil promise.
   The hero says "speak it, it is recorded" in Tamil, which is the right
   opening line and tells a first-time visitor nothing about what they are
   looking at — or, for somebody who arrived by searching the name, that they
   have found the right place. Set below the headline rather than above it, so
   the promise still leads. */
.h1-sub {
  display: block;
  margin-top: 14px;
  font-size: clamp(15px, 1.9vw, 20px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}