/* ============================================================
   SCALY — POLISH LAYER  ·  loads AFTER scaly-light.css + #agency-overrides
   Goal: keep hierarchy + copy 1:1, elevate the visual craft.
   Direction (UI-Pro-Max): "Exaggerated Minimalism" — bolder type,
   deeper materials, confident whitespace, restrained LIME brand accent.
   ============================================================ */
:root{
  --lime:#CCFF00;            /* Scaly brand accent */
  --lime-2:#B7E600;          /* deeper lime for fills/hover */
  --lime-ink:#0c1500;        /* text on lime */
  --shadow-sm:0 1px 2px rgba(17,17,20,.04), 0 2px 6px rgba(17,17,20,.04);
  --shadow-md:0 10px 30px -12px rgba(17,17,20,.18), 0 2px 8px rgba(17,17,20,.05);
  --shadow-lg:0 40px 80px -32px rgba(17,17,20,.30), 0 8px 24px -12px rgba(17,17,20,.12);
  --ring:0 0 0 3px rgba(204,255,0,.55);
}

/* ---- subtle paper grain for depth (premium, near-invisible) ---- */
.grain{
  display:block !important; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ .grain{ opacity:.025; } }

/* ============================================================ TYPE — bolder display */
.hf-h1{ font-weight:700; letter-spacing:-.035em; }
.sec-head h2, .h-md, .h-lg{ font-weight:700 !important; letter-spacing:-.03em; }
.final h2{ font-weight:700; letter-spacing:-.035em; }
.hero-sub, .hf-sub, .sec-head p{ text-wrap:balance; }

/* ---- KICKERS → lime pill (brand pop, high contrast) ---- */
.kicker{
  color:var(--lime-ink) !important; background:var(--lime);
  padding:6px 13px; border-radius:999px; line-height:1;
  box-shadow:0 4px 14px -4px rgba(204,255,0,.65);
}
/* lime-text highlight inside light headings → keep ink but add lime underline accent */
.work .sec-head .lime-text, #pricing .sec-head .lime-text{
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important;
  background:linear-gradient(transparent 62%, rgba(204,255,0,.55) 0);
}

/* ============================================================ NAV — crisper glass */
.nav-pill{ box-shadow:0 6px 24px -14px rgba(17,17,20,.18); }
.nav.scrolled .nav-pill{ box-shadow:0 12px 36px -14px rgba(17,17,20,.22) !important; }
.nav-links a::after{ height:3px; background:var(--lime) !important; }

/* ============================================================ BUTTONS — refined */
.btn{ font-weight:600; transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s var(--expo); }
.btn-primary{ box-shadow:0 8px 20px -10px rgba(17,17,20,.55); }
.btn-primary:hover{ box-shadow:0 14px 30px -12px rgba(17,17,20,.6); }
.btn:focus-visible{ box-shadow:var(--ring) !important; }
/* hero primary keeps black; its radial fill flashes lime for brand energy */
.hf-cta .btn-primary .btn-origin-fill{ background:var(--lime) !important; }
.hf-cta .btn-primary.is-filling{ color:var(--lime-ink) !important; }

