/* ================================================================
   TAN TECH (PTY) LTD — PREMIUM ENHANCEMENT LAYER  ·  index.html
   Loaded AFTER site.css. Purely additive overrides — STRICTLY the
   existing palette (teal #00B8A9 · teal-soft #1fd6c6 · gold #D4AF37
   · petrol #0f2429/#0b1b1f). No new hues introduced.
   All motion inherits site.css's prefers-reduced-motion kill-switch.
   ================================================================ */

/* Smooth premium easing on the interactive chrome (requested curve) */
.btn,
.nav-links a,
.foot-col a,
.ic-row .ic-v a,
.svc-tags span,
.case-kit span {
  transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

/* ---------------------------------------------------------------
   1 · HERO — living aurora, deep-contrast vignette, glass copy card
   --------------------------------------------------------------- */
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(64px); opacity: .55; mix-blend-mode: screen; will-change: transform;
}
.hero-aurora i:nth-child(1) { width: 540px; height: 540px; top: -150px; left: -90px;
  background: radial-gradient(circle, rgba(0,184,169,.34), transparent 68%); animation: ttDrift1 19s ease-in-out infinite; }
.hero-aurora i:nth-child(2) { width: 480px; height: 480px; top: 14%; right: -140px;
  background: radial-gradient(circle, rgba(212,175,55,.20), transparent 66%); animation: ttDrift2 23s ease-in-out infinite; }
.hero-aurora i:nth-child(3) { width: 400px; height: 400px; bottom: -180px; left: 34%;
  background: radial-gradient(circle, rgba(31,214,198,.16), transparent 70%); animation: ttDrift3 27s ease-in-out infinite; }
@keyframes ttDrift1 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(66px,44px,0); } }
@keyframes ttDrift2 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-54px,32px,0); } }
@keyframes ttDrift3 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(34px,-46px,0); } }

/* deep-contrast vignette so hero text stays pin-sharp over the glow */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 50% -5%, transparent 42%, rgba(6,16,19,.55) 100%);
}

/* keep copy above aurora + subtle frosted card behind the headline block */
.hero-copy { position: relative; z-index: 1; }
.hero-copy::before {
  content: ""; position: absolute; inset: -26px -34px -20px -30px; z-index: -1; border-radius: 24px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  -webkit-mask: linear-gradient(105deg, #000 58%, transparent 96%);
          mask: linear-gradient(105deg, #000 58%, transparent 96%);
}
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.45); }
.hero-tagline { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.hero p.lead { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero-visual { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   2 · GLASSMORPHISM + DEPTH — service & case cards become frosted
   --------------------------------------------------------------- */
.svc, .case {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014));
  backdrop-filter: blur(12px) saturate(122%); -webkit-backdrop-filter: blur(12px) saturate(122%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
  transition:
    opacity .6s var(--ease),
    transform .5s cubic-bezier(.25,.8,.25,1),
    box-shadow .35s cubic-bezier(.25,.8,.25,1),
    border-color .35s cubic-bezier(.25,.8,.25,1),
    background .35s cubic-bezier(.25,.8,.25,1);
}
/* thin teal→gold accent line that ignites along the top on hover */
.svc::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--teal), var(--gold), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.svc:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 30px 58px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,184,169,0.22), 0 0 46px -10px rgba(0,184,169,0.40);
}
.svc:hover::after { opacity: .95; }
.case:hover {
  transform: translateY(-5px);
  border-color: var(--gold-line);
  box-shadow: 0 34px 66px rgba(0,0,0,0.5), 0 0 44px -12px rgba(212,175,55,0.38);
}

/* ---------------------------------------------------------------
   3 · BORDER GLOWS — animated gradient rim + CTA sheen
   --------------------------------------------------------------- */
@property --tt-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* rotating teal→gold arc traced around the flagship intake terminal */
.intake { position: relative; }
.intake::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
  background: conic-gradient(from var(--tt-angle),
              transparent 0 60%, var(--teal) 74%, var(--gold) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .75;
  animation: ttSpin 8s linear infinite;
}
@keyframes ttSpin { to { --tt-angle: 360deg; } }

/* subtle authority-panel gradient rim */
.authority { position: relative; box-shadow: 0 24px 48px rgba(0,0,0,0.32); }
.authority::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-line), transparent 45%, var(--line-strong) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* premium light-sweep across primary CTAs on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.42) 50%, transparent 82%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { animation: ttSheen 1.05s ease; }
.btn-primary > * { position: relative; z-index: 1; }
@keyframes ttSheen { to { transform: translateX(130%); } }

/* ---------------------------------------------------------------
   4 · SCROLL MICRO-ANIMATION — richer reveal + staggered cascade
   --------------------------------------------------------------- */
