/*
Theme Name: Titan Filmtech
Theme URI: https://titanfilmtech.com
Author: Titan Filmtech
Author URI: https://titanfilmtech.com
Description: Premium WordPress theme for Titan Filmtech — engineered for paint protection film, coloured PPF, solar tints, chameleon tints, and architectural film solutions. Dark cinematic design with blue accents, fully responsive, with built-in pages for Automotive, House & Office, Technology, Resources, Warranty Registration, About, and Contact.
Version: 1.1.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: titan-filmtech
Tags: business, automotive, dark, custom-colors, custom-menu, featured-images, full-width-template, responsive
*/

:root{
  --bg:#050507;
  --bg-2:#0a0a12;
  --bg-3:#0f0f18;
  --panel:#0c0c14;
  --text:#ffffff;
  --text-2:#a8a8b3;
  --text-3:#5e5e6a;
  --accent:#1e88e5;
  --accent-2:#42a5f5;
  --accent-glow:rgba(30,136,229,.45);
  --gold:#c9a96a;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --display:"Bebas Neue","Saira Condensed",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}
ul{list-style:none}

/* WordPress required classes */
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}
.aligncenter{display:block;margin:0 auto}
.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;overflow:hidden;
}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:12px;color:var(--text-2);margin-top:6px}

.container{max-width:1320px;margin:0 auto;padding:0 32px}
.eyebrow{
  font-family:var(--display);
  font-size:14px;letter-spacing:4px;color:var(--text-3);
  margin-bottom:18px;
}
.display-h{
  font-family:var(--display);
  font-size:clamp(44px,6vw,72px);
  line-height:1;letter-spacing:.5px;
}
.display-h .accent{color:var(--accent-2);text-shadow:0 0 30px var(--accent-glow)}
.lead{
  font-size:16px;color:var(--text-2);line-height:1.7;
  margin:24px 0 32px;max-width:480px;
}
.lead-center{margin-left:auto;margin-right:auto;text-align:center}
.section{padding:120px 0;position:relative}
.section-head{text-align:center;margin-bottom:60px}
.section-head .display-h{margin-top:8px}
.section-head .lead{margin:20px auto 0;max-width:640px;text-align:center}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(5,5,7,.30);
  border-bottom:1px solid transparent;
  transition:padding .3s,background .3s,border-color .3s;
}
.nav.scrolled{
  background:rgba(5,5,7,.78);
  border-bottom-color:var(--border);
  padding:12px 32px;
}
.nav-inner{
  max-width:1320px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px}
.brand-text{font-family:var(--display);font-size:20px;letter-spacing:2.5px;color:var(--text)}
.brand-text .light{color:var(--text-2);font-weight:400}
.nav-links{
  display:flex;align-items:center;gap:32px;
  font-size:13px;letter-spacing:2px;font-weight:600;
  color:var(--text-2);
}
.nav-links a{transition:color .2s;position:relative;padding:6px 0}
.nav-links a:hover,.nav-links .current-menu-item>a{color:var(--text)}
.nav-links a::after{
  content:"";position:absolute;
  left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .3s;
}
.nav-links a:hover::after,.nav-links .current-menu-item>a::after{width:100%}
.nav-links ul{display:flex;align-items:center;gap:32px;list-style:none}
.nav-actions{display:flex;align-items:center;gap:12px}
.btn-outline{
  padding:10px 20px;border:1px solid var(--border-2);
  font-size:13px;letter-spacing:2px;font-weight:600;
  transition:background .25s,color .25s,border-color .25s;background:transparent;color:var(--text);
}
.btn-outline:hover{background:var(--text);color:var(--bg)}
/* Nav CTA: solid blue (matches the site's primary buttons and the drawer CTA) */
.nav-actions .btn-outline{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.nav-actions .btn-outline:hover{
  background:var(--accent-2);border-color:var(--accent-2);color:#fff;
  box-shadow:0 0 28px var(--accent-glow);
}
.menu-icon{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;width:44px;height:44px;margin-right:-6px;z-index:200}
.menu-icon span{width:22px;height:2px;background:var(--text);transition:.3s;display:block}
.menu-icon.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-icon.open span:nth-child(2){opacity:0}
.menu-icon.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ MOBILE DRAWER ============ */
.mobile-drawer{
  position:fixed;top:0;right:0;
  width:min(320px,80vw);height:100vh;
  background:var(--bg-2);
  border-left:1px solid var(--border);
  padding:80px 32px 32px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:99;
  overflow-y:auto;
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer ul{display:flex;flex-direction:column;gap:4px;margin-bottom:30px;list-style:none}
.mobile-drawer a{
  display:block;padding:14px 0;
  font-size:14px;letter-spacing:2px;font-weight:600;
  color:var(--text-2);
  border-bottom:1px solid var(--border);
  transition:color .2s;
}
.mobile-drawer a:hover,.mobile-drawer .current-menu-item>a{color:var(--accent-2)}
/* Drawer CTA: solid blue (matches the site's primary buttons), centred text */
.mobile-drawer .btn-outline{
  width:100%;margin-top:18px;padding:14px;text-align:center;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
}
.mobile-drawer .btn-outline:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:98;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}

/* ============ BUTTONS ============ */
.btn-primary{
  padding:13px 28px;background:var(--accent);
  font-size:13px;font-weight:700;letter-spacing:2.5px;color:#fff;
  transition:background .25s,box-shadow .25s,transform .25s;display:inline-block;text-align:center;
}
.btn-primary:hover{
  background:var(--accent-2);
  box-shadow:0 0 28px var(--accent-glow);
  transform:translateY(-1px);color:#fff;
}
.btn-ghost{
  padding:13px 28px;border:1px solid var(--border-2);
  font-size:13px;font-weight:700;letter-spacing:2.5px;color:var(--text);
  transition:border-color .25s,background .25s,transform .25s;background:transparent;display:inline-block;text-align:center;
}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.04);color:var(--text)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%,rgba(30,136,229,.08),transparent 70%),
    radial-gradient(ellipse 60% 80% at 50% 100%,rgba(30,136,229,.06),transparent 70%),
    linear-gradient(180deg,#060610 0%,#0a0a14 100%);
  overflow:hidden;display:flex;align-items:center;
  padding-top:80px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 80%);
  pointer-events:none;
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;
  width:100%;max-width:1320px;margin:0 auto;padding:80px 32px;
}
.hero-logo{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.hero-logo-mark{width:80px;height:80px;filter:drop-shadow(0 0 20px var(--accent-glow))}
.hero-title{
  font-family:var(--display);
  font-size:clamp(60px,8vw,110px);
  line-height:.9;letter-spacing:1px;
  background:linear-gradient(180deg,#fff 30%,#6a7889 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-family:var(--display);
  font-size:clamp(18px,1.8vw,24px);
  letter-spacing:5px;color:var(--text-2);margin-top:8px;
}
.hero-tag{
  margin-top:14px;font-size:13px;letter-spacing:1.5px;
  color:var(--text-2);font-weight:300;text-transform:uppercase;
}
.feature-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin:38px 0 30px;max-width:480px;
}
.feature{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.feature-icon{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.02);transition:border-color .3s,box-shadow .3s,transform .3s;
}
.feature:hover .feature-icon{border-color:var(--accent);box-shadow:0 0 18px var(--accent-glow)}
.feature-icon svg{width:20px;height:20px;stroke:var(--text-2);fill:none;stroke-width:1.5}
.feature:hover .feature-icon svg{stroke:var(--accent-2)}
.feature-label{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--text-2);line-height:1.3}
.hero-car{
  position:relative;height:480px;
  background:linear-gradient(135deg,#0a0a14 0%,#1a1a28 50%,#0a0a14 100%);
  border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.hero-car::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.6) 100%);
  z-index:2;
}
.hero-car img{width:100%;height:100%;object-fit:cover;filter:brightness(1.14) saturate(1.08) contrast(1)}
.hero-car .glow{
  position:absolute;width:60%;height:8px;
  bottom:25%;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 70%);
  filter:blur(20px);z-index:3;
}

/* Page hero (smaller, used on inner pages) */
.page-hero{
  padding:160px 0 80px;position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%,rgba(30,136,229,.08),transparent 70%),
    linear-gradient(180deg,#060610 0%,#0a0a14 100%);
  text-align:center;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 70%);
  pointer-events:none;
}
.page-hero .container{position:relative;z-index:2}
.page-hero .display-h{margin:0 auto;max-width:900px}
.page-hero .lead{margin:24px auto 0;max-width:640px;text-align:center}

/* ---- Page-hero background imagery (titan_hero_media()) ---- */
.page-hero::before{z-index:1}
.page-hero-image{padding:190px 0 100px}
.page-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Lifted well past 1 — most of the source photos are shot dark, so anything at
   or below 1 leaves the subject buried. Contrast is kept modest so the lift
   opens the shadows instead of just washing the midtones. */
.page-hero-media img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(1.28) saturate(1.08) contrast(.96);
}
/* Scrim only as heavy as the copy needs: it darkens the top strip behind the nav
   and fades into the page floor, leaving the middle of the photo readable. */
.page-hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 82% 76% at 50% 40%,rgba(6,6,16,.04),rgba(6,6,16,.4) 100%),
    linear-gradient(180deg,rgba(6,6,16,.6) 0%,rgba(6,6,16,.06) 38%,rgba(6,6,16,.55) 88%,#060610 100%);
}
/* Copy carries its own contrast so the scrim can stay light. */
.page-hero-image .display-h,
.page-hero-image .lead,
.page-hero-image .eyebrow,
.page-hero-image .breadcrumb{text-shadow:0 2px 16px rgba(0,0,0,.8),0 1px 4px rgba(0,0,0,.75)}
/* Muted greys lose the fight against a bright photo — go near-white here. */
.page-hero-image .lead{color:rgba(255,255,255,.94)}
.page-hero-image .eyebrow,
.page-hero-image .breadcrumb,
.page-hero-image .breadcrumb a,
.page-hero-image .breadcrumb span{color:rgba(255,255,255,.82)}

/* ---- Shared image frame ---- */
.media-frame{
  display:block;position:relative;overflow:hidden;border-radius:6px;
  border:1px solid var(--border);
  background:linear-gradient(135deg,#0a0a14 0%,#1a1a28 50%,#0a0a14 100%);
}
.media-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(6,6,16,.38) 74%,rgba(6,6,16,.82) 100%);
}
.media-frame img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.18) saturate(1.08) contrast(.98);transition:transform .6s ease;
}

/* Labels sit over the foot of the artwork, never underneath it. */
.media-label{
  position:absolute;left:24px;right:24px;bottom:18px;z-index:2;
  font-family:var(--display);font-size:15px;letter-spacing:2.5px;
  text-transform:uppercase;color:#fff;line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.85);pointer-events:none;
}
.media-label::before{
  content:"";display:block;width:26px;height:2px;margin-bottom:10px;
  background:var(--accent);
}

/* ---- Media band: wide image breaking up long copy ---- */
.media-band{position:relative;margin:56px 0}
.media-band .media-frame{aspect-ratio:21/9}
.media-band-tall .media-frame{aspect-ratio:16/9}
.media-band .media-label{left:32px;right:32px;bottom:24px;font-size:17px}

/* ---- Media grid: gallery with labels over the artwork ---- */
.media-grid{display:grid;gap:24px;margin:48px 0 0}
.media-grid-2{grid-template-columns:repeat(2,1fr)}
.media-grid-3{grid-template-columns:repeat(3,1fr)}
.media-grid-4{grid-template-columns:repeat(4,1fr)}
.media-tile{position:relative}
.media-tile .media-frame{aspect-ratio:4/3}
.media-tile:hover .media-frame img{transform:scale(1.04)}
.media-grid-4 .media-label{left:18px;right:18px;bottom:14px;font-size:13px;letter-spacing:2px}

/* ---- Card artwork: photo behind a card's own heading and copy ---- */
.cat-card.has-media,.res-card.has-media,
.series-card.has-media,.other-card.has-media{isolation:isolate}
.other-card.has-media{position:relative;overflow:hidden;background:transparent}
.other-card.has-media:hover{background:transparent}
.other-card.has-media p{color:var(--text)}
.card-media{position:absolute;inset:0;z-index:-1;overflow:hidden;display:block}
/* Kept sharp and bright enough that the subject is recognisable — the scrim
   below, not a blur, is what buys the 13–14px copy its contrast. */
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.32) saturate(1.1) contrast(.95);
  transform:scale(1.04);transition:transform .7s ease,filter .5s ease;
}
/* Scrim is heaviest on the left, where the copy sits, and opens up to the right. */
.card-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,6,16,.72) 0%,rgba(6,6,16,.34) 55%,rgba(6,6,16,.04) 100%),
    linear-gradient(180deg,rgba(6,6,16,.18) 0%,rgba(6,6,16,.04) 45%,rgba(6,6,16,.36) 100%);
}
.cat-card.has-media:hover .card-media img,
.res-card.has-media:hover .card-media img,
.series-card.has-media:hover .card-media img,
.other-card.has-media:hover .card-media img{
  transform:scale(1.09);filter:brightness(1.42) saturate(1.16) contrast(.95);
}
/* Copy over artwork gets its own outline so the lighter scrim stays readable. */
.cat-card.has-media h3,.cat-card.has-media p,.cat-card.has-media .cat-list li,
.res-card.has-media h4,.res-card.has-media p,
.series-card.has-media .series-name,.series-card.has-media .series-desc,
.other-card.has-media h4,.other-card.has-media p{
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 12px rgba(0,0,0,.7);
}
/* Small metadata (tier eyebrow, footer link, step arrow) is muted grey by
   default, which disappears once the photo behind it is bright — lift it to
   near-white on media cards and outline it too. */
