/*
Theme Name: Digital Raghaw
Theme URI: https://digitalraghaw.com/
Author: Raghaw Mishra
Author URI: https://digitalraghaw.com/
Description: Custom WordPress theme for Digital Raghaw - Meta Ads and Google Ads management for eCommerce brands and lead-generation businesses. Self-contained, no page builder, no build step.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-raghaw
Tags: business, one-column, custom-colors, custom-menu, translation-ready
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --green:#11B47A; --green-link:#08AC6E; --green-deep:#078A58; --green-ring:#149061;
  --ink:#000B17; --sub:#2A343E; --muted:#80858B;
  --bg-alt:#F6F6F6; --white:#FFFFFF; --line:#E9E9E9;
  --mint:#EEFAF6; --mint-deep:#EAF8F3;
  --display:'Plus Jakarta Sans',sans-serif;
  --body:'Inter',sans-serif;
  --wrap:1180px;
  --head-h:72px;
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1rem;line-height:1.65;color:var(--sub);
  background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-link);text-decoration:none}
a:hover{color:var(--green-deep)}
h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--ink);margin:0 0 14px}
h1{font-size:clamp(2.15rem,4.6vw,3.55rem);font-weight:800;letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.16}
h3{font-size:1.08rem;font-weight:700;line-height:1.35}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:20px}
li{margin:0 0 8px}
strong,b{font-weight:700;color:var(--ink)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 18px;
  border-radius:0 0 10px 0;z-index:200;font-family:var(--display);font-weight:700}
.skip:focus{left:0;color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:88px 0}
.alt{background:var(--bg-alt)}
.lead{font-size:1.04rem;line-height:1.68;color:var(--muted)}
.center{text-align:center}
section[id],div[id],.lane[id]{scroll-margin-top:84px}

/* ============================================================
   3. SCROLL PROGRESS BAR
   ============================================================ */
#scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--green);z-index:110;
  transition:width .08s linear}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-head{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.site-head.stuck{box-shadow:0 6px 22px rgba(0,11,23,.07)}
.head-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:14px}

.logo{display:flex;align-items:center;gap:0;font-family:var(--display);font-weight:800;
  font-size:1.16rem;color:var(--ink);letter-spacing:-.03em;line-height:1}
.logo:hover{color:var(--ink)}
.logo i{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;background:var(--green);color:#fff;font-style:normal;font-weight:800;
  font-size:1rem;margin-right:10px;flex:0 0 auto}
.logo b{font-weight:800}
.logo span{color:var(--green)}

.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.menu li{margin:0}
.menu a{display:block;font-family:var(--display);font-weight:600;font-size:.92rem;
  color:var(--sub);padding:9px 13px;border-radius:8px}
.menu a:hover{color:var(--green-deep);background:var(--mint)}
.menu a[aria-current="page"]{color:var(--green-deep);background:var(--mint);font-weight:700}

.nav-right{display:flex;align-items:center;gap:12px}
.burger{display:block}
@media(min-width:1081px){.burger{display:none!important}}

@media(max-width:1080px){
  .menu{position:fixed;top:var(--head-h);left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,11,23,.12);padding:10px 0;max-height:calc(100vh - var(--head-h));
    overflow-y:auto;z-index:99}
  .menu.open{display:flex}
  .menu a{padding:14px 24px;border-radius:0;font-size:1rem;border-left:3px solid transparent}
  .menu a[aria-current="page"]{border-left-color:var(--green);background:var(--mint)}
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--display);
  font-weight:700;font-size:.94rem;padding:14px 26px;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,transform .18s,box-shadow .18s;text-align:center}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(17,180,122,.28)}