/* ============================================================ TRUST STRIP — elevated bar */
.trust{ background:linear-gradient(180deg,#fff, var(--bg-soft)); }
.trust-item .tnum{ font-family:'Rubik',sans-serif; font-size:1.05rem; }
.partner-badge{ background:#fff; border:1px solid var(--line); padding:9px 15px; border-radius:999px; box-shadow:var(--shadow-sm); }

/* ============================================================ CARDS — depth + motion */
.svc-card{
  background:linear-gradient(180deg,#fff,#fcfcfb) !important;
  border-radius:22px !important; box-shadow:var(--shadow-sm) !important;
  transition:transform .45s var(--expo), box-shadow .45s var(--expo), border-color .3s !important;
}
.svc-card:hover{ transform:translateY(-6px) !important; box-shadow:var(--shadow-lg) !important; border-color:rgba(17,17,20,.16) !important; }
/* icon tiles: black with a lime corner spark on hover */
.svc-ico{ position:relative; overflow:hidden; border-radius:15px; box-shadow:0 8px 18px -8px rgba(17,17,20,.5); }
.svc-ico::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 100% 0%, rgba(204,255,0,.9), transparent 55%); opacity:0; transition:opacity .35s var(--expo); }
.svc-card:hover .svc-ico::after{ opacity:1; }
.svc-mini{ background:var(--lime) !important; color:var(--lime-ink) !important; border-color:transparent !important; font-weight:800; }

/* chips */
.chip{ transition:all .2s var(--ease-out); }
.work-tags .chip:hover{ background:var(--lime); color:var(--lime-ink); border-color:var(--lime); }

/* ============================================================ WORK — frame depth */
.dframe{ border-radius:18px !important; box-shadow:var(--shadow-lg) !important; }
.work-text .idx{
  color:transparent !important; -webkit-text-fill-color:transparent;
  background:linear-gradient(160deg,#111114,#111114 55%, rgba(17,17,20,.35));
  -webkit-background-clip:text; background-clip:text;
}
.work-text h3{ font-weight:700; }
.res.lime{ background:var(--lime) !important; color:var(--lime-ink) !important; border-color:transparent !important; font-weight:800; }

/* ============================================================ PRICING — premium tiers */
.plan{ border-radius:26px !important; transition:transform .45s var(--expo), box-shadow .45s var(--expo); }
.plan-glass{ background:linear-gradient(180deg,#fff,#fbfbfa) !important; box-shadow:var(--shadow-md) !important; }
.plan-glass:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) !important; }
.plan-pop{ box-shadow:0 40px 90px -30px rgba(17,17,20,.55) !important; }
.plan-pop::before{ content:""; position:absolute; inset:0; border-radius:26px; padding:1px; background:linear-gradient(180deg, rgba(204,255,0,.6), transparent 55%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.pop-flag{ background:var(--lime) !important; color:var(--lime-ink) !important; font-weight:800; box-shadow:0 8px 22px -6px rgba(204,255,0,.7) !important; }
.bd-lime{ background:var(--lime) !important; color:var(--lime-ink) !important; font-weight:800; }
.plan-pop ul li .ck{ color:var(--lime) !important; }
.plan .price .amt{ font-weight:800; letter-spacing:-.02em; }

/* ============================================================ FAQ — softer cards */
.faq-item{ border-radius:18px !important; box-shadow:var(--shadow-sm); transition:border-color .25s, box-shadow .25s, transform .25s var(--expo); }
.faq-item:hover{ transform:translateY(-2px); }
.faq-item.open{ box-shadow:var(--shadow-md) !important; }
.faq-item.open .faq-ico{ background:var(--lime) !important; color:var(--lime-ink) !important; }

/* ============================================================ DARK SECTIONS — lime aurora */
/* timeline progress + lit accents go lime (brand), markers stay clean */
.timeline::after{ background:linear-gradient(180deg,var(--lime),var(--lime-2)) !important; box-shadow:0 0 18px rgba(204,255,0,.6) !important; }
.tl-item.lit .tl-marker{ background:#14210a !important; border-color:var(--lime) !important; box-shadow:0 0 0 5px rgba(204,255,0,.14),0 0 24px rgba(204,255,0,.4) !important; }
.tl-marker.is-live{ background:#14210a !important; border-color:var(--lime) !important; box-shadow:0 0 0 5px rgba(204,255,0,.16),0 0 28px rgba(204,255,0,.5) !important; }
.tl-marker.is-live::after{ border-color:var(--lime) !important; }
.tl-item.lit .tl-card{ border-color:rgba(204,255,0,.3) !important; background:rgba(204,255,0,.06) !important; }
.tl-item.lit .tl-ghostnum{ color:rgba(204,255,0,.14) !important; }
.journey-sec .sec-head .kicker{ color:var(--lime-ink) !important; background:var(--lime) !important; }

/* final CTA: lime headline highlight + animated aurora glow via existing .orb divs */
.final h2 .lime-text{ color:var(--lime) !important; -webkit-text-fill-color:var(--lime) !important; }
.final .kicker{ color:var(--lime-ink) !important; background:var(--lime) !important; }
.final::before{ background:radial-gradient(60% 60% at 50% 40%, rgba(204,255,0,.16), transparent 70%) !important; }
.final{ isolation:isolate; }
.final .orb{
  display:block !important; position:absolute; border-radius:50%; z-index:0; pointer-events:none;
  filter:blur(60px); opacity:.5;
  background:radial-gradient(circle at 50% 50%, rgba(204,255,0,.55), rgba(204,255,0,0) 60%);
  animation:scalyDrift 14s ease-in-out infinite alternate;
}
.final .orb:nth-of-type(2){ animation-duration:18s; animation-direction:alternate-reverse; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); }
.journey-glow{ background:radial-gradient(58% 42% at 50% -2%, rgba(204,255,0,.16), transparent 68%) !important; animation:scalyPulse 9s ease-in-out infinite; }
@keyframes scalyDrift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(40px,-30px,0) scale(1.15); } 100%{ transform:translate3d(-30px,20px,0) scale(.95); } }
@keyframes scalyPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .final .orb,.journey-glow{ animation:none !important; } }

/* contact form: lift + lime focus */
.cta-form{ border:1px solid rgba(255,255,255,.06); box-shadow:0 40px 90px -30px rgba(0,0,0,.6) !important; }
.cta-field input:focus, .cta-field textarea:focus{ border-color:var(--lime) !important; box-shadow:0 0 0 3px rgba(204,255,0,.25) !important; }

/* ============================================================ FOOTER — refined */
.footer{ background:linear-gradient(180deg,var(--bg-soft),#fff); }
.news-row button:hover{ background:var(--lime); color:var(--lime-ink); }

/* ============================================================ MOTION — smoother reveals */
.reveal{ transition:opacity .9s var(--expo), transform .9s var(--expo); }
.svc-grid > .reveal, .price-grid > .reveal, .timeline > .reveal{ transition-duration:.8s; }

/* ============================================================ A11Y / polish guards */
a, .faq-q, .chip, .news-row button{ cursor:pointer; }
:focus-visible{ outline:none; }
.btn, .chip, .nav-links a, .fcol a, .faq-q{ -webkit-tap-highlight-color:transparent; }
