/* ============================================================
   Frontel — AI sales employee · landing page styles
   Built on the Autive Design System tokens (DM Sans / DM Mono /
   Hanuman, OKLCH neutrals, 6px radius scale, subtle shadows),
   re-skinned to a warm editorial base with a vermillion speed
   accent and a recurring live-green "always-on" dot.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@400;500&family=Hanuman:wght@400;700&display=swap");

:root{
  /* warm paper base */
  --paper:        #f7f6ef;          /* page canvas — warm cream (product canvas) */
  --paper-2:      #f1efe4;          /* recessed warm panel */
  --paper-3:      #eae6d6;          /* deeper warm panel */
  --card:         #fbfaf4;          /* elevated card, warm white */
  --ink:          #211c17;          /* warm near-black text */
  --ink-2:        #5c544a;          /* muted warm grey */
  --ink-3:        #8c8378;          /* subtle */
  --line:         #e7ddcf;          /* warm hairline border */
  --line-2:       #d9cdb9;          /* stronger border */

  /* brand green (primary) — emerald on cream */
  --flame:        #2f9e44;          /* primary brand green */
  --flame-deep:   #1b7a35;          /* hover / pressed */
  --flame-soft:   #eaf5ea;          /* mint tint bg */
  --flame-ring:   rgba(47,158,68,0.25);
  --forest:       #1c4f1f;          /* deep forest — depth + chunky shadow */

  /* live / always-on green */
  --live:         #18a558;
  --live-bright:  #1fbe66;
  --live-soft:    #e4f5ea;

  /* channel hues (calm, warm-leaning) */
  --voice:        #2f9e44;          /* voice == brand green */
  --whatsapp:     #008069;          /* WhatsApp's own teal-green */
  --email:        #1d4ed8;          /* info blue (Gmail/Outlook) */
  --chat:         #2f7d32;          /* dark green */
  --calendar:     #c2890f;          /* warm amber, sparing */

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(40,28,14,0.05);
  --shadow-sm: 0 1px 3px rgba(40,28,14,0.07), 0 1px 2px -1px rgba(40,28,14,0.06);
  --shadow-md: 0 6px 20px -6px rgba(40,28,14,0.14), 0 2px 6px -2px rgba(40,28,14,0.08);
  --shadow-lg: 0 24px 60px -20px rgba(40,28,14,0.28), 0 8px 24px -12px rgba(40,28,14,0.14);

  --sans:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:   "Hanuman", ui-serif, Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:17px;line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{margin:0;letter-spacing:-0.02em;line-height:1.05}
p{margin:0}
section{scroll-margin-top:80px}
:focus-visible{outline:2px solid var(--flame);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}

/* ---- eyebrow ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--flame-deep);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 var(--live);animation:pulse 2.4s infinite}

/* ---- live dot (reusable) ---- */
.livedot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--live-bright);flex:none}
.livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--live-bright);opacity:0;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(0.6);opacity:0.8}100%{transform:scale(1.8);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(24,165,88,0.5)}70%{box-shadow:0 0 0 8px rgba(24,165,88,0)}100%{box-shadow:0 0 0 0 rgba(24,165,88,0)}}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15.5px;font-weight:600;height:50px;padding:0 26px;border-radius:var(--radius);
  transition:transform .14s ease, background .16s, box-shadow .16s, color .16s;white-space:nowrap;
}
.btn .ic{width:18px;height:18px}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 4px 0 0 var(--forest)}
.btn-primary:hover{background:var(--flame-deep);transform:translateY(-1px);box-shadow:0 5px 0 0 var(--forest)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--forest)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{background:#fff;border-color:var(--ink-3)}
.btn-sm{height:42px;padding:0 18px;font-size:14.5px}
.btn-lg{height:56px;padding:0 30px;font-size:16.5px}
.btn-block{width:100%}

/* ---- section scaffolding ---- */
.section{padding:104px 0;position:relative}
.section.tight{padding:72px 0}
@media (max-width:760px){.section{padding:72px 0}.section.tight{padding:52px 0}}
.section-head{max-width:680px;margin:0 0 56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:700;letter-spacing:-0.03em;line-height:1.04}
.h2 em{font-style:normal;color:var(--flame)}
.dek{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-2);margin-top:18px}
.serif{font-family:var(--serif)}