.series-card.has-media .series-tier,
.series-card.has-media .series-foot,
.cat-card.has-media .cat-link,
.res-card.has-media .res-arrow{
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7);
}
.series-card.flagship.has-media .series-tier{color:var(--gold)}
/* Thickness chips need a solid footing of their own over artwork. */
.series-card.has-media .mil{
  background:rgba(6,6,16,.62);color:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* Short three-up cards: fade down the frame rather than in from the left. */
.other-card.has-media .card-media img{filter:brightness(1.34) saturate(1.1) contrast(.95)}
.other-card.has-media .card-media::after{
  background:linear-gradient(180deg,rgba(6,6,16,.04) 0%,rgba(6,6,16,.36) 45%,rgba(6,6,16,.74) 100%);
}
/* Copy needs a touch more contrast once it sits on artwork. */
.cat-card.has-media p,.cat-card.has-media .cat-list li{color:var(--text)}
.res-card.has-media{background:transparent;position:relative;overflow:hidden}
.res-card.has-media p{color:var(--text)}
.res-card.has-media:hover{background:transparent}
/* Resource cards are narrow, so a left-weighted scrim would swallow the whole
   frame — fade top-to-bottom instead. */
.res-card.has-media .card-media img{filter:brightness(1.34) saturate(1.1) contrast(.95)}
.res-card.has-media .card-media::after{
  background:linear-gradient(180deg,rgba(6,6,16,.04) 0%,rgba(6,6,16,.34) 42%,rgba(6,6,16,.74) 100%);
}
/* The step number sits highest in the card, where the photo is lightest. */
.res-card.has-media .res-num{color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7)}
.series-card.has-media{background:transparent}
.series-card.has-media .series-desc{color:var(--text)}
/* Flagship keeps its gold identity through the scrim. */
.series-card.flagship.has-media .card-media::after{
  background:linear-gradient(180deg,rgba(8,6,4,.8) 0%,rgba(10,8,5,.44) 55%,rgba(6,6,16,.84) 100%);
}
/* The flagship name is gradient-clipped text (color:transparent), so a
   text-shadow would smear behind the glyphs — use a drop-shadow filter. */
.series-card.flagship.has-media .series-name{
  text-shadow:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));
}
/* On phones the copy runs the full card width, so a left-weighted scrim leaves
   the ends of long lines sitting on bare photo. Flatten it across instead. */
@media(max-width:600px){
  .cat-card.has-media .card-media::after,
  .series-card.has-media:not(.flagship) .card-media::after{
    background:
      linear-gradient(90deg,rgba(6,6,16,.74) 0%,rgba(6,6,16,.56) 60%,rgba(6,6,16,.4) 100%),
      linear-gradient(180deg,rgba(6,6,16,.2) 0%,rgba(6,6,16,.06) 45%,rgba(6,6,16,.4) 100%);
  }
}

/* Breadcrumb */
.breadcrumb{
  font-size:13px;letter-spacing:2px;color:var(--text-3);
  margin-bottom:20px;
}
.breadcrumb a{color:var(--text-2);transition:color .2s}
.breadcrumb a:hover{color:var(--accent-2)}
.breadcrumb span{margin:0 8px;color:var(--text-3)}

/* ============ INTRO STRIP ============ */
.intro-strip{
  background:linear-gradient(180deg,#0a0a14 0%,#060610 100%);
  padding:60px 0;border-top:1px solid var(--border);
}
.intro-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:center}
/* "Proudly US-Made" badge */
.us-made-badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font-family:var(--display);font-size:14px;letter-spacing:2.5px;color:#fff;
  padding:8px 16px;border:1px solid rgba(30,136,229,.5);border-radius:40px;
  background:rgba(30,136,229,.12);box-shadow:0 0 20px rgba(30,136,229,.15);
}
.us-made-flag{
  width:24px;height:16px;flex-shrink:0;border-radius:2px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(180deg,#c8102e 0 2.29px,#fff 2.29px 4.57px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4);
}
.us-made-flag::before{content:"";position:absolute;top:0;left:0;width:11px;height:9.1px;background:#0a3161}
.intro-strip h3{font-family:var(--display);font-size:30px;letter-spacing:2px;line-height:1.1}
.intro-strip p{font-size:14px;color:var(--text-2);line-height:1.8;max-width:600px}

/* ============ CATEGORIES ============ */
.section-categories{
  background:
    radial-gradient(ellipse 50% 70% at 20% 30%,rgba(30,136,229,.06),transparent 70%),
    linear-gradient(180deg,#060610 0%,#0a0a14 100%);
}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cat-card{
  position:relative;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,0) 100%);
  padding:50px 40px;overflow:hidden;transition:all .35s;
}
.cat-card:hover{
  border-color:var(--border-2);transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(30,136,229,.1);
}
.cat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .35s;
}
.cat-card:hover::before{opacity:1}
/* The round .cat-icon badge that used to head each card was removed — the
   heading now sits at the top of the card. */
.cat-card h3{font-family:var(--display);font-size:32px;letter-spacing:2px;margin-bottom:12px}
.cat-card p{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:24px}
.cat-list{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.cat-list li{
  font-size:13px;color:var(--text-2);
  padding-left:18px;position:relative;letter-spacing:.5px;
}
.cat-list li::before{
  content:"";position:absolute;left:0;top:7px;
  width:8px;height:1px;background:var(--accent);
}
.cat-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:2px;font-weight:700;
  color:var(--accent-2);transition:gap .3s;
}
.cat-link:hover{gap:14px;color:var(--accent-2)}

/* ============ PRODUCT SERIES ============ */
.section-series{
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%,rgba(30,136,229,.08),transparent 70%),
    linear-gradient(180deg,#0a0a14 0%,#060610 100%);
  overflow:hidden;
}
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.series-card{
  position:relative;border:1px solid var(--border);
  background:linear-gradient(180deg,#0c0c16 0%,#080810 100%);
  padding:40px 32px;overflow:hidden;transition:all .4s;
}
.series-card:hover{border-color:var(--accent);transform:translateY(-6px)}
.series-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.series-card:hover::after{transform:scaleX(1)}
.series-card.flagship{border-color:rgba(201,169,106,.3)}
.series-card.flagship::after{background:linear-gradient(90deg,var(--gold),#e8c98a)}
.series-tier{font-family:var(--display);font-size:13px;letter-spacing:3px;color:var(--text-3);margin-bottom:8px}
.series-card.flagship .series-tier{color:var(--gold)}
.series-name{font-family:var(--display);font-size:34px;letter-spacing:2px;margin-bottom:18px}
.series-desc{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:28px;min-height:80px}
/* Core material chip + client headline, between the series name and its description. */
.series-material{
  display:inline-block;margin:-6px 0 16px;padding:5px 10px;
  border:1px solid rgba(66,165,245,.45);background:rgba(30,136,229,.12);
  font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent-2);
}
.series-card.flagship .series-material{border-color:rgba(201,169,106,.5);background:rgba(201,169,106,.12);color:var(--gold)}
.series-card.has-media .series-material{background:rgba(6,6,16,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.series-headline{font-size:15px;font-weight:700;letter-spacing:.3px;color:var(--text);margin-bottom:10px}
.series-card.has-media .series-headline{text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 12px rgba(0,0,0,.7)}
.series-mils{display:flex;gap:8px;margin-bottom:24px}
.mil{
  flex:1;text-align:center;padding:10px 0;
  border:1px solid var(--border-2);
  font-size:13px;font-weight:700;letter-spacing:.5px;
  color:var(--text-2);transition:border-color .25s,color .25s;
}
.series-card:hover .mil{border-color:var(--accent);color:var(--accent-2)}
.series-card.flagship:hover .mil{border-color:var(--gold);color:var(--gold)}
.series-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:20px;border-top:1px solid var(--border);
  font-size:13px;letter-spacing:1.5px;color:var(--text-3);
}
.mil-note{text-align:center;margin-top:30px;font-size:13px;letter-spacing:1.5px;color:var(--text-3)}
/* "View details" — expandable series cards on the Categories page. */
/* Each card opens on its own: cards align to the top instead of stretching to an
   open neighbour, keep a shared minimum height (set by main.js), and pin the
   footer to the bottom so closed cards stay level. */
.series-grid:has(.series-more){align-items:start}
.series-grid:has(.series-more) .series-card{display:flex;flex-direction:column;min-height:var(--series-min-h,auto)}
.series-more{margin-top:auto}
.series-grid:has(.series-more) .series-material{align-self:flex-start}
.series-more summary{list-style:none;cursor:pointer}
/* An open card runs well past its photo's scrim, so deepen the scrim to keep the detail copy readable. */
.series-card.has-media:has(.series-more[open]) .card-media::after{
  background:linear-gradient(180deg,rgba(6,6,16,.55) 0%,rgba(6,6,16,.82) 45%,rgba(6,6,16,.9) 100%);
}
.series-more summary::-webkit-details-marker{display:none}
.series-more summary:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
.series-more-label{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.series-more summary:hover .series-more-label,.series-more[open] .series-more-label{color:var(--accent-2)}
.series-card.flagship .series-more summary:hover .series-more-label,
.series-card.flagship .series-more[open] .series-more-label{color:var(--gold)}
.series-more-ic{display:inline-block;font-size:17px;line-height:1;transition:transform .25s}
.series-more[open] .series-more-ic{transform:rotate(45deg)}
.series-details{padding-top:20px}
.series-details p{font-size:14px;line-height:1.7;color:var(--text);margin-bottom:12px}
.series-card.has-media .series-details p{text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 12px rgba(0,0,0,.7)}
.series-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 16px}
.series-specs div{border:1px solid rgba(255,255,255,.22);background:rgba(6,6,16,.62);padding:10px 12px}
.series-specs dt{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.series-specs dd{margin:4px 0 0;font-size:13px;font-weight:700;color:#fff}
.series-card.flagship .series-specs div{border-color:rgba(201,169,106,.4)}
.series-tech-link{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-2)}
.series-tech-link:hover{text-decoration:underline}
.series-card.flagship .series-tech-link{color:var(--gold)}
@media (prefers-reduced-motion: reduce){.series-more-ic{transition:none}}
.other-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.other-card{
  border:1px solid var(--border);padding:30px 24px;
  background:rgba(255,255,255,.02);transition:all .3s;
}
.other-card:hover{border-color:var(--border-2);background:rgba(255,255,255,.04)}
.other-card h4{font-family:var(--display);font-size:22px;letter-spacing:2px;margin-bottom:10px}
.other-card p{font-size:13px;color:var(--text-2);line-height:1.6}

/* ============ PREMIUM SECTION ============ */
.section-premium{
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%,rgba(30,136,229,.1),transparent 70%),
    linear-gradient(180deg,#060610 0%,#0a0a14 100%);
  overflow:hidden;
}
.section-premium::after{
  content:"";position:absolute;
  top:20%;right:-10%;width:80%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:rotate(-15deg);box-shadow:0 0 30px var(--accent);opacity:.6;
}
.premium-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;
  position:relative;z-index:2;
}
.feature-bar{
  margin-top:80px;padding:24px 32px;
  border:1px solid var(--border);background:rgba(255,255,255,.02);
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
}
.feature-bar .feature{flex-direction:row;justify-content:center;text-align:left;gap:12px}
.feature-bar .feature-icon{width:38px;height:38px;flex-shrink:0}
.feature-bar .feature-label{font-size:12px;line-height:1.3}

/* ============ ENGINEERED + STATS ============ */
.section-engineered{
  background:linear-gradient(180deg,#060610 0%,#0a0a14 100%);
  padding:120px 0 0;
}
.engineered-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;margin-bottom:90px;
}
.engineered-visual{
  height:380px;
  background:
    radial-gradient(ellipse at 30% 50%,rgba(30,136,229,.1),transparent 70%),
    linear-gradient(135deg,#0a0a14 0%,#1c1c28 50%,#0a0a14 100%);
  border-radius:6px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Was mix-blend-mode:luminosity at .75 — that stripped the colour out entirely.
   Show the photo as shot, just tuned to sit in the dark palette. */
.engineered-visual img{width:100%;height:100%;object-fit:cover;filter:brightness(1.14) saturate(1.08) contrast(.98)}
.stats-bar{
  border-top:1px solid var(--border);padding:40px 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.stat{display:flex;align-items:baseline;gap:14px;justify-content:center}
.stat-num{
  font-family:var(--display);
  font-size:54px;letter-spacing:1px;line-height:1;
  background:linear-gradient(180deg,#fff,#7a8a9a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-label{font-size:12px;letter-spacing:1.5px;color:var(--text-2);font-weight:600;line-height:1.3;max-width:90px}

/* ============ TECHNOLOGY / LAYERS ============ */
.section-defense{
  padding:120px 0;
  background:
    radial-gradient(ellipse 50% 70% at 70% 50%,rgba(30,136,229,.08),transparent 70%),
    linear-gradient(180deg,#0a0a14 0%,#060610 100%);
}
.defense-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.layers-wrap{position:relative;height:520px;display:flex;align-items:center;justify-content:center;
  perspective:1600px;perspective-origin:50% 38%;overflow:visible}
.layers-svg{width:100%;max-width:620px;height:auto;
  /* let the top sheet's label paint above the viewBox when it lifts on hover */
  overflow:visible;
  /* resting 3D tilt — the flat sheets read as panels floating in space */
  transform:rotateX(9deg) rotateY(-12deg);transform-origin:50% 50%}
.layers-svg .layer{
  fill:url(#layerGrad);stroke:rgba(255,255,255,.25);stroke-width:1;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
/* extruded slab side walls — darker shaded faces give each sheet real thickness */
.layers-svg .layer-side{stroke:rgba(255,255,255,.10);stroke-width:1}
.layers-svg .layer-side-r{fill:rgba(96,122,158,.55)}
.layers-svg .layer-side-l{fill:rgba(48,64,92,.62)}
.layers-svg .connector{stroke:var(--accent);stroke-width:1;fill:none;opacity:.6}
.layers-svg .dot{fill:var(--accent-2);filter:drop-shadow(0 0 6px var(--accent-glow))}
.layers-svg .label-text{font-family:var(--body);fill:var(--text);font-size:13px;font-weight:700;letter-spacing:1.5px}
.layers-svg .label-desc{font-family:var(--body);fill:var(--text-2);font-size:11px;letter-spacing:.5px}

/* ============ WHY TITAN ============ */
.section-titan{
  padding:120px 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%,rgba(30,136,229,.08),transparent 70%),
    linear-gradient(180deg,#060610 0%,#0a0a14 100%);
  position:relative;overflow:hidden;
}
.titan-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:center}
.titan-car{height:380px;background:linear-gradient(135deg,#0a0a14,#1c1c28);border-radius:6px;overflow:hidden}
.titan-car img{width:100%;height:100%;object-fit:cover;filter:brightness(1.16) saturate(1.08) contrast(.98)}
.titan-text{padding:0 20px}
.titan-card{
  border:1px solid var(--border);background:rgba(255,255,255,.02);
  padding:44px 40px;backdrop-filter:blur(10px);position:relative;overflow:hidden;
  min-height:380px;display:flex;flex-direction:column;justify-content:center;
}
.titan-card h4{font-family:var(--display);font-size:24px;letter-spacing:3px;margin-bottom:30px}
.titan-card ul{display:flex;flex-direction:column;gap:20px}
.titan-card li{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--text-2);font-weight:500}
.titan-card li::before{
  content:"";width:17px;height:17px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342a5f5' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/contain;
}

/* ============ RESOURCES ============ */
.section-resources{padding:100px 0;background:linear-gradient(180deg,#0a0a14 0%,#060610 100%)}
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.res-card{
  border:1px solid var(--border);padding:32px 28px;
  background:rgba(255,255,255,.02);transition:all .3s;
  text-align:left;display:block;
}
.res-card:hover{border-color:var(--accent);background:rgba(30,136,229,.04);transform:translateY(-4px)}
.res-num{font-family:var(--display);font-size:14px;letter-spacing:2px;color:var(--text-3);margin-bottom:14px}
.res-card h4{font-family:var(--display);font-size:22px;letter-spacing:1.5px;margin-bottom:10px;line-height:1.1;color:var(--text)}
.res-card p{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:20px}
.res-arrow{display:inline-block;font-size:13px;letter-spacing:2px;color:var(--accent-2);font-weight:700}

/* ============ CONTACT CTA ============ */
.section-contact{
  padding:120px 0;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%,rgba(30,136,229,.12),transparent 70%),
    linear-gradient(180deg,#060610,#080812);
  text-align:center;position:relative;overflow:hidden;
}
.section-contact::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.3;
}
.contact-inner{max-width:720px;margin:0 auto;position:relative;z-index:2}
.contact-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* The CTA row has no primary button, so plain ghost outlines read as bare text
   on this dark gradient. Give them a real raised surface — sharp corners kept
   to match .btn-primary. */
.contact-actions .btn-ghost{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 2px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.contact-actions .btn-ghost:hover{
  background:rgba(255,255,255,.15);
  border-color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
}

/* ============ FORMS ============ */
.titan-form{
  max-width:720px;margin:60px auto 0;
  padding:48px 40px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(10px);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-row.full{grid-template-columns:1fr}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field label{
  font-size:13px;letter-spacing:1.5px;font-weight:600;
  color:var(--text-2);text-transform:uppercase;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;padding:14px 16px;
  background:rgba(0,0,0,.3);
  border:1px solid var(--border-2);
  color:var(--text);font-family:var(--body);font-size:14px;
  transition:border-color .25s,box-shadow .25s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-field textarea{min-height:120px;resize:vertical;font-family:var(--body)}
.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:40px;
}
.form-field .req{color:var(--accent-2)}
.form-submit{
  margin-top:10px;display:flex;justify-content:flex-end;gap:14px;flex-wrap:wrap;
}
.form-note{
  font-size:13px;color:var(--text-3);
  margin-top:20px;text-align:center;letter-spacing:.5px;
}
.form-success,.form-error{
  padding:16px 20px;margin-bottom:24px;
  font-size:13px;letter-spacing:.5px;
  border-left:3px solid var(--accent-2);
  background:rgba(30,136,229,.08);
  color:var(--text);
}
.form-error{border-left-color:#ef5350;background:rgba(239,83,80,.08)}

/* Inquiry types grid (Contact page) */
.inquiry-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:0 auto 60px;max-width:1100px;
}
.inquiry-card{
  border:1px solid var(--border);padding:24px 18px;
  text-align:center;background:rgba(255,255,255,.02);cursor:pointer;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.inquiry-card:hover{border-color:var(--accent);background:rgba(30,136,229,.04)}
.inquiry-card.is-active{border-color:var(--accent);background:rgba(30,136,229,.10);box-shadow:0 0 22px var(--accent-glow)}
.inquiry-card.is-active h5{color:var(--accent-2)}
/* Blue travelling outline + blue boundary, matching the site's other boxes.
   Brightens on hover and when the card is the selected inquiry type. */
.inquiry-card{position:relative;overflow:hidden;border-color:rgba(30,136,229,.35)}
.inquiry-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--tf-gold-angle),
    transparent 0 60%,rgba(30,136,229,.4) 70%,#90caf9 80%,var(--accent) 85%,rgba(30,136,229,.4) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
  animation:tfGoldRun 4.5s linear infinite;
}
.inquiry-card:hover::before,.inquiry-card.is-active::before{
  padding:2px;
  background:conic-gradient(from var(--tf-gold-angle),
    rgba(30,136,229,.5) 0 55%,#bbdefb 72%,var(--accent-2) 82%,#bbdefb 90%,rgba(30,136,229,.5) 100%);
}

/* ---- Touch devices have no hover, so light the outline on tap/press too so
   the highlight works on mobile the same as hover does on desktop. ---- */
.series-card:not(.flagship):active,
.cat-card:active,.res-card:active,.other-card:active,.inquiry-card:active{
  border-color:var(--accent);
  box-shadow:0 20px 46px rgba(30,136,229,.18),0 0 20px rgba(30,136,229,.32),inset 0 1px 0 rgba(255,255,255,.06);
}
.series-card:not(.flagship):active::before,
.cat-card:active::after,
.res-card:active::before,.other-card:active::before,.inquiry-card:active::before{
  padding:2px;
  background:conic-gradient(from var(--tf-gold-angle),
    rgba(30,136,229,.5) 0 55%,#bbdefb 72%,var(--accent-2) 82%,#bbdefb 90%,rgba(30,136,229,.5) 100%);
}
.series-card.flagship:active{
  border-color:var(--gold);
  box-shadow:0 22px 50px rgba(201,169,106,.28),0 0 24px rgba(201,169,106,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.series-card.flagship:active::before{
  padding:2px;
  background:conic-gradient(from var(--tf-gold-angle),
    rgba(201,169,106,.5) 0 55%,#f7ecc9 72%,var(--gold) 82%,#f7ecc9 90%,rgba(201,169,106,.5) 100%);
}
.inquiry-card h5{font-family:var(--display);font-size:14px;letter-spacing:1.5px;margin-bottom:6px}
.inquiry-card p{font-size:13px;color:var(--text-2);line-height:1.5}

/* Contact info row */
.contact-info-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:30px 80px;
  margin:60px 0;padding:40px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.info-block{text-align:center;min-width:180px}
.info-block .eyebrow{margin-bottom:8px}
.info-block .val{font-size:14px;color:var(--text);letter-spacing:.5px}

/* ============ GUIDE / CONTENT PAGES ============ */
.content-section{
  padding:80px 0;
  background:linear-gradient(180deg,#060610 0%,#0a0a14 100%);
}
.content-wrap{max-width:840px;margin:0 auto}
.content-wrap h2{
  font-family:var(--display);
  font-size:36px;letter-spacing:1.5px;
  margin:60px 0 20px;color:var(--text);
}
.content-wrap h2:first-child{margin-top:0}
.content-wrap h3{
  font-family:var(--display);
  font-size:22px;letter-spacing:1.5px;
  margin:40px 0 14px;color:var(--accent-2);
}
.content-wrap p{font-size:15px;line-height:1.8;color:var(--text-2);margin-bottom:18px}
.content-wrap ul{margin:18px 0 24px 0;padding-left:0}
.content-wrap li{
  font-size:14px;line-height:1.8;color:var(--text-2);
  padding-left:24px;position:relative;margin-bottom:8px;
}
.content-wrap li::before{
  content:"";position:absolute;left:0;top:12px;
  width:10px;height:1px;background:var(--accent);
}
.content-wrap strong{color:var(--text);font-weight:600}
.content-divider{
  height:1px;background:linear-gradient(90deg,transparent,var(--border-2),transparent);
  margin:60px 0;
}
/* Technology page — Essential → Elite → Signature material progression.
   A slim timeline rather than cards, so it doesn't read as a third set of series cards:
   one track across on desktop, one down the left on phones. */
.material-path{list-style:none;margin:14px auto 0;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr)}
.material-step{position:relative;padding:26px 36px 0 0;border-top:1px solid var(--border-2)}
.material-step::before{
  content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent-glow);
}
.material-step.flagship::before{background:var(--gold);box-shadow:0 0 12px rgba(201,169,106,.45)}
.material-step:not(:last-child)::after{
  content:"";position:absolute;top:-5px;right:16px;width:8px;height:8px;
  border-top:1px solid var(--text-3);border-right:1px solid var(--text-3);transform:rotate(45deg);
}
.material-step-name{display:block;font-family:var(--display);font-size:22px;letter-spacing:2px;color:var(--text)}
.material-step-core{display:block;margin:4px 0 10px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-2)}
.material-step.flagship .material-step-core{color:var(--gold)}
.material-step p{font-size:14px;line-height:1.65;color:var(--text-2);margin-bottom:10px}
.material-step-link{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-2)}
.material-step.flagship .material-step-link{color:var(--gold)}
.material-step-link:hover{text-decoration:underline}
@media(max-width:860px){
  .material-path{grid-template-columns:1fr;max-width:840px;margin-top:6px}
  .material-step{border-top:0;border-left:1px solid var(--border-2);padding:0 0 22px 24px}
  .material-step:last-child{border-left-color:transparent;padding-bottom:0}
  .material-step::before{top:5px;left:-6px}
  .material-step:not(:last-child)::after{display:none}
  .material-step-core{margin:2px 0 6px}
  .material-step p{margin-bottom:6px}
}
.content-callout{
  border-left:3px solid var(--accent);
  padding:20px 24px;margin:30px 0;
  background:rgba(30,136,229,.06);
  font-size:14px;color:var(--text);
}
.numbered-step{
  display:flex;gap:24px;margin-bottom:32px;
  padding-bottom:32px;border-bottom:1px solid var(--border);
}
.step-num{
  font-family:var(--display);font-size:36px;letter-spacing:1px;
  color:var(--accent-2);line-height:1;flex-shrink:0;width:60px;
}
.step-content h3{margin:0 0 10px;color:var(--text);font-size:20px}
.step-content p,.step-content li{font-size:14px}

/* ============ FOOTER ============ */
.site-footer{
  padding:72px 0 30px;background:#040408;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;
  margin:64px 0 40px;
}
.footer-grid h5{
  font-family:var(--display);font-size:13px;letter-spacing:2.5px;
  color:var(--text);margin-bottom:18px;
}
.footer-grid p,.footer-grid a{
  font-size:13px;color:var(--text-2);line-height:1.9;display:block;
}
.footer-grid a:hover{color:var(--accent-2)}
.footer-brand p{margin-top:14px;max-width:320px}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:24px;
  display:flex;justify-content:space-between;
  font-size:13px;color:var(--text-3);letter-spacing:1px;
}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .nav-links{gap:22px;font-size:12px}
  .inquiry-grid{grid-template-columns:repeat(3,1fr)}
  .res-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .nav-links{display:none}
  .menu-icon{display:flex}
  .nav-actions .btn-outline{display:none}
  .hero-grid,.premium-grid,.engineered-grid,.defense-grid,.titan-grid,.intro-grid,.cat-grid,.series-grid,.other-products,.res-grid,.footer-grid,.inquiry-grid{
    grid-template-columns:1fr;gap:30px;
  }
  /* Inquiry grid: 2-col at tablet/mobile (overrides the 1fr above) */
  .inquiry-grid{grid-template-columns:repeat(2,1fr)}
  .feature-bar,.stats-bar{grid-template-columns:repeat(2,1fr);gap:24px}
  .contact-info-row{gap:24px 40px}
  /* Imagery: fewer columns and a less letterboxed band on tablet */
  .media-grid-3,.media-grid-4{grid-template-columns:repeat(2,1fr)}
  .media-band .media-frame{aspect-ratio:16/9}
  .media-band{margin:44px 0}
  .media-band .media-label{left:22px;right:22px;bottom:18px;font-size:15px}
  .page-hero-image{padding:150px 0 70px}
  .section,.section-engineered,.section-defense,.section-titan,.section-resources,.section-contact,.section-categories,.section-series,.section-premium{padding:80px 0}
  .feature-row{max-width:none}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .series-desc{min-height:auto}
  .form-row{grid-template-columns:1fr}
  /* Hero image heights — prevent full-height blocks on single-column layout */
  .hero-car{height:320px}
  .hero-grid{padding:50px 24px 60px}
  .hero-v1{padding-top:82px}
  /* Hero V3/V4 have 130px top padding — reduce on tablet */
  .hero-v3,.hero-v4{padding-top:90px}
  .engineered-visual{height:280px}
  .titan-car{height:280px}
  /* Titan grid: show text before car image on single-column */
  .titan-car{order:2}
  .titan-text{order:1}
  .titan-card{order:3}
  /* Layers diagram: don't force fixed height when stacked */
  .layers-wrap{height:auto;min-height:0;padding:20px 0}
  /* Nav padding: tighter on mid-size screens */
  .nav{padding:14px 24px}
  .nav.scrolled{padding:10px 24px}
  /* Intro strip: less vertical padding */
  .intro-strip{padding:44px 0}
  /* Proof side: auto row heights when stacked */
  .proof-side{grid-template-rows:auto}
  /* Hero V5: reduce side padding */
  .hero-v5-content{padding:40px 24px}
}
@media(max-width:520px){
  .container{padding:0 18px}
  .feature-row{grid-template-columns:repeat(2,1fr)}
  .feature-bar{grid-template-columns:repeat(2,1fr)}
  .stats-bar{grid-template-columns:1fr 1fr}
  .stat-num{font-size:40px}
  .nav{padding:12px 18px}
  .nav.scrolled{padding:10px 18px}
  .titan-form{padding:30px 20px}
  .numbered-step{flex-direction:column;gap:14px}
  .step-num{font-size:28px}
  /* Hero car further reduced on small phones */
  .hero-car{height:200px}
  .engineered-visual{height:180px}
  .titan-car{height:180px}
  /* Section head spacing */
  .section-head{margin-bottom:32px}
  /* Imagery: single column, taller crop so subjects stay readable */
  .media-grid-2,.media-grid-3,.media-grid-4{grid-template-columns:1fr}
  .media-grid{gap:20px}
  .media-band .media-frame{aspect-ratio:3/2}
  .media-label,.media-grid-4 .media-label{left:18px;right:18px;bottom:14px;font-size:14px;letter-spacing:2px}
}

/* ============================================================
 * HEADER + FOOTER ADDITIONS (skip link, main, footer CTA,
 * footer menus, contact, social) — appended rebuild
 * ============================================================ */

/* Skip-to-content link: hidden until keyboard-focused */
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:1000;
  padding:12px 18px;background:var(--accent);color:#fff;
  font-family:var(--display);letter-spacing:2px;font-size:13px;
  border-radius:4px;transition:top .2s;
}
.skip-link:focus{
  top:16px;clip:auto !important;width:auto;height:auto;
  outline:2px solid var(--accent-2);outline-offset:2px;
}
.site-main:focus{outline:none}

/* Footer menu lists (from wp_nav_menu or fallback) inherit footer link styling */
.footer-grid .footer-menu{list-style:none;margin:0;padding:0}
.footer-grid .footer-menu li{margin:0}
.footer-grid .footer-menu a{
  font-size:13px;color:var(--text-2);line-height:1.9;display:block;
  transition:color .2s;
}
.footer-grid .footer-menu a:hover{color:var(--accent-2)}

/* Footer contact block */
.footer-contact{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.footer-contact li{display:flex;flex-direction:column;gap:2px}
.footer-contact-label{
  font-family:var(--display);font-size:13px;letter-spacing:2.5px;color:var(--text-3);
}
.footer-contact a{font-size:13px;color:var(--text-2);transition:color .2s}
.footer-contact a:hover{color:var(--accent-2)}

/* Footer social icons */
.footer-social{display:flex;gap:12px;margin-top:24px}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:border-color .25s,color .25s,box-shadow .25s,transform .25s;
}
.footer-social a:hover{
  border-color:var(--accent);color:var(--accent-2);
  box-shadow:0 0 16px var(--accent-glow);transform:translateY(-2px);
}
.footer-social svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* Footer legal links */
.footer-legal a{color:var(--text-3);transition:color .2s}
.footer-legal a:hover{color:var(--accent-2)}

@media(max-width:980px){
  .footer-social{margin-bottom:8px}
}

/* ============================================================
 * HOMEPAGE HERO VARIANTS (1–5) + showcase
 * Recreated from the Titan PPF mockups. Each is selectable via
 * Appearance → Customize → Homepage Hero.
 * ============================================================ */

/* Shared accent for hero headlines */
.hero .accent{color:var(--accent-2);text-shadow:0 0 26px var(--accent-glow)}

/* ---------- Variant 1 ---------- */
.hero-v1{flex-direction:column;align-items:stretch;justify-content:center;padding:110px 0 0}
.hero-v1 .hero-title{font-size:clamp(52px,7vw,96px);line-height:.92}
.hero-v1-strip{border-top:1px solid var(--border);background:rgba(5,5,7,.55);margin-top:24px}
.hero-v1-strip .container{padding-top:30px;padding-bottom:30px}
.hero-v1-strip-title{
  font-family:var(--display);font-size:clamp(20px,2.4vw,30px);
  letter-spacing:1.5px;color:var(--text);
}
.hero-v1-strip-text{font-size:14px;color:var(--text-2);line-height:1.7;max-width:560px;margin-top:10px}

/* ---------- Variant 2 ---------- */
.hero-v2{flex-direction:column;justify-content:center;overflow:hidden}
.hero-v2-bg{position:absolute;inset:0;background-size:cover;background-position:center right;z-index:0}
.hero-v2::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(5,5,7,.94) 0%,rgba(5,5,7,.7) 40%,rgba(5,5,7,.15) 100%),
             linear-gradient(0deg,rgba(5,5,7,.85),transparent 45%);
}
.hero-v2-streak{
  position:absolute;top:14%;right:-10%;width:70%;height:3px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
  transform:rotate(-18deg);filter:blur(1px);
  box-shadow:0 0 24px 4px var(--accent-glow);
}
.hero-v2-inner{position:relative;z-index:2;flex:1;display:flex;align-items:center}
.hero-v2-copy{max-width:540px}
.hero-v2-title{font-family:var(--display);font-size:clamp(40px,5.5vw,72px);line-height:1;letter-spacing:.5px}
.hero-v2 .lead{margin:20px 0 30px}
.hero-v2-bar{position:relative;z-index:2;margin:0 0 48px;background:rgba(7,7,12,.62);backdrop-filter:blur(6px)}

/* ---------- Variant 3 ---------- */
.hero-v3{flex-direction:column;justify-content:center;padding:130px 0 0}
.hero-v3-grid{align-items:center}
.hero-v3-title{font-family:var(--display);font-size:clamp(46px,6.4vw,90px);line-height:.9;letter-spacing:1px}
.hero-v3 .hero-sub{margin-top:14px}
.hero-v3 .lead{max-width:460px}
.hero-v3-media{position:relative;height:420px;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.hero-v3-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.15) brightness(.85) saturate(1.1)}
.hero-v3-media-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 70% 60%,var(--accent-glow),transparent 70%);
  mix-blend-mode:screen;opacity:.5;
}
.hero-v3 .stats-bar{margin-top:40px}

/* ---------- Variant 4 ---------- */
.hero-v4{flex-direction:column;justify-content:center;padding:130px 0 0}
.hero-v4-grid{align-items:center}
.hero-v4-title{font-family:var(--display);font-size:clamp(40px,5.2vw,78px);line-height:.92;letter-spacing:.5px}
.hero-v4 .lead{max-width:420px}
.hero-v4-diagram{display:flex;align-items:center;gap:28px}
.tf-layers{width:clamp(220px,22vw,300px);flex-shrink:0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.tf-face{fill:url(#tfPanel);stroke:rgba(150,195,240,.55);stroke-width:1}
.tf-edge{fill:#0a1830;stroke:rgba(120,160,210,.25);stroke-width:.5}
.tf-layer-labels{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:300px;list-style:none;margin:0;padding:0}
.tf-layer-labels li{display:flex;align-items:flex-start;gap:12px}
.tf-dot{
  width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;
  background:var(--accent-2);box-shadow:0 0 10px var(--accent-glow);
}
.tf-layer-text{display:flex;flex-direction:column;gap:3px}
.tf-layer-title{font-family:var(--display);font-size:14px;letter-spacing:1.5px;color:var(--text)}
.tf-layer-desc{font-size:12px;color:var(--text-2);line-height:1.5}

/* ---------- Variant 5 ---------- */
.hero-v5{padding:0;align-items:stretch;overflow:hidden}
.hero-v5-grid{display:grid;grid-template-columns:1.05fr 1fr;width:100%;min-height:100vh;align-items:center}
.hero-v5-media{position:relative;height:100%;min-height:100vh}
.hero-v5-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) contrast(1.1)}
.hero-v5-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,var(--bg) 100%),
             radial-gradient(ellipse at 30% 70%,transparent 40%,rgba(0,0,0,.5));
}
.hero-v5-content{display:flex;align-items:center;gap:44px;padding:0 48px}
.hero-v5-copy{flex:1;min-width:0}
.hero-v5-title{font-family:var(--display);font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:.5px}
.hero-v5-content .lead{max-width:380px}
.hero-v5-card{
  position:relative;flex-shrink:0;width:clamp(240px,22vw,300px);
  border:1px solid var(--border-2);background:rgba(10,10,18,.6);
  backdrop-filter:blur(8px);padding:30px 26px;overflow:hidden;
}
.hero-v5-card-title{font-family:var(--display);font-size:18px;letter-spacing:2px;color:var(--text);margin-bottom:20px}
.hero-v5-checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative;z-index:2}
.hero-v5-checklist li{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-2)}
.tf-check{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--accent-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero-v5-card-mark{position:absolute;right:-20px;bottom:-20px;width:120px;height:120px;opacity:.06}

/* ---------- Showcase (all 5 stacked with numbered badges) ---------- */
.hero-options-showcase .hero{min-height:auto;padding-top:120px;padding-bottom:60px}
.hero-options-showcase .hero-v5{padding:0}
.hero-options-showcase .hero-v5-grid,
.hero-options-showcase .hero-v5-media{min-height:560px}
.hero-option{position:relative;border-bottom:2px solid var(--accent)}
.hero-option:last-child{border-bottom:none}
.hero-option-badge{
  position:absolute;top:0;left:0;z-index:50;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-family:var(--display);font-size:18px;letter-spacing:1px;
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-v2-copy{max-width:none}
  .hero-v3-media{height:300px}
  .hero-v4-diagram{flex-direction:column;align-items:center;gap:20px}
  .tf-layer-labels{min-height:0;width:100%;gap:14px}
  .hero-v5-grid{grid-template-columns:1fr}
  .hero-v5-media,.hero-v5-media img{min-height:300px;height:340px}
  .hero-v5-content{flex-direction:column;align-items:flex-start;gap:28px;padding:48px 24px}
  .hero-v5-card{width:100%}
}
@media(max-width:520px){
  .hero-v2-bar{grid-template-columns:1fr;gap:14px}
  .hero-v1 .hero-title{font-size:clamp(40px,12vw,64px)}
}

/* ============================================================
 * PREMIUM PASS — finish, motion, interactive proof
 * ============================================================ */

/* ---- Film grain overlay (keeps the black from reading flat) ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Cursor glow (desktop, fine pointer) ---- */
.cursor-glow{
  position:fixed;top:0;left:0;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 62%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:35;
  mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;will-change:transform;
}

/* ---- Brand mark: subtle metallic glow ---- */
.brand-mark,.hero-logo-mark{filter:drop-shadow(0 2px 10px rgba(30,136,229,.35))}

/* ---- Glass cards + 3D tilt ---- */
.cat-grid,.series-grid,.res-grid{perspective:1300px}
.cat-card,.series-card,.res-card{
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid var(--border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.28);
  transform-style:preserve-3d;will-change:transform;
}
.cat-card.tilt,.series-card.tilt,.res-card.tilt{transition:transform .1s ease-out}

/* ---- Gold flagship hierarchy ---- */
.series-card.flagship{
  background:linear-gradient(180deg,rgba(201,169,106,.08),rgba(201,169,106,0) 60%);
  border-color:rgba(201,169,106,.4);
}
.series-card.flagship:hover{box-shadow:0 22px 50px rgba(201,169,106,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.series-card.flagship .series-name{
  background:linear-gradient(180deg,#f3e2bd,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- Signature (flagship) card: a golden light that travels around the
   outline, and brightens into a full gold glow on hover / tap ---- */
@property --tf-gold-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.series-card.flagship::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--tf-gold-angle),
    transparent 0 60%,rgba(201,169,106,.45) 70%,#f3e2bd 80%,var(--gold) 85%,rgba(201,169,106,.45) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
  animation:tfGoldRun 4.5s linear infinite;
}
@keyframes tfGoldRun{to{--tf-gold-angle:360deg}}
/* hover / tap-lit: brighten the entire ring */
.series-card.flagship:hover::before,
.series-card.flagship.is-lit::before{
  padding:2px;
  background:conic-gradient(from var(--tf-gold-angle),
    rgba(201,169,106,.5) 0 55%,#f7ecc9 72%,var(--gold) 82%,#f7ecc9 90%,rgba(201,169,106,.5) 100%);
}
.series-card.flagship:hover,
.series-card.flagship.is-lit{
  border-color:var(--gold);
  box-shadow:0 22px 50px rgba(201,169,106,.28),0 0 24px rgba(201,169,106,.4),inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- Other series cards: the same travelling outline in the site's blue ---- */
.series-card:not(.flagship)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--tf-gold-angle),
    transparent 0 60%,rgba(30,136,229,.4) 70%,#90caf9 80%,var(--accent) 85%,rgba(30,136,229,.4) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
  animation:tfGoldRun 4.5s linear infinite;
}
.series-card:not(.flagship):hover::before,
.series-card:not(.flagship).is-lit::before{
  padding:2px;
  background:conic-gradient(from var(--tf-gold-angle),
    rgba(30,136,229,.5) 0 55%,#bbdefb 72%,var(--accent-2) 82%,#bbdefb 90%,rgba(30,136,229,.5) 100%);
}
.series-card:not(.flagship):hover,
.series-card:not(.flagship).is-lit{
  border-color:var(--accent);
  box-shadow:0 22px 50px rgba(30,136,229,.22),0 0 22px rgba(30,136,229,.38),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- Same blue travelling outline + blue boundary on the other content
   boxes (category, resource and other-product cards). cat-card's ::before is
   taken by its top line, so its ring rides on ::after. ---- */
.res-card,.other-card{position:relative;overflow:hidden}
.cat-card::after,.res-card::before,.other-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--tf-gold-angle),
    transparent 0 60%,rgba(30,136,229,.4) 70%,#90caf9 80%,var(--accent) 85%,rgba(30,136,229,.4) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
  animation:tfGoldRun 4.5s linear infinite;
}
.cat-card:hover::after,.cat-card.is-lit::after,
.res-card:hover::before,.res-card.is-lit::before,
.other-card:hover::before,.other-card.is-lit::before{
  padding:2px;
  background:conic-gradient(from var(--tf-gold-angle),
    rgba(30,136,229,.5) 0 55%,#bbdefb 72%,var(--accent-2) 82%,#bbdefb 90%,rgba(30,136,229,.5) 100%);
}
/* blue box boundary at rest; brighter blue + glow on hover / tap */
.series-card:not(.flagship),.cat-card,.res-card,.other-card{border-color:rgba(30,136,229,.35)}
.cat-card:hover,.cat-card.is-lit,
.res-card:hover,.res-card.is-lit,
.other-card:hover,.other-card.is-lit{
  border-color:var(--accent);
  box-shadow:0 20px 46px rgba(30,136,229,.18),0 0 20px rgba(30,136,229,.32),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- Stat numbers: brighter metallic ---- */
.stat-num{filter:drop-shadow(0 2px 12px rgba(0,0,0,.45))}

/* ---- Section accents / metallic dividers ---- */
.section-proof{border-top:1px solid var(--border);position:relative}
.section-proof::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:160px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
}

/* ---- Hero entrance ---- */
@keyframes tfRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-v2-copy>*{animation:tfRise .85s cubic-bezier(.2,.7,.2,1) both}
.hero-v2-copy>*:nth-child(2){animation-delay:.07s}
.hero-v2-copy>*:nth-child(3){animation-delay:.14s}
.hero-v2-copy>*:nth-child(4){animation-delay:.21s}
.hero-v2-copy>*:nth-child(5){animation-delay:.28s}
.hero-v2-bar{animation:tfRise .85s .34s cubic-bezier(.2,.7,.2,1) both}
.hero-v2-video{object-fit:cover;width:100%;height:100%}

/* ---- Proof section layout ---- */
.proof-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;margin-top:50px}
/* Slider on its own (demo cards removed): centre it at a comfortable width */
.proof-grid.proof-solo{grid-template-columns:1fr;max-width:900px;margin-left:auto;margin-right:auto}
.proof-side{display:grid;grid-template-rows:1fr 1fr;gap:24px}

/* Before / After slider */
.ba{
  --pos:50%;position:relative;aspect-ratio:16/10;overflow:hidden;margin:0;
  border:1px solid var(--border-2);border-radius:4px;user-select:none;
}
.ba-img{position:absolute;inset:0;background-size:cover;background-position:center}
.ba-after{filter:saturate(.97) contrast(1.12) brightness(1.14) sepia(.05)}
.ba-before{filter:saturate(.45) contrast(.9) brightness(.78);clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{
  position:absolute;bottom:14px;z-index:3;font-family:var(--display);font-size:12px;
  letter-spacing:2px;padding:5px 12px;background:rgba(5,5,7,.7);backdrop-filter:blur(4px);color:#fff;
}
.ba-tag-before{left:14px}
.ba-tag-after{right:14px;color:var(--accent-2)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;z-index:4;
  background:#fff;transform:translateX(-1px);box-shadow:0 0 12px rgba(0,0,0,.5);
}
.ba-handle i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;color:var(--bg);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.ba-handle i::before,.ba-handle i::after{
  content:"";position:absolute;top:50%;width:0;height:0;border-block:5px solid transparent;
}
.ba-handle i::before{left:9px;border-right:7px solid var(--bg);transform:translateY(-50%)}
.ba-handle i::after{right:9px;border-left:7px solid var(--bg);transform:translateY(-50%)}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:5;
  opacity:0;cursor:ew-resize;
}

/* Live demos (self-healing + hydrophobic) */
.demo{
  border:1px solid var(--border-2);background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px);overflow:hidden;border-radius:4px;display:flex;flex-direction:column;
}
.demo-surface{position:relative;flex:1;min-height:118px;overflow:hidden}
.demo-heal .demo-surface{background:linear-gradient(135deg,#101a28,#05090f)}
.demo-water .demo-surface{background:linear-gradient(135deg,#0c1622,#05080e)}
.demo-cap{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--border)}
.demo-ic{width:30px;height:30px;flex-shrink:0;color:var(--accent-2);display:flex}
.demo-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6}
.demo-cap strong{display:block;font-family:var(--display);font-size:14px;letter-spacing:2px;color:var(--text)}
.demo-cap small{display:block;font-size:13px;color:var(--text-2);margin-top:2px}

/* self-healing scratches */
.scratch{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:tfHeal 4s ease-in-out infinite}
.scratch.s1{top:36%;left:16%;width:48%;transform:rotate(20deg)}
.scratch.s2{top:54%;left:30%;width:38%;transform:rotate(-13deg);animation-delay:.25s}
.scratch.s3{top:70%;left:12%;width:30%;transform:rotate(7deg);animation-delay:.45s}
@keyframes tfHeal{0%,22%{opacity:.85;clip-path:inset(0 0 0 0)}58%{opacity:.85}82%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
.heat{position:absolute;top:0;left:-45%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,150,60,.28),transparent);
  filter:blur(8px);animation:tfHeat 4s ease-in-out infinite}
@keyframes tfHeat{0%,42%{left:-45%;opacity:0}60%{opacity:1}78%{left:100%;opacity:.6}100%{left:120%;opacity:0}}

/* hydrophobic beads */
.bead{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.9),rgba(120,180,240,.3) 46%,rgba(20,40,70,.12) 72%);
  box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 -2px 4px rgba(255,255,255,.25);
  animation:tfRoll 4.6s ease-in infinite}
.bead.b1{width:18px;height:18px;left:18%;animation-delay:0s}
.bead.b2{width:11px;height:11px;left:35%;animation-delay:1.1s}
.bead.b3{width:22px;height:22px;left:52%;animation-delay:.5s}
.bead.b4{width:9px;height:9px;left:68%;animation-delay:1.8s}
.bead.b5{width:15px;height:15px;left:80%;animation-delay:.9s}
.bead.b6{width:13px;height:13px;left:62%;animation-delay:2.4s}
@keyframes tfRoll{0%{transform:translateY(-10px) scale(1);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateY(130px) scale(.7);opacity:0}}

/* ===== Technology page: animated key-technology demos ===== */
/* flex + centre so the last row (2 cards) sits centred instead of left-aligned */
.tech-demo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:50px}
/* Tighten the big gap above the animated demos where the text section splits */
.content-section:has(+ .tech-perf){padding-bottom:24px}
.tech-perf{padding-top:34px}
.tech-perf + .content-section{padding-top:40px}
.tech-demo-grid>.demo{flex:1 1 300px;max-width:calc(33.333% - 16px)}
@media(max-width:960px){.tech-demo-grid>.demo{max-width:calc(50% - 12px)}}
@media(max-width:560px){.tech-demo-grid>.demo{max-width:100%}}

/* impact-resistant: energy ripples dispersing from the strike point */
.demo-impact .demo-surface{background:linear-gradient(135deg,#141c2a,#05090f)}
.demo-impact .impact-core{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,rgba(160,205,255,.95),rgba(80,140,220,.25) 60%,transparent 74%);
  animation:tfImpactCore 3.2s ease-in-out infinite}
.demo-impact .ripple{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid rgba(120,180,255,.55);animation:tfImpact 3.2s ease-out infinite}
.demo-impact .ripple.r2{animation-delay:1.06s}
.demo-impact .ripple.r3{animation-delay:2.12s}
@keyframes tfImpact{0%{transform:scale(.3);opacity:0}12%{opacity:.85}70%{opacity:.22}100%{transform:scale(6.2);opacity:0}}
@keyframes tfImpactCore{0%,100%{transform:scale(.8);opacity:.7}12%{transform:scale(1.25);opacity:1}30%{transform:scale(.9);opacity:.85}}

/* UV-stable: a pulsing sun with slowly rotating rays, surface stays clear */
.demo-uv .demo-surface{background:linear-gradient(135deg,#161326,#07060e)}
.demo-uv .sun{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,130,.95),rgba(255,170,80,.4) 55%,transparent 72%);
  animation:tfSun 3.6s ease-in-out infinite}
.demo-uv .uv-rays{position:absolute;top:50%;left:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,200,110,.16),transparent 11%,rgba(255,200,110,.16) 25%,transparent 36%,rgba(255,200,110,.16) 50%,transparent 61%,rgba(255,200,110,.16) 75%,transparent 86%,rgba(255,200,110,.16));
  -webkit-mask:radial-gradient(circle,transparent 24px,#000 26px);mask:radial-gradient(circle,transparent 24px,#000 26px);
  animation:tfRaySpin 14s linear infinite}
@keyframes tfSun{0%,100%{transform:scale(.9);filter:drop-shadow(0 0 8px rgba(255,180,90,.35))}50%{transform:scale(1.12);filter:drop-shadow(0 0 22px rgba(255,190,110,.7))}}
@keyframes tfRaySpin{to{transform:rotate(360deg)}}

/* adhesive: a squeegee sweep pressing the film into an even bond */
.demo-bond .demo-surface{background:linear-gradient(135deg,#0c1a26,#05090e)}
.demo-bond .bond-fill{position:absolute;inset:0;background:linear-gradient(135deg,rgba(60,150,190,.20),rgba(30,80,120,.05));
  clip-path:inset(0 100% 0 0);animation:tfBondFill 3.4s ease-in-out infinite}
.demo-bond .squeegee{position:absolute;top:0;left:-30%;width:14px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(120,220,255,.5),rgba(255,255,255,.75),rgba(120,220,255,.5),transparent);
  filter:blur(1px);animation:tfSqueegee 3.4s ease-in-out infinite}
@keyframes tfBondFill{0%,8%{clip-path:inset(0 100% 0 0)}68%,100%{clip-path:inset(0 0 0 0)}}
@keyframes tfSqueegee{0%,8%{left:-30%}68%,100%{left:108%}}

/* ===== layer diagram — assemble-on-scroll + perpetual parallax float =====
   Outer .lg = entrance transform; inner .lf = perpetual float (nested so the
   two transforms compose instead of overwriting each other). */
.layers-svg .lg,.layers-svg .lf,.layers-svg .dot{transform-box:fill-box;transform-origin:center}

/* perpetual gentle float — per-layer phase offset gives parallax depth */
@keyframes tfLayerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.layers-svg .lf{animation:tfLayerFloat 6s ease-in-out infinite}
.layers-svg .lg:nth-of-type(2) .lf{animation-delay:.6s}
.layers-svg .lg:nth-of-type(3) .lf{animation-delay:1.2s}
.layers-svg .lg:nth-of-type(4) .lf{animation-delay:1.8s}
.layers-svg .lg:nth-of-type(5) .lf{animation-delay:2.4s}

/* accent dots twinkle — staggered glow pulse for a magical feel */
@keyframes tfDotScale{
  0%,100%{transform:scale(1);opacity:1;filter:drop-shadow(0 0 4px var(--accent-glow))}
  50%{transform:scale(1.7);opacity:.55;filter:drop-shadow(0 0 12px var(--accent-2))}
}
.layers-svg .dot{animation:tfDotScale 2.4s ease-in-out infinite}
.layers-svg .lg:nth-of-type(2) .dot{animation-delay:.45s}
.layers-svg .lg:nth-of-type(3) .dot{animation-delay:.9s}
.layers-svg .lg:nth-of-type(4) .dot{animation-delay:1.35s}
.layers-svg .lg:nth-of-type(5) .dot{animation-delay:1.8s}

/* entrance: fan out from a collapsed stack, driven by a keyframe animation.
   Animations win over the resting declaration, so this sidesteps any cascade
   ambiguity between the hidden and revealed states. Per-layer start offset is
   carried in a custom property; stagger via animation-delay. */
.js .section-defense .lg{opacity:0}
.js .section-defense .lg:nth-of-type(1){--lg-ty:120px}
.js .section-defense .lg:nth-of-type(2){--lg-ty:60px}
.js .section-defense .lg:nth-of-type(3){--lg-ty:0px}
.js .section-defense .lg:nth-of-type(4){--lg-ty:-60px}
.js .section-defense .lg:nth-of-type(5){--lg-ty:-120px}
@keyframes tfAssemble{
  from{opacity:0;transform:translateY(var(--lg-ty,0)) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.section-defense.in-view .lg{opacity:1;animation:tfAssemble .8s cubic-bezier(.22,.61,.36,1) backwards;transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.section-defense.in-view .lg:nth-of-type(1){animation-delay:.05s}
.section-defense.in-view .lg:nth-of-type(2){animation-delay:.15s}
.section-defense.in-view .lg:nth-of-type(3){animation-delay:.25s}
.section-defense.in-view .lg:nth-of-type(4){animation-delay:.35s}
.section-defense.in-view .lg:nth-of-type(5){animation-delay:.45s}

/* connectors draw in once the layers settle */
.js .section-defense .connector{stroke-dasharray:120;stroke-dashoffset:120}
@keyframes tfDraw{to{stroke-dashoffset:0}}
@keyframes tfConnGlow{0%,100%{opacity:.45}50%{opacity:1}}
.section-defense.in-view .connector{animation:tfDraw .5s ease forwards,tfConnGlow 2.8s ease-in-out infinite}
.section-defense.in-view .lg:nth-of-type(1) .connector{animation-delay:.55s}
.section-defense.in-view .lg:nth-of-type(2) .connector{animation-delay:.65s}
.section-defense.in-view .lg:nth-of-type(3) .connector{animation-delay:.75s}
.section-defense.in-view .lg:nth-of-type(4) .connector{animation-delay:.85s}
.section-defense.in-view .lg:nth-of-type(5) .connector{animation-delay:.95s}

/* exploded view on hover — spread the stack apart to reveal the five-layer
   build. Transform rides on .lg; the inner .lf keeps its perpetual float so the
   two compose. The assemble keyframe above uses `backwards` fill (not `both`),
   which frees .lg's transform once the entrance finishes so this transition can
   take over both directions. */
.layers-svg{cursor:pointer}
.layers-svg .layer{transition:stroke .4s ease,filter .4s ease}
.layers-svg:hover .lg:nth-of-type(1){transform:translateY(-52px)}
.layers-svg:hover .lg:nth-of-type(2){transform:translateY(-26px)}
.layers-svg:hover .lg:nth-of-type(3){transform:translateY(0)}
.layers-svg:hover .lg:nth-of-type(4){transform:translateY(26px)}
.layers-svg:hover .lg:nth-of-type(5){transform:translateY(52px)}
.layers-svg:hover .layer{stroke:rgba(120,180,255,.55);filter:drop-shadow(0 16px 28px rgba(0,0,0,.6))}

/* ===== modern 3D treatment ===================================
   The whole assembly tilts in a perspective context (set on
   .layers-wrap) and slowly drifts like a showcase turntable; a
   blue light pulse sweeps down through the five sheets as they
   assemble. Idle drift pauses on hover so the explode reads. */
.layers-svg{animation:tf3dTurn 16s ease-in-out infinite,tfAura 6s ease-in-out infinite}
@keyframes tf3dTurn{
  0%,100%{transform:rotateX(9deg) rotateY(-13deg)}
  50%{transform:rotateX(6.5deg) rotateY(-5deg)}
}
/* soft magical aura breathing around the whole stack */
@keyframes tfAura{
  0%,100%{filter:drop-shadow(0 0 14px rgba(90,150,255,.18))}
  50%{filter:drop-shadow(0 0 34px rgba(120,180,255,.42))}
}
.layers-svg:hover{animation-play-state:paused}

/* light-scan sweep — fires once on reveal, staggered so the glow
   tracks each sheet as it lands. No fill-mode, so it settles back
   to the resting filter and leaves the hover state free. */
@keyframes tfSheen{
  0%{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) brightness(1)}
  45%{filter:drop-shadow(0 12px 24px rgba(80,150,255,.45)) brightness(1.85)}
  100%{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) brightness(1)}
}
.section-defense.in-view .layer{animation:tfSheen 1.3s ease}
.section-defense.in-view .lg:nth-of-type(1) .layer{animation-delay:.20s}
.section-defense.in-view .lg:nth-of-type(2) .layer{animation-delay:.30s}
.section-defense.in-view .lg:nth-of-type(3) .layer{animation-delay:.40s}
.section-defense.in-view .lg:nth-of-type(4) .layer{animation-delay:.50s}
.section-defense.in-view .lg:nth-of-type(5) .layer{animation-delay:.60s}

/* ===== floating sparkle particles — drift up & twinkle around the stack === */
.layer-sparkles{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.spark{
  position:absolute;bottom:-14px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#e6f1ff 0%,rgba(120,180,255,.9) 40%,rgba(120,180,255,0) 72%);
  box-shadow:0 0 8px 2px rgba(120,180,255,.55);
  opacity:0;will-change:transform,opacity;
  animation:tfSpark linear infinite;
}
@keyframes tfSpark{
  0%{transform:translateY(0) scale(.5);opacity:0}
  12%{opacity:1}
  50%{transform:translateY(-230px) scale(1.15);opacity:.95}
  88%{opacity:.35}
  100%{transform:translateY(-470px) scale(.7);opacity:0}
}
/* scatter: left position / size / pace / phase per particle */
.spark:nth-child(1){left:18%;width:5px;height:5px;animation-duration:8.5s;animation-delay:0s}
.spark:nth-child(2){left:62%;width:7px;height:7px;animation-duration:7s;animation-delay:1.4s}
.spark:nth-child(3){left:40%;width:4px;height:4px;animation-duration:10s;animation-delay:.7s}
.spark:nth-child(4){left:80%;width:6px;height:6px;animation-duration:9s;animation-delay:2.6s}
.spark:nth-child(5){left:28%;width:6px;height:6px;animation-duration:7.8s;animation-delay:3.1s}
.spark:nth-child(6){left:72%;width:5px;height:5px;animation-duration:11s;animation-delay:.3s}
.spark:nth-child(7){left:52%;width:8px;height:8px;animation-duration:8s;animation-delay:4.2s}
.spark:nth-child(8){left:10%;width:4px;height:4px;animation-duration:9.5s;animation-delay:2s}
.spark:nth-child(9){left:88%;width:5px;height:5px;animation-duration:7.4s;animation-delay:5s}
.spark:nth-child(10){left:46%;width:6px;height:6px;animation-duration:10.5s;animation-delay:1s}
.spark:nth-child(11){left:34%;width:5px;height:5px;animation-duration:8.2s;animation-delay:3.7s}
.spark:nth-child(12){left:66%;width:4px;height:4px;animation-duration:9.8s;animation-delay:5.6s}

@media(max-width:980px){
  .proof-grid{grid-template-columns:1fr}
  .proof-side{grid-template-rows:none}
}

/* ============================================================
   HERO V2 — ELEVATED  (premium polish, scoped to .hero-v2)
   ============================================================ */

/* Eyebrow badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:13px;letter-spacing:3px;color:var(--text-2);
  padding:8px 16px;margin-bottom:22px;border-radius:999px;
  border:1px solid var(--border-2);background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero-badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex-shrink:0;
  box-shadow:0 0 0 0 var(--accent-glow);animation:tfDotPulse 2.4s ease-out infinite;
}
@keyframes tfDotPulse{
  0%{box-shadow:0 0 0 0 var(--accent-glow)}
  70%{box-shadow:0 0 0 11px rgba(30,136,229,0)}
  100%{box-shadow:0 0 0 0 rgba(30,136,229,0)}
}

/* Title — deeper shadow + animated chrome-blue shimmer on the accent line */
.hero-v2-title{text-shadow:0 2px 44px rgba(0,0,0,.6)}
.hero-v2-title .accent{
  background:linear-gradient(100deg,#42a5f5 0%,#bfe0ff 32%,#42a5f5 58%,#1e88e5 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none;
  animation:tfShimmer 6.5s linear infinite;
}
@keyframes tfShimmer{to{background-position:220% center}}

/* Trust chips beneath the buttons */
.hero-trust{
  display:flex;flex-wrap:wrap;gap:12px 24px;margin:30px 0 0;
  font-family:var(--display);font-size:12px;letter-spacing:2px;color:var(--text-3);
}
.hero-trust li{display:flex;align-items:center;gap:9px}
.hero-trust li::before{
  content:"";width:13px;height:13px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 50% 50%,var(--accent-2),transparent 70%);
  border:1px solid var(--border-2);
}

/* Primary button — light sheen sweep on hover */
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
}
.btn-shine:hover::after{animation:tfSheen .9s ease}
@keyframes tfSheen{from{left:-130%}to{left:150%}}

/* Animated light streak (gentle breathe + drift) */
.hero-v2-streak{animation:tfStreak 9s ease-in-out infinite}
@keyframes tfStreak{
  0%,100%{opacity:.55;transform:rotate(-18deg) translateX(0)}
  50%{opacity:1;transform:rotate(-18deg) translateX(-4%)}
}

/* Ambient floating glow orbs */
.hero-orb{position:absolute;border-radius:50%;z-index:1;pointer-events:none;filter:blur(64px)}
.hero-orb-1{
  width:480px;height:480px;left:-150px;bottom:-170px;
  background:radial-gradient(circle,rgba(30,136,229,.30),transparent 65%);
  animation:tfFloat 15s ease-in-out infinite;
}
.hero-orb-2{
  width:360px;height:360px;right:7%;top:5%;
  background:radial-gradient(circle,rgba(66,165,245,.18),transparent 65%);
  animation:tfFloat 19s ease-in-out infinite reverse;
}
@keyframes tfFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-32px)}}

/* Feature bar → premium glass card with interactive items */
.hero-v2-bar{
  border:1px solid var(--border-2);border-radius:16px;padding:22px 26px;
  background:linear-gradient(180deg,rgba(12,12,20,.66),rgba(7,7,12,.74));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 28px 64px -34px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-v2-bar .feature{
  position:relative;padding:8px 6px;border-radius:11px;
  transition:transform .25s ease,background .25s ease;
}
.hero-v2-bar .feature::before{
  content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
  opacity:0;transition:opacity .25s ease;
}
.hero-v2-bar .feature:hover{transform:translateY(-4px);background:rgba(30,136,229,.07)}
.hero-v2-bar .feature:hover::before{opacity:1}
.hero-v2-bar .feature-icon{border-color:var(--border-2);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.hero-v2-bar .feature-icon svg{stroke:var(--accent-2)}
.hero-v2-bar .feature:hover .feature-icon{
  border-color:var(--accent);box-shadow:0 0 22px var(--accent-glow);transform:scale(1.06);
}

/* Scroll cue */
.hero-cue{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--display);font-size:11px;letter-spacing:3px;color:var(--text-3);
  transition:color .25s ease;
}
.hero-cue:hover{color:var(--text-2)}
.hero-cue-mouse{
  width:22px;height:36px;border:1px solid var(--border-2);border-radius:12px;
  display:flex;justify-content:center;padding-top:6px;
}
.hero-cue-mouse i{
  width:3px;height:8px;border-radius:2px;background:var(--accent-2);
  animation:tfCue 1.6s ease-in-out infinite;
}
@keyframes tfCue{
  0%{opacity:0;transform:translateY(-4px)}
  40%{opacity:1}
  100%{opacity:0;transform:translateY(9px)}
}
@media(max-width:900px){
  .hero-cue{display:none}
  .hero-orb-2{display:none}
}

/* ---------- Hero Variant 6 — "Protection You Can See" (FULL-BLEED) ---------- */
.hero-v6-full{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:0;
}
.hero-v6-full::before{display:none}            /* drop the grid texture over the photo */

/* Slider fills the whole hero */
.hero-v6-ba{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;z-index:0;
}
.hero-v6-ba .ba-img{background-position:center}

/* Readability scrim — light centered vignette + top/bottom darken so the car
   stays vivid while centered copy (backed by its own text-shadow) stays sharp */
.hero-v6-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 82% 66% at 50% 40%,rgba(5,5,7,.42),rgba(5,5,7,.18) 50%,transparent 78%),
    linear-gradient(0deg,rgba(5,5,7,.82),transparent 24%),
    linear-gradient(180deg,rgba(5,5,7,.5),transparent 20%);
}

/* Copy overlaid on the slider — centered, larger. Pointer events pass through to slider.
   The block grows to fill the space above the feature bar and centres itself in it, so
   the short headline + single CTA sit balanced on the car rather than hugging the nav. */
.hero-v6-overlay{
  position:relative;z-index:2;width:100%;pointer-events:none;
  flex:1;display:flex;align-items:center;padding:84px 0 24px;
}
.hero-v6-overlay>.container{width:100%}
.hero-v6-overlay .hero-v6-copy{
  max-width:860px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
/* Soft dark halo behind the copy (localised, so the car stays bright) + stronger
   shadows, keeping the headline prominent with or without the before/after slider. */
/* No dark halo — keep the car bright. Legibility comes from tight text outlines
   that hug each letter, so white copy still reads over the bright bodywork. */
/* The ".accent" half is gradient-clipped text with text-shadow:none, so it has
   no defence of its own over the bright bodywork — a drop-shadow on the whole
   heading outlines the glyph shapes, clipped fill included. */
.hero-v6-copy .hero-v2-title{
  text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.72);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8)) drop-shadow(0 0 16px rgba(0,0,0,.5));
}
.hero-v6-copy .lead{
  color:#fff;
  text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 0 9px rgba(0,0,0,.6);
}
.hero-v6-copy .hero-trust,.hero-v6-copy .hero-trust li{color:#fff}
.hero-v6-copy .hero-badge,.hero-v6-copy .hero-trust li{
  text-shadow:-1px -1px 0 rgba(0,0,0,.65),1px -1px 0 rgba(0,0,0,.65),-1px 1px 0 rgba(0,0,0,.65),1px 1px 0 rgba(0,0,0,.65),0 0 6px rgba(0,0,0,.55);
}
.hero-v6-overlay a,.hero-v6-overlay button{pointer-events:auto}
.hero-v6 .hero-v2-title{font-size:clamp(54px,8vw,110px)}
.hero-v6 .lead{margin:26px auto 34px;max-width:660px;font-size:clamp(17px,1.5vw,20px);text-align:center}
/* No lead paragraph between the headline and the CTA — hold the gap here instead */
.hero-v6-copy .btn-row{justify-content:center;margin-top:40px}
/* Single hero CTA — scaled up and ringed/glowed so it holds its own against the
   bright bodywork behind it. */
.hero-v6-copy .btn-primary{
  padding:22px 60px;font-size:17px;letter-spacing:3.2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,
             0 14px 38px rgba(0,0,0,.5),
             0 0 46px var(--accent-glow);
}
.hero-v6-copy .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,
             0 18px 44px rgba(0,0,0,.55),
             0 0 62px var(--accent-glow);
}
.hero-v6-copy .hero-trust{justify-content:center}

/* Feature bar pinned to the bottom, above the slider (incl. the divider line) */
.hero-v6-barwrap{position:relative;z-index:5;margin-top:auto;padding-bottom:40px}
/* Opaque glass so the BEFORE/AFTER divider seam doesn't show through the box */
.hero-v6-bar{margin:0;background:rgba(7,7,12,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Divider line only over the car: fade out across the dark top / headline,
   solid across the car below. The feature bar already masks the bottom. */
.hero-v6-full .ba-handle{
  background:linear-gradient(180deg,transparent 30%,#fff 44%,#fff 100%);
  box-shadow:none;
}

/* Lift the BEFORE/AFTER tags clear of the feature bar */
.hero-v6-full .ba-tag{bottom:auto;top:100px}

/* Entrance */
.hero-v6-copy>*{animation:tfRise .85s cubic-bezier(.2,.7,.2,1) both}
.hero-v6-copy>*:nth-child(2){animation-delay:.07s}
.hero-v6-copy>*:nth-child(3){animation-delay:.14s}
.hero-v6-copy>*:nth-child(4){animation-delay:.21s}
.hero-v6-copy>*:nth-child(5){animation-delay:.28s}
.hero-v6-bar{animation:tfRise .85s .34s cubic-bezier(.2,.7,.2,1) both}

@media(max-width:980px){
  .hero-v6-full{min-height:94vh}
  .hero-v6-overlay{padding-top:104px}
  .hero-v6-overlay .hero-v6-copy{max-width:none}
  .hero-v6-full .ba-tag{top:86px}
}
/* Phones: stack the hero instead of overlaying copy on the car. Badge and
   headline sit on the dark background, then the working before/after slider
   (whole car, 3:2), then the CTA and a compact chip row of features.
   The overlay wrappers become display:contents so their children can be
   ordered around the slider without duplicating any markup. */
@media(max-width:600px){
  .hero-v6-full{
    min-height:auto;height:auto;display:flex;flex-direction:column;justify-content:flex-start;
    background:radial-gradient(ellipse 90% 50% at 50% 38%,rgba(30,136,229,.14),transparent 70%),#050507;
    padding:96px 0 30px;
  }
  .hero-v6-scrim{display:none}
  .hero-v6-overlay,.hero-v6-overlay>.container,.hero-v6-overlay .hero-v6-copy{display:contents}

  .hero-v6 .hero-badge{order:1;align-self:center;margin:0 16px 16px;padding:7px 14px;font-size:11px;letter-spacing:2.2px}
  .hero-v6 .hero-v2-title{
    order:2;margin:0 16px 22px;text-align:center;font-size:clamp(44px,13vw,60px);
    text-shadow:none;filter:none;
  }

  /* Before/after slider: horizontal drags move it, vertical swipes still scroll the page. */
  .hero-v6-ba{
    order:3;position:relative;inset:auto;width:calc(100% - 32px);height:auto;aspect-ratio:3/2;margin:0 16px;
    border:1px solid var(--border-2);border-radius:10px;
  }
  .hero-v6-full .hero-v6-ba{touch-action:pan-y}  /* beats the global .ba{touch-action:none} further down */
  .hero-v6-ba .ba-after{filter:saturate(1) contrast(1.1) brightness(1.24) sepia(.05)}
  .hero-v6-full .ba-handle{background:#fff}
  .hero-v6-full .ba-handle i{width:34px;height:34px}
  .hero-v6-full .ba-tag{top:10px;bottom:auto;padding:4px 10px;font-size:11px}
  .hero-v6-full .ba-tag-before{left:10px}
  .hero-v6-full .ba-tag-after{right:10px}

  /* Full-width CTA, same 16px edges as the slider and feature grid. */
  .hero-v6-copy .btn-row{order:4;align-self:stretch;align-items:stretch;margin:24px 16px 0}
  .hero-v6-copy .btn-primary{width:100%;max-width:none;padding:18px 24px;font-size:14px;letter-spacing:2.6px}

  /* Features as an even 2-column grid of chips (fifth centred below), each label on
     two lines as on desktop: all five visible, about half the old box height. */
  .hero-v6-full .hero-v6-barwrap{order:5;width:100%;max-width:none;margin:24px 0 0;padding:0 16px}  /* edges line up with the slider */
  .hero-v6 .hero-v6-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;
    border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .hero-v6 .hero-v6-bar .feature{
    flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 10px 8px 8px;
    border:1px solid var(--border-2);border-radius:12px;background:rgba(255,255,255,.03);
  }
  .hero-v6 .hero-v6-bar .feature:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 4px)}
  .hero-v6 .hero-v6-bar .feature::before{display:none}
  .hero-v6 .hero-v6-bar .feature-icon{width:30px;height:30px}
  .hero-v6 .hero-v6-bar .feature-icon svg{width:15px;height:15px}
  .hero-v6 .hero-v6-bar .feature-label{font-size:10px;line-height:1.35;letter-spacing:1px;text-align:left}
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .scratch,.heat,.bead,.ripple,.impact-core,.sun,.uv-rays,.squeegee,.bond-fill,.series-card::before,.cat-card::after,.res-card::before,.other-card::before,.inquiry-card::before,.hero-v2-copy>*,.hero-v2-bar{animation:none!important}
  .card-media img,.media-frame img{transition:none!important}
  .cat-card.has-media:hover .card-media img,
  .res-card.has-media:hover .card-media img,
  .series-card.has-media:hover .card-media img,
  .media-tile:hover .media-frame img{transform:scale(1.08)}
  .hero-v2-copy>*{opacity:1!important;transform:none!important}
  .hero-v6-copy>*,.hero-v6-ba,.hero-v6-bar{animation:none!important;opacity:1!important;transform:none!important}
  .hero-badge-dot,.hero-v2-title .accent,.hero-v2-streak,
  .hero-orb,.hero-cue-mouse i{animation:none!important}
  .hero-v2-title .accent{
    -webkit-text-fill-color:var(--accent-2);color:var(--accent-2);background:none;
  }
  .cursor-glow{display:none!important}
  .section-defense .lg,.section-defense .lf,.layers-svg .dot,.section-defense .layer{opacity:1!important;transform:none!important;animation:none!important}
  .layers-svg{animation:none!important;filter:none!important} /* keep the static 3D tilt, drop the drift+aura */
  .layer-sparkles{display:none!important}
  .section-defense .connector{stroke-dashoffset:0!important;animation:none!important;opacity:.6!important}
}

/* ============================================================
   PREMIUM MOTION LAYER — site-wide polish
   (reveal stagger, button sheen, link slide, nav underline,
    image reveal, page-hero entrance, scroll progress)
   ============================================================ */

/* ---- Scroll-reveal (granular + staggered; JS adds .tf-rise + .in) ---- */
.tf-rise{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 70ms);will-change:opacity,transform;
}
.tf-rise.in{opacity:1;transform:none}

/* ---- Scroll progress bar (JS sets --p) ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;z-index:100;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--gold));
  box-shadow:0 0 12px var(--accent-glow);pointer-events:none;
}

/* ---- Buttons: light sheen sweep on hover, site-wide ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
}
.btn-primary:hover::after{animation:tfSheen .9s ease}
.btn-ghost{transition:border-color .25s ease,background .25s ease,transform .25s ease}
.btn-ghost:hover{transform:translateY(-1px)}

/* ---- Link micro-interaction: arrow nudge ---- */
.cat-link,.res-arrow,.series-foot{
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .25s ease,color .25s ease,transform .25s ease;
}
.cat-link:hover,.res-card:hover .res-arrow{gap:14px;color:var(--accent-2)}
.series-card:hover .series-foot{gap:14px}

/* ---- Card hover: accent border-glow (complements existing tilt) ---- */
.cat-card,.series-card,.res-card,.other-card{
  transition:border-color .3s ease,box-shadow .3s ease,transform .1s ease-out;
}
.cat-card:hover,.series-card:hover,.res-card:hover,.other-card:hover{
  border-color:rgba(30,136,229,.45);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.9),0 0 0 1px rgba(30,136,229,.18),0 0 36px -8px var(--accent-glow);
}

/* ---- Content images: reveal-friendly hover zoom ---- */
.engineered-visual,.hero-car{overflow:hidden}
.engineered-visual img,.hero-car img{
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.engineered-visual:hover img,.hero-car:hover img{transform:scale(1.05)}

/* ---- Nav links: animated underline + smoother hover ---- */
.nav-links a{position:relative;transition:color .25s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after,.nav-links .current-menu-item>a::after{transform:scaleX(1)}

/* ---- Inner page hero: entrance ---- */
.page-hero .display-h,.page-hero .lead{animation:tfRise .9s cubic-bezier(.2,.7,.2,1) both}
.page-hero .lead{animation-delay:.12s}

/* ---- Reduced motion: disable the premium layer ---- */
@media (prefers-reduced-motion: reduce){
  .tf-rise{opacity:1!important;transform:none!important;transition:none!important}
  .scroll-progress{display:none!important}
  .btn-primary:hover::after{animation:none!important}
  .page-hero .display-h,.page-hero .lead{animation:none!important}
  .engineered-visual:hover img,.hero-car:hover img{transform:none!important}
}

/* ============================================================
 * BRAND LOGO (real Titan PPF assets)
 * ============================================================ */
.site-logo{height:46px;width:auto;display:block}
.footer-logo{height:46px;width:auto;display:block;margin-bottom:4px}
.nav.scrolled .site-logo{height:42px;transition:height .25s}
/* emblem in hero 1 (now an <img>) */
.hero-logo-mark{width:150px;height:auto}
/* emblem watermark in hero 5 card */
.hero-v5-card-mark{width:140px;height:auto;opacity:.13;right:-18px;bottom:-18px}
@media(max-width:600px){
  .site-logo{height:38px}
  .hero-logo-mark{width:120px}
}

/* ---- Before/After slider: drag affordance + focusable handle ---- */
.ba{touch-action:none;cursor:ew-resize}
.ba-handle{appearance:none;-webkit-appearance:none;border:0;padding:0;cursor:ew-resize}
.ba-handle:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* ============================================================
 * ARCHIVES · CATEGORY · SEARCH · 404
 * ============================================================ */
.content-section{padding:70px 0 90px}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:6px;
  background:rgba(255,255,255,.035);backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid var(--border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.25);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.post-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 24px 50px rgba(0,0,0,.4),0 0 24px var(--accent-glow)}
.post-card-media{display:block;aspect-ratio:16/10;overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-media img{transform:scale(1.05)}
.post-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.post-card-body .eyebrow{margin:0}
.post-card-body h3{font-family:var(--display);font-size:22px;letter-spacing:.5px;line-height:1.1}
.post-card-body h3 a{color:var(--text);transition:color .2s}
.post-card-body h3 a:hover{color:var(--accent-2)}
.post-card-body p{font-size:14px;color:var(--text-2);line-height:1.6}
.post-card-body .cat-link{margin-top:auto}

.archive-empty{font-size:16px;color:var(--text-2);line-height:1.8}
.archive-empty a{color:var(--accent-2)}
.archive-search{margin-top:30px;max-width:440px}
.archive-search input[type="search"],.archive-search input[type="text"]{
  width:100%;padding:14px 16px;background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);border-radius:4px;color:var(--text);font-size:15px;
}
.archive-search input::placeholder{color:var(--text-3)}

.archive-nav{margin-top:46px;display:flex;justify-content:center}
.archive-nav .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.archive-nav .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--border-2);border-radius:4px;color:var(--text-2);
  font-family:var(--display);letter-spacing:1px;transition:all .2s;
}
.archive-nav .page-numbers:hover,.archive-nav .page-numbers.current{
  border-color:var(--accent);color:var(--accent-2);box-shadow:0 0 14px var(--accent-glow);
}

