/*
Theme Name: Ilias Premier
Theme URI: https://iliaspremier.ro
Author: SC Ilias Premier SRL
Description: Custom freight & logistics theme for SC Ilias Premier SRL - full truckload, LTL, and temperature-controlled freight across all 27 EU member states.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ilias-premier
*/
:root{
    --bg: #12161b;
    --bg-alt: #0d1013;
    --panel: #1b2129;
    --panel-2: #212832;
    --line: #2e3742;
    --line-soft: #232b34;
    --amber: #ffb020;
    --amber-dim: #c98418;
    --teal: #55b8a6;
    --red: #e6572f;
    --text: #ecefe9;
    --text-dim: #8d96a1;
    --text-dimmer: #5e6770;
    --laneline: #e8e2d0;
    --radius: 6px;
    --display: 'Barlow Condensed', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --maxw: 1240px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color: inherit; text-decoration:none; }
  ul{ list-style:none; }
  .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 32px; }
  h1,h2,h3,h4{ font-family: var(--display); font-weight:700; text-transform:uppercase; letter-spacing:0.01em; line-height:1.02; }
  .eyebrow{
    font-family: var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color: var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:18px;
  }
  .eyebrow::before{ content:''; width:22px; height:2px; background: var(--amber); display:inline-block; }
  .section{ padding: 110px 0; position:relative; }
  .section-tight{ padding: 80px 0; }
  :focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }

  /* ---------- NAV ---------- */
  header{
    position: sticky; top:0; z-index:100;
    background: rgba(18,22,27,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height: 76px;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family: var(--display); font-weight:800; font-size:24px; letter-spacing:0.02em;
    text-transform:uppercase;
  }
  .logo .mark{
    width:32px; height:32px; border-radius:7px;
    background: var(--amber); color:#14181d;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .logo .mark svg{ width:20px; height:20px; }
  .logo .dim{ color: var(--text-dim); font-weight:600; }
  .nav-links{ display:flex; gap:34px; align-items:center; }
  .nav-links a{
    font-size:14px; font-weight:600; color: var(--text-dim);
    text-transform:uppercase; letter-spacing:0.04em;
    transition: color .15s ease;
  }
  .nav-links a:hover{ color: var(--text); }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family: var(--body); font-weight:600; font-size:14px;
    padding: 12px 22px; border-radius: var(--radius); border:1px solid transparent;
    cursor:pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
  }
  .btn-primary{ background: var(--amber); color:#14181d; }
  .btn-primary:hover{ background:#ffc450; transform: translateY(-1px); }
  .btn-ghost{ border-color: var(--line); color: var(--text); background:transparent; }
  .btn-ghost:hover{ border-color: var(--text-dim); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .burger{
    display:none; background:none; border:1px solid transparent; color:var(--text); cursor:pointer;
    width:48px; height:48px; align-items:center; justify-content:center; border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent; flex-shrink:0;
  }
  .burger:hover, .burger:active{ background: var(--panel); border-color: var(--line); }
  .burger svg{ width:26px; height:26px; }

  /* ---------- HERO ---------- */
  .hero{ padding: 72px 0 40px; position:relative; }
  .hero-grid{ display:grid; grid-template-columns: 1.05fr 0.7fr; gap:60px; align-items:start; }
  .hero h1{
    font-size: clamp(48px, 6.2vw, 92px);
    color: var(--text);
  }
  .hero h1 em{
    font-style:normal; color: var(--amber);
  }
  .hero p.lead{
    font-size:18px; color: var(--text-dim); max-width:520px; margin-top:22px;
  }
  .hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

  .manifest-card{
    background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px;
  }
  .manifest-card .mh{
    display:flex; justify-content:space-between; align-items:center;
    font-family: var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color: var(--text-dimmer); border-bottom:1px dashed var(--line); padding-bottom:14px; margin-bottom:16px;
  }
  .manifest-card .mh .live{ color: var(--teal); display:flex; align-items:center; gap:6px; }
  .live-dot{ width:7px; height:7px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(85,184,166,0.5); animation: pulse 2s infinite; }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(85,184,166,0.5); }
    70%{ box-shadow: 0 0 0 8px rgba(85,184,166,0); }
    100%{ box-shadow: 0 0 0 0 rgba(85,184,166,0); }
  }
  .stat-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .stat-row:last-child{ border-bottom:none; }
  .stat-row .label{ color: var(--text-dim); font-size:14px; }
  .stat-row .val{ font-family: var(--mono); font-weight:600; font-size:15px; }
  .val.amber{ color: var(--amber); }
  .val.teal{ color: var(--teal); }

  /* EU network map signature animation */
  .route-wrap{
    margin-top:56px; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
    padding: 26px 30px 14px;
  }
  .eu-map-head{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    font-family: var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color: var(--text-dimmer); border-bottom:1px dashed var(--line); padding-bottom:14px; margin-bottom:6px;
  }
  .eu-map-title{ color: var(--text-dim); }
  .route-svg{ width:100%; height:auto; overflow: visible; display:block; }
  .landmass{ fill: rgba(232,226,208,0.045); stroke: rgba(232,226,208,0.16); stroke-width:1.2; }
  .lane{ stroke: var(--line); stroke-width:1.5; fill:none; }
  .lane-dash{
    stroke: var(--laneline); stroke-width:1.5; stroke-dasharray: 10 10; fill:none; opacity:0.5;
    animation: flow 2.4s linear infinite;
  }
  @keyframes flow{ to{ stroke-dashoffset: -40; } }
  .city-dot{ fill: var(--bg); stroke: var(--amber); stroke-width:2; }
  .city-label{ font-family: var(--mono); font-size:10px; fill: var(--text-dim); letter-spacing: .04em; text-transform:uppercase; text-anchor:middle; }
  .truck-route{ offset-rotate: auto; animation-name: drive; animation-timing-function: linear; animation-iteration-count: infinite; }
  @keyframes drive{ from{ offset-distance: 0%; } to{ offset-distance: 100%; } }
  .truck-trailer{ fill: var(--amber); }
  .truck-stripe{ fill: rgba(20,24,29,0.28); }
  .truck-cab{ fill: var(--text); }
  .truck-windshield{ fill: rgba(20,24,29,0.55); }
  .truck-wheel{ fill: #14181d; }
  .truck-hub{ fill: var(--text-dimmer); }

  @media (prefers-reduced-motion: reduce){
    .lane-dash, .truck-route, .live-dot, html{ animation: none !important; scroll-behavior:auto; }
  }
  @media (max-width: 720px){
    .route-wrap{ padding: 20px 16px 10px; }
  }

  /* ---------- LOGO STRIP ---------- */
  .trust-strip{
    border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
    padding: 30px 0; background: var(--bg-alt);
  }
  .trust-strip .wrap{
    display:flex; align-items:center; gap:40px; justify-content:space-between; flex-wrap:wrap;
  }
  .trust-strip .tag{ font-family: var(--mono); font-size:12px; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
  .trust-logos{ display:flex; gap:44px; flex-wrap:wrap; align-items:center; }
  .trust-logos span{ font-family: var(--display); font-weight:600; font-size:20px; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.04em; }

  /* ---------- SECTION HEADERS ---------- */
  .section-head{ max-width:680px; margin-bottom:56px; }
  .section-head h2{ font-size: clamp(32px, 4vw, 48px); }
  .section-head p{ color: var(--text-dim); margin-top:16px; font-size:16px; max-width: 560px; }

  /* ---------- SERVICES ---------- */
  .cargo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
  .cargo-tag{ background: var(--panel); padding: 32px 28px; transition: background .2s ease; position:relative; }
  .cargo-tag:hover{ background: var(--panel-2); }
  .cargo-tag .code{ font-family: var(--mono); font-size:12px; color: var(--amber); letter-spacing:.08em; }
  .cargo-tag h3{ font-size:26px; margin-top:10px; margin-bottom:10px; }
  .cargo-tag p{ color: var(--text-dim); font-size:14.5px; }
  .cargo-tag .spec{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); font-family: var(--mono); font-size:12px; color: var(--text-dimmer); }

  /* ---------- PROCESS (route waypoints) ---------- */
  .route-process{ position:relative; }
  .waypoints{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; position:relative; }
  .waypoint-line{ position:absolute; top:19px; left:0; right:0; height:2px; background: repeating-linear-gradient(to right, var(--laneline) 0 14px, transparent 14px 28px); opacity:.4; z-index:0; }
  .waypoint{ position:relative; z-index:1; padding-right:24px; }
  .wp-marker{ width:40px; height:40px; border-radius:50%; background: var(--bg); border:2px solid var(--amber); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600; color:var(--amber); margin-bottom:22px; }
  .waypoint h4{ font-size:21px; margin-bottom:10px; }
  .waypoint p{ color: var(--text-dim); font-size:14.5px; }
  .waypoint .tag{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11px; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.08em; }

  /* ---------- COVERAGE / NETWORK ---------- */
  .network-panel{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:56px; display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
  .network-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; }
  .big-stat .num{ font-family: var(--display); font-size:56px; color: var(--amber); line-height:1; }
  .big-stat .num small{ font-size:24px; color: var(--text-dim); }
  .big-stat .label{ font-family: var(--mono); font-size:12px; color: var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:8px; }

  /* ---------- FLEET TABLE ---------- */
  .fleet-table{ width:100%; border-collapse: collapse; }
  .fleet-table th{
    text-align:left; font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color: var(--text-dimmer); padding: 14px 20px; border-bottom:1px solid var(--line);
  }
  .fleet-table td{ padding: 20px; border-bottom:1px solid var(--line-soft); font-size:15px; }
  .fleet-table tr:last-child td{ border-bottom:none; }
  .fleet-table td.name{ font-family: var(--display); font-weight:700; text-transform:uppercase; font-size:18px; }
  .fleet-table td.mono{ font-family: var(--mono); font-size:13px; color: var(--text-dim); }
  .fleet-table tbody tr{ transition: background .15s ease; }
  .fleet-table tbody tr:hover{ background: var(--panel); }

  /* ---------- TESTIMONIALS ---------- */
  .quote-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
  .quote-card{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; height:100%; }
  .quote-card .stars{ color: var(--amber); font-family: var(--mono); font-size:13px; letter-spacing:2px; margin-bottom:16px; }
  .quote-card p.q{ font-size:15.5px; color: var(--text); flex:1; }
  .quote-card .who{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft); }
  .quote-card .who .n{ font-weight:600; font-size:14px; }
  .quote-card .who .r{ font-family: var(--mono); font-size:12px; color: var(--text-dimmer); margin-top:2px; }

  /* ---------- CTA SPLIT ---------- */
  .cta-split{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background: var(--line); border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }
  .cta-panel{ padding:56px; background: var(--panel); position:relative; }
  .cta-panel.amber-panel{ background: var(--amber); color:#14181d; }
  .cta-panel .eyebrow{ color: inherit; opacity:.75; }
  .cta-panel.amber-panel .eyebrow::before{ background:#14181d; }
  .cta-panel h3{ font-size: clamp(28px,3vw,38px); margin-bottom:16px; }
  .cta-panel p{ color: var(--text-dim); margin-bottom:26px; max-width:400px; }
  .cta-panel.amber-panel p{ color: rgba(20,24,29,0.75); }
  .cta-panel.amber-panel .btn-primary{ background:#14181d; color: var(--amber); }
  .cta-panel.amber-panel .btn-primary:hover{ background:#22282f; }

  /* quote form (visual only) */
  .quote-form{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:8px; }
  .quote-form .full{ grid-column: 1 / -1; }
  .quote-form label{ display:block; font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dimmer); margin-bottom:6px; }
  .quote-form input, .quote-form select{
    width:100%; background: var(--bg-alt); border:1px solid var(--line); color: var(--text);
    padding:11px 13px; border-radius:4px; font-family: var(--body); font-size:14px;
  }
  .quote-form input:focus, .quote-form select:focus{ border-color: var(--amber); outline:none; }
  .quote-form .btn{ width:100%; margin-top:6px; }

  /* ---------- FOOTER ---------- */
  footer{ background: var(--bg-alt); border-top:1px solid var(--line-soft); padding: 64px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-soft); }
  .footer-grid h5{ font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-dimmer); margin-bottom:18px; }
  .footer-grid ul li{ margin-bottom:11px; }
  .footer-grid ul li a{ color: var(--text-dim); font-size:14.5px; transition:color .15s ease; }
  .footer-grid ul li a:hover{ color: var(--text); }
  .social-icons{ display:flex; gap:12px; margin-top:22px; }
  .social-icons a{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color: var(--text-dim);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .social-icons a svg{ width:17px; height:17px; }
  .social-icons a:hover{ background: var(--amber); border-color: var(--amber); color:#14181d; }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:12px; }
  .footer-bottom p{ color: var(--text-dimmer); font-size:13px; font-family: var(--mono); }

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

  /* ---------- responsive ---------- */
  @media (max-width: 980px){
    .hero-grid{ grid-template-columns:1fr; }
    .network-panel{ grid-template-columns:1fr; padding:36px; }
    .cargo-grid{ grid-template-columns: repeat(2,1fr); }
    .quote-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    .cta-split{ grid-template-columns:1fr; }
    .waypoints{ grid-template-columns:1fr 1fr; row-gap:36px; }
    .waypoint-line{ display:none; }
  }
  @media (max-width: 720px){
    .nav-links{ display:none; }
    .burger{ display:flex; }
    .wrap{ padding:0 20px; }
    .section{ padding:70px 0; }
    .cargo-grid{ grid-template-columns:1fr; }
    .network-stats{ grid-template-columns:1fr 1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
    .waypoints{ grid-template-columns:1fr; }
    nav.wrap{ gap:10px; }
    .logo{ font-size:19px; gap:8px; }
    .nav-cta .btn-primary{ padding:11px 16px; font-size:13px; }
    .nav-links a{ display:block; padding:14px 4px; font-size:16px; }
  }
  @media (max-width: 420px){
    .logo .dim{ display:none; }
    .nav-cta .btn-primary{ padding:10px 12px; font-size:12.5px; }
  }