/* ============================================================  NAV  */
.nav{position:sticky;top:0;z-index:60;background:rgba(251,246,239,0.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-0.04em}
.brand .glyph{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--ink)}
.brand .glyph img{width:21px;height:21px;display:block}
.brand .glyph .livedot{position:absolute;top:-3px;right:-3px;width:8px;height:8px}
.nav-links{display:flex;gap:4px;margin-left:18px}
.nav-links a{padding:9px 13px;font-size:14.5px;font-weight:500;color:var(--ink-2);border-radius:8px}
.nav-links a:hover{color:var(--ink);background:var(--paper-2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-signin{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.nav-signin:hover{color:var(--ink)}
@media (max-width:880px){.nav-links{display:none}.nav-signin{display:none}}

/* ============================================================  HERO  */
.hero{position:relative;overflow:hidden;padding:72px 0 96px}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line-2) 1.1px,transparent 1.1px);background-size:26px 26px;opacity:0.5;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 5%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 5%,transparent 75%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr 0.98fr;gap:56px;align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:44px}}

.hero-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-full);padding:7px 16px 7px 12px;font-size:13.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-xs);white-space:nowrap;max-width:100%}
@media (max-width:420px){.hero-pill{white-space:normal}}
.hero-pill .livedot{width:8px;height:8px}
.hero-pill b{color:var(--ink);font-weight:700}

/* min-width:0 lets the grid column size to its fr share instead of being forced
   wide by the headline's content — without it a long headline pushes the feed
   off-screen (clipped by .hero{overflow:hidden}). */
.hero-copy{min-width:0}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);font-weight:800;letter-spacing:-0.04em;line-height:1.0;margin:26px 0 0;overflow-wrap:break-word}
.hero h1 .flame{color:var(--flame);white-space:nowrap}
/* The emphasised phrase must wrap with its column; a previous `white-space:nowrap`
   (to keep the original one-line svg squiggle aligned) blew the hero grid past
   the viewport and clipped the feed. The underline is now a wrap-safe CSS rule
   that renders cleanly across multiple lines, so the inline svg is hidden. */
.hero h1 .uline{text-decoration:underline;text-decoration-color:var(--flame);text-decoration-thickness:4px;text-underline-offset:8px}
.hero h1 .uline svg{display:none}
@media (max-width:480px){.hero h1{font-size:2.05rem;letter-spacing:-0.03em;line-height:1.1;text-underline-offset:6px}}
.hero-sub{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.55;color:var(--ink-2);margin-top:26px;max-width:540px}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-soft{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-2);margin-top:20px}
.hero-soft .ic{width:17px;height:17px;color:var(--live)}

/* ---- hero live feed (the centerpiece) ---- */
.feed{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;
  width:100%;max-width:460px;margin-left:auto;
}
@media (max-width:980px){.feed{margin:0 auto}}
.feed-top{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--paper))}
.feed-top .ava{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.feed-top .lead-id{min-width:0;flex:1}
.feed-top .lead-id .nm{font-weight:700;font-size:14.5px;letter-spacing:-0.01em;display:flex;align-items:center;gap:7px;white-space:nowrap}
.feed-top .lead-id #lead-name{white-space:nowrap}
.feed-top .lead-id .mt{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-top .status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--live);background:var(--live-soft);padding:5px 10px;border-radius:var(--radius-full)}

.feed-scroll{position:relative;height:430px;overflow:hidden;padding:18px 16px 14px;background:var(--card);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 40px),transparent 100%)}
.feed-list{display:flex;flex-direction:column;gap:16px;transition:transform .55s cubic-bezier(.22,.61,.36,1)}