.btn-primary:hover{background:var(--green-deep);color:#fff;transform:translateY(-2px)}
/* Anchors styled as buttons inherit link colours in some contexts (footer,
   prose, visited state). Pin the text to white so the CTA never goes
   green-on-green and become unreadable. */
a.btn-primary,a.btn-primary:link,a.btn-primary:visited,a.btn-primary:hover,a.btn-primary:active,a.btn-primary:focus,
.site-foot .btn-primary,.prose .btn-primary,.band-dark .btn-primary,.band-green .btn-primary{color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--green)}
.btn-ghost:hover{background:var(--mint);color:var(--ink)}
.btn-light{background:#fff;color:var(--green-deep)}
.btn-light:hover{background:var(--mint);color:var(--green-deep);transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:.88rem}
@media(max-width:680px){.btn{min-height:46px;width:100%}}
/* Header CTA is hidden once the burger appears. This needs to sit AFTER the
   .btn rules and carry extra specificity - .head-cta alone loses the cascade
   to .btn{display:inline-flex} and the button then wraps across the header. */
@media(max-width:1080px){
  .head-in .nav-right .head-cta{display:none}
}

/* ============================================================
   6. SECTION HEADERS / EYEBROWS / PILLS
   ============================================================ */
.head-block{max-width:720px;margin:0 0 40px}
.head-block.center{margin:0 auto 44px;text-align:center}
.eyebrow{display:inline-block;font-family:var(--display);font-weight:800;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin:0 0 12px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--green-deep);
  border:1px solid #D8F0E7;border-radius:999px;padding:7px 15px;font-family:var(--display);
  font-weight:700;font-size:.8rem;margin:0 0 20px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulseDot 2.4s infinite}
.crumb{font-size:.84rem;color:var(--muted);margin:0 0 16px;font-family:var(--display);font-weight:500}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--green-deep)}
.crumb span{margin:0 7px;opacity:.6}

/* ============================================================
   7. GRIDS AND CARDS
   ============================================================ */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--green);
  transition:width .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,11,23,.08)}
.card:hover::after{width:100%}
.card h3{margin:0 0 10px}
.card p{margin:0 0 12px;color:var(--muted);font-size:.96rem}
.card p:last-child{margin:0}
.ico{width:44px;height:44px;border-radius:12px;background:var(--mint);display:flex;
  align-items:center;justify-content:center;margin:0 0 16px;color:var(--green-deep)}
.card:hover .ico{background:#DFF4EC}
.ico svg{width:22px;height:22px}
.card-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);
  font-weight:700;font-size:.9rem;color:var(--green-deep)}

.plain{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.plain h3{margin:0 0 8px}
.plain p{color:var(--muted);font-size:.95rem;margin:0}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{position:relative;padding:66px 0 82px;overflow:hidden;
  background:linear-gradient(170deg,#fff 0%,#fff 42%,var(--mint) 100%)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(17,180,122,.16),rgba(17,180,122,0) 68%)}
.hero::before{width:520px;height:520px;top:-190px;right:-140px;animation:drift 22s ease-in-out infinite}
.hero::after{width:420px;height:420px;bottom:-190px;left:-150px;animation:drift 27s ease-in-out infinite reverse}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.hero-copy{animation:floatUp .7s ease both}
.hero h1 span{color:var(--green-deep);position:relative;white-space:nowrap}
.hero h1 span::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.34em;
  background:rgba(17,180,122,.16);border-radius:4px;z-index:-1}
.hero .lead{max-width:560px;margin:0 0 26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 30px}

.trust-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.trust-list li{position:relative;padding-left:32px;margin:0;font-size:.96rem;color:var(--muted)}
.trust-list li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;
  border-radius:50%;background:var(--mint);border:1.5px solid var(--green)}
.trust-list li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;
  border-right:2px solid var(--green-deep);border-bottom:2px solid var(--green-deep);
  transform:rotate(42deg)}
.trust-list b{color:var(--ink)}

/* Hero dashboard panel - ALL selectors scoped under .dash */
.dash{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  box-shadow:0 20px 50px rgba(0,11,23,.09);animation:floatUp .8s .12s ease both}
.dash .dash-h{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.dash .switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg-alt);
  border-radius:11px;padding:4px;margin:0 0 18px}
.dash .switch button{border:0;background:transparent;font-family:var(--display);font-weight:700;
  font-size:.86rem;color:var(--muted);padding:10px 8px;border-radius:8px;cursor:pointer;
  transition:background .18s,color .18s}
