/* =========================================================
   PREMIUM WEB3 SKIN  ·  loaded AFTER style.css
   Layers glassmorphism, neon glow, gradient borders, animated
   orbs + grid backdrops, 3D-tilt hovers and abstract mesh
   visuals on top of the existing, untouched component styles.
   Brand-agnostic: reads --terra / --teal from the base sheet.
   ========================================================= */

:root{
  --rgb-terra:196,84,18;
  --rgb-teal:15,118,110;
  --rgb-amber:217,138,63;
  --grad-terra:linear-gradient(135deg,#e0883f 0%,var(--terra) 48%,var(--terra-dk) 100%);
  --grad-teal:linear-gradient(135deg,#2bb6a6 0%,var(--teal) 55%,var(--teal-dk) 100%);
  --grad-brand:linear-gradient(120deg,var(--terra) 0%,#d27d3a 38%,var(--teal) 100%);
  --glass-light:rgba(255,255,255,.62);
  --glass-line:rgba(255,255,255,.7);
  --ink-glow:0 24px 60px -28px rgba(80,45,15,.5);
  --neon-terra:0 0 0 1px rgba(var(--rgb-terra),.18), 0 18px 50px -22px rgba(var(--rgb-terra),.55);
  --neon-teal:0 0 0 1px rgba(var(--rgb-teal),.18), 0 18px 50px -22px rgba(var(--rgb-teal),.5);
  --dark:#140f0b;
  --dark-2:#1c1610;
}

/* ---------- base surface: faint global tech grid ---------- */
body{
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(var(--rgb-terra),.06), transparent 60%),
    radial-gradient(55% 45% at -5% 30%, rgba(var(--rgb-teal),.05), transparent 60%),
    var(--paper);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(120,90,60,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,90,60,.045) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 80%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 80%);
}
.site-header,main,.site-footer{position:relative;z-index:1}

/* reusable gradient hairline ring */
.gx-ring{position:relative}
.gx-ring::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(140deg,rgba(var(--rgb-terra),.55),rgba(255,255,255,.05) 42%,rgba(var(--rgb-teal),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* =========================================================
   HEADER — refined glass
   ========================================================= */
.site-header{background:rgba(255,250,243,.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.site-header.scrolled{background:rgba(255,250,243,.78);box-shadow:0 1px 0 rgba(120,90,60,.12),0 18px 40px -30px rgba(80,45,15,.5)}
.brand-mark{background:var(--grad-brand);box-shadow:0 8px 22px -10px rgba(var(--rgb-terra),.8), inset 0 1px 0 rgba(255,255,255,.4)}
.lang-switch{background:rgba(var(--rgb-terra),.09);border:1px solid rgba(var(--rgb-terra),.14);backdrop-filter:blur(6px)}
.lang-btn.is-active{box-shadow:0 4px 12px -4px rgba(var(--rgb-terra),.55)}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--grad-terra);transition:right .28s ease}
.main-nav a:hover::after{right:0}

/* =========================================================
   BUTTONS — gradient + glow + sheen
   ========================================================= */
.btn-primary{
  background:var(--grad-terra);
  box-shadow:0 12px 28px -12px rgba(var(--rgb-terra),.85), inset 0 1px 0 rgba(255,255,255,.28);
  position:relative;overflow:hidden;isolation:isolate;
}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn-primary:hover{background:var(--grad-terra);box-shadow:0 18px 40px -12px rgba(var(--rgb-terra),1), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-ghost{background:rgba(255,255,255,.5);backdrop-filter:blur(8px);border-color:rgba(var(--rgb-terra),.28)}
.btn-ghost:hover{background:rgba(var(--rgb-terra),.08);border-color:var(--terra)}
.btn-cream{box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}

/* pulsing glow on the in-demo primary CTA */
.demo-cta .btn-primary{animation:ctaGlow 3.4s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 12px 28px -12px rgba(var(--rgb-terra),.85), 0 0 0 0 rgba(var(--rgb-terra),.5)}50%{box-shadow:0 16px 36px -12px rgba(var(--rgb-terra),.95), 0 0 0 10px rgba(var(--rgb-terra),0)}}

/* =========================================================
   EYEBROW / KICKER — glass pills
   ========================================================= */
.eyebrow{
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(var(--rgb-terra),.22);color:var(--terra-dk);
  box-shadow:0 6px 18px -10px rgba(var(--rgb-terra),.5);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 3px rgba(var(--rgb-terra),.18);animation:eyeDot 2.2s ease-in-out infinite}
@keyframes eyeDot{0%,100%{opacity:1}50%{opacity:.4}}
.kicker{
  background:linear-gradient(90deg,var(--terra),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kicker-light{background:linear-gradient(90deg,#f0a868,#5fd0c2);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   HERO — orbs, grid, glassy phone, premium floats
   ========================================================= */
.hero{padding-top:62px}
.hero-glow{overflow:visible}
.hero-glow::before,.hero-glow::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.7;will-change:transform;
}
.hero-glow::before{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle at 40% 40%,rgba(var(--rgb-terra),.45),transparent 65%);animation:orbA 16s ease-in-out infinite}
.hero-glow::after{width:460px;height:460px;bottom:-160px;left:-100px;background:radial-gradient(circle at 50% 50%,rgba(var(--rgb-teal),.4),transparent 65%);animation:orbB 19s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-26px) scale(1.1)}}

.hero h1 em{
  background:linear-gradient(100deg,var(--terra),#e0883f 60%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* glass phone */
.phone{
  background:linear-gradient(160deg,#241a13,#120d09);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--rgb-terra),.12), 0 40px 90px -40px rgba(var(--rgb-teal),.4);
}
.hero-visual::before{
  content:"";position:absolute;width:min(420px,86%);aspect-ratio:1;left:50%;top:46%;transform:translate(-50%,-50%);
  background:conic-gradient(from 140deg,rgba(var(--rgb-terra),.18),rgba(var(--rgb-teal),.16),rgba(var(--rgb-terra),.18));
  filter:blur(46px);border-radius:50%;z-index:-1;animation:spinSlow 26s linear infinite;
}
@keyframes spinSlow{to{transform:translate(-50%,-50%) rotate(360deg)}}

.qr-float,.stat-float{backdrop-filter:blur(14px)}
.qr-float{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 44px -20px rgba(80,45,15,.55)}
.stat-float{background:linear-gradient(150deg,#16928a,var(--teal-dk));border:1px solid rgba(255,255,255,.18);box-shadow:var(--neon-teal)}
.stat-float strong{background:linear-gradient(180deg,#fff,#d6fff7);-webkit-background-clip:text;background-clip:text;color:transparent}

/* trust avatars → abstract gradient gems (no photos) */
.trust-avatars .ta img{display:none}
.trust-avatars .ta{box-shadow:0 6px 16px -6px rgba(80,45,15,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.trust-avatars .ta:nth-child(1){background:var(--grad-terra)}
.trust-avatars .ta:nth-child(2){background:var(--grad-teal)}
.trust-avatars .ta:nth-child(3){background:linear-gradient(135deg,#e7b67d,#c98a44)}
.trust-avatars .ta:nth-child(4){background:linear-gradient(135deg,#2bb6a6,#0b5650)}

/* phone menu thumbnails → gradient tiles (drops Unsplash on the Indonesia build) */
.app-thumb{background-image:none!important;background:linear-gradient(135deg,#e9b384,#c97b3d)}
.app-item[data-item="2"] .app-thumb{background:linear-gradient(135deg,#bfe3c4,#5aa87d)}
.app-item[data-item="3"] .app-thumb{background:linear-gradient(135deg,#f0cf95,#cf9a3f)}

/* =========================================================
   VALUE BAND — dark glass with grid
   ========================================================= */
.band{background:linear-gradient(120deg,#171009,#1f150d);position:relative;overflow:hidden;border-block:1px solid rgba(var(--rgb-terra),.18)}
.band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:120px 100%;opacity:.5}
.band::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;top:-200px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(var(--rgb-terra),.3),transparent 70%);filter:blur(40px)}
.band-item{position:relative}
.band-item strong{background:linear-gradient(180deg,#fff,#ffd9b8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   PROBLEM CARDS — glass + gradient ring + tilt + glow icon
   ========================================================= */
.pcard{
  background:linear-gradient(170deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 30px -20px rgba(80,45,15,.4);
  transform-style:preserve-3d;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.pcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(140deg,rgba(var(--rgb-terra),.6),transparent 45%,rgba(var(--rgb-teal),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.pcard:hover{box-shadow:0 28px 60px -30px rgba(var(--rgb-terra),.6);border-color:transparent}
.pcard:hover::after{opacity:1}
.pcard-icon{
  background:linear-gradient(150deg,rgba(var(--rgb-terra),.16),rgba(var(--rgb-teal),.12));
  border:1px solid rgba(var(--rgb-terra),.2);color:var(--terra);position:relative;overflow:hidden;
}
.pcard-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pcard:hover .pcard-icon{background:var(--grad-terra);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(var(--rgb-terra),.8);transform:none}

/* =========================================================
   SOLUTION FLOW — glass nodes, gradient nums, glow line
   ========================================================= */
.flow-step{
  background:linear-gradient(170deg,rgba(255,255,255,.82),rgba(255,255,255,.55));
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 26px -20px rgba(80,45,15,.45);
}
.flow-step-staff{background:linear-gradient(170deg,rgba(var(--rgb-teal),.16),rgba(var(--rgb-teal),.06));border-color:rgba(var(--rgb-teal),.28)}
.flow-num{background:var(--grad-terra);box-shadow:0 6px 14px -6px rgba(var(--rgb-terra),.8)}
.flow-step-staff .flow-num{background:var(--grad-teal);box-shadow:0 6px 14px -6px rgba(var(--rgb-teal),.8)}
.flow-ico{color:var(--terra)}
.flow-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-step-staff .flow-ico{color:var(--teal)}
.flow-arrow{color:rgba(var(--rgb-terra),.5)}

/* =========================================================
   FEATURES — glass panels, gradient top edge
   ========================================================= */
.feat-col{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 50px -34px rgba(80,45,15,.5);position:relative;overflow:hidden;
}
.feat-col::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand);opacity:.85}
.feat-col:first-child::before{background:var(--grad-terra)}
.feat-col:last-child::before{background:var(--grad-teal)}
.feat-list li::before{box-shadow:0 0 0 3px rgba(var(--rgb-terra),.1)}
.feat-col:last-child .feat-list li::before{box-shadow:0 0 0 3px rgba(var(--rgb-teal),.1)}

/* =========================================================
   DEMO (dark) — mesh bg, orbs, grid, glass tabs, device glow
   ========================================================= */
.section-dark{
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(var(--rgb-terra),.18), transparent 60%),
    radial-gradient(60% 60% at 10% 100%, rgba(var(--rgb-teal),.18), transparent 60%),
    linear-gradient(160deg,#150f0a 0%,#0f0c0a 55%,#0c100f 100%);
  position:relative;overflow:hidden;
}
.section-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(110% 75% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(110% 75% at 50% 40%,#000 30%,transparent 78%);
}
.section-dark .wrap{position:relative;z-index:1}
.demo-tab{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);color:#d8c9bb}
.demo-tab:hover{background:rgba(255,255,255,.09);border-color:rgba(var(--rgb-terra),.5)}
.demo-tab.is-active{background:var(--grad-terra);border-color:transparent;box-shadow:0 12px 30px -12px rgba(var(--rgb-terra),.9)}
.demo-progress i{background:rgba(255,255,255,.18)}
.demo-progress i.on{background:var(--grad-terra)}

/* device neon edges inside dark demo */
.demo-device-wrap .phone{box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--rgb-terra),.22),0 0 60px -10px rgba(var(--rgb-terra),.45)}
.dash{
  background:linear-gradient(180deg,#fffaf3,#fff);
  box-shadow:0 0 0 1px rgba(var(--rgb-teal),.25),0 40px 90px -40px rgba(0,0,0,.7),0 0 70px -20px rgba(var(--rgb-teal),.45);
}
.ticket{box-shadow:0 0 0 1px rgba(var(--rgb-terra),.2),0 40px 90px -40px rgba(0,0,0,.7),0 0 60px -20px rgba(var(--rgb-terra),.4)}
.demo-bullets li::before{background:var(--grad-teal);box-shadow:0 0 0 4px rgba(var(--rgb-teal),.12)}
.bar i{background:var(--grad-terra)}
.live-dot{box-shadow:0 0 0 4px rgba(var(--rgb-teal),.15)}

/* =========================================================
   ABSTRACT MESH VISUALS — replace photos everywhere
   ========================================================= */
.media{
  background:
    radial-gradient(60% 70% at 18% 18%, rgba(var(--rgb-terra),.42), transparent 60%),
    radial-gradient(70% 80% at 92% 88%, rgba(var(--rgb-teal),.42), transparent 62%),
    linear-gradient(150deg,#1a130d 0%,#120f0c 55%,#0e1211 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.6),0 0 0 1px rgba(var(--rgb-terra),.12);
  isolation:isolate;
}
.media img{display:none!important}
.mesh-grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(100% 100% at 50% 50%,#000 40%,transparent 90%);mask-image:radial-gradient(100% 100% at 50% 50%,#000 40%,transparent 90%)}
.mesh-orb{position:absolute;border-radius:50%;filter:blur(36px);z-index:0}
.mesh-orb.a{width:180px;height:180px;top:-40px;left:-30px;background:radial-gradient(circle,rgba(var(--rgb-terra),.6),transparent 70%);animation:orbA 14s ease-in-out infinite}
.mesh-orb.b{width:200px;height:200px;bottom:-60px;right:-40px;background:radial-gradient(circle,rgba(var(--rgb-teal),.55),transparent 70%);animation:orbB 17s ease-in-out infinite}
.mesh-glass{position:absolute;z-index:2;border-radius:14px;padding:12px 14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.7)}
.mesh-card-1{left:8%;top:16%;width:46%;animation:floaty 7s ease-in-out infinite}
.mesh-card-2{right:8%;bottom:18%;width:42%;animation:floaty 8s ease-in-out infinite .6s}
.mg-h{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.7);margin-bottom:9px;text-transform:uppercase}
.mg-h::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 8px 1px rgba(var(--rgb-terra),.8)}
.mesh-card-2 .mg-h::before{background:#2bb6a6;box-shadow:0 0 8px 1px rgba(var(--rgb-teal),.8)}
.mg-bars{display:flex;align-items:flex-end;gap:6px;height:42px}
.mg-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,rgba(var(--rgb-terra),.9),rgba(var(--rgb-terra),.4));transform-origin:bottom;animation:meshBar 2.4s ease-in-out infinite}
.mg-bars i:nth-child(2){animation-delay:.2s;background:linear-gradient(180deg,rgba(var(--rgb-teal),.9),rgba(var(--rgb-teal),.4))}
.mg-bars i:nth-child(3){animation-delay:.4s}
.mg-bars i:nth-child(4){animation-delay:.6s;background:linear-gradient(180deg,rgba(var(--rgb-teal),.9),rgba(var(--rgb-teal),.4))}
.mg-bars i:nth-child(5){animation-delay:.8s}
@keyframes meshBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.mg-stat{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;line-height:1;margin-bottom:5px}
.mg-stat span{color:#7fe6d8;font-size:.85rem}
.mg-spark{display:block;width:100%;height:22px;margin-top:8px}
.mg-spark path{fill:none;stroke:#7fe6d8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mg-spark path.fill{fill:rgba(127,230,216,.14);stroke:none}
.mesh-scan{position:absolute;left:0;right:0;height:2px;top:0;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(var(--rgb-terra),.8),transparent);
  box-shadow:0 0 16px 2px rgba(var(--rgb-terra),.5);animation:meshScan 5s ease-in-out infinite}
@keyframes meshScan{0%{top:6%}50%{top:94%}100%{top:6%}}
.media-cap{z-index:4;background:linear-gradient(to top,rgba(10,8,6,.9),rgba(10,8,6,.1) 75%,transparent)}

/* =========================================================
   BENEFITS — glass cards, gradient accent edge
   ========================================================= */
.ben{
  background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-inline-start:0;
  box-shadow:0 12px 34px -24px rgba(80,45,15,.45);position:relative;overflow:hidden;
}
.ben::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--grad-terra)}
.ben:nth-child(even)::before{background:var(--grad-teal)}
.ben:hover{box-shadow:0 26px 56px -30px rgba(var(--rgb-terra),.5)}
.ben b{background:linear-gradient(90deg,var(--ink),var(--terra-dk));-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   STEPS — gradient numerals + glass tiles
   ========================================================= */
.step{padding:24px 22px;border-radius:var(--r-lg);background:linear-gradient(170deg,rgba(255,255,255,.8),rgba(255,255,255,.5));backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.66);box-shadow:0 12px 32px -24px rgba(80,45,15,.4);transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(var(--rgb-terra),.45)}
.step-n{background:var(--grad-terra);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1;-webkit-text-fill-color:transparent}

/* =========================================================
   FORM — glass card, glowing focus, premium WhatsApp
   ========================================================= */
.lead-form{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 30px 80px -40px rgba(80,45,15,.6),0 0 0 1px rgba(var(--rgb-terra),.08);
}
.field input,.field select{background:rgba(255,255,255,.7);border-color:rgba(120,90,60,.2)}
.field input:focus,.field select:focus{border-color:var(--terra);box-shadow:0 0 0 4px rgba(var(--rgb-terra),.14),0 8px 20px -12px rgba(var(--rgb-terra),.5)}
.wa-big{background:linear-gradient(135deg,#2bd66f,#12a150);box-shadow:0 16px 34px -16px rgba(37,211,102,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.form-rea li{position:relative;padding-inline-start:30px;list-style:none}
.form-rea li::before{
  content:"";position:absolute;inset-inline-start:0;top:1px;width:19px;height:19px;border-radius:6px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207'/%3E%3C/svg%3E") center/12px no-repeat,
    var(--grad-teal);
  box-shadow:0 4px 10px -4px rgba(var(--rgb-teal),.7);
}

/* =========================================================
   FAQ — glass + gradient ring when open
   ========================================================= */
.faq{background:linear-gradient(170deg,rgba(255,255,255,.85),rgba(255,255,255,.62));backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7)}
.faq[open]{box-shadow:0 24px 54px -34px rgba(var(--rgb-terra),.5)}
.faq[open] summary{background:linear-gradient(90deg,rgba(var(--rgb-terra),.1),transparent)}
.faq summary::after{background:var(--grad-terra);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   FINAL CTA — rich gradient mesh + orbs + grid
   ========================================================= */
.final-cta{background:linear-gradient(140deg,var(--terra) 0%,#a23f17 45%,var(--terra-dk) 100%);overflow:hidden}
.final-cta::before{background:
  radial-gradient(45% 70% at 82% 6%,rgba(255,255,255,.18),transparent 70%),
  radial-gradient(50% 60% at 12% 96%,rgba(var(--rgb-teal),.4),transparent 70%)}
.final-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(90% 90% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(90% 90% at 50% 40%,#000 20%,transparent 75%);
}
.final-inner{z-index:2}
.final-cta em{background:linear-gradient(90deg,#ffe3c2,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   FOOTER + WhatsApp FAB
   ========================================================= */
.site-footer{background:linear-gradient(180deg,#140f0b,#0e0b09);border-top:1px solid rgba(var(--rgb-terra),.16)}
.footer-brand .brand-mark{background:var(--grad-brand)}
.wa-fab{background:linear-gradient(135deg,#2bd66f,#12a150);box-shadow:0 14px 32px -10px rgba(37,211,102,.9)}

/* =========================================================
   SCROLL REVEAL — richer entrance
   ========================================================= */
html.reveal-on .reveal{opacity:0;transform:translateY(30px) scale(.985);filter:blur(2px)}
html.reveal-on .reveal.in{opacity:1;transform:none;filter:none}

/* =========================================================
   3D TILT (set by enhance script via CSS vars)
   ========================================================= */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.pcard.tilt:hover,.step.tilt:hover,.ben.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,-5px))}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-glow::before,.hero-glow::after,.hero-visual::before,.band::after,
  .mesh-orb,.mesh-card-1,.mesh-card-2,.mg-bars i,.mesh-scan,.demo-cta .btn-primary,.eyebrow::before{animation:none}
  .btn-primary::before{display:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero-visual::before{width:340px}
  .mesh-card-1,.mesh-card-2{width:48%}
}
@media (max-width:540px){
  body::before{background-size:36px 36px}
  .hero-glow::before{width:360px;height:360px;top:-90px;right:-90px}
  .hero-glow::after{width:320px;height:320px}
  .mesh-card-1{top:12%;width:54%}
  .mesh-card-2{bottom:12%;width:50%}
}