.ev{display:grid;grid-template-columns:34px 1fr;gap:12px;animation:evin .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes evin{from{transform:translateY(12px)}to{transform:none}}
.ev .rail{display:flex;flex-direction:column;align-items:center;gap:6px}
.ev .chip{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.ev .chip .ic{width:17px;height:17px}
.ev .line{flex:1;width:2px;background:linear-gradient(var(--line-2),transparent);border-radius:2px}
.ev .body{padding-bottom:2px}
.ev .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin-bottom:5px}
.ev .chan{font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;flex:none}
.ev .ts{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-feature-settings:"tnum" 1;white-space:nowrap;flex:none}
.ev .bub{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;border-top-left-radius:4px;padding:10px 13px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.ev .bub b{font-weight:700}
.ev .bub .sub{display:block;margin-top:4px;color:var(--ink-2);font-size:12.5px}
.ev.you .bub{background:var(--flame-soft);border-color:#f6d3c6}
.ev .meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;color:var(--ink-3)}
.ev .meta .ok{display:inline-flex;align-items:center;gap:4px;color:var(--live);font-weight:600}
.ev .meta .ok .ic{width:13px;height:13px}

/* typing indicator */
.typing{display:inline-flex;gap:4px;align-items:center;padding:11px 14px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;border-top-left-radius:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.feed-foot{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line);background:var(--card);font-size:12.5px;white-space:nowrap}
.feed-foot .reply{margin-left:auto;font-family:var(--mono);font-weight:500;color:var(--ink-3);font-feature-settings:"tnum" 1;font-size:11.5px}

/* ============================================================  PROBLEM STRIP  */
.problem{background:var(--ink);color:#fff;padding:60px 0;position:relative;overflow:hidden}
.problem::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 0%,rgba(47,158,68,0.28),transparent 70%);pointer-events:none}
.problem .wrap{position:relative;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.problem .big{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:700;letter-spacing:-0.025em;line-height:1.15;max-width:840px}
.problem .big em{font-style:normal;color:var(--flame);font-family:var(--serif);font-weight:700}
.problem .stat{margin-left:auto;text-align:right;flex:none}
.problem .stat .n{font-family:var(--mono);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:500;line-height:1;color:#fff}
.problem .stat .l{font-size:13px;color:rgba(255,255,255,0.62);margin-top:8px;max-width:200px}
@media (max-width:760px){.problem .stat{margin-left:0;text-align:left}}

/* ============================================================  LIFECYCLE  */
.life-track{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
@media (max-width:980px){.life-track{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.life-track{grid-template-columns:1fr}}
.life-step{position:relative;padding:26px 22px 28px;border-right:1px solid var(--line)}
.life-track .life-step:last-child{border-right:none}
@media (max-width:980px){.life-step{border-bottom:1px solid var(--line)}}
.life-step .num{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:500}
.life-step .ic-wrap{margin:14px 0 16px;width:42px;height:42px;border-radius:12px;background:var(--flame-soft);display:flex;align-items:center;justify-content:center}
.life-step .ic-wrap .ic{width:21px;height:21px;color:var(--flame-deep)}
.life-step h3{font-size:16px;font-weight:700;letter-spacing:-0.01em;margin-bottom:7px}
.life-step p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.life-step .arr{position:absolute;top:34px;right:-9px;z-index:2;width:18px;height:18px;background:var(--card);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--flame)}
.life-step .arr .ic{width:11px;height:11px}
@media (max-width:980px){.life-step .arr{display:none}}

/* ============================================================  HOW IT WORKS  */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:880px){.layers{grid-template-columns:1fr}}
.layer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;position:relative;overflow:hidden;transition:border-color .18s, transform .18s, box-shadow .18s}
.layer:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* staggered slide-up reveal — cards feed in one by one (bottom -> top) */
.layers.reveal,.channels.reveal{opacity:1;transform:none;transition:none}   /* let cards animate, not the block */
.layers .layer,.channels .chan-tile{opacity:0;transform:translateY(30px)}
.layers.in .layer,.channels.in .chan-tile{opacity:1;transform:none;transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1)}
.layers.in .layer:nth-child(1),.channels.in .chan-tile:nth-child(1){transition-delay:.05s}
.layers.in .layer:nth-child(2),.channels.in .chan-tile:nth-child(2){transition-delay:.16s}
.layers.in .layer:nth-child(3),.channels.in .chan-tile:nth-child(3){transition-delay:.27s}
.channels.in .chan-tile:nth-child(4){transition-delay:.38s}
@media (prefers-reduced-motion:reduce){.layers .layer,.channels .chan-tile{opacity:1;transform:none;transition:none}}
.layer .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:5px 11px;border-radius:var(--radius-full)}
.layer .tag .d{width:7px;height:7px;border-radius:50%}
.layer h3{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin:18px 0 10px}
.layer .lead-p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-bottom:18px}
.layer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.layer li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--ink)}
.layer li .ic{width:17px;height:17px;color:var(--flame);flex:none;margin-top:2px}
.layer .seq{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:28px;font-weight:500;color:var(--paper-3)}

