/* Moved from home.php (cached by the browser instead of being re-sent in every page) */
:root{
  --navy:#0B1120; --navy-2:#0F172A; --navy-3:#1E3A5F;
  --amber:#3B82F6; --amber-glow:#60A5FA;
  --teal:#38BDF8;
  --paper:#F8FAFC; --paper-2:#EEF2F7;
  --ink:#0F172A; --ink-dim:#475569;
  --line:#E2E8F0;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--paper); overflow-x:hidden;}
h1,h2,h3,.disp{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.01em;}
a{text-decoration:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
img,svg{max-width:100%;}

/* ---- Road-line signature motif: dashed lane markings scrolling like a highway ---- */
.roadline{height:10px; overflow:hidden; position:relative; background:var(--navy);}
.roadline::before{
  content:""; position:absolute; inset:0; top:calc(50% - 2px); height:4px;
  background-image:repeating-linear-gradient(90deg, var(--amber) 0 36px, transparent 36px 64px);
  animation: roll 1.8s linear infinite;
}
@keyframes roll{ from{background-position:0 0;} to{background-position:-100px 0;} }
@media (prefers-reduced-motion: reduce){ .roadline::before{animation:none;} }

/* ---- Nav ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(11,26,48,.92); backdrop-filter:blur(6px);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Oswald',sans-serif; font-size:20px; font-weight:600; letter-spacing:.02em;}
.brand i{color:var(--amber); font-size:24px;}
.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks a{color:#C7D2E3; font-size:14px; font-weight:500;}
.navlinks a:hover{color:#fff;}
.nav-cta{background:var(--amber); color:var(--navy) !important; font-weight:700; padding:9px 18px; border-radius:4px; font-size:14px;}
.nav-cta:hover{background:var(--amber-glow);}
@media (max-width:820px){ .navlinks a:not(.nav-cta){display:none;} }

/* ---- Hero ---- */
.hero{background:radial-gradient(ellipse 900px 500px at 20% -10%, var(--navy-3), var(--navy) 60%); color:#fff; position:relative;}
.hero .wrap{padding:88px 24px 96px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr; padding:56px 20px 64px;} }
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--amber-glow); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(242,169,59,.6); animation:pulse 1.6s infinite;}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(242,169,59,.55);} 70%{box-shadow:0 0 0 10px rgba(242,169,59,0);} 100%{box-shadow:0 0 0 0 rgba(242,169,59,0);} }
.hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.04; margin:0 0 20px; font-weight:700;}
.hero h1 span{color:var(--amber);}
.hero p.lead{font-family:'Inter'; font-size:17px; color:#C7D2E3; max-width:480px; line-height:1.6; margin:0 0 32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; padding:15px 26px; border-radius:5px; border:none; cursor:pointer; font-family:'Inter';}
.btn-amber{background:var(--amber); color:var(--navy); box-shadow:0 0 0 0 rgba(242,169,59,.5); animation:beacon 2.2s ease-in-out infinite;}
.btn-amber:hover{background:var(--amber-glow);}
@keyframes beacon{ 0%,100%{box-shadow:0 0 0 0 rgba(242,169,59,.45);} 50%{box-shadow:0 0 22px 4px rgba(242,169,59,.35);} }
@media (prefers-reduced-motion: reduce){ .btn-amber{animation:none;} .eyebrow .dot{animation:none;} }
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:#fff;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap;}
.hero-stats div b{display:block; font-family:'Oswald'; font-size:26px; color:#fff;}
.hero-stats div span{font-size:12.5px; color:#8FA0BC; text-transform:uppercase; letter-spacing:.06em;}

.hero-card{background:var(--navy-2); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:28px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.hero-card .row{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07);}
.hero-card .row:last-child{border-bottom:none;}
.hero-card .row i{color:var(--amber); font-size:19px; margin-top:2px;}
.hero-card .row div b{color:#fff; display:block; font-size:14.5px; margin-bottom:2px;}
.hero-card .row div span{color:#93A3BE; font-size:13px;}

/* ---- Trust strip ---- */
.trust{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:28px 24px;}
@media (max-width:760px){ .trust .wrap{grid-template-columns:repeat(2,1fr);} }
.trust .item{display:flex; align-items:center; gap:10px; justify-content:center; color:var(--ink-dim); font-size:13.5px; font-weight:500;}
.trust .item i{color:var(--teal); font-size:17px;}

/* ---- Section shell ---- */
section.pad{padding:88px 0;}
.section-head{max-width:600px; margin:0 0 48px;}
.section-head .eyebrow2{color:var(--teal); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.6vw,38px); margin:0 0 14px; color:var(--navy);}
.section-head p{color:var(--ink-dim); font-size:16px; line-height:1.6; margin:0;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---- Services grid ---- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .services{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .services{grid-template-columns:1fr;} }
.svc-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 22px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.svc-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(16,35,63,.1); border-color:transparent;}
.svc-icon{width:46px; height:46px; border-radius:9px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.svc-icon i{color:var(--amber); font-size:21px;}
.svc-card h3{font-family:'Inter'; text-transform:none; font-weight:700; font-size:17px; margin:0 0 6px; color:var(--navy);}
.svc-card p{color:var(--ink-dim); font-size:14px; line-height:1.55; margin:0;}

/* ---- How it works (real sequence => numbered) ---- */
.steps{background:var(--navy); color:#fff; position:relative;}
.steps .wrap{padding:88px 24px;}
.steps .section-head h2, .steps .section-head p{color:#fff;}
.steps .section-head p{color:#AAB8CE;}
.step-row{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:12px;}
@media (max-width:840px){ .step-row{grid-template-columns:1fr;} }
.step{position:relative; padding-left:58px;}
.step .num{position:absolute; left:0; top:0; width:42px; height:42px; border:2px solid var(--amber); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Oswald'; color:var(--amber); font-weight:600;}
.step h3{font-family:'Inter'; text-transform:none; font-size:17px; font-weight:700; margin:2px 0 8px; color:#fff;}
.step p{color:#93A3BE; font-size:14px; line-height:1.6; margin:0;}

/* ---- CTA band ---- */
.ctaband{background:var(--amber); color:var(--navy);}
.ctaband .wrap{padding:56px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.ctaband h2{margin:0 0 6px; font-size:clamp(22px,3vw,30px);}
.ctaband p{margin:0; font-size:15px; color:#3a2d0f;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-3);}

/* ---- Footer ---- */
footer{background:var(--navy); color:#8FA0BC; padding:40px 0 26px; font-size:13.5px;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .fbrand{color:#fff; font-family:'Oswald'; font-size:16px; display:flex; align-items:center; gap:8px;}
footer .fbrand i{color:var(--amber);}
footer a{color:#8FA0BC;}
footer a:hover{color:#fff;}