/*
Theme Name: Tracck Gaddi
Theme URI: https://trackgaddi.com
Author: Tracck Gaddi
Author URI: https://trackgaddi.com
Description: Custom one-page marketing theme for Tracck Gaddi, a GPS fleet-tracking platform. Converted from a static HTML redesign into a full WordPress theme with an editable menu, logo, and contact details.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trackgaddi
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Tracck Gaddi — base design system
   (Ported from the static redesign; colors/spacing unchanged)
   ========================================================================== */

:root{
  --green:#14944A;
  --green-light:#1FB765;
  --green-deep:#0C5F31;
  --green-tint:#E7F3EA;
  --green-glow: rgba(20,148,74,0.32);
  --green-glow-strong: rgba(20,148,74,0.5);
  --navy:#1D2635;
  --navy-2:#141A24;
  --navy-glow: rgba(29,38,53,0.28);
  --paper:#F7F8F6;
  --paper-2:#EEF2EE;
  --ink:#1D2635;
  --muted:#5B6169;
  --line: rgba(29,38,53,0.12);
  --line-soft: rgba(29,38,53,0.08);
  --max:1180px;
  --shadow-green: 0 22px 46px -18px var(--green-glow);
  --shadow-green-strong: 0 26px 54px -16px var(--green-glow-strong);
  --shadow-navy: 0 22px 46px -18px var(--navy-glow);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Sora','Inter',sans-serif; margin:0; font-weight:700; letter-spacing:-0.012em; color:var(--navy); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
section{ padding:112px 0; position:relative; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:8px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:15px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .3s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-green); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-green-strong); background:var(--green-deep); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-navy); }
.btn-light{ background:#fff; color:var(--green-deep); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(0,0,0,0.35); }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,248,246,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition: box-shadow .3s ease;
}
header.scrolled{ box-shadow: 0 8px 30px -20px rgba(29,38,53,0.3); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo{ display:flex; align-items:center; }
.logo img{ height:36px; width:auto; display:block; }
.logo .logo-text{ font-family:'Sora'; font-weight:800; font-size:20px; color:var(--navy); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--ink); padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s; }
.nav-links a:hover{ border-bottom-color:var(--green); color:var(--green-deep); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.burger{ display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer; }
.burger span, .burger span::before, .burger span::after{ content:''; display:block; width:18px; height:2px; background:var(--navy); position:relative; transition: transform .25s ease, opacity .25s ease; }
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }
.mobile-panel{ display:none; }
.nav-links li,
.mobile-panel li,
.foot-col li{ list-style:none; margin:0; padding:0; }