/* ============================================================  CHANNELS  */
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:880px){.channels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.channels{grid-template-columns:1fr}}
.chan-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;transition:transform .18s, box-shadow .18s, border-color .18s}
.chan-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.chan-tile .ic-wrap{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:18px}
.chan-tile .ic-wrap .ic{width:23px;height:23px}
.chan-tile h3{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.chan-tile p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.chan-tile .badge{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;font-weight:600;color:var(--live);background:var(--live-soft);padding:4px 10px;border-radius:var(--radius-full)}
.chan-tile .badge .livedot{width:7px;height:7px}

/* ============================================================  WHO IT'S FOR  */
.who{background:var(--paper-2)}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:880px){.who-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.who-grid{grid-template-columns:1fr}}
.vert{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;font-weight:600;font-size:15px;transition:transform .16s, box-shadow .16s, border-color .16s}
.vert:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.vert .ic-wrap{width:40px;height:40px;border-radius:11px;background:var(--flame-soft);display:flex;align-items:center;justify-content:center;flex:none}
.vert .ic-wrap .ic{width:20px;height:20px;color:var(--flame-deep)}
.who-fit{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fit-card{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;flex:1;min-width:220px}
.fit-card .ic{width:20px;height:20px;color:var(--flame);flex:none}
.fit-card .t{font-weight:700;font-size:14.5px}
.fit-card .s{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.fit-card .mono{font-size:14.5px;font-weight:500}

/* ============================================================  PRICING  */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media (max-width:880px){.price-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.price{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column}
.price.feat{border:1.5px solid var(--flame);box-shadow:0 6px 0 0 var(--forest);transform:translateY(-8px)}
@media (max-width:880px){.price.feat{transform:none}}
.price .pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--flame);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:5px 14px;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}
.price .pname{font-size:14px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-2)}
.price .pdesc{font-size:13.5px;color:var(--ink-2);margin-top:6px;min-height:38px}
.price .amt{display:flex;align-items:baseline;gap:4px;margin:18px 0 2px}
.price .amt .cur{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--ink)}
.price .amt .n{font-family:var(--mono);font-size:46px;font-weight:500;letter-spacing:-0.02em;line-height:1}
.price .amt .per{font-size:14px;color:var(--ink-2)}
.price .gst{font-size:12px;color:var(--ink-3);margin-bottom:18px}
.price .credits{display:flex;align-items:baseline;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:20px}
.price .credits .cn{font-family:var(--mono);font-size:20px;font-weight:500}
.price .credits .cl{font-size:12.5px;color:var(--ink-2)}
.price .feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.price .feats li{display:flex;gap:9px;font-size:14px;line-height:1.4;color:var(--ink)}
.price .feats li .ic{width:17px;height:17px;color:var(--live);flex:none;margin-top:2px}
.price-note{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;margin-top:30px;padding:18px 22px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);font-size:13.5px;color:var(--ink-2)}
.price-note .pn-item{display:flex;align-items:center;gap:9px}
.price-note .pn-item .ic{width:17px;height:17px;color:var(--flame)}
.price-note .pn-item b{color:var(--ink);font-weight:700}
.price-note .pn-item .mono{font-weight:500}