.dash .switch button.on{background:#fff;color:var(--green-deep);box-shadow:0 2px 8px rgba(0,11,23,.07)}
.dash .mode-text{font-size:.93rem;color:var(--muted);margin:0 0 18px;line-height:1.6}
.dash .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dash .tile{background:var(--mint-deep);border-radius:12px;border-top:3px solid var(--green);
  padding:14px 14px 15px}
.dash .tile b{display:block;font-family:var(--display);font-weight:800;font-size:1.42rem;
  color:var(--green-deep);letter-spacing:-.02em;line-height:1.2}
.dash .tile small{display:block;font-size:.78rem;color:var(--muted);line-height:1.45;margin-top:5px}
.dash .foot-note{font-size:.82rem;color:var(--muted);margin:16px 0 0;text-align:center}

/* Hero dashboard: header, animated KPIs, dual-series chart */
.dash .dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
.dash .dash-h{margin:0 0 3px}
.dash .dash-sub{margin:0;font-size:.76rem;color:var(--muted)}
.dash .dash-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);
  font-weight:700;font-size:.7rem;color:var(--green-deep);background:var(--mint);
  border:1px solid #D8F0E7;border-radius:999px;padding:5px 10px;white-space:nowrap;flex:0 0 auto}
.dash .dash-live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseDot 1.8s infinite}

.dash .kpi-row{display:flex;align-items:stretch;gap:14px;margin:0 0 14px}
.dash .kpi-main{flex:1 1 auto;background:linear-gradient(140deg,#F4FCF9,var(--mint-deep));
  border:1px solid #D8F0E7;border-radius:14px;padding:16px 18px;display:flex;
  flex-direction:column;justify-content:center}
.dash .kpi-label{display:block;font-size:.74rem;color:var(--muted);font-weight:600;
  font-family:var(--display);margin:0 0 2px}
.dash .kpi-value{display:flex;align-items:baseline;font-family:var(--display);font-weight:800;
  font-size:2.45rem;line-height:1.05;color:var(--green-deep);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.dash .kpi-value em{font-style:normal;font-size:1.5rem;font-weight:800}
.dash .kpi-delta{display:block;font-size:.78rem;color:var(--green-deep);font-weight:600;margin-top:5px}
.dash .kpi-delta em{font-style:normal;font-size:.7rem}
.dash .kpi-side{flex:0 0 150px;display:flex;flex-direction:column;gap:10px}
.dash .kpi-side div{background:var(--bg-alt);border-radius:12px;padding:10px 12px;flex:1}
.dash .kpi-side span{display:block;font-size:.72rem;color:var(--muted);font-weight:600;
  font-family:var(--display);line-height:1.25;margin:0 0 4px}
.dash .kpi-side b{display:flex;align-items:baseline;font-family:var(--display);font-weight:800;
  font-size:1.6rem;line-height:1.1;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.dash .kpi-side b em{font-style:normal;font-size:1.1rem;font-weight:800;color:var(--muted)}

.dash .chart{position:relative;margin:0 0 16px}
.dash .chart-grid{position:absolute;inset:0 0 22px 0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none}
.dash .chart-grid i{display:block;height:1px;background:var(--line)}
.dash .bars{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:3px;height:104px}
.dash .bars span{position:relative;flex:1;height:var(--h);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--green),#3FCB98);transform-origin:bottom;transform:scaleY(0);
  transition:transform .75s cubic-bezier(.22,1,.36,1)}
.dash .bars span::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--s) / var(--h) * 100%);background:var(--ink);opacity:.16;border-radius:3px 3px 0 0}
.dash.dash-in .bars span{transform:scaleY(1)}
.dash .bars span:nth-child(1){transition-delay:.04s}
.dash .bars span:nth-child(2){transition-delay:.09s}
.dash .bars span:nth-child(3){transition-delay:.14s}
.dash .bars span:nth-child(4){transition-delay:.19s}
.dash .bars span:nth-child(5){transition-delay:.24s}
.dash .bars span:nth-child(6){transition-delay:.29s}
.dash .bars span:nth-child(7){transition-delay:.34s}
.dash .bars span:nth-child(8){transition-delay:.39s}
.dash .bars span:nth-child(9){transition-delay:.44s}
.dash .bars span:nth-child(10){transition-delay:.49s}
.dash .bars span:nth-child(11){transition-delay:.54s}
.dash .bars span:nth-child(12){transition-delay:.59s}
.dash .chart-key{display:flex;gap:16px;margin:8px 0 0;font-size:.7rem;color:var(--muted);
  font-family:var(--display);font-weight:600}