@media (max-width:980px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .mobile-panel{
    display:block; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .mobile-panel.open{ max-height:420px; }
  .mobile-panel .wrap{ padding:10px 32px 22px; display:flex; flex-direction:column; gap:4px; }
  .mobile-panel a{ padding:12px 0; font-size:15px; font-weight:500; border-bottom:1px solid var(--line-soft); display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding:84px 0 100px; overflow:visible; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
.hero h1{ font-size:clamp(34px,4.2vw,54px); line-height:1.08; max-width:580px; }
.hero-sub{ margin-top:22px; font-size:17.5px; color:var(--muted); max-width:470px; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:38px; margin-top:48px; flex-wrap:wrap; }
.hstat .n{ font-family:'Sora'; font-weight:700; font-size:28px; color:var(--navy); }
.hstat .n::after{ content: attr(data-suffix); }
.hstat .l{ font-size:13px; color:var(--muted); margin-top:4px; }

.hero-visual{ position:relative; }
.glow-blob{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  top:-60px; right:-60px; z-index:0; filter:blur(10px);
}
.hero-illustration{
  position:relative; z-index:1;
  border-radius:20px; overflow:hidden;
  box-shadow: 0 30px 60px -22px rgba(29,38,53,0.35), var(--shadow-green);
}
.hero-illustration img{ width:100%; height:auto; display:block; }

/* ---------- Section heading ---------- */
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head .tag{ display:inline-block; font-family:'Sora'; font-size:13px; font-weight:600; color:var(--green-deep); background:var(--green-tint); padding:6px 14px; border-radius:20px; margin-bottom:16px; }
.sec-head h2{ font-size:clamp(27px,3vw,38px); line-height:1.15; }
.sec-head p{ margin-top:16px; font-size:16.5px; color:var(--muted); }

/* ---------- Our clients ---------- */
.clients{ background:#fff; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:88px 0; }
.marquee{ overflow:hidden; position:relative; mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:scroll-left 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.client-chip{ display:flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:700; font-size:17px; color:#9198a0; white-space:nowrap; transition:color .3s ease; }
.client-chip:hover{ color:var(--navy); }
.client-chip .sq{ width:10px; height:10px; border-radius:3px; background:var(--green); opacity:.8; }
.clients-note{ text-align:center; margin-top:36px; font-size:13px; color:var(--muted); }

/* ---------- How it works ---------- */
.how{ background:var(--navy); color:#fff; }
.how .sec-head h2, .how .sec-head p{ color:#fff; }
.how .sec-head p{ color:#aeb4bb; }
.how .sec-head .tag{ background:rgba(31,183,101,0.15); color:var(--green-light); }
.route-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.route-steps::before{
  content:''; position:absolute; top:23px; left:6%; right:6%; height:2px;
  background-image:linear-gradient(to right, var(--green-light) 0 10px, transparent 10px 22px);
  background-size:22px 2px; background-repeat:repeat-x; opacity:.6;
}
.step-num{
  width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff;
  font-family:'Sora'; font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; box-shadow:0 0 0 6px var(--navy), var(--shadow-green);
  transition:transform .35s ease, box-shadow .35s ease;
}
.step-num::after{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  background:radial-gradient(circle, var(--green-glow-strong) 0%, transparent 72%);
  opacity:0; transition:opacity .4s ease; z-index:-1;
}
.step{ position:relative; }
.step:hover .step-num{ transform:scale(1.08); }
.step:hover .step-num::after{ opacity:1; }
.step h3{ color:#fff; font-size:19.5px; margin-top:24px; display:inline-block; position:relative; transition:color .3s ease; }
.step h3::after{
  content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background:var(--green-light); transition:width .35s ease;
}
.step:hover h3{ color:var(--green-light); }
.step:hover h3::after{ width:100%; }
.step p{ color:#a7adb4; font-size:15px; margin-top:10px; max-width:300px; transition:color .3s ease; }
.step:hover p{ color:#c7ccd1; }

/* ---------- Features ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.feature-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:30px 26px;
  transition:transform .3s ease, box-shadow .35s ease, border-color .3s ease;
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-green); border-color:transparent; }
.feature-icon{ width:48px; height:48px; border-radius:10px; background:var(--green-tint); display:flex; align-items:center; justify-content:center; transition:transform .3s ease; }
.feature-card:hover .feature-icon{ transform:scale(1.08) rotate(-4deg); }
.feature-icon svg{ width:23px; height:23px; color:var(--green-deep); }
.feature-card h3{ font-size:18.5px; margin-top:20px; }
.feature-card p{ color:var(--muted); font-size:15px; margin-top:10px; }

/* ---------- About ---------- */
.about{ background:var(--paper-2); }
.about-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
.about-copy .tag{ display:inline-block; font-family:'Sora'; font-size:13px; font-weight:600; color:var(--green-deep); background:var(--green-tint); padding:6px 14px; border-radius:20px; margin-bottom:18px; }
.about-copy h2{ font-size:clamp(27px,3vw,36px); line-height:1.18; }
.about-copy p{ margin-top:20px; font-size:16px; color:var(--muted); max-width:480px; }
.about-copy p + p{ margin-top:14px; }
.about-list{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.about-item{ display:flex; align-items:flex-start; gap:12px; }
.about-item svg{ width:20px; height:20px; color:var(--green); flex-shrink:0; margin-top:2px; }
.about-item span{ font-size:15px; color:var(--ink); font-weight:500; }

.about-panel{ background:var(--navy); border-radius:18px; padding:40px 34px; box-shadow:var(--shadow-navy); }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.astat .n{ font-family:'Sora'; font-weight:800; font-size:36px; color:#fff; }
.astat .l{ font-size:13.5px; color:#a7adb4; margin-top:6px; }
.about-panel-divider{ height:1px; background:rgba(255,255,255,0.1); margin:30px 0; }
.about-quote{ font-size:14.5px; color:#c7ccd1; line-height:1.6; font-style:normal; }
.about-quote b{ color:#fff; }

/* ---------- Perfect for ---------- */
.perfect-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.perfect-card{
  padding:32px 26px; border-radius:14px; background:#fff; border:1px solid var(--line-soft);
  transition:transform .3s ease, box-shadow .35s ease;
}
.perfect-card:nth-child(even):hover{ box-shadow:0 22px 46px -18px var(--navy-glow); }
.perfect-card:nth-child(odd):hover{ box-shadow:var(--shadow-green); }
.perfect-card:hover{ transform:translateY(-6px); }
.perfect-icon{ width:50px; height:50px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; }
.perfect-icon svg{ width:23px; height:23px; color:var(--green-light); }
.perfect-card h3{ font-size:18px; margin-top:20px; }
.perfect-card p{ font-size:14.5px; color:var(--muted); margin-top:9px; }

/* ---------- Contact ---------- */
.contact{ background:var(--navy-2); color:#fff; }
.contact .sec-head h2{ color:#fff; }
.contact .sec-head p{ color:#a7adb4; }
.contact .sec-head .tag{ background:rgba(31,183,101,0.15); color:var(--green-light); }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; }
.contact-info{ display:flex; flex-direction:column; gap:26px; }
.cinfo-row{ display:flex; gap:16px; align-items:flex-start; }
.cinfo-icon{ width:44px; height:44px; border-radius:10px; background:rgba(31,183,101,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinfo-icon svg{ width:20px; height:20px; color:var(--green-light); }
.cinfo-title{ font-family:'Sora'; font-weight:600; font-size:15px; color:#fff; }
.cinfo-sub{ font-size:14px; color:#9aa0a6; margin-top:4px; }
.contact-form{ background:#fff; border-radius:16px; padding:36px; box-shadow:var(--shadow-green); }
.contact-form.embedded-form{ padding:24px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:7px; font-family:'Sora'; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  font-family:'Inter'; font-size:14.5px; color:var(--ink); background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
.field textarea{ resize:vertical; min-height:110px; }

/* ---------- Footer ---------- */
footer{ background:var(--navy); color:#c7ccd1; padding:64px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.foot-logo-badge{ display:inline-flex; align-items:center; background:#fff; border-radius:8px; padding:8px 14px; }
.foot-logo-badge img{ height:30px; width:auto; display:block; }
.foot-logo-badge .logo-text{ font-family:'Sora'; font-weight:800; font-size:16px; color:var(--navy); }
.foot-brand p{ margin-top:16px; font-size:14px; color:#8b9096; max-width:280px; line-height:1.6; }
.foot-col h5{ font-family:'Sora'; color:#fff; font-size:14px; font-weight:600; margin-bottom:16px; }
.foot-col a{ display:block; font-size:14px; color:#a6abaf; padding:6px 0; transition:color .2s; }
.foot-col a:hover{ color:var(--green-light); }
.foot-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.09); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:#767c82; }
.foot-social{ display:flex; gap:16px; }
.foot-social svg{ width:18px; height:18px; color:#8b9096; transition:color .2s; }
.foot-social a:hover svg{ color:var(--green-light); }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .feature-grid, .perfect-grid{ grid-template-columns:1fr 1fr; }
  .route-steps{ grid-template-columns:1fr; gap:36px; }
  .route-steps::before{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  section{ padding:72px 0; }
  .wrap{ padding:0 20px; }
  .feature-grid, .perfect-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:26px; }
  .contact-form{ padding:26px; }
}

/* ---------- WP core alignment helpers (used on inner pages/posts) ---------- */
.alignleft{ float:left; margin:0 24px 16px 0; }
.alignright{ float:right; margin:0 0 16px 24px; }
.aligncenter{ display:block; margin:0 auto 16px; }
.wp-caption{ max-width:100%; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }