/*
Theme Name: SHIELD TRACK
Theme URI: https://restartgroup.my
Author: Restart Group
Description: SHIELD TRACK GPS tracking and fleet management WordPress theme.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Private
Text Domain: shieldtrack
Tags: woocommerce, gps, tracking, fleet, oman
*/

/* ═══════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════ */
:root {
  --orange:    #F97316;
  --orange-dk: #e06010;
  --orange-lt: rgba(249,115,22,.10);
  --navy:      #0F1728;
  --navy-lt:   #1a2744;
  --charcoal:  #1a1a1a;
  --grey-bg:   #F8F9FA;
  --grey-mid:  #E5E7EB;
  --grey-txt:  #6B7280;
  --green:     #16A34A;
  --white:     #ffffff;
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:    12px;
  --shadow:    0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.14);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--charcoal); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; transition: color .2s; }
ul   { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; }
input, select, textarea { font-family: var(--font); }

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; color: var(--charcoal); }
p { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.st-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.st-section    { padding: 80px 0; }
.st-section-sm { padding: 60px 0; }
.st-divider    { height: 1px; background: var(--grey-mid); }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.st-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 8px; font-weight: 600;
  font-size: 15px; cursor: pointer; border: none; line-height: 1;
  transition: all .2s ease; text-decoration: none; font-family: var(--font);
}
.st-btn-orange  { background: var(--orange); color: #fff; }
.st-btn-orange:hover  { background: var(--orange-dk); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(249,115,22,.4); }
.st-btn-navy    { background: var(--navy); color: #fff; }
.st-btn-navy:hover    { background: var(--navy-lt); color: #fff; transform: translateY(-1px); }
.st-btn-outline { background: transparent; color: var(--orange); border: 2px solid var(--orange); }
.st-btn-outline:hover { background: var(--orange); color: #fff; }
.st-btn-wa      { background: #25D366; color: #fff; }
.st-btn-wa:hover      { background: #1ebe5d; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,211,102,.4); }
.st-btn-white   { background: #fff; color: var(--charcoal); }
.st-btn-white:hover   { background: var(--grey-bg); color: var(--charcoal); }
.st-btn-sm { padding: 10px 18px; font-size: 14px; }
.st-btn-lg { padding: 16px 32px; font-size: 16px; }
.st-btn-full { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════
   CHIPS & BADGES
═══════════════════════════════════════════ */
.st-chip { display: inline-block; background: var(--orange-lt); color: var(--orange); padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.st-dot-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(22,163,74,.12); color: var(--green); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.st-dot-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: st-pulse 2s infinite; }
@keyframes st-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ═══════════════════════════════════════════
   SECTION HEADINGS
═══════════════════════════════════════════ */
.st-sec-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.st-sec-title { font-size: clamp(26px,4vw,42px); font-weight: 800; color: var(--charcoal); line-height: 1.15; margin-bottom: 14px; }
.st-sec-sub   { font-size: 17px; color: var(--grey-txt); line-height: 1.7; max-width: 640px; }
.st-sec-head  { margin-bottom: 52px; }
.st-sec-head.center { text-align: center; }
.st-sec-head.center .st-sec-sub { margin: 0 auto; }

/* ═══════════════════════════════════════════
   MAIN NAVBAR
═══════════════════════════════════════════ */
#st-navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--grey-mid);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.st-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; height: 68px; gap: 28px;
}
.st-logo { display: flex; flex-direction: column; flex-shrink: 0; text-decoration: none; }
.st-logo-en { font-size: 22px; font-weight: 900; color: var(--navy); letter-spacing: -.5px; line-height: 1; }
.st-logo-en span { color: var(--orange); }
.st-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.st-nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); padding: 7px 13px; border-radius: 7px; transition: all .2s; white-space: nowrap; }
.st-nav-links a:hover, .st-nav-links a.active, .st-nav-links .current-menu-item > a, .st-nav-links .current_page_item > a { color: var(--orange); background: var(--orange-lt); }
.st-nav-cta  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.st-nav-phone { font-size: 14px; font-weight: 600; color: var(--charcoal); white-space: nowrap; }
.st-nav-phone:hover { color: var(--orange); }
.st-nav-quote { background: var(--orange); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; transition: all .2s; white-space: nowrap; }
.st-nav-quote:hover { background: var(--orange-dk); color: #fff; transform: translateY(-1px); }
/* Hamburger */
.st-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; margin-left: auto; background: none; border: none; }
.st-hamburger span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: all .3s; }
/* Mobile nav */
.st-mobile-nav { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--grey-mid); }
.st-mobile-nav a { font-size: 15px; font-weight: 500; color: var(--charcoal); padding: 14px 24px; border-bottom: 1px solid var(--grey-mid); }
.st-mobile-nav a:hover { color: var(--orange); background: var(--orange-lt); }
.st-mobile-nav .st-mob-wa { background: #25D366; color: #fff; margin: 16px 24px; border-radius: 8px; padding: 14px 24px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.st-mobile-nav.open { display: flex; }

/* Promo bar */
#st-promo {
  background: linear-gradient(90deg, var(--navy) 0%, #1a3060 60%, var(--navy) 100%);
  padding: 12px 24px;
}
.st-promo-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-promo-badge { background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; flex-shrink: 0; }
.st-promo-text  { font-size: 14px; color: #fff; font-weight: 600; flex: 1; }
.st-promo-text span { color: var(--orange); }
.st-promo-cta   { background: var(--orange); color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.st-promo-cta:hover { background: var(--orange-dk); color: #fff; }

/* ═══════════════════════════════════════════
   HERO — Full-width carousel
   APPROACH: display:none / display:flex !important
   Inactive slides have NO layout presence at all.
═══════════════════════════════════════════ */
#st-hero {
  background: #07111f;
  margin: 0;
  padding: 0;
}

/* Slider container — auto height set by active slide */
#st-hero-slider {
  position: relative;
}

/* ── INACTIVE slides: COMPLETELY REMOVED FROM LAYOUT ── */
.st-slide {
  display: none !important;
}

/* ── ACTIVE slide: shown, full-width, flow-based height ── */
.st-slide.active {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  position: relative;       /* contains ::before overlay + dot z-index */
  width: 100%;
  min-height: 580px;
  padding: 100px 24px 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: st-fade-in .6s ease;
  animation: st-fade-in .6s ease;
}

/* Dark overlay — no extra div needed */
.st-slide.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 12, 25, .32);
  pointer-events: none;
  z-index: 0;
}

@-webkit-keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-fade-in          { from { opacity: 0; } to { opacity: 1; } }

/* ── Background gradients on slide divs directly ── */
.st-hbg-1 {
  background:
    radial-gradient(ellipse 70% 80% at 15% 65%, rgba(249,115,22,.18) 0%, transparent 60%),
    linear-gradient(145deg, #07111f 0%, #0e1c30 50%, #0b1828 100%);
}
.st-hbg-2 {
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, rgba(249,115,22,.14) 0%, transparent 55%),
    linear-gradient(145deg, #060f1c 0%, #0c1a2e 50%, #091525 100%);
}
.st-hbg-3 {
  background:
    radial-gradient(ellipse 65% 75% at 20% 30%, rgba(249,115,22,.16) 0%, transparent 60%),
    linear-gradient(145deg, #081220 0%, #0f1d30 50%, #0b1928 100%);
}
.st-hbg-4 {
  background:
    radial-gradient(ellipse 55% 65% at 75% 70%, rgba(249,115,22,.15) 0%, transparent 55%),
    linear-gradient(145deg, #07101e 0%, #0d1b2c 50%, #0a1623 100%);
}

/* ── Slide content sits above ::before overlay ── */
.st-hsc {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.st-hsc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.st-hsc-title {
  font-size: clamp(34px, 5.5vw, 66px);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.st-hsc-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 36px;
}

/* ── Outline-white CTA (slide 4) ── */
.st-btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
}
.st-btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: #fff;
}

/* ── Dots: absolutely positioned at bottom of slider ── */
.st-hero-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}
.st-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-transition: background .35s, width .35s;
  transition: background .35s, width .35s;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.st-dot.active { background: var(--orange); width: 44px; }

/* ── Stats bar ── */
.st-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.st-hs-item { padding: 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.06); }
.st-hs-item:last-child { border-right: none; }
.st-hs-icon  { font-size: 22px; display: block; margin-bottom: 4px; }
.st-hs-label { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; }

/* ═══════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════ */
#st-trust { background: var(--grey-bg); border-bottom: 1px solid var(--grey-mid); padding: 15px 24px; }
.st-trust-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.st-trust-item  { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #444; }

/* ═══════════════════════════════════════════
   LAUNCH OFFER BANNER
═══════════════════════════════════════════ */
#st-offer { background: linear-gradient(135deg, #FF4500 0%, var(--orange) 60%, #ffb347 100%); padding: 60px 24px; }
.st-offer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.st-offer-badge { display: inline-block; background: rgba(0,0,0,.25); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; margin-bottom: 14px; }
.st-offer-title { font-size: clamp(26px,4vw,40px); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 12px; }
.st-offer-desc  { font-size: 16px; color: rgba(255,255,255,.88); line-height: 1.65; margin-bottom: 22px; max-width: 540px; }
.st-offer-list  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.st-offer-item  { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #fff; font-weight: 500; }
.st-offer-item::before { content: '✓'; font-weight: 800; }
.st-offer-btns  { display: flex; gap: 12px; flex-wrap: wrap; }
.st-offer-box   { background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.3); border-radius: 16px; padding: 28px 32px; text-align: center; min-width: 200px; }
.st-offer-box .lbl   { font-size: 11px; color: rgba(255,255,255,.7); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px; }
.st-offer-box .price { font-size: 44px; font-weight: 900; color: #fff; line-height: 1; display: block; margin-bottom: 4px; }
.st-offer-box .sub   { font-size: 13px; color: rgba(255,255,255,.65); }
.st-offer-box .incl  { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 12px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; line-height: 1.6; text-align: left; }

/* ═══════════════════════════════════════════
   PRODUCT CARDS (shared - used on homepage & shop)
═══════════════════════════════════════════ */
.st-prod-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.st-prod-card {
  border: 1.5px solid var(--grey-mid); border-radius: var(--radius);
  overflow: hidden; transition: all .3s; background: #fff;
  display: flex; flex-direction: column;
}
.st-prod-card:hover { border-color: var(--orange); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.st-prod-img {
  aspect-ratio: 4/3; background: var(--grey-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; position: relative; overflow: hidden;
}
.st-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.st-prod-badge { position: absolute; top: 12px; left: 12px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.st-prod-body  { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.st-prod-cat   { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: block; }
.st-prod-name  { font-size: 17px; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; line-height: 1.25; }
.st-prod-desc  { font-size: 13px; color: var(--grey-txt); line-height: 1.6; margin-bottom: 14px; flex: 1; }
.st-prod-benefits { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.st-prod-ben   { font-size: 12px; color: #444; display: flex; align-items: center; gap: 6px; }
.st-prod-ben::before { content: '✓'; color: var(--green); font-weight: 700; }
.st-prod-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.st-prod-from  { font-size: 12px; color: var(--grey-txt); }
.st-prod-price { font-size: 22px; font-weight: 800; color: var(--charcoal); }
.st-prod-price .cur { font-size: 14px; font-weight: 600; }
.st-prod-price .ph  { color: var(--grey-txt); font-size: 20px; letter-spacing: 1px; }
.st-prod-sub   { font-size: 11px; color: var(--grey-txt); }
.st-prod-actions { display: flex; flex-direction: column; gap: 8px; }

/* ═══════════════════════════════════════════
   SOLUTIONS GRID
═══════════════════════════════════════════ */
.st-sol-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.st-sol-card { background: #fff; border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 30px 26px; transition: all .3s; position: relative; overflow: hidden; }
.st-sol-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--orange); transition: width .3s; }
.st-sol-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.st-sol-card:hover::after { width: 100%; }
.st-sol-icon { width: 50px; height: 50px; background: var(--orange-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.st-sol-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 9px; }
.st-sol-card p  { font-size: 14px; color: var(--grey-txt); line-height: 1.65; margin-bottom: 14px; }
.st-sol-link    { font-size: 14px; color: var(--orange); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: gap .2s; }
.st-sol-link:hover { gap: 8px; color: var(--orange); }

/* ═══════════════════════════════════════════
   FLEET SECTION (dark)
═══════════════════════════════════════════ */
#st-fleet { background: var(--navy); }
#st-fleet .st-sec-title { color: #fff; }
#st-fleet .st-sec-sub   { color: rgba(255,255,255,.6); }
.st-fleet-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.st-fleet-list   { display: flex; flex-direction: column; gap: 13px; }
.st-fi {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 16px 18px; transition: all .25s;
}
.st-fi:hover { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.4); }
.st-fi-icon { width: 40px; height: 40px; background: rgba(249,115,22,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.st-fi h4   { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.st-fi p    { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; }
/* Dashboard mockup */
.st-dash { background: #0a1424; border-radius: 14px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.07); }
.st-dash-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.st-dd { width: 10px; height: 10px; border-radius: 50%; }
.dd-r{background:#ef4444;} .dd-y{background:#f59e0b;} .dd-g{background:#22c55e;}
.st-dash-bar span { font-size: 10px; color: rgba(255,255,255,.3); margin-left: 6px; font-family: monospace; }
.st-dash-map { background: #111e35; border-radius: 10px; height: 180px; position: relative; overflow: hidden; margin-bottom: 12px; }
.st-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 28px 28px; }
.st-map-route { position: absolute; top: 52%; left: 10%; width: 65%; height: 2px; background: var(--orange); border-radius: 2px; }
.st-map-route::before { content:''; position:absolute; top:-4px; left:-4px; width:10px; height:10px; background:var(--orange); border-radius:50%; }
.st-map-pin { position:absolute; font-size:18px; animation:mapBounce 2s ease-in-out infinite; }
.mp1{top:18%;right:18%;} .mp2{bottom:22%;left:28%;} .mp3{top:42%;right:40%;}
@keyframes mapBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.st-dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.st-dk { background:rgba(255,255,255,.06); border-radius:8px; padding:10px; text-align:center; }
.st-dk-val { font-size:16px; font-weight:800; color:var(--orange); display:block; }
.st-dk-lbl { font-size:10px; color:rgba(255,255,255,.4); }
.st-dash-alert { background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.3); border-radius:8px; padding:11px 13px; display:flex; align-items:flex-start; gap:9px; }
.st-dash-alert .al-t { font-size:11px; font-weight:700; color:var(--orange); margin-bottom:2px; }
.st-dash-alert .al-d { font-size:11px; color:rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════
   INDUSTRIES
═══════════════════════════════════════════ */
.st-ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.st-ind-card { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 26px 18px; text-align: center; transition: all .3s; cursor: default; }
.st-ind-card:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.st-ind-card:hover h3, .st-ind-card:hover p { color: rgba(255,255,255,.85); }
.st-ind-card:hover p { color: rgba(255,255,255,.55); }
.st-ind-emoji { font-size: 32px; margin-bottom: 12px; display: block; }
.st-ind-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.st-ind-card p  { font-size: 12px; color: var(--grey-txt); line-height: 1.5; }

/* ═══════════════════════════════════════════
   PLAN CARDS (Pricing)
═══════════════════════════════════════════ */
.st-plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.st-plan-card  { background: #fff; border: 1.5px solid var(--grey-mid); border-radius: var(--radius); overflow: hidden; transition: all .3s; display: flex; flex-direction: column; }
.st-plan-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.st-plan-card.featured { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(249,115,22,.12); }
.st-plan-head  { padding: 26px 26px 18px; background: var(--grey-bg); }
.st-plan-card.featured .st-plan-head { background: var(--orange); }
.st-plan-tag   { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px; }
.st-plan-card.featured .st-plan-tag  { color: rgba(255,255,255,.8); }
.st-plan-name  { font-size: 21px; font-weight: 800; color: var(--charcoal); margin-bottom: 14px; }
.st-plan-card.featured .st-plan-name { color: #fff; }
.st-plan-price { font-size: 36px; font-weight: 900; color: var(--charcoal); line-height: 1; display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.st-plan-price .cur { font-size: 16px; font-weight: 700; }
.st-plan-price .ph  { font-size: 26px; color: var(--grey-txt); letter-spacing: 2px; }
.st-plan-card.featured .st-plan-price { color: #fff; }
.st-plan-card.featured .st-plan-price .ph { color: rgba(255,255,255,.65); }
.st-plan-note  { font-size: 13px; color: var(--grey-txt); line-height: 1.4; }
.st-plan-card.featured .st-plan-note { color: rgba(255,255,255,.7); }
.st-plan-body  { padding: 22px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.st-plan-feats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.st-pf { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--charcoal); }
.st-pf-ok { color: var(--green); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.st-pf-na { color: var(--grey-txt); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.st-pf-note { font-size: 11px; color: var(--grey-txt); display: block; margin-top: 1px; }
.st-plan-actions { display: flex; flex-direction: column; gap: 9px; }

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
.st-faq-wrap { max-width: 760px; margin: 0 auto; }
.st-faq-item { border: 1px solid var(--grey-mid); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.st-faq-q { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; background: #fff; font-weight: 600; font-size: 15px; color: var(--charcoal); transition: background .2s; gap: 12px; user-select: none; }
.st-faq-q:hover { background: var(--grey-bg); }
.st-faq-icon { font-size: 20px; color: var(--orange); flex-shrink: 0; font-style: normal; transition: transform .3s; }
.st-faq-a { display: none; padding: 0 22px 18px; font-size: 15px; color: var(--grey-txt); line-height: 1.7; background: var(--grey-bg); }
.st-faq-item.open .st-faq-a    { display: block; }
.st-faq-item.open .st-faq-icon { transform: rotate(45deg); }
.st-faq-item.open .st-faq-q    { background: var(--grey-bg); color: var(--orange); }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.st-about-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.st-about-vals  { display: flex; flex-direction: column; gap: 20px; }
.st-av { display: flex; align-items: flex-start; gap: 16px; }
.st-av-icon { width: 46px; height: 46px; background: rgba(249,115,22,.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.st-av h4   { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.st-av p    { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; }
.st-shield-wrap { display: flex; align-items: center; justify-content: center; }
.st-shield-svg-wrap { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; }
.st-pr { position: absolute; border-radius: 50%; border: 2px solid rgba(249,115,22,.2); animation: st-rpulse 3s infinite; }
.pr1 { width: 260px; height: 260px; animation-delay: 0s; }
.pr2 { width: 300px; height: 300px; animation-delay: 1.2s; }
@keyframes st-rpulse { 0%{opacity:.6;transform:scale(.88)} 100%{opacity:0;transform:scale(1.08)} }

/* ═══════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════ */
.st-contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; }
.st-ci-list { display: flex; flex-direction: column; gap: 22px; }
.st-ci { display: flex; align-items: flex-start; gap: 14px; }
.st-ci-icon { width: 44px; height: 44px; background: var(--orange-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.st-ci h4   { font-size: 12px; font-weight: 700; color: var(--grey-txt); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.st-ci p, .st-ci a { font-size: 15px; color: var(--charcoal); font-weight: 500; }
.st-ci a:hover { color: var(--orange); }
.st-ci-note { font-size: 12px; color: var(--grey-txt); margin-top: 2px; }
.st-cf { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 34px; }
.st-cf-title { font-size: 19px; font-weight: 700; margin-bottom: 22px; }
.st-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-fg { margin-bottom: 14px; }
.st-fg label { display: block; font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.st-fg input, .st-fg select, .st-fg textarea {
  width: 100%; background: #fff; border: 1.5px solid var(--grey-mid);
  border-radius: 8px; padding: 11px 14px; font-size: 15px;
  color: var(--charcoal); font-family: var(--font);
  transition: border-color .2s; outline: none;
}
.st-fg input:focus, .st-fg select:focus, .st-fg textarea:focus { border-color: var(--orange); }
.st-fg textarea { resize: vertical; min-height: 110px; }
.st-cf-note { font-size: 12px; color: var(--grey-txt); margin-top: 10px; text-align: center; line-height: 1.5; }
.st-form-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.st-form-msg.success { background: rgba(22,163,74,.1); color: var(--green); border: 1px solid rgba(22,163,74,.3); }
.st-form-msg.error   { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

/* ═══════════════════════════════════════════
   CTA STRIP
═══════════════════════════════════════════ */
.st-cta-strip { background: var(--navy); padding: 60px 24px; text-align: center; }
.st-cta-strip h2 { font-size: clamp(22px,3.5vw,36px); font-weight: 800; color: #fff; margin-bottom: 12px; }
.st-cta-strip p  { font-size: 17px; color: rgba(255,255,255,.65); margin-bottom: 28px; }
.st-cta-strip-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#st-footer { background: #080f1d; padding: 60px 24px 30px; }
.st-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 28px; }
.st-fb-en { font-size: 23px; font-weight: 900; color: #fff; margin-bottom: 3px; }
.st-fb-en span { color: var(--orange); }
.st-fb-desc { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.7; max-width: 280px; }
.st-fc h4  { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.st-fc ul  { display: flex; flex-direction: column; gap: 8px; }
.st-fc ul li a { font-size: 13px; color: rgba(255,255,255,.42); transition: color .2s; }
.st-fc ul li a:hover { color: var(--orange); }
.st-footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-footer-bot p { font-size: 12px; color: rgba(255,255,255,.28); }
.st-compliance { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.05); font-size: 11px; color: rgba(255,255,255,.22); line-height: 1.6; }

/* Floating WhatsApp */
.st-wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 18px rgba(37,211,102,.5); animation: st-wa-bounce 3s ease-in-out infinite; text-decoration: none; }
.st-wa-float:hover { animation: none; transform: scale(1.1); background: #1ebe5d; color: #fff; }
@keyframes st-wa-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ═══════════════════════════════════════════
   WOOCOMMERCE — SHOP / ARCHIVE
═══════════════════════════════════════════ */
.st-shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.st-shop-sidebar { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 22px; position: sticky; top: 88px; }
.st-shop-sidebar h3 { font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.st-cat-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.st-cat-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--charcoal); cursor: pointer; transition: all .2s; border: 1px solid transparent; text-decoration: none; }
.st-cat-link:hover, .st-cat-link.current-cat, .st-cat-link.active { background: var(--orange-lt); border-color: var(--orange); color: var(--orange); }
.st-cat-count { font-size: 12px; background: var(--grey-mid); color: var(--grey-txt); padding: 2px 8px; border-radius: 10px; }
.st-cat-link:hover .st-cat-count, .st-cat-link.current-cat .st-cat-count { background: var(--orange); color: #fff; }
.st-shop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.st-shop-count  { font-size: 14px; color: var(--grey-txt); }
.woocommerce-ordering select { padding: 8px 14px; border: 1px solid var(--grey-mid); border-radius: 8px; font-size: 14px; font-family: var(--font); outline: none; cursor: pointer; }
.st-shop-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

/* ═══════════════════════════════════════════
   WOOCOMMERCE — SINGLE PRODUCT
═══════════════════════════════════════════ */
.st-single-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.st-product-gallery { position: sticky; top: 88px; }
.st-product-main-img { aspect-ratio: 4/3; background: var(--grey-bg); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 80px; border: 1px solid var(--grey-mid); }
.st-product-main-img img { width: 100%; height: 100%; object-fit: cover; }
.st-product-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.st-product-thumb { width: 72px; height: 72px; background: var(--grey-bg); border-radius: 8px; border: 1.5px solid var(--grey-mid); overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.st-product-thumb:hover { border-color: var(--orange); }
.st-product-detail { }
.st-product-cat   { font-size: 12px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; display: block; }
.st-product-title { font-size: clamp(22px,3vw,34px); font-weight: 800; color: var(--charcoal); line-height: 1.15; margin-bottom: 14px; }
.st-product-price-block { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-product-price-block .from { font-size: 14px; color: var(--grey-txt); }
.st-product-price-block .amount { font-size: 32px; font-weight: 900; color: var(--charcoal); }
.st-product-price-block .cur   { font-size: 16px; font-weight: 700; }
.st-product-price-block .ph    { font-size: 26px; color: var(--grey-txt); letter-spacing: 2px; }
.st-product-price-block .sub   { font-size: 13px; color: var(--grey-txt); }
.st-product-short-desc { font-size: 15px; color: var(--grey-txt); line-height: 1.7; margin-bottom: 20px; }
.st-product-features { margin-bottom: 22px; }
.st-product-features h4 { font-size: 14px; font-weight: 700; color: var(--charcoal); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.st-product-feature-list { display: flex; flex-direction: column; gap: 8px; }
.st-product-feature { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--charcoal); }
.st-product-feature::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }
.st-product-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.st-product-ctas .st-btn { font-size: 15px; padding: 14px 24px; }
.st-product-meta-box { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.st-meta-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-txt); }
.st-meta-row strong { color: var(--charcoal); }
/* Full description below */
.st-product-description { margin-top: 60px; }
.st-product-description h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--grey-mid); }
.st-product-description .woocommerce-Tabs-panel--description, .st-product-description .woocommerce-product-details__short-description { font-size: 15px; color: var(--grey-txt); line-height: 1.7; }
.st-product-description ul { list-style: disc; padding-left: 20px; margin: 10px 0; }
.st-product-description ul li { margin-bottom: 6px; }

/* ═══════════════════════════════════════════
   WORDPRESS / WOOCOMMERCE OVERRIDES
═══════════════════════════════════════════ */
.woocommerce-breadcrumb { font-size: 13px; color: var(--grey-txt); margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--orange); }
.woocommerce-message, .woocommerce-info { background: var(--grey-bg); border-color: var(--orange); color: var(--charcoal); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--orange); }
/* Hide WooCommerce default cart/checkout elements globally */
.woocommerce .cart { display: none !important; }
.woocommerce-page .woocommerce > form { display: none !important; }
/* Page content */
.st-page-content { padding: 60px 0; }
.st-page-content h1 { font-size: clamp(28px,4vw,44px); font-weight: 800; color: var(--charcoal); margin-bottom: 20px; }
.st-page-content p  { font-size: 16px; color: var(--grey-txt); line-height: 1.7; margin-bottom: 16px; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-prod-grid    { grid-template-columns: repeat(2,1fr); }
  .st-shop-grid    { grid-template-columns: repeat(2,1fr); }
  .st-ind-grid     { grid-template-columns: repeat(3,1fr); }
  .st-footer-top   { grid-template-columns: 1fr 1fr; }
  .st-plans-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .st-sol-grid        { grid-template-columns: 1fr 1fr; }
  .st-fleet-layout    { grid-template-columns: 1fr; }
  .st-dash            { display: none; }
  .st-about-grid      { grid-template-columns: 1fr; }
  .st-shield-wrap     { display: none; }
  .st-contact-grid    { grid-template-columns: 1fr; }
  .st-shop-layout     { grid-template-columns: 1fr; }
  .st-shop-sidebar    { position: static; }
  .st-offer-inner     { grid-template-columns: 1fr; }
  .st-offer-box       { min-width: 0; }
  .st-single-layout   { grid-template-columns: 1fr; }
  .st-product-gallery { position: static; }
}
@media (max-width: 768px) {
.st-nav-links, .st-nav-cta { display: none; }
  .st-hamburger       { display: flex; }
  .st-slide.active    { min-height: 500px; padding: 80px 20px 70px; }
  .st-hsc-title       { font-size: clamp(28px, 7vw, 46px); }
  .st-hsc-sub         { font-size: 16px; }
  .st-hero-stats      { grid-template-columns: repeat(2,1fr); }
  .st-prod-grid       { grid-template-columns: 1fr 1fr; }
  .st-shop-grid       { grid-template-columns: 1fr 1fr; }
  .st-ind-grid        { grid-template-columns: repeat(2,1fr); }
  .st-form-row        { grid-template-columns: 1fr; }
  .st-footer-top      { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .st-prod-grid  { grid-template-columns: 1fr; }
  .st-shop-grid  { grid-template-columns: 1fr; }
  .st-ind-grid   { grid-template-columns: 1fr 1fr; }
  .st-footer-top { grid-template-columns: 1fr; }
  .st-hero-stats { grid-template-columns: repeat(2,1fr); }
  .st-slide.active { min-height: 440px; padding: 70px 16px 60px; }
}

/* ═══════════════════════════════════════════
   PRODUCT CATEGORIES
═══════════════════════════════════════════ */
.st-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.st-cat-card {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.st-cat-card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 20px rgba(249,115,22,.12);
  transform: translateY(-3px);
}
.st-cat-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.st-cat-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.st-cat-card p {
  font-size: 13px;
  color: var(--grey-txt);
  line-height: 1.6;
  margin-bottom: 16px;
}
.st-cat-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.st-cat-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   PLATFORM SECTION
═══════════════════════════════════════════ */
.st-platform-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.st-platform-left .st-sec-label { margin-bottom: 10px; }
.st-platform-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.st-pf-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-mid);
  border-radius: 8px;
}
.st-pf-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.st-pf-item strong { font-size: 14px; color: var(--charcoal); display: block; margin-bottom: 2px; }
.st-pf-item p { font-size: 12px; color: var(--grey-txt); margin: 0; line-height: 1.5; }

/* App mockup (reuses dashboard mockup base styles) */
.st-app-mockup {
  background: var(--navy);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.st-app-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.st-app-dot { width: 10px; height: 10px; border-radius: 50%; }
.st-app-map {
  position: relative;
  height: 200px;
  background: #0d1f3c;
  overflow: hidden;
}
.st-app-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: rgba(255,255,255,.06);
}
.st-as {
  padding: 12px;
  text-align: center;
  background: var(--navy-lt);
}
.st-as-val { display: block; font-size: 16px; font-weight: 700; color: var(--orange); }
.st-as-lbl { display: block; font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px; }
.st-app-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(249,115,22,.1);
  border-top: 1px solid rgba(249,115,22,.2);
  font-size: 13px;
}
.st-app-alert .al-t { font-weight: 600; color: var(--orange); font-size: 12px; }
.st-app-alert .al-d { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 2px; }

/* ═══════════════════════════════════════════
   FLEET QUOTE FORM
═══════════════════════════════════════════ */
.st-fq-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.st-fq-form {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.st-fq-form .st-fg { display: flex; flex-direction: column; gap: 6px; }
.st-fq-form label { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.st-fq-form input,
.st-fq-form select,
.st-fq-form textarea {
  padding: 10px 14px;
  border: 1px solid var(--grey-mid);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--charcoal);
  background: #fff;
  transition: border-color .2s;
}
.st-fq-form input:focus,
.st-fq-form select:focus,
.st-fq-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.08);
}
.st-fq-form textarea { min-height: 80px; resize: vertical; }
.st-fq-form .st-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.st-fq-form .st-fg { margin-bottom: 14px; }

/* ═══════════════════════════════════════════
   NEW SECTION RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-cat-grid       { grid-template-columns: repeat(3,1fr); }
  .st-platform-layout { grid-template-columns: 1fr; }
  .st-fq-layout      { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .st-cat-grid       { grid-template-columns: repeat(2,1fr); }
  .st-fq-form .st-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .st-cat-grid       { grid-template-columns: 1fr 1fr; }
}