/* 404 */
.error-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:40px}
.error-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border:1px solid var(--border-2);border-radius:6px;
  background:rgba(255,255,255,.03);color:var(--text);
  font-family:var(--display);letter-spacing:1.5px;font-size:16px;transition:border-color .25s,box-shadow .25s,transform .25s;
}
.error-link span{color:var(--accent-2);transition:transform .25s}
.error-link:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);transform:translateY(-3px)}
.error-link:hover span{transform:translateX(4px)}

/* ============================================================
 * NAV DROPDOWN (Categories submenu)
 * ============================================================ */
.nav-links ul{list-style:none;margin:0;padding:0}
.nav-links li{position:relative}
.menu-item-has-children > a{display:inline-flex;align-items:center;gap:7px}
.caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.8;transition:transform .25s;
}
.menu-item-has-children:hover > a .caret,
.menu-item-has-children.open > a .caret{transform:rotate(180deg)}

/* Desktop dropdown panel */
.nav-links .sub-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:250px;background:rgba(9,11,18,.97);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--border-2);border-radius:8px;padding:8px;
  display:flex;flex-direction:column;gap:2px;z-index:200;
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;
  box-shadow:0 26px 55px rgba(0,0,0,.55);
}
.nav-links .sub-menu::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:11px;height:11px;background:rgba(9,11,18,.97);
  border-left:1px solid var(--border-2);border-top:1px solid var(--border-2);
}
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu,
.nav-links .menu-item-has-children.open > .sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-links .sub-menu a{
  display:block;padding:11px 16px;font-size:14px;letter-spacing:1.2px;
  color:var(--text-2);border-radius:5px;white-space:nowrap;transition:all .2s;
}
.nav-links .sub-menu a:hover{background:rgba(30,136,229,.14);color:var(--accent-2)}