.dash .chart-key span{display:inline-flex;align-items:center;gap:5px}
.dash .chart-key i{width:9px;height:9px;border-radius:3px;display:inline-block}
.dash .chart-key .k-rev{background:var(--green)}
.dash .chart-key .k-spend{background:var(--ink);opacity:.28}

.dash .dash-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dash .dash-list li{margin:0;background:var(--mint-deep);border-radius:10px;padding:10px 12px;
  border-left:3px solid var(--green)}
.dash .dash-list b{display:block;font-family:var(--display);font-weight:800;font-size:.92rem;
  color:var(--green-deep);line-height:1.2}
.dash .dash-list small{display:block;font-size:.7rem;color:var(--muted);line-height:1.4;margin-top:3px}

@media(max-width:520px){
  .dash .kpi-row{flex-direction:column}
  .dash .kpi-side{flex:1 1 auto;flex-direction:row}
  .dash .kpi-side div{flex:1 1 0;min-width:0}
  .dash .kpi-value{font-size:2.2rem}
  .dash .kpi-side b{font-size:1.4rem}
}
@media(max-width:420px){
  .dash .bars{height:82px}
  .dash .dash-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .dash .bars span{transform:scaleY(1)}
}

/* ============================================================
   9. MINT LANES
   ============================================================ */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lane{border:1px solid var(--line);border-radius:16px;padding:32px 28px;position:relative;overflow:hidden}
.lane.mint{background:linear-gradient(150deg,#F4FCF9 0%,var(--mint) 55%,var(--mint-deep) 100%);
  border-color:#D8F0E7}
.lane.mint::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.lane.mint::after{content:"";position:absolute;right:-70px;bottom:-70px;width:190px;height:190px;
  border:1px solid rgba(17,180,122,.22);border-radius:50%;pointer-events:none}
.lane .track{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);margin:0 0 10px}
.lane h3{font-size:1.32rem;margin:0 0 10px}
.lane p{color:var(--sub);font-size:.96rem}
.lane ul{list-style:none;padding:0;margin:16px 0 0;position:relative;z-index:2}
.lane ul li{position:relative;padding-left:22px;font-size:.94rem;color:var(--sub)}
.lane ul li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:2px;background:var(--green)}
.lane .fit{margin-top:18px;padding-top:16px;border-top:1px solid #D8F0E7;font-size:.9rem;
  color:var(--muted);position:relative;z-index:2}

/* ============================================================
   10. STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px;position:relative}
.step .num{font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.14em;
  color:var(--green-deep);display:block;margin:0 0 12px}
.step h3{margin:0 0 8px}
.step p{color:var(--muted);font-size:.93rem;margin:0}

/* ============================================================
   11. CHECK TILES
   ============================================================ */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.check{background:var(--mint);border:1px solid #D8F0E7;border-radius:13px;padding:22px 20px}
.check h3{font-size:1rem;margin:0 0 7px;color:var(--green-deep)}
.check p{margin:0;font-size:.92rem;color:var(--sub)}

/* ============================================================
   12. CTA BANDS
   ============================================================ */
.band-green{background:var(--green-deep);border-radius:22px;padding:66px 40px;text-align:center;
  position:relative;overflow:hidden}
.band-green::after{content:"";position:absolute;top:-90px;right:-90px;width:300px;height:300px;
  border:2px solid var(--green-ring);border-radius:50%;animation:spinSlow 44s linear infinite}
.band-green>*{position:relative;z-index:2}
.band-green .pill{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
.band-green .pill .dot{background:#fff}
.band-green h2{color:#fff;max-width:640px;margin:0 auto 14px}
.band-green p{color:rgba(255,255,255,.9);max-width:600px;margin:0 auto 26px}

.band-dark{background:var(--ink);border-radius:20px;padding:46px 40px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:26px;position:relative;overflow:hidden}
.band-dark::after{content:"";position:absolute;left:-110px;bottom:-130px;width:290px;height:290px;
  border:2px solid rgba(17,180,122,.3);border-radius:50%;animation:spinSlow 52s linear infinite}
.band-dark>*{position:relative;z-index:2}
.band-dark h2{color:#fff;margin:0 0 8px;font-size:clamp(1.45rem,2.8vw,2rem)}
.band-dark p{color:rgba(255,255,255,.72);margin:0;max-width:520px;font-size:.98rem}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq{max-width:820px;margin:0 auto}
.q{border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 12px;overflow:hidden}
.q button{width:100%;text-align:left;background:none;border:0;padding:20px 52px 20px 22px;
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;
  position:relative}
.q button::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s}
.q.open button::after{transform:translateY(-30%) rotate(225deg)}
.q .a{display:none;padding:0 22px 22px;color:var(--muted);font-size:.96rem}
.q.open .a{display:block}
.q.open{border-color:var(--green)}

/* ============================================================
   14. PROSE (legal + blog)
   ============================================================ */
.prose{max-width:800px}
.prose h2{font-size:1.5rem;margin:38px 0 12px}
.prose h3{margin:26px 0 8px}
.prose p,.prose li{color:var(--muted)}
.prose .updated{font-size:.88rem;color:var(--muted);padding:12px 16px;background:var(--bg-alt);
  border-radius:10px;display:inline-block;margin:0 0 8px}
.callout{background:var(--mint);border:1px solid #D8F0E7;border-left:3px solid var(--green);
  border-radius:12px;padding:22px 24px;margin:26px 0}
.callout h3{color:var(--green-deep);margin:0 0 8px}
.callout p:last-child{margin:0}
.callout ul{margin:10px 0 0}

/* ============================================================
   15. TABLES
   ============================================================ */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.data{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px;background:#fff}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.data th{font-family:var(--display);font-weight:700;color:var(--ink);background:var(--mint);
  font-size:.86rem;letter-spacing:.02em}
table.data tr:last-child td{border-bottom:0}
table.data td{color:var(--muted)}
table.data td strong{color:var(--ink)}

/* ============================================================
   16. CHIP / LINK GRIDS
   ============================================================ */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;padding:0;margin:0}
.chips li{margin:0}
.chips a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--sub);
  transition:border-color .18s,background .18s,color .18s}
.chips a:hover{border-color:var(--green);background:var(--mint);color:var(--green-deep)}
.chips a small{display:block;font-weight:500;font-size:.78rem;color:var(--muted);margin-top:3px}

/* ============================================================
   17. FORM
   ============================================================ */
.form-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px;
  box-shadow:0 14px 40px rgba(0,11,23,.06)}
.field{margin:0 0 16px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.87rem;
  color:var(--ink);margin:0 0 7px}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:.95rem;
  color:var(--sub);padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:#fff;transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(17,180,122,.14)}