.reveal { transform: translateY(30px) scale(.984); }
.reveal.in { transform: none; }

.services-grid .reveal:nth-child(2) { transition-delay: .07s; }
.services-grid .reveal:nth-child(3) { transition-delay: .14s; }
.services-grid .reveal:nth-child(4) { transition-delay: .21s; }
.services-grid .reveal:nth-child(5) { transition-delay: .10s; }
.services-grid .reveal:nth-child(6) { transition-delay: .17s; }
.cases .reveal:nth-child(2) { transition-delay: .12s; }
.hero-stats .stat { transition: transform .3s cubic-bezier(.25,.8,.25,1); }
.hero-stats .stat:hover { transform: translateY(-4px); }

/* icon tiles gain a soft glow-lift in sympathy with the card */
.svc:hover .svc-ico { box-shadow: 0 0 26px -6px rgba(0,184,169,0.55); transform: translateY(-2px); }
.svc-ico { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }

/* ================================================================
   SUB-PAGE EXTENSION  ·  about-us · it-solutions · pricing · contact
   Carries the same premium layer (palette + techniques) to the inner
   pages, mapped to THEIR section/card classes. (.svc and .intake are
   shared with the homepage, so they inherit the treatment above.)
   ================================================================ */

/* --- 1 · sub-page hero: living glow behind the heading + pin-sharp text --- */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 400px at 10% -12%, rgba(0,184,169,0.20), transparent 70%),
    radial-gradient(460px 340px at 94% -4%, rgba(212,175,55,0.12), transparent 68%);
  animation: ttHeroGlow 24s ease-in-out infinite;
}
@keyframes ttHeroGlow { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-26px,16px,0); } }
.page-hero h1 { text-shadow: 0 2px 26px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); }
.page-hero p.lead { text-shadow: 0 1px 12px rgba(0,0,0,0.42); }

/* --- 2 · glassmorphism + depth on the plain inner-page cards --- */
.price-card, .retainer:not(.featured), .value, .stat-band .sb, .solution {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
  transition:
    opacity .6s var(--ease),
    transform .5s cubic-bezier(.25,.8,.25,1),
    box-shadow .35s cubic-bezier(.25,.8,.25,1),
    border-color .35s cubic-bezier(.25,.8,.25,1),
    background .35s cubic-bezier(.25,.8,.25,1);
}
.price-card:hover, .retainer:not(.featured):hover, .value:hover, .stat-band .sb:hover, .solution:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 30px 58px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,184,169,0.22), 0 0 46px -10px rgba(0,184,169,0.40);
}

/* --- 3 · accent panels keep their branded glow — add depth + gradient rim --- */
.cta-band, .verify, .director, .gate-note, .retainer.featured {
  position: relative;
  box-shadow: 0 24px 50px rgba(0,0,0,0.34);
}
.cta-band::after, .verify::after, .retainer.featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-line), transparent 45%, var(--line-strong) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* --- 4 · verification seals: intensify the glow on the existing lift --- */
.seal-frame { transition: transform .4s var(--ease); }
.seal:hover .seal-frame::after { box-shadow: 0 0 64px -4px rgba(0,184,169,0.60); }

/* --- 5 · staggered reveal cascade for the inner-page grids --- */
.price-grid .reveal:nth-child(2) { transition-delay: .06s; }
.price-grid .reveal:nth-child(3) { transition-delay: .12s; }
.price-grid .reveal:nth-child(4) { transition-delay: .09s; }
.price-grid .reveal:nth-child(5) { transition-delay: .15s; }
.price-grid .reveal:nth-child(6) { transition-delay: .18s; }
.retainer-grid .reveal:nth-child(2) { transition-delay: .08s; }
.retainer-grid .reveal:nth-child(3) { transition-delay: .16s; }
.solutions .reveal:nth-child(even) { transition-delay: .09s; }
.values-grid .value:nth-child(2) { transition-delay: .06s; }
.values-grid .value:nth-child(3) { transition-delay: .12s; }
.values-grid .value:nth-child(4) { transition-delay: .18s; }

/* ---------------------------------------------------------------
   MOBILE FIX — kill the ~32px horizontal overflow on phones.
   The header's brand + "Engage Us" CTA + hamburger together exceed
   375px. The hamburger menu already carries the Contact link, so we
   drop the header CTA on narrow phones — brand + toggle then fit and
   the slide-in menu is no longer clipped on the left edge.
   (To keep the mobile CTA instead, delete this block and shrink the
   brand sub-text / CTA padding in site.css.)
   --------------------------------------------------------------- */
@media (max-width: 560px) {
  .nav-cta .btn-primary { display: none; }
}