/* Mobile drawer: submenu becomes an accordion */
.mobile-drawer .menu-item-has-children > a .caret{margin-left:auto}
.mobile-drawer .sub-menu{
  list-style:none;margin:4px 0 6px;padding:0 0 0 14px;
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  border-left:1px solid var(--border-2);
}
.mobile-drawer .menu-item-has-children.open > .sub-menu{max-height:300px}
.mobile-drawer .sub-menu a{font-size:13px;color:var(--text-2);padding:10px 0;display:block}
.mobile-drawer .sub-menu a:hover{color:var(--accent-2)}
.mobile-drawer .menu-item-has-children > a{display:flex;align-items:center;width:100%}

/* ---- Technology spec grid (icon items) ---- */
.tech-spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:8px 0}
.tech-spec{
  padding:24px;border:1px solid var(--border-2);border-radius:8px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(10px) saturate(1.05);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.tech-spec:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 22px var(--accent-glow)}
.tech-spec-icon{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:rgba(30,136,229,.12);margin-bottom:14px;
}
.tech-spec-icon svg{width:24px;height:24px;stroke:var(--accent-2);fill:none;stroke-width:1.6}
.tech-spec h4{font-family:var(--display);font-size:20px;letter-spacing:2px;line-height:1.15;margin-bottom:10px;color:var(--text)}
.tech-spec p{font-size:13.5px;color:var(--text-2);line-height:1.6}