.field .hint{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.form-err{background:#FCEBEB;color:#A32D2D;border-radius:8px;padding:10px 14px;font-size:.88rem;
  margin:0 0 14px}
.form-note{font-size:.82rem;color:var(--muted);margin:14px 0 0;text-align:center}

/* ============================================================
   18. CONTACT / SPLIT LAYOUT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.split-wide{grid-template-columns:1.1fr .9fr}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 24px 30px;border-left:2px solid var(--line);margin:0}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 0 0 2px var(--mint)}
.timeline b{display:block;font-family:var(--display);color:var(--ink);margin:0 0 4px}
.timeline p{margin:0;font-size:.94rem;color:var(--muted)}

/* ============================================================
   19. THANK YOU
   ============================================================ */
.tick{width:78px;height:78px;border-radius:50%;background:var(--mint);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.tick::after{content:"";width:16px;height:30px;border-right:4px solid var(--green-deep);
  border-bottom:4px solid var(--green-deep);transform:rotate(42deg) translateY(-4px)}

/* ============================================================
   20. FOOTER
   ============================================================ */
.site-foot{background:#fff;border-top:1px solid var(--line);padding:60px 0 0}
.f-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 24px}
.f-brand{grid-column:1/-1;max-width:400px}
.f-brand .logo{margin:0 0 14px}
.f-brand p{font-size:.92rem;color:var(--muted);margin:0 0 14px}
.f-h{font-family:var(--display);font-weight:800;font-size:.86rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink);margin:0 0 14px;padding:0 0 8px;position:relative}
.f-h::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;background:var(--green)}
.f-col ul{list-style:none;padding:0;margin:0}
.f-col li{margin:0 0 9px}
.f-col a{font-size:.9rem;color:var(--muted)}
.f-col a:hover{color:var(--green-deep)}
.f-brand .btn,.f-brand .btn:visited,.f-brand .btn:hover{color:#fff}

.f-contact{margin:44px 0 0;padding:26px 0;border-top:1px solid var(--line);display:flex;
  flex-wrap:wrap;align-items:center;gap:14px 28px;font-size:.9rem;color:var(--muted)}
.f-contact a{color:var(--muted)}
.f-contact a:hover{color:var(--green-deep)}
.f-social{display:flex;gap:10px;margin-left:auto}
.f-social a{width:38px;height:38px;border-radius:10px;background:var(--mint);display:flex;
  align-items:center;justify-content:center;color:var(--green-deep);border:1px solid #D8F0E7}
.f-social a:hover{background:var(--green);color:#fff;border-color:var(--green)}
.f-social svg{width:18px;height:18px}

.f-bottom{background:var(--ink);color:rgba(255,255,255,.62);padding:18px 0;font-size:.86rem}
.f-bottom .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.f-bottom a{color:rgba(255,255,255,.62)}
.f-bottom a:hover{color:#fff}
.f-bottom nav{display:flex;gap:18px;flex-wrap:wrap}

/* ============================================================
   21. WHATSAPP FAB
   ============================================================ */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:80;width:54px;height:54px;border-radius:50%;
  background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(17,180,122,.4)}
.wa-fab:hover{background:var(--green-deep);color:#fff}
.wa-fab svg{width:27px;height:27px}

/* ============================================================
   22. 404 AND BLOG
   ============================================================ */
.post-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.post-card h2{font-size:1.25rem;margin:0 0 8px}
.post-card .meta{font-size:.84rem;color:var(--muted);margin:0 0 10px}
.pager{display:flex;gap:12px;justify-content:center;margin:36px 0 0}

/* ============================================================
   23. REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,22px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes shine{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media(max-width:1180px){.wrap,.head-in{padding:0 28px}}
@media(max-width:1080px){
  section{padding:76px 0}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero .lead{max-width:none}
  .chips{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  section{padding:64px 0}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:repeat(2,1fr)}
  .lanes{grid-template-columns:1fr}
  .split,.split-wide{grid-template-columns:1fr;gap:34px}
  .band-green{padding:52px 26px}
  .band-dark{padding:36px 26px}
}
@media(max-width:680px){
  section{padding:54px 0}
  .wrap,.head-in{padding:0 20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,1fr)}
  .hero{padding:44px 0 60px}
  .hero-cta{flex-direction:column}
  .dash .tiles{grid-template-columns:1fr 1fr}
  .f-contact{flex-direction:column;align-items:flex-start}
  .f-social{margin-left:0}
}
@media(max-width:400px){
  .wrap,.head-in{padding:0 16px}
  .dash .tiles{grid-template-columns:1fr}
  .chips{grid-template-columns:1fr}
}

/* Footer layout - single authoritative block, appended last on purpose.
   Two columns on mobile, never one. */
@media(max-width:1080px){.f-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.f-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}}

@media(hover:none){
  .card:hover,.btn-primary:hover,.btn-light:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}