/* ============================================================  TRUST  */
.trust{background:var(--ink);color:#fff}
.trust .h2{color:#fff}
.trust .dek{color:rgba(255,255,255,0.66)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
@media (max-width:880px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.trust-grid{grid-template-columns:1fr}}
.trust-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-lg);padding:24px 22px}
.trust-card .ic-wrap{width:42px;height:42px;border-radius:12px;background:rgba(47,158,68,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.trust-card .ic-wrap .ic{width:21px;height:21px;color:var(--flame)}
.trust-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.trust-card p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.66)}

/* ============================================================  FINAL CTA  */
.final{position:relative;overflow:hidden;background:var(--flame);color:#fff;text-align:center;padding:104px 0}
/* Decorative overlays must not eat clicks/selection — without pointer-events:none
   these absolutely-positioned pseudo layers sit above the content and made the
   whole CTA (incl. the Start free button) unclickable. The wrap is also lifted
   above them so the content paints on top of the dot texture. */
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 50% -10%,rgba(255,255,255,0.22),transparent 70%);pointer-events:none}
.final::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.18) 1.1px,transparent 1.1px);background-size:24px 24px;opacity:0.5;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 75%);pointer-events:none}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-0.035em;line-height:1.02;max-width:760px;margin:0 auto}
.final p{font-size:clamp(1.05rem,1.6vw,1.25rem);color:rgba(255,255,255,0.9);margin:22px auto 0;max-width:540px}
.final .btn-primary{background:#fff;color:var(--flame-deep);margin-top:34px;box-shadow:0 4px 0 0 #14401a}
.final .btn-primary:hover{background:#fff;color:var(--flame-deep);transform:translateY(-1px);box-shadow:0 5px 0 0 #14401a}
.final .btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 0 #14401a}
.final .soft{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:14.5px;color:rgba(255,255,255,0.9)}
.final .soft .livedot{background:#fff}.final .soft .livedot::after{border-color:#fff}

/* ============================================================  FOOTER  */
footer{background:var(--paper);border-top:1px solid var(--line);padding:56px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:260px}
.foot-col h4{font-size:12.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0}
.foot-col a:hover{color:var(--ink)}
.foot-bot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.foot-bot .livedot{width:7px;height:7px}
.foot-bot .sp{margin-left:auto}

/* ---- demo input (hero pill alt + section) ---- */
.demo-box{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:7px 7px 7px 16px;box-shadow:var(--shadow-sm);max-width:420px}
.demo-box .pre{font-family:var(--mono);font-size:15px;color:var(--ink-2);flex:none}
.demo-box input{flex:1;min-width:0;border:none;outline:none;font-family:var(--mono);font-size:15px;color:var(--ink);background:transparent;letter-spacing:0.02em}
.demo-box input::placeholder{color:var(--ink-3)}
.demo-box .btn{height:40px;padding:0 16px;font-size:14px;flex:none}
.demo-hint{font-size:13px;color:var(--ink-3);margin-top:10px;display:flex;align-items:center;gap:7px}
.demo-hint .livedot{width:7px;height:7px}
.demo-ok{display:none;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--live);background:var(--live-soft);border:1px solid #bfe6cd;border-radius:var(--radius);padding:13px 16px;max-width:420px}
.demo-ok .ic{width:18px;height:18px}
/* Let both demo-band grid cells shrink below their content min-content, so the
   1fr tracks never force a few px of horizontal overflow on small screens. */
#demo .wrap > div{min-width:0}
@media (max-width:820px){#demo .wrap{grid-template-columns:1fr !important;gap:30px !important}}

/* ============================================================  DESIGN ACCENTS
   Lightweight, CSS-only flourishes layered on the existing components so the
   pages read as more "designed" without new markup: a trailing gradient tick
   after each eyebrow, and an accent bar that wipes in along the top edge of the
   interactive cards on hover. */
.eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,currentColor,transparent);opacity:0.5}

.chan-tile,.layer{position:relative;overflow:hidden}
.chan-tile::before,.layer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--flame),var(--live-bright));
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.chan-tile:hover::before,.layer:hover::before{transform:scaleX(1)}

/* warm corner glow on the hero feed so the centerpiece feels lit */
.feed::after{content:"";position:absolute;top:-40%;right:-30%;width:70%;height:70%;background:radial-gradient(circle,var(--flame-ring),transparent 70%);pointer-events:none;z-index:0}
.feed > *{position:relative;z-index:1}

/* ambient brand glow behind the hero feed for depth (clipped by .hero overflow) */
.hero::after{content:"";position:absolute;top:-14%;right:-6%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,var(--flame-ring),transparent 70%);pointer-events:none;z-index:0}

/* primary buttons get a light sweep on hover */
.btn-primary{position:relative;overflow:hidden}
.btn-primary > *{position:relative;z-index:1}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.4),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after{left:150%}

/* featured pricing card gets a soft flame-tinted glow */
.price.feat{box-shadow:0 6px 0 0 var(--forest),0 20px 55px -16px var(--flame-ring)}

/* ---- proof / stats band ---- */
.proof{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:680px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
.proof-item{text-align:center;padding:36px 18px;border-right:1px solid var(--line)}
.proof-item:last-child{border-right:none}
@media (max-width:680px){.proof-item:nth-child(2){border-right:none}.proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.proof-item .pn{font-family:var(--mono);font-size:clamp(2rem,4.4vw,2.9rem);font-weight:500;letter-spacing:-0.02em;line-height:1;color:var(--flame-deep)}
.proof-item .pl{font-size:13px;color:var(--ink-2);margin-top:10px}

/* slim scroll-progress bar (element injected by frontel.js) */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--flame),var(--live-bright));box-shadow:0 0 8px var(--flame-ring);transition:width .08s linear;pointer-events:none}