/* About — closing statement under the Titan Standard CTA */
.titan-closing{margin-top:22px;font-size:15px;line-height:1.7;color:var(--text);font-weight:700;max-width:520px}

/* ============================================================
 * WARRANTY SUPPORT — lookup form + result card
 * ============================================================ */
.warranty-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

.warranty-lookup{
  border:1px solid var(--border-2);border-radius:8px;padding:30px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(10px);margin:10px 0 30px;
}
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.wl-field label{display:block;font-family:var(--display);font-size:13px;letter-spacing:2px;color:var(--text-2);margin-bottom:8px}
.wl-field input{
  width:100%;padding:14px 16px;background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);border-radius:5px;color:var(--text);font-size:15px;
}
.wl-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.wl-field input::placeholder{color:var(--text-3)}

.wl-message{padding:16px 20px;border-radius:6px;font-size:14.5px;line-height:1.6;margin:22px 0}
.wl-message a{color:var(--accent-2)}
.wl-error{background:rgba(229,57,53,.08);border:1px solid rgba(229,57,53,.35);color:#ffd9d7}
.wl-success{background:rgba(30,136,229,.08);border:1px solid rgba(30,136,229,.35);color:var(--text)}
.wl-note{font-size:13px;color:var(--text-3);line-height:1.7;margin-top:18px}
.wl-note a{color:var(--accent-2)}

.warranty-record{
  border:1px solid var(--border-2);border-radius:8px;overflow:hidden;margin:18px 0;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.25);
}
.wr-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 24px;border-bottom:1px solid var(--border-2);
  background:linear-gradient(180deg,rgba(30,136,229,.10),transparent);
}
.wr-head h3{font-family:var(--display);font-size:22px;letter-spacing:1px;color:var(--text)}
.wr-status{
  display:inline-flex;align-items:center;font-family:var(--display);font-size:12px;letter-spacing:2px;
  color:#7CFC9A;border:1px solid rgba(124,252,154,.4);border-radius:30px;padding:6px 14px;white-space:nowrap;
}
.wr-table{width:100%;border-collapse:collapse}
.wr-table th,.wr-table td{text-align:left;padding:13px 24px;font-size:14px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.05)}
.wr-table tr:last-child th,.wr-table tr:last-child td{border-bottom:0}
.wr-table th{width:170px;color:var(--text-3);font-family:var(--display);letter-spacing:1px;font-weight:400}
.wr-table td{color:var(--text)}

