/* =========================================================================
   Slippy — slippy.co.in landing page styles
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --teal-900:#0A4A39; --teal-800:#085041; --teal-700:#0F6E56;
  --teal-600:#13816A; --teal-500:#2A9B83; --teal-400:#5BB7A1;
  --teal-200:#C9E7DE; --teal-100:#E5F2EE;
  --teal-blob:#14826A;
  --cream:#FFF8E7;
  --paper:#FFFFFF;
  --paper-warm:#FBF7EE;
  --ink-900:#1A1A2E; --ink-700:#2B3935; --ink-500:#5A6A65; --ink-400:#8A9994;
  --ink-300:#C5CFCB; --ink-200:#E2E8E5; --ink-100:#F1F4F2;
  --paid:#1F8A5C;
  --shadow-card: 0 1px 0 rgba(14,26,22,0.04), 0 8px 24px rgba(14,26,22,0.06);
  --shadow-card-2: 0 2px 0 rgba(14,26,22,0.04), 0 20px 50px rgba(14,26,22,0.10);
  --shadow-btn: 0 1px 0 rgba(10,74,57,0.18), 0 6px 16px rgba(10,74,57,0.30);
  --shadow-soft: 0 12px 40px rgba(15,110,86,0.18);
}

html{scroll-behavior:smooth}
body{
  font-family:'Nunito', system-ui, -apple-system, sans-serif;
  font-weight:400;
  color:var(--ink-900);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:640px){ .wrap{padding:0 18px} }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:14px 0;
  transition:background 250ms ease, box-shadow 250ms ease;
}
.nav.scrolled{
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(150%) blur(10px);
  box-shadow:0 1px 0 rgba(14,26,22,0.06);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.nav .logo{display:flex;align-items:center;gap:10px}
.nav .logo .mark{
  width:36px;height:36px;border-radius:10px;background:#fff;
  position:relative; overflow:hidden; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,0.10);
}
.nav.scrolled .logo .mark{background:var(--teal-700)}
.nav .logo .mark::before{
  content:'S'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:24px; color:var(--teal-700);
  letter-spacing:-1.5px;
}
.nav.scrolled .logo .mark::before{color:#fff}
.nav .logo .word{font-weight:900;font-size:24px;letter-spacing:-1px;color:#fff}
.nav.scrolled .logo .word{color:var(--teal-700)}
.nav .links{display:flex;gap:28px;align-items:center}
.nav .links a:not(.cta){
  font-weight:600; font-size:14px;
  color:rgba(255,255,255,0.85);
  transition:color 200ms;
}
.nav.scrolled .links a:not(.cta){color:var(--ink-700)}
.nav .links a:not(.cta):hover{color:#fff}
.nav.scrolled .links a:not(.cta):hover{color:var(--teal-700)}
.nav a.cta{
  background:#fff !important; color:var(--teal-700) !important;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:14px;
  white-space:nowrap; flex-shrink:0;
  transition:transform 180ms, background 200ms, color 200ms;
  display:inline-block;
}
.nav.scrolled a.cta{background:var(--teal-700) !important;color:#fff !important}
.nav a.cta:hover{transform:translateY(-1px)}
@media (max-width:760px){
  .nav .links a:not(.cta){display:none}
  .nav .links{gap:0}
  .nav a.cta{padding:9px 14px;font-size:13px}
}
@media (max-width:380px){
  .nav a.cta{padding:8px 12px;font-size:12px}
  .nav .logo .word{font-size:20px}
  .nav .logo .mark{width:32px;height:32px}
  .nav .wrap{padding:0 14px}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  background:var(--teal-700);
  color:#fff;
  padding:140px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%;
  background:var(--teal-blob); opacity:0.6; z-index:-1;
  filter:blur(0px);
}
.hero::before{ width:340px;height:340px; top:-80px; right:-60px; }
.hero::after{ width:260px;height:260px; bottom:-80px; left:-80px; opacity:0.4; }
.hero .blob3{
  position:absolute; width:140px; height:140px; border-radius:34px;
  background:var(--teal-blob); top:240px; left:48%; opacity:0.45; z-index:-1;
  transform:rotate(15deg);
}
.hero .grid-bg{
  position:absolute; inset:0; z-index:-1; opacity:0.18;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,0.7) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 80%);
}
.hero .row{
  display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center;
}
@media (max-width:920px){ .hero .row{grid-template-columns:1fr;gap:50px} }

.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.20);
  padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:#fff;
  margin-bottom:24px;
}
.hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#FFD25A;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.3)}}

.hero h1{
  font-weight:900; font-size:72px; line-height:1.08; letter-spacing:-0.03em;
  margin-bottom:22px;
}
.hero h1 .em{
  font-style:italic; font-weight:900;
  background:linear-gradient(to bottom, #FFD25A 0%, #FFB347 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; padding:0.06em 0.04em 0.18em; line-height:1.15;
}
@media (max-width:760px){ .hero h1{font-size:44px} }

.hero .sub{
  font-size:18px; line-height:1.55; color:rgba(255,255,255,0.85);
  max-width:520px; margin-bottom:36px; font-weight:500;
}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 22px; border-radius:14px; font-weight:800; font-size:15px;
  transition:transform 180ms ease, box-shadow 200ms ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:#fff; color:var(--teal-700);
  box-shadow:0 1px 0 rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.18);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(0,0,0,0.05), 0 14px 36px rgba(0,0,0,0.24)}
.btn-secondary{
  background:rgba(255,255,255,0.10); color:#fff;
  border:1.5px solid rgba(255,255,255,0.30);
}
.btn-secondary:hover{background:rgba(255,255,255,0.18)}
.btn-teal{
  background:var(--teal-700); color:#fff;
  box-shadow:var(--shadow-btn);
}

.hero-trust{
  margin-top:40px;
  display:flex; gap:28px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:rgba(255,255,255,0.75); font-weight:600;
}
.hero-trust .item{display:flex;align-items:center;gap:8px}
.hero-trust .check{
  width:18px;height:18px;border-radius:50%;background:rgba(255,210,90,0.25);
  display:inline-flex;align-items:center;justify-content:center;color:#FFD25A;font-size:11px;font-weight:900;
}

/* ============ HERO PHONE ============ */
.hero .phone-stage{
  position:relative; display:flex; justify-content:center; align-items:center;
  perspective:1400px;
}
.phone{
  width:300px; min-height:600px;
  background:#0E1A16;
  border-radius:42px;
  padding:8px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.06),
    0 50px 80px rgba(0,0,0,0.35),
    0 20px 40px rgba(0,0,0,0.25);
  position:relative;
  transform:rotate(-3deg);
  animation:phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-12px)}
}
.phone .screen{
  background:#fff; border-radius:34px;
  width:100%; height:600px; overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
}
.phone .notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:90px; height:24px; background:#0E1A16; border-radius:999px; z-index:5;
}
.phone .stat{
  flex:0 0 auto; padding:14px 22px 6px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-weight:700;
}
.phone .stat .right{display:flex;gap:5px;align-items:center}
.phone .stat .bar{width:14px;height:8px;background:#0E1A16;border-radius:2px;display:inline-block}
.phone .stat .pct{font-family:'JetBrains Mono',monospace;font-size:10px}

/* receipt content */
.phone .header-bar{
  background:var(--teal-700); color:#fff;
  padding:10px 18px 18px; flex:0 0 auto;
}
.phone .header-bar .title{
  font-weight:800; font-size:18px; text-align:center; margin-top:4px;
}
.phone .header-bar .sub{font-size:11px; text-align:center; opacity:0.8; margin-top:2px}
.phone .body{
  flex:1; background:#FBF7EE; padding:14px; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
}
.phone .card{
  background:#fff; border-radius:14px; padding:14px;
  box-shadow:0 1px 0 rgba(14,26,22,0.04), 0 4px 12px rgba(14,26,22,0.05);
}
.phone .card .lab{
  font-size:9px; color:#5A6A65; text-transform:uppercase;
  letter-spacing:0.10em; font-weight:700; margin-bottom:8px;
}
.phone .row-li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:4px 0;
}
.phone .row-li + .row-li{border-top:1px dashed #E2E8E5}
.phone .name{font-size:12px; font-weight:600; color:#1A1A2E}
.phone .qty{font-family:'JetBrains Mono',monospace; font-size:9px; color:#5A6A65; margin-top:1px}
.phone .price{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; color:#1A1A2E}
.phone .total-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:10px; border-top:1.5px dashed var(--teal-200); margin-top:6px;
}
.phone .total-row .lbl{font-weight:800; font-size:14px}
.phone .total-row .amt{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:22px; color:var(--teal-700)}
.phone .pay-btn{
  background:var(--teal-700); color:#fff;
  padding:12px; border-radius:12px;
  text-align:center; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 1px 0 rgba(10,74,57,0.18), 0 4px 12px rgba(10,74,57,0.22);
  margin-top:auto;
}
.phone .pay-btn .check{
  width:16px;height:16px;background:var(--paid);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;
}

/* Floating chips around phone */
.chip-fly{
  position:absolute;
  background:#fff;
  border-radius:14px;
  padding:10px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
  font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:10px;
  color:var(--ink-900);
  animation:chipFloat 5s ease-in-out infinite;
}
.chip-fly .ic{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.chip-fly.print{ top:80px; left:-30px; animation-delay:0.5s; }
.chip-fly.print .ic{background:var(--teal-100); color:var(--teal-700)}
.chip-fly.upi{ top:280px; right:-50px; animation-delay:1.5s; }
.chip-fly.upi .ic{background:#DEF1E6; color:var(--paid)}
.chip-fly .small{font-size:10px;color:var(--ink-500);font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
@keyframes chipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media (max-width:920px){ .chip-fly{display:none} }

/* ============ section tools ============ */
section{padding:90px 0; position:relative}
.section-head{ text-align:center; max-width:680px; margin:0 auto 60px }
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--teal-100); color:var(--teal-700);
  padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:0.10em; text-transform:uppercase;
  margin-bottom:18px;
}
h2.section-title{
  font-weight:900; font-size:48px; line-height:1.05; letter-spacing:-0.02em;
  color:var(--ink-900); margin-bottom:14px;
}
@media (max-width:640px){ h2.section-title{font-size:32px} }
.section-sub{font-size:18px; color:var(--ink-700); line-height:1.55; max-width:600px;margin:0 auto}

/* ============ HOW IT WORKS ============ */
.how{ background:var(--teal-700); color:#fff; overflow:hidden; position:relative; }
.how::before{
  content:''; position:absolute; inset:0; opacity:0.18; z-index:0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.6) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%);
}
.how > *{position:relative; z-index:1}
.how h2.section-title, .how .section-sub, .how .eyebrow-pill{color:#fff}
.how .eyebrow-pill{background:rgba(255,255,255,0.14); color:#FFD25A}
.how .section-sub{color:rgba(255,255,255,0.80)}
.how .steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  position:relative;
}
@media (max-width:880px){ .how .steps{grid-template-columns:1fr} }
.step{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:24px; padding:32px 28px;
  position:relative;
  transition:transform 250ms ease, background 250ms ease;
}
.step:hover{transform:translateY(-6px); background:rgba(255,255,255,0.10)}
.step .num{
  font-family:'Nunito',sans-serif; font-weight:900; font-size:64px;
  background:linear-gradient(to bottom, #FFD25A 0%, #FFB347 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1; letter-spacing:-0.04em;
  margin-bottom:14px;
}
.step h3{font-weight:800; font-size:24px; color:#fff; margin-bottom:10px}
.step p{color:rgba(255,255,255,0.78); font-size:15px; line-height:1.55}
.step .tag{
  display:inline-block; background:#FFD25A; color:var(--ink-900);
  font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-top:14px;
}

/* ============ FEATURES ============ */
.features-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media (max-width:980px){ .features-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .features-grid{grid-template-columns:1fr} }
.feat{
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:20px; padding:28px 24px;
  transition:transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  position:relative; overflow:hidden;
}
.feat:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-2);
  border-color:transparent;
}
.feat .ic{
  width:54px; height:54px; border-radius:14px;
  background:var(--teal-100); color:var(--teal-700);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.feat .ic svg{width:26px;height:26px}
.feat h3{
  font-weight:800; font-size:20px; color:var(--ink-900);
  margin-bottom:8px; letter-spacing:-0.01em;
}
.feat p{font-size:14.5px; color:var(--ink-700); line-height:1.55}
.feat.highlight{
  background:linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800) 100%);
  color:#fff;
  border-color:transparent;
}
.feat.highlight h3, .feat.highlight p{color:#fff}
.feat.highlight p{color:rgba(255,255,255,0.82)}
.feat.highlight .ic{background:rgba(255,255,255,0.18); color:#FFD25A}

/* ============ FOR WHOM ============ */
.who{ background:var(--paper-warm); }
.who-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  max-width:1000px; margin:40px auto 0;
}
@media (max-width:880px){ .who-grid{grid-template-columns:repeat(2,1fr)} }
.who-item{
  background:#fff; border-radius:16px; padding:24px 18px;
  text-align:center;
  transition:transform 220ms ease, box-shadow 220ms ease;
  border:1px solid var(--ink-200);
}
.who-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-card)}
.who-item .emo{font-size:34px; margin-bottom:10px}
.who-item .name{font-weight:800; font-size:14px; color:var(--ink-900)}
.who-callout{
  margin-top:50px; background:#fff; border-radius:24px;
  padding:36px; display:grid; grid-template-columns:auto 1fr; gap:30px;
  align-items:center; box-shadow:var(--shadow-card);
  border:1px solid var(--ink-200);
}
@media (max-width:760px){.who-callout{grid-template-columns:1fr;text-align:center}}
.who-callout .badge{
  width:84px; height:84px; border-radius:24px;
  background:var(--teal-700); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:38px;
  flex-shrink:0;
}
.who-callout h3{font-weight:900; font-size:24px; margin-bottom:8px}
.who-callout p{color:var(--ink-700); font-size:16px}

/* ============ PRICING ============ */
.pricing-card{
  max-width:520px; margin:0 auto;
  background:#fff;
  border-radius:28px;
  padding:48px 40px;
  box-shadow:var(--shadow-card-2);
  position:relative;
  border:2px solid var(--teal-700);
  overflow:hidden;
}
.pricing-card::before{
  content:''; position:absolute; top:-100px; right:-100px;
  width:240px; height:240px; border-radius:50%;
  background:var(--teal-100); z-index:0;
}
.pricing-card > *{position:relative; z-index:1}
.pricing-banner{
  display:inline-flex; align-items:center; gap:6px;
  background:#FFD25A; color:var(--ink-900);
  padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:900; letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:20px;
}
.pricing-card .price{
  display:flex; align-items:baseline; gap:6px; margin-bottom:6px;
}
.pricing-card .price .amt{
  font-weight:900; font-size:72px; letter-spacing:-0.04em; color:var(--ink-900); line-height:1;
}
.pricing-card .price .per{font-size:18px; color:var(--ink-500); font-weight:700}
.pricing-card .scope{color:var(--ink-500); font-size:14px; margin-bottom:24px}
.pricing-card hr{ border:0; height:1px; background:var(--ink-200); margin:24px 0 }
.pricing-card ul{list-style:none}
.pricing-card li{
  display:flex; align-items:center; gap:12px;
  padding:8px 0; font-size:15px; color:var(--ink-700); font-weight:600;
}
.pricing-card li .v{
  width:22px;height:22px; border-radius:50%;
  background:var(--teal-100); color:var(--teal-700);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px;
  flex-shrink:0;
}
.pricing-card .cta-row{ margin-top:28px }
.pricing-card .cta-row .btn{ width:100%; justify-content:center }
.pricing-foot{
  text-align:center; margin-top:24px;
  font-size:13px; color:var(--ink-500); font-weight:600;
}
.pricing-foot span{margin:0 12px}

/* ============ DATA PRIVACY ============ */
.privacy{ background:var(--ink-900); color:#fff; }
.privacy h2{color:#fff}
.privacy .section-sub{color:rgba(255,255,255,0.70)}
.privacy .eyebrow-pill{background:rgba(255,210,90,0.18); color:#FFD25A}
.privacy-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px;
}
@media (max-width:880px){.privacy-cols{grid-template-columns:1fr}}
.priv-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px; padding:28px;
}
.priv-card h3{
  font-weight:800; font-size:18px; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.priv-card h3 .dot{width:10px;height:10px;border-radius:50%}
.priv-card.on h3 .dot{background:var(--paid)}
.priv-card.off h3 .dot{background:#FF6B6B}
.priv-card.cn h3 .dot{background:#FFD25A}
.priv-card ul{list-style:none}
.priv-card li{
  font-size:14.5px; color:rgba(255,255,255,0.78);
  padding:5px 0; padding-left:16px; position:relative;
}
.priv-card li::before{
  content:''; position:absolute; left:0; top:13px;
  width:5px;height:5px;border-radius:50%; background:rgba(255,255,255,0.4);
}
.privacy .closer{
  margin-top:50px; text-align:center;
  background:rgba(255,210,90,0.10); border:1px solid rgba(255,210,90,0.20);
  border-radius:20px; padding:24px; color:#fff;
  font-weight:700; font-size:16px;
}
.privacy .closer .em{color:#FFD25A}

/* ============ CONTACT ============ */
.contact{ background:var(--teal-700); color:#fff; overflow:hidden; position:relative; }
.contact::before{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background:var(--teal-blob); top:-100px; right:-80px; opacity:0.5;
}
.contact > *{position:relative; z-index:1}
.contact .row{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center}
@media (max-width:880px){.contact .row{grid-template-columns:1fr}}
.contact h2{color:#fff; margin-bottom:14px}
.contact .lead{font-size:18px; color:rgba(255,255,255,0.85); margin-bottom:30px}
.contact .ctas{display:flex; gap:14px; flex-wrap:wrap}
.contact .meta{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:36px;
}
.contact .meta .it{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  padding:16px; border-radius:14px;
}
.contact .meta .lab{
  font-size:11px; font-weight:800; letter-spacing:0.10em;
  text-transform:uppercase; color:#FFD25A; margin-bottom:6px;
}
.contact .meta .v{font-weight:700}
.contact .number{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:32px; color:#FFD25A; letter-spacing:-0.01em;
  margin-bottom:8px;
}
.contact .number-tag{
  font-size:12px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:rgba(255,255,255,0.70); margin-bottom:30px;
}

/* WhatsApp art */
.wa-art{
  background:#fff; border-radius:24px; padding:24px;
  box-shadow:0 30px 60px rgba(0,0,0,0.20);
  transform:rotate(2deg);
}
.wa-art .header{
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px; border-bottom:1px solid #E2E8E5;
}
.wa-art .avatar{
  width:46px; height:46px; border-radius:50%; background:var(--teal-700);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:22px;
}
.wa-art .nm{font-weight:800; color:#1A1A2E; font-size:15px}
.wa-art .st{font-size:11px; color:var(--paid); font-weight:700; display:flex; align-items:center; gap:5px}
.wa-art .st .lvd{width:6px;height:6px;border-radius:50%;background:var(--paid)}
.wa-art .msgs{display:flex; flex-direction:column; gap:10px; padding:18px 0 6px}
.wa-art .msg{padding:10px 14px; max-width:86%; font-size:14px; line-height:1.4}
.wa-art .msg.them{
  background:var(--ink-100); color:var(--ink-900);
  border-radius:14px 14px 14px 2px; align-self:flex-start;
}
.wa-art .msg.us{
  background:var(--teal-100); color:var(--teal-900);
  border-radius:14px 14px 2px 14px; align-self:flex-end;
}
.wa-art .msg .ti{font-size:10px;color:var(--ink-500); margin-top:4px; text-align:right; font-family:'JetBrains Mono',monospace}

/* ============ FAQ ============ */
.faq-list{ max-width:860px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid var(--ink-200);
  padding:18px 0;
}
.faq-item:first-child{border-top:1px solid var(--ink-200)}
.faq-q{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; padding:6px 0;
  font-weight:800; font-size:18px; color:var(--ink-900);
  gap:20px;
}
.faq-q:hover{color:var(--teal-700)}
.faq-q .plus{
  width:32px; height:32px; border-radius:50%;
  background:var(--teal-100); color:var(--teal-700);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900;
  transition:transform 250ms ease, background 250ms ease;
  flex-shrink:0;
}
.faq-item.open .faq-q .plus{transform:rotate(45deg); background:var(--teal-700); color:#fff}
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height 350ms ease, padding 250ms ease, opacity 250ms ease;
  color:var(--ink-700); font-size:16px; line-height:1.6;
  opacity:0;
}
.faq-item.open .faq-a{max-height:300px; padding-top:10px; opacity:1}

/* ============ FOOTER ============ */
.footer{
  background:var(--ink-900); color:rgba(255,255,255,0.70);
  padding:70px 0 40px;
}
.footer .row{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
}
@media (max-width:880px){.footer .row{grid-template-columns:1fr 1fr}}
.footer h4{
  font-weight:800; font-size:13px; color:#fff;
  text-transform:uppercase; letter-spacing:0.10em;
  margin-bottom:14px;
}
.footer ul{list-style:none}
.footer li{padding:5px 0; font-size:14px}
.footer li a:hover{color:#fff}
.footer .brand .logo-row{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.footer .brand .mark{
  width:42px;height:42px;border-radius:12px;background:var(--teal-700);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:26px; letter-spacing:-1.5px;
}
.footer .brand .word{color:#fff; font-weight:900; font-size:24px; letter-spacing:-1px}
.footer .brand p{font-size:14px; max-width:320px}
.footer .brand .tag{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:#FFD25A; font-weight:600; margin-top:10px;
}
.footer .bottom{
  margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.10);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px;
}

/* ============ WhatsApp float ============ */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(37,211,102,0.45);
  transition:transform 200ms ease;
  animation:waPulse 2.5s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.1)}
@keyframes waPulse{
  0%,100%{box-shadow:0 10px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 10px 28px rgba(37,211,102,0.45), 0 0 0 14px rgba(37,211,102,0)}
}
.wa-float svg{width:28px;height:28px}

/* ============ animations ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 700ms ease, transform 700ms ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.d1{transition-delay:80ms}
.reveal.d2{transition-delay:160ms}
.reveal.d3{transition-delay:240ms}
.reveal.d4{transition-delay:320ms}
.reveal.d5{transition-delay:400ms}
.reveal.d6{transition-delay:480ms}

/* receipt edge motif */
.tear{
  height:14px;
  background:var(--paper);
  -webkit-mask: radial-gradient(circle 7px at 7px 7px, transparent 99%, black 100%) -7px 0 / 14px 14px;
  mask: radial-gradient(circle 7px at 7px 7px, transparent 99%, black 100%) -7px 0 / 14px 14px;
  margin-top:-1px;
}
.tear.dark{background:var(--ink-900)}
.tear.teal{background:var(--teal-700)}