/* ============================================================  FEATURE SHOWCASE
   Three capability cards, each with an animated mini product illustration that
   comes alive on hover — a live call with a voice waveform, multi-channel
   follow-up bubbles that fan out, and a booking card that slides up. */
.feat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:880px){.feat-cards{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.feat-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px 0;transition:border-color .18s, transform .18s, box-shadow .18s}
.feat-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.feat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--flame),var(--live-bright));transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.61,.36,1);z-index:2}
.feat-card:hover::before{transform:scaleX(1)}
.feat-card .fc-ic{width:42px;height:42px;border-radius:12px;background:var(--flame-soft);display:flex;align-items:center;justify-content:center}
.feat-card .fc-ic .ic{width:21px;height:21px;color:var(--flame-deep)}
.feat-card h3{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin:18px 0 8px}
.feat-card > p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-bottom:22px;min-height:60px}

/* illustration shell — bleeds to the card edges with a soft inset panel */
.fx{position:relative;margin:0 -28px;padding:22px 28px 28px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--paper),var(--card))}

/* — call waveform — */
.fx-call-top{display:flex;align-items:center;gap:10px}
.fx-ava{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none}
.fx-meta{min-width:0;flex:1}
.fx-nm{font-weight:700;font-size:13px;letter-spacing:-0.01em}
.fx-sub{font-size:11px;color:var(--ink-3)}
.fx-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--live);background:var(--live-soft);padding:4px 8px;border-radius:var(--radius-full);flex:none}
.fx-live .livedot{width:7px;height:7px}
.fx-wave{display:flex;align-items:center;gap:3px;height:38px;margin:16px 0 14px}
.fx-wave i{flex:1;background:linear-gradient(180deg,var(--flame),var(--flame-deep));border-radius:2px;opacity:.85;height:18%;animation:wave 1.1s ease-in-out infinite}
.fx-wave i:nth-child(odd){animation-duration:.9s}
.fx-wave i:nth-child(3n){animation-duration:1.3s}
.fx-wave i:nth-child(4n){animation-duration:1.5s}
@keyframes wave{0%,100%{height:18%}50%{height:90%}}
.fx-call-foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);font-family:var(--mono)}
.fx-call-foot .ic{width:14px;height:14px;color:var(--flame)}
.fx-tag{margin-left:auto;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--live);background:var(--live-soft);padding:3px 8px;border-radius:var(--radius-full)}

/* — multi-channel bubbles (fan out on hover) — */
.fx-chat{min-height:158px}
.fx-bub{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;box-shadow:var(--shadow-xs);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.fx-bub + .fx-bub{margin-top:10px}
.fx-bub-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase}
.fx-bub-h .ic{width:14px;height:14px}
.fx-bub-t{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.fx-bub-wa .fx-bub-h{color:var(--whatsapp)}
.fx-bub-em .fx-bub-h{color:var(--email)}
.feat-card:hover .fx-bub-wa{transform:rotate(-2.5deg) translateX(-5px)}
.feat-card:hover .fx-bub-em{transform:rotate(2.5deg) translateX(5px)}

/* — booking card (slides up on hover) — */
.fx-book{min-height:158px}
.fx-book-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow-xs);transform:translateY(12px);transition:transform .28s ease, box-shadow .28s ease}
.feat-card:hover .fx-book-card{transform:translateY(0);box-shadow:var(--shadow-sm)}
.fx-book-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.fx-book-h .ic{width:16px;height:16px;color:var(--calendar)}
.fx-book-when{font-size:12px;color:var(--ink-2);margin-top:6px}
.fx-book-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.fx-ok{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--live)}
.fx-ok .ic{width:13px;height:13px}
.fx-rem{margin-left:auto;font-size:11px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .fx-wave i{animation:none;height:48%}
  .fx-book-card{transform:none}
}

/* ============================================================  SUBPAGES
   About / Contact / Privacy / Terms / Compliance — a sub-hero header plus a
   readable prose column and a few card layouts, all on the shared theme. */
.subhero{padding:64px 0 40px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper-2),var(--paper));position:relative;overflow:hidden}
.subhero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line-2) 1.1px,transparent 1.1px);background-size:26px 26px;opacity:0.45;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 25% 20%,#000 5%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 25% 20%,#000 5%,transparent 75%);pointer-events:none}
.subhero .wrap{position:relative}
.subhero .eyebrow{margin-bottom:14px}
.subhero h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-0.04em;line-height:1.03}
.subhero h1 em{font-style:normal;color:var(--flame)}
.subhero .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);margin-top:16px;max-width:660px;line-height:1.6}
.subhero .eff{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:16px}