.wr-status-expired{color:#ff8a80;border-color:rgba(255,138,128,.4)}

/* "Lost your PPF ID?" recovery panel */
.wl-recover{margin:-18px 0 26px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.015)}
.wl-recover summary{
  cursor:pointer;padding:15px 22px;list-style:none;
  font-family:var(--display);font-size:13px;letter-spacing:2px;color:var(--text-2);
}
.wl-recover summary::-webkit-details-marker{display:none}
.wl-recover summary::after{content:'+';float:right;font-size:17px;line-height:1;color:var(--accent-2)}
.wl-recover[open] summary::after{content:'\2212'}
.wl-recover summary:hover{color:var(--text)}
.wl-recover summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wl-recover form{padding:0 22px 22px}
.wl-recover-intro{padding:0 22px 16px;font-size:13.5px;line-height:1.65;color:var(--text-3)}

.wl-crosslink{margin:26px 0 4px;font-size:13.5px;color:var(--text-3)}
.wl-crosslink a{color:var(--accent-2)}

/* Remaining-coverage panel */
.wr-remaining{
  padding:22px 24px;border-bottom:1px solid var(--border-2);
  background:linear-gradient(180deg,rgba(30,136,229,.07),transparent);
}
.wr-remaining-label{
  font-family:var(--display);font-size:12px;letter-spacing:2px;color:var(--text-3);margin-bottom:6px;
}
.wr-remaining-value{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.wr-remaining-value strong{
  font-family:var(--display);font-size:52px;line-height:.9;letter-spacing:1px;color:var(--accent-2);
}
.wr-remaining-value span{
  font-family:var(--display);font-size:17px;letter-spacing:2px;color:var(--text-2);
}
.wr-meter{
  height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;
}
.wr-meter>span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px var(--accent-glow);
}
.wr-remaining-sub{font-size:13px;color:var(--text-3);margin-top:10px}
.wr-remaining.is-expired{background:linear-gradient(180deg,rgba(229,57,53,.08),transparent)}
.wr-remaining.is-expired .wr-remaining-label{
  font-family:var(--body);font-size:14.5px;letter-spacing:0;color:#ffd9d7;margin:0;
}

