:root{
    --navy:#0B1226;
    --navy-soft:#141C36;
    --paper:#F7F5F0;
    --paper-dim:#EDEAE2;
    --mint:#3DDC84;
    --mint-deep:#1C9A5E;
    --steel:#6B7280;
    --amber:#E8862C;
    --line: rgba(11,18,38,0.10);
    --shadow: 0 20px 50px rgba(11,18,38,0.18);
    --display: 'Big Shoulders Display', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    background:var(--paper);
    color:var(--navy);
    font-family:var(--body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(247,245,240,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 32px;
    max-width:1180px;
    margin:0 auto;
    gap:18px;
  }
  .brand{display:flex; align-items:center;}
  .brand-img-horizontal{height:38px; width:auto; object-fit:contain; display:block;}
  nav.links{
    display:flex;
    gap:28px;
    font-size:0.92rem;
    font-weight:600;
    margin-left:auto;
  }
  nav.links a{
    position:relative;
    padding:6px 0;
    color:var(--navy);
    opacity:0.75;
    transition:opacity 0.2s ease;
  }
  nav.links a:hover{opacity:1;}
  nav.links a:focus-visible, .brand:focus-visible, .btn:focus-visible, .lang-btn:focus-visible{
    outline:2px solid var(--mint-deep);
    outline-offset:3px;
    border-radius:4px;
  }
  .nav-right{display:flex; align-items:center; gap:14px;}
  .lang-toggle{
    display:flex;
    gap:2px;
    background:rgba(11,18,38,0.06);
    border-radius:100px;
    padding:3px;
  }
  .lang-btn{
    padding:6px 11px;
    border-radius:100px;
    font-family:var(--mono);
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.05em;
    background:transparent;
    border:none;
    cursor:pointer;
    color:var(--steel);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .lang-btn.active{background:var(--navy); color:var(--paper);}
  .nav-cta{
    background:var(--navy);
    color:var(--paper);
    padding:10px 20px;
    border-radius:6px;
    font-weight:700;
    font-size:0.88rem;
    letter-spacing:0.01em;
    transition:transform 0.2s ease, background 0.2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--mint-deep); transform:translateY(-1px);}

  @media (max-width:840px){
    nav.links{display:none;}
    .nav-cta{padding:9px 14px; font-size:0.8rem;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--navy);
    color:var(--paper);
    overflow:hidden;
    padding:84px 0 0;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 700px 500px at 85% 15%, rgba(61,220,132,0.16), transparent 60%),
      repeating-linear-gradient(100deg, rgba(247,245,240,0.025) 0px, rgba(247,245,240,0.025) 1px, transparent 1px, transparent 64px);
    pointer-events:none;
  }
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:56px;
    align-items:center;
    padding-bottom:64px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:0.74rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--mint);
    border:1px solid rgba(61,220,132,0.35);
    background:rgba(61,220,132,0.08);
    padding:7px 14px;
    border-radius:100px;
    margin-bottom:24px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 0 rgba(61,220,132,0.6);
    animation:pulse 2.2s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(61,220,132,0.55);}
    70%{box-shadow:0 0 0 8px rgba(61,220,132,0);}
    100%{box-shadow:0 0 0 0 rgba(61,220,132,0);}
  }
  h1{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(2.4rem, 5vw, 3.9rem);
    line-height:1.04;
    letter-spacing:-0.01em;
    text-transform:uppercase;
  }
  h1 em{font-style:normal; color:var(--mint);}
  .hero p.lead{
    margin-top:22px;
    font-size:1.1rem;
    color:rgba(247,245,240,0.78);
    max-width:500px;
    line-height:1.6;
  }
  .hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:6px;
    font-weight:700;
    font-size:0.94rem;
    letter-spacing:0.01em;
    transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    cursor:pointer;
    border:none;
  }
  .btn-primary{background:var(--mint); color:var(--navy);}
  .btn-primary:hover{background:#5BE89C; transform:translateY(-2px);}
  .btn-ghost{background:transparent; color:var(--paper); border:1px solid rgba(247,245,240,0.3);}
  .btn-ghost:hover{border-color:var(--mint); color:var(--mint); transform:translateY(-2px);}

  .gauge-wrap{position:relative; display:flex; flex-direction:column; align-items:center; z-index:2;}
  .gauge-card{
    background:rgba(247,245,240,0.04);
    border:1px solid rgba(247,245,240,0.12);
    border-radius:16px;
    padding:32px 28px 26px;
    width:100%;
    max-width:360px;
    backdrop-filter:blur(6px);
  }
  .gauge-label{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(247,245,240,0.55);
    text-align:center;
    margin-bottom:6px;
  }
  .gauge-svg{display:block; margin:0 auto;}
  .gauge-number{
    font-family:var(--mono);
    font-weight:700;
    font-size:2rem;
    text-align:center;
    color:var(--mint);
    margin-top:-8px;
    letter-spacing:-0.01em;
  }
  .gauge-unit{
    text-align:center;
    font-size:0.78rem;
    color:rgba(247,245,240,0.6);
    margin-top:2px;
    letter-spacing:0.04em;
  }
  .gauge-foot{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(247,245,240,0.12);
  }
  .gauge-foot div{text-align:center; flex:1;}
  .gauge-foot .v{font-family:var(--mono); font-weight:700; font-size:0.98rem; color:var(--paper);}
  .gauge-foot .k{font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(247,245,240,0.5); margin-top:3px;}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:48px; text-align:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .hero-actions{justify-content:center;}
    .gauge-wrap{order:-1;}
  }

  /* ---------- Marquee strip ---------- */
  .strip{background:var(--mint); color:var(--navy); overflow:hidden; white-space:nowrap; border-top:1px solid rgba(11,18,38,0.08);}
  .strip-track{
    display:inline-flex; align-items:center; gap:48px; padding:11px 0;
    font-family:var(--mono); font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    animation:scroll 28s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){.strip-track{animation:none;}}
  .strip-track span{display:inline-flex; align-items:center; gap:48px;}
  .strip-track span::after{content:"●"; opacity:0.5; margin-left:48px;}
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ---------- SECTION shared ---------- */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .kicker{
    font-family:var(--mono); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--mint-deep); margin-bottom:14px; display:block;
  }
  h2{
    font-family:var(--display); font-weight:800; font-size:clamp(1.85rem, 3.2vw, 2.5rem);
    text-transform:uppercase; letter-spacing:-0.005em; line-height:1.1;
  }
  .section-head p{margin-top:14px; color:var(--steel); font-size:1.03rem; line-height:1.6;}

  /* ---------- PRODUCTS ---------- */
  .products{background:var(--paper);}
  .product-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .product-card{
    position:relative; background:var(--navy); color:var(--paper);
    border-radius:14px; padding:38px 34px 32px; overflow:hidden; box-shadow:var(--shadow);
  }
  .product-card.diesel{background:var(--navy-soft);}
  .product-card::before{content:""; position:absolute; top:0; left:0; width:6px; height:100%;}
  .product-card.petrol::before{background:var(--mint);}
  .product-card.diesel::before{background:var(--amber);}
  .product-index{font-family:var(--mono); font-size:0.74rem; letter-spacing:0.1em; color:rgba(247,245,240,0.5); text-transform:uppercase;}
  .product-card h3{font-family:var(--display); font-weight:800; font-size:1.85rem; text-transform:uppercase; margin-top:14px; letter-spacing:-0.005em;}
  .product-card p{margin-top:14px; color:rgba(247,245,240,0.72); font-size:0.97rem; line-height:1.65;}
  .product-specs{display:flex; gap:22px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(247,245,240,0.14);}
  .product-specs div{flex:1;}
  .product-specs .v{font-family:var(--mono); font-weight:700; font-size:0.96rem;}
  .product-card.petrol .v{color:var(--mint);}
  .product-card.diesel .v{color:var(--amber);}
  .product-specs .k{font-size:0.68rem; color:rgba(247,245,240,0.5); text-transform:uppercase; letter-spacing:0.06em; margin-top:3px;}

  @media (max-width:760px){.product-grid{grid-template-columns:1fr;}}

  /* ---------- DEPOT ---------- */
  .depot{background:var(--navy); color:var(--paper); position:relative; overflow:hidden;}
  .depot::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 600px 400px at 10% 90%, rgba(61,220,132,0.10), transparent 60%),
      var(--pattern-url);
    background-size:auto, 260px 260px;
  }
  .depot::after{content:""; position:absolute; inset:0; background:var(--navy); opacity:0.94;}
  .depot-grid{position:relative; z-index:1; display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
  .depot .kicker{color:var(--mint);}
  .depot h2{color:var(--paper);}
  .depot p.copy{margin-top:18px; color:rgba(247,245,240,0.72); font-size:1.01rem; line-height:1.7; max-width:480px;}
  .depot-stats{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px;}
  .dstat{border:1px solid rgba(247,245,240,0.14); border-radius:10px; padding:18px 18px;}
  .dstat .v{font-family:var(--mono); font-weight:700; font-size:1.25rem; color:var(--mint);}
  .dstat .k{margin-top:6px; font-size:0.77rem; color:rgba(247,245,240,0.58); line-height:1.4;}

  .tank-visual{display:flex; justify-content:center;}
  .tank-card{
    background:rgba(247,245,240,0.03); border:1px solid rgba(247,245,240,0.12);
    border-radius:16px; padding:28px; width:100%; max-width:380px;
  }
  .tank-row-dual{display:flex; align-items:flex-end; justify-content:center; gap:36px; height:200px; margin-bottom:16px;}
  .tank-col{display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end;}
  .tank{
    width:80px; height:180px; border:2px solid rgba(247,245,240,0.25); border-radius:6px;
    position:relative; overflow:hidden; background:rgba(247,245,240,0.03);
  }
  .tank .fill{
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(180deg, var(--mint), var(--mint-deep));
    height:0; animation:fillUp 1.8s ease-out forwards;
  }
  .tank-petrol .fill{background:linear-gradient(180deg, var(--mint), var(--mint-deep)); --h:60%; animation-delay:0.3s;}
  .tank-diesel .fill{background:linear-gradient(180deg, var(--amber), #B8631C); --h:100%; animation-delay:0.1s;}
  @keyframes fillUp{to{height:var(--h);}}
  @media (prefers-reduced-motion: reduce){.tank .fill{animation:none; height:var(--h);}}
  .tank-name{margin-top:12px; font-family:var(--display); font-weight:700; font-size:0.95rem; text-transform:uppercase; color:var(--paper);}
  .tank-value{font-family:var(--mono); font-size:0.78rem; color:rgba(247,245,240,0.6); margin-top:2px;}
  .tank-caption{text-align:center; font-family:var(--mono); font-size:0.7rem; color:rgba(247,245,240,0.45); letter-spacing:0.05em; text-transform:uppercase; padding-top:8px; border-top:1px solid rgba(247,245,240,0.1);}

  @media (max-width:900px){.depot-grid{grid-template-columns:1fr; gap:40px;}}

  /* ---------- STATIONS ---------- */
  .stations{background:var(--paper);}
  .station-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
  .station-card{
    background:var(--paper-dim);
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px 24px;
  }
  .station-icon{
    width:42px; height:42px; border-radius:10px;
    background:rgba(61,220,132,0.12); border:1px solid rgba(61,220,132,0.3);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .station-icon svg{width:20px; height:20px; stroke:var(--mint-deep);}
  .station-name{font-family:var(--display); font-weight:800; font-size:1.2rem; text-transform:uppercase; letter-spacing:-0.005em;}
  .station-loc{margin-top:6px; font-size:0.88rem; color:var(--steel);}
  .station-tag{
    display:inline-block; margin-top:16px; font-family:var(--mono); font-size:0.68rem;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--mint-deep);
    background:rgba(28,154,94,0.08); border:1px solid rgba(28,154,94,0.25);
    padding:5px 11px; border-radius:100px;
  }
  @media (max-width:760px){.station-grid{grid-template-columns:1fr;}}

  /* ---------- ABOUT ---------- */
  .about{background:var(--paper-dim);}
  .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
  .about-card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:30px;}
  .about-card .brand-row-vertical{display:flex; justify-content:center; padding:8px 0 22px; margin-bottom:18px; border-bottom:1px solid var(--line);}
  .about-logo-vertical{width:100%; max-width:190px; height:auto; object-fit:contain;}
  .about-list{list-style:none; margin-top:8px;}
  .about-list li{display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:0.92rem;}
  .about-list li:first-child{border-top:none;}
  .about-list .tag{
    font-family:var(--mono); font-size:0.7rem; color:var(--mint-deep); font-weight:700;
    min-width:96px; text-transform:uppercase; letter-spacing:0.04em; padding-top:1px;
  }
  .about-copy p{color:var(--navy); font-size:1.02rem; line-height:1.75; margin-bottom:18px;}
  .about-copy p:last-child{margin-bottom:0;}
  .about-copy strong{color:var(--navy);}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;}}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--navy); color:var(--paper);}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
  .contact h2{color:var(--paper);}
  .contact .kicker{color:var(--mint);}
  .contact p.copy{margin-top:16px; color:rgba(247,245,240,0.72); font-size:1.01rem; line-height:1.65; max-width:440px;}
  .contact-list{margin-top:30px; display:flex; flex-direction:column; gap:20px;}
  .contact-item{display:flex; gap:16px; align-items:flex-start;}
  .contact-item .icon{
    width:38px; height:38px; border-radius:8px;
    background:rgba(61,220,132,0.12); border:1px solid rgba(61,220,132,0.3);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-item .icon svg{width:18px; height:18px; stroke:var(--mint);}
  .contact-item .k{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(247,245,240,0.5); margin-bottom:5px;}
  .contact-item .v{font-family:var(--mono); font-size:0.95rem; color:var(--paper); line-height:1.7;}

  .contact-form{background:rgba(247,245,240,0.04); border:1px solid rgba(247,245,240,0.12); border-radius:14px; padding:32px;}
  .contact-form .note{font-family:var(--mono); font-size:0.73rem; color:rgba(247,245,240,0.5); margin-bottom:20px; line-height:1.5;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:0.78rem; color:rgba(247,245,240,0.65); margin-bottom:7px; letter-spacing:0.02em;}
  .field input, .field select, .field textarea{
    width:100%; background:rgba(247,245,240,0.06); border:1px solid rgba(247,245,240,0.18);
    border-radius:7px; padding:12px 14px; color:var(--paper); font-family:var(--body); font-size:0.94rem;
  }
  .field input::placeholder, .field textarea::placeholder{color:rgba(247,245,240,0.35);}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--mint); outline-offset:1px; border-color:var(--mint);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .contact-form .btn-primary{width:100%; justify-content:center; margin-top:6px;}

  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;} .field-row{grid-template-columns:1fr;}}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy); border-top:1px solid rgba(247,245,240,0.1); padding:32px 0;}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  .footer-brand{display:flex; align-items:center; gap:10px;}
  .footer-logo-symbol{height:30px; width:auto; object-fit:contain;}
  .footer-brand span{font-family:var(--display); font-weight:800; font-size:0.92rem; color:var(--paper); text-transform:uppercase;}
  .footer-meta{font-size:0.78rem; color:rgba(247,245,240,0.45);}

  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .nav{padding:14px 20px;}
    section{padding:64px 0;}
  }