/* readable legal/prose column */
.prose{max-width:760px;margin:0 auto;padding:52px 24px 96px}
.prose > p:first-child{font-size:16.5px;color:var(--ink)}
.prose h2{font-size:1.4rem;font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:40px 0 12px;color:var(--ink)}
.prose h3{font-size:1.05rem;font-weight:700;margin:26px 0 8px;color:var(--ink)}
.prose p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin:0 0 14px}
.prose ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose li{position:relative;padding-left:22px;font-size:15px;line-height:1.62;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--flame)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--flame-deep);text-decoration:underline;text-decoration-color:var(--flame-ring);text-underline-offset:2px}
.prose a:hover{text-decoration-color:var(--flame)}
.prose .addr{font-style:normal;line-height:1.8}

/* about value cards */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}
.about-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px}
.about-card .ic-wrap{width:42px;height:42px;border-radius:12px;background:var(--flame-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.about-card .ic-wrap .ic{width:21px;height:21px;color:var(--flame-deep)}
.about-card h3{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-bottom:8px}
.about-card p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:start}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px 26px}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-row:last-child{border-bottom:none}
.contact-row .ic-wrap{width:40px;height:40px;border-radius:11px;background:var(--flame-soft);display:flex;align-items:center;justify-content:center;flex:none}
.contact-row .ic-wrap .ic{width:19px;height:19px;color:var(--flame-deep)}
.contact-row .ct{font-weight:700;font-size:14.5px;margin-bottom:3px}
.contact-row .cs{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.contact-row .cs a{color:var(--flame-deep)}
.contact-aside{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:30px 28px}
.contact-aside h3{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.contact-aside p{font-size:14px;color:rgba(255,255,255,0.7);margin:12px 0 22px;line-height:1.6}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.livedot::after,.eyebrow .dot{animation:none}}

/* lifecycle: sequential process — step lights, line travels to next, next lights... (JS-driven via .active) */
.life-track{position:relative}
.life-track.reveal{opacity:1;transform:none;transition:none}              /* track static; steps + line animate */

/* connector line behind the chevron row (desktop) */
.life-line{position:absolute;top:54px;left:22px;right:22px;height:2px;background:var(--line);z-index:1;border-radius:2px}
.life-step .arr{top:45px}                 /* keep chevron centered on the lowered line */
.life-step .ic-wrap{margin-top:26px}      /* icon follows line up so bottom gap stays the same */
.life-line i{display:block;height:100%;width:0;background:var(--flame);border-radius:2px;box-shadow:0 0 10px -1px var(--flame);transition:width .55s cubic-bezier(.4,0,.2,1)}
@media (max-width:980px){.life-line{display:none}}

/* per-step: dim until activated, then lift + icon draws in (clip wipe + spring) */
.life-step{opacity:.45;z-index:2;transition:opacity .45s ease}   /* above .life-line; opacity<1 makes a stacking context, so step needs its own z-index */
.life-step.active{opacity:1}
.life-step .ic-wrap{transform:scale(.7);transition:transform .5s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease}
.life-step .ic-wrap .ic{clip-path:inset(0 100% 0 0);transition:clip-path .55s ease .08s, color .25s ease}
.life-step.active .ic-wrap{transform:none}
.life-step.active .ic-wrap .ic{clip-path:inset(0 0 0 0)}
.life-step:hover .ic-wrap{background:var(--flame);box-shadow:0 8px 20px -7px var(--flame)}
.life-step:hover .ic-wrap .ic{color:#fff}

/* chevron lights AFTER the line reaches it (line travels ~.55s) — delay .5s; sits above the line */
.life-step .arr{z-index:4;transition:color .25s ease .5s, background .25s ease .5s, border-color .25s ease .5s, transform .4s cubic-bezier(.34,1.56,.64,1) .5s}
.life-step.active .arr{color:#fff;background:var(--flame);border-color:var(--flame);transform:scale(1.12)}

/* reduced motion / no-JS fallback: everything visible, no transitions */
@media (prefers-reduced-motion:reduce){
  .life-step,.life-step .ic-wrap,.life-step .ic,.life-line i{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}