/*
Theme Name: OPENLINE Modern
Theme URI: https://openlinelogistics.com/
Author: OPENLINE LOGISTICS
Description: Modern light-theme, single-page marketing site for OPENLINE LOGISTICS — truck dispatching & freight management. Clean white layout, blue accent, rounded cards and soft shadows. Includes hero, services, process, industries, pricing, about, FAQ and contact on one scrolling homepage plus styled interior pages.
Version: 1.3
Requires at least: 5.5
Tested up to: 7.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: openline-modern
*/

:root{
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --blue:#2563eb;
  --blue-d:#1d4ed8;
  --blue-tint:#eff6ff;
  --radius:18px;
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -20px rgba(37,99,235,.35);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1500px;margin:0 auto;padding:0 40px}
section{padding:96px 0}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;margin:0}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);background:var(--blue-tint);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.h2{font-size:clamp(28px,4vw,42px);font-weight:800}
.lead{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:640px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .15s,box-shadow .15s,background .15s,color .15s;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-lg)}
.btn-primary:hover{transform:translateY(-2px);background:var(--blue-d)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.01em}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#60a5fa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;box-shadow:var(--shadow)}
.nav-links{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--muted);transition:color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links .cta{background:var(--blue);color:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow-lg)}
.nav-links .cta:hover{color:#fff;background:var(--blue-d)}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-weight:700;cursor:pointer}
@media(max-width:1024px){
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 24px 22px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:14px 0;width:100%}
  .nav-links .cta{margin-top:10px;width:auto;text-align:center}
}

/* hero */
.hero{position:relative;overflow:hidden;padding:90px 0 84px;background:radial-gradient(900px 460px at 80% -5%,var(--blue-tint),transparent 60%),radial-gradient(700px 420px at 5% 10%,#f5f3ff,transparent 55%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(38px,5.5vw,60px);font-weight:800;letter-spacing:-.03em}
.hero h1 .grad{background:linear-gradient(120deg,var(--blue),#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{margin:22px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow)}
.chip b{color:var(--blue)}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:38px}}

/* board card */
.board{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.board-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.board-head .live{display:inline-flex;align-items:center;gap:7px;color:#16a34a}
.board-head .dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:p 1.8s infinite}
@keyframes p{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.load{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--bg-soft)}
.load:last-child{border-bottom:none}
.load .id{font-size:12px;font-weight:800;color:var(--blue);min-width:64px}
.load .lane{flex:1;font-size:14px;font-weight:600}
.load .st{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.st.b{background:#dcfce7;color:#15803d}
.st.r{background:var(--blue-tint);color:var(--blue-d)}
.st.q{background:#fef3c7;color:#b45309}

/* section head */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.sec-tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8}

/* cards grid */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g3,.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c7d2fe}
.icon{width:46px;height:46px;border-radius:12px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:16px}
.card h3{font-size:19px;font-weight:800;margin-bottom:9px}
.card p{color:var(--muted);font-size:15px;margin:0}

/* soft section */
.soft{background:var(--bg-soft)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}}
.stat{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 20px;box-shadow:var(--shadow)}
.stat .n{font-size:clamp(30px,4vw,40px);font-weight:800;color:var(--blue);letter-spacing:-.03em}
.stat .l{font-size:13.5px;color:var(--muted);margin-top:6px}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px}
.step .num{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h4{font-size:17px;font-weight:800;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px;margin:0}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:880px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column}
.plan.feat{border:2px solid var(--blue);box-shadow:var(--shadow-lg);position:relative}
.plan .flag{position:absolute;top:-13px;left:32px;background:var(--blue);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.plan .name{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan .amt{font-size:44px;font-weight:800;letter-spacing:-.03em;margin:14px 0 2px}
.plan .amt span{font-size:15px;font-weight:600;color:var(--muted)}
.plan .desc{color:var(--muted);font-size:14px;min-height:42px}
.plan ul{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:12px}
.plan li{font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--blue);font-weight:800}
.plan .btn{margin-top:auto;justify-content:center}

/* values */
.val{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.val h4{font-size:16px;font-weight:800;color:var(--blue);margin-bottom:7px}
.val p{color:var(--muted);font-size:14px;margin:0}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:24px;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .body{padding:0 22px 22px;color:var(--muted);font-size:15px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:880px){.contact{grid-template-columns:1fr}}
.info{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.info h3{font-size:20px;font-weight:800;margin-bottom:16px}
.row{padding:14px 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:none}
.row .k{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;font-weight:700}
.row .v{font-size:16px;font-weight:600}
.row .v a{color:var(--blue)}
.check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.check li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:15px}
.check li::before{content:"→";color:var(--blue);font-weight:800}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--blue),#7c3aed);color:#fff;border-radius:26px;padding:60px 32px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-band h2{font-size:clamp(26px,3.5vw,38px);font-weight:800;margin-bottom:12px}
.cta-band p{opacity:.92;max-width:520px;margin:0 auto 26px;font-size:17px}
.cta-band .btn{background:#fff;color:var(--blue)}
.cta-band .btn:hover{background:#f1f5f9;color:var(--blue-d)}

/* interior page */
.ol-page{max-width:860px;margin:0 auto;padding:70px 24px}
.ol-page h1{font-size:clamp(30px,5vw,44px);font-weight:800;text-align:center;margin-bottom:10px}
.ol-page h2{font-size:24px;font-weight:800;margin:38px 0 12px}
.ol-page h3{font-size:18px;font-weight:800;margin-bottom:8px}
.ol-page p{color:var(--muted);font-size:16px}
.ol-page .svc-row{border-top:1px solid var(--line);padding:26px 0}
.ol-page .svc-row h2{margin-top:0}
.ol-page .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
@media(max-width:640px){.ol-page .grid{grid-template-columns:1fr}}
.ol-page .grid .card{padding:24px}
.ol-page .values{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:640px){.ol-page .values{grid-template-columns:1fr}}
.ol-page .faq-item{border-top:1px solid var(--line);padding:22px 0}
.ol-page .faq-item h3{margin-bottom:6px}
.ol-page .contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px;text-align:left}
@media(max-width:640px){.ol-page .contact-cols{grid-template-columns:1fr}}
.ol-page .contact-card{background:var(--blue-tint);border:1px solid #c7d2fe;border-radius:var(--radius);padding:28px}

/* footer */
.site-footer{background:#0f172a;color:#94a3b8;padding:60px 0 40px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
@media(max-width:720px){.foot-top{grid-template-columns:1fr}}
.site-footer .brand{color:#fff}
.site-footer .desc{margin-top:14px;font-size:14px;max-width:420px}
.site-footer h5{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.site-footer a{display:block;color:#94a3b8;font-size:14px;padding:5px 0}
.site-footer a:hover{color:#fff}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid #1e293b;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-bottom a{color:#60a5fa}