@media(max-width:560px){.wl-grid{grid-template-columns:1fr}.wr-table th{width:120px}.wr-remaining{padding:18px 20px}.wr-remaining-value strong{font-size:42px}}

/* ============================================================
 * WARRANTY SUPPORT — visible banner + prominent CTA button
 * ============================================================ */
.warranty-support-banner{background:linear-gradient(180deg,#0a0a14,#060610);padding:40px 0 0}
.wsb-inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border:1px solid rgba(30,136,229,.38);border-radius:12px;padding:30px 34px;
  background:
    radial-gradient(ellipse 70% 150% at 88% 50%,rgba(30,136,229,.18),transparent 70%),
    rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.28);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.wsb-inner:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 22px 50px rgba(0,0,0,.4),0 0 26px var(--accent-glow)}
.wsb-text .eyebrow{margin-bottom:10px}
.wsb-text h2{font-family:var(--display);font-size:30px;letter-spacing:2px;color:var(--text);margin:0 0 8px;line-height:1.05}
.wsb-text p{font-size:14px;color:var(--text-2);line-height:1.6;max-width:540px;margin:0}

.btn-support{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  padding:16px 32px;border-radius:6px;
  font-family:var(--display);font-size:16px;letter-spacing:2.5px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transition:transform .2s ease,box-shadow .25s ease;
  animation:wsbPulse 2.8s ease-in-out infinite;
}
.btn-support:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--accent-glow);color:#fff}
.wsb-arrow{transition:transform .25s ease}
.wsb-inner:hover .wsb-arrow,.btn-support:hover .wsb-arrow{transform:translateX(6px)}
@keyframes wsbPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(30,136,229,.55)}
  50%{box-shadow:0 0 0 12px rgba(30,136,229,0)}
}
@media(max-width:720px){
  .wsb-inner{flex-direction:column;align-items:flex-start}
  .btn-support{width:100%;justify-content:center}
}
@media (prefers-reduced-motion: reduce){.btn-support{animation:none}}

/* ============================================================
 * MOBILE RESPONSIVE HARDENING — full-site pass
 * Additive and breakpoint-scoped: only affects small/medium
 * screens, never changes the desktop layout.
 * ============================================================ */

/* 0. Kill horizontal scroll everywhere; wrap long words */
html{overflow-x:hidden}
body{overflow-x:hidden;overflow-wrap:break-word}
img,svg,video,iframe{max-width:100%}
.wr-table td,.footer-contact a,.content-wrap p,.content-wrap li,.info-block .val{overflow-wrap:break-word}

/* About page two-up grid (was an inline style) */
.series-grid.grid-2up{grid-template-columns:1fr 1fr}

/* ---- Tablet / large phone (≤860) ---- */
@media(max-width:860px){
  .series-grid,.series-grid.grid-2up,.other-products,.res-grid{grid-template-columns:1fr}
  /* Footer: brand full-width on top, then 2-col nav links below */
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .inquiry-grid{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:1fr}
}

/* ---- Mobile (≤600) ---- */
@media(max-width:600px){
  /* Container & vertical rhythm */
  .container{padding:0 18px}
  .section,.section-engineered,.section-defense,.section-titan,
  .section-resources,.section-contact,.section-categories,
  .section-series,.section-premium,.content-section{padding:56px 0}
  .section-engineered{padding-bottom:0}
  .section-head{margin-bottom:38px}
  .engineered-grid{margin-bottom:54px}

  /* Headings & body scale down */
  .display-h{font-size:clamp(32px,9vw,44px)}
  .hero-title{font-size:clamp(44px,13vw,64px)}
  .content-wrap h2{font-size:25px;margin:38px 0 14px}
  .content-wrap h3{font-size:19px}
  .content-wrap p,.content-wrap li{font-size:16px}
  .cat-card h3{font-size:26px}
  .series-name{font-size:28px}
  .intro-strip h3{font-size:24px}
  .titan-card h4{font-size:20px}
  .lead,.section-head .lead,.page-hero .lead{font-size:16px}

  /* Clear the fixed nav without huge dead space */
  .page-hero{padding:110px 0 44px}
  .hero{padding-top:76px}
  /* Hero image + grid on mobile */
  .hero-car{height:240px}
  .hero-grid{padding:36px 18px 44px}
  .hero-v1{padding-top:76px}
  /* Visual blocks: reduce fixed heights */
  .engineered-visual{height:200px}
  .titan-car{height:200px}
  /* Hero v3 media */
  .hero-v3-media{height:220px}

  /* Card / form padding */
  .cat-card{padding:34px 24px}
  .series-card{padding:32px 22px}
  .titan-card{padding:32px 24px;min-height:0}
  .titan-form{padding:26px 18px}
  .warranty-lookup{padding:22px 18px}
  .content-callout{padding:16px 18px}

  /* Footer single column */
  .footer-grid{grid-template-columns:1fr;gap:30px;margin:40px 0 30px}

  /* Buttons full-width & stacked for easy tapping */
  .warranty-cta-row,.contact-actions,.btn-row,.form-submit{flex-direction:column;align-items:stretch}
  .warranty-cta-row a,.contact-actions a,.btn-row a,.form-submit button,
  .form-submit a,.btn-primary,.btn-ghost,.btn-support{width:100%;text-align:center;justify-content:center}

  /* Stats & contact info: 2-up, tighter */
  .stats-bar,.contact-info-row{grid-template-columns:1fr 1fr;gap:18px;padding:30px 0}
  .stat{justify-content:flex-start;gap:10px}
  .stat-num{font-size:38px}

  /* Warranty record table → stacked label / value rows */
  .wr-table,.wr-table tbody,.wr-table tr,.wr-table th,.wr-table td{display:block;width:100%}
  .wr-table th{padding:13px 20px 0;border:0}
  .wr-table td{padding:2px 20px 13px;border-bottom:1px solid rgba(255,255,255,.06)}
  .wr-head{padding:16px 20px}
  .wr-head h3{font-size:20px}

  /* Technology layer diagram: remove tall empty box */
  .layers-wrap{height:auto;min-height:0;padding:8px 0}

  /* Archive / blog cards one per row */
  .archive-grid{grid-template-columns:1fr}

  /* Breadcrumb wraps cleanly */
  .breadcrumb{line-height:1.9}
}

/* ---- Small phones (≤400) ---- */
@media(max-width:400px){
  .container{padding:0 16px}
  .display-h{font-size:clamp(28px,9vw,38px)}
  .hero-title{font-size:clamp(40px,14vw,56px)}
  .stats-bar,.contact-info-row,.inquiry-grid{grid-template-columns:1fr}
  .feature-row{grid-template-columns:repeat(2,1fr)}
  .nav{padding:12px 16px}
  .site-logo{height:32px}
  .cat-card h3,.series-name{font-size:24px}
}

/* Anchor jump targets (Categories in-page sections + individual product
   cards linked from the footer) clear the fixed nav */
#automotive,#films,#contact-form,#materials{scroll-margin-top:84px}
#essential-series,#elite-series,#signature-series,
#coloured-ppf,#solar-tints,#chameleon-tints,
#surface-protection,#solar-window-films,#privacy-decorative{scroll-margin-top:104px}

/* Technology "Real-World Performance" spec cards — clean single column on mobile */
@media(max-width:600px){
  .tech-spec-grid{grid-template-columns:1fr;gap:14px;margin:6px 0}
  .tech-spec{padding:22px 20px}
  .tech-spec h4{font-size:19px}
  .tech-spec p{font-size:14px}
}

/* ============================================================
 * MOBILE ALIGNMENT POLISH
 * ============================================================ */

/* Intro strip: ensure text wraps cleanly */
@media(max-width:860px){
  .intro-strip p{font-size:14px}
  .intro-strip h3{font-size:26px}
}

/* Feature bar: 3-col on tablet, icon above text, centered */
@media(max-width:980px){
  .section-premium .hero-car{height:280px!important}
  .feature-bar{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;padding:20px 24px}
  .feature-bar .feature{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .feature-bar .feature:last-child:nth-child(odd){
    grid-column:2/3;
  }
}
@media(max-width:600px){
  .section-premium .hero-car{height:220px!important}
  .feature-bar{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;padding:16px 18px}
  .feature-bar .feature-label{font-size:10px}
}
@media(max-width:400px){
  .feature-bar{grid-template-columns:repeat(3,1fr)}
}

/* Series cards: consistent padding on mobile */
@media(max-width:600px){
  .series-mils{flex-wrap:wrap;gap:8px}
  .mil{min-width:80px;flex:none}
  .other-card{padding:24px 20px}
}

/* Proof side demos — equal height on stacked layout */
@media(max-width:980px){
  .demo-surface{min-height:130px}
}

/* Contact info block text alignment on mobile */
@media(max-width:600px){
  .info-block .val{font-size:13px}
  .contact-info-row{gap:20px;padding:24px 0}
}


/* Footer bottom: wrap properly */
@media(max-width:600px){
  .footer-bottom{font-size:12px;gap:8px}
  .footer-legal{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
}

/* Mobile drawer: tighter padding on small phones */
@media(max-width:400px){
  .mobile-drawer{padding:72px 24px 24px}
}

/* Warranty support banner */
@media(max-width:600px){
  .wsb-text h2{font-size:24px}
  .wsb-text p{font-size:13px}
}

/* Technology/home layer SVG on phones: keep the full desktop animation
   (assemble-on-scroll, per-layer float, turntable drift, aura + sparkles).
   Only shrink the labels and hide the descriptions so the smaller diagram
   stays readable. Clip the wrap horizontally so the 3D tilt can't cause page
   overflow, while still letting layers lift vertically. */
@media(max-width:600px){
  .layers-svg .label-desc{display:none}
  .layers-svg .label-text{font-size:11px}
  .layers-wrap{overflow-x:clip}
}

/* Page hero lead text */
@media(max-width:600px){
  .page-hero .display-h{font-size:clamp(30px,9vw,44px)}
}

/* ============================================================
 * COMPREHENSIVE MOBILE SYNC — final pass
 * ============================================================ */

/* Hero V3 & V4: reduce 130px top padding on mobile */
@media(max-width:600px){
  .hero-v3,.hero-v4{padding-top:76px}
  .intro-strip{padding:32px 0}
}

/* Hero V5: compact card padding on small screens */
@media(max-width:600px){
  .hero-v5-content{padding:30px 18px}
  .hero-v5-card{padding:28px 22px}
}

/* About page: override inline style="padding:120px 0" on section-engineered at mobile */
@media(max-width:980px){
  .section-engineered[style]{padding:80px 0!important}
}
@media(max-width:600px){
  .section-engineered[style]{padding:56px 0!important}
}

/* Titan grid: card min-height reset on mobile, tight card padding */
@media(max-width:980px){
  .titan-card{min-height:0}
  .titan-closing{margin-top:20px}
}

/* Hero V4 layer diagram: tighter font on very small screens */
@media(max-width:520px){
  .tf-layer-title{font-size:13px}
  .tf-layer-desc{font-size:11px;letter-spacing:0}
  .tf-layer-labels{gap:16px}
}

/* Series grid grid-2up: already collapses at 860px — ensure smooth on 600px */
@media(max-width:600px){
  .series-grid.grid-2up{gap:20px}
}

/* Proof section: BA slider min-height on mobile */
@media(max-width:600px){
  .proof-side{gap:16px}
  .demo-surface{min-height:100px;padding:16px 18px}
  .demo-surface h4{font-size:16px}
}

/* Inquiry grid: fall to 1-col on smallest phones (already at 400px, guard it) */
@media(max-width:480px){
  .inquiry-grid{grid-template-columns:1fr}
}

/* Contact info block: slightly larger value text on phones */
@media(max-width:520px){
  .info-block{padding:20px 18px}
  .info-block .val{font-size:14px}
  .info-block .lbl{font-size:11px}
}

/* Resources section numbers — reduce on mobile */
@media(max-width:600px){
  .res-num{font-size:32px}
  .res-card{padding:28px 22px}
}

/* Eyebrow letter-spacing: reduce on narrow screens to avoid overflow */
@media(max-width:400px){
  .eyebrow{letter-spacing:2.5px;font-size:11px}
}

/* Content section (inner pages): tighter top padding */
@media(max-width:600px){
  .content-section{padding:44px 0 52px}
  .content-wrap p{line-height:1.7}
}

/* Prevent any element from causing horizontal scroll */
@media(max-width:600px){
  body,html{overflow-x:hidden;max-width:100vw}
  img,video,svg{max-width:100%}
}

/* ============================================================
 * A11Y / TOUCH HARDENING (UI/UX Pro Max audit)
 * ============================================================ */

/* Remove 300ms tap delay on interactive elements */
a,button,.btn-primary,.btn-ghost,.btn-outline,.btn-support,
.menu-icon,.cat-link,.ba-handle,input[type="submit"]{
  touch-action:manipulation;
}

/* Visible keyboard focus ring (only on keyboard nav, not mouse click) */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-support:focus-visible,
.menu-icon:focus-visible,
.cat-link:focus-visible,
.res-card:focus-visible,
.error-link:focus-visible,
.nav-links a:focus-visible,
.mobile-drawer a:focus-visible,
.footer-grid a:focus-visible,
.hero-cue:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:2px;
}
/* Inputs already style :focus; mirror it for focus-visible consistency */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.wl-field input:focus-visible{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}

/* Content-heavy heroes: size to content on phones so nothing clips under
   the fixed nav (these otherwise inherit min-height:100vh + overflow:hidden) */
@media(max-width:600px){
  .hero-v1,.hero-v2{min-height:auto}
  .hero-v2{justify-content:flex-start;padding-bottom:40px}
  /* Center the background car on narrow screens (default is "center right",
     which crops to the empty edge on a portrait phone) */
  .hero-v2-bg{background-position:center center}
}

/* Prevent iOS auto-zoom on focus by keeping form text ≥16px on phones */
@media(max-width:600px){
  .form-field input,.form-field select,.form-field textarea,
  .wl-field input,.archive-search input[type="search"],
  .archive-search input[type="text"]{font-size:16px}
}

/* Comprehensive reduced-motion fallback — near-instant transitions,
   no scroll-jacking, parallax or auto-playing motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}