:root{
    --board-blue: #0F3D5C;
    --board-blue-deep: #0A2B41;
    --sign-yellow: #F5B942;
    --charge-green: #2E8B57;
    --charge-green-deep: #1F6B41;
    --paper: #FAF6EC;
    --paper-dim: #F0E9D8;
    --ink: #17191B;
    --ink-soft: #4A4E52;
    --rust: #C1440E;
    --line: rgba(15,61,92,0.16);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Work Sans', sans-serif; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3, .display{ font-family:'Baloo 2', sans-serif; letter-spacing:0.2px; }
  .mono{ font-family:'JetBrains Mono', monospace; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }

  .stripe-rule{
    height:8px;
    background:repeating-linear-gradient(-45deg, var(--sign-yellow) 0 14px, var(--board-blue) 14px 28px);
  }

  /* ============ HEADER ============ */
  header{ position:sticky; top:0; z-index:60; background:var(--board-blue); border-bottom:3px solid var(--board-blue-deep); }
  .nav-wrap{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 24px; gap:16px; }
  .brand{ display:flex; align-items:center; gap:10px; color:var(--paper); text-decoration:none; }
  .brand img{ width:46px; height:46px; border-radius:50%; border:2px solid var(--sign-yellow); background:#fff; object-fit:cover; flex:none; }
  .brand-name{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1.02rem; line-height:1.05; }
  .brand-name small{ display:block; font-family:'Work Sans',sans-serif; font-weight:500; font-size:0.6rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--sign-yellow); margin-top:3px; }
  nav.links{ display:flex; align-items:center; gap:26px; }
  nav.links a{ text-decoration:none; color:var(--paper); font-weight:600; font-size:0.9rem; opacity:0.9; padding:4px 2px; border-bottom:2px solid transparent; }
  nav.links a:hover, nav.links a.active{ opacity:1; color:var(--sign-yellow); border-bottom-color:var(--sign-yellow); }
  .call-btn{ background:var(--sign-yellow); color:var(--board-blue-deep); padding:9px 18px; border-radius:999px; font-weight:700; font-size:0.86rem; text-decoration:none; white-space:nowrap; border:2px solid var(--board-blue-deep); }
  .call-btn:hover{ background:#fff; }
  .menu-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:1.5rem; cursor:pointer; }

  @media (max-width:900px){
    nav.links{
      position:fixed; top:65px; left:0; right:0; bottom:0;
      background:var(--board-blue-deep); flex-direction:column; align-items:flex-start;
      padding:24px; gap:6px; transform:translateX(-100%); transition:transform 0.25s ease; overflow-y:auto;
    }
    nav.links.open{ transform:translateX(0); }
    nav.links a{ width:100%; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,0.08); font-size:1rem; }
    .menu-toggle{ display:block; }
  }

  /* ============ HERO ============ */
  .hero{ background: radial-gradient(ellipse at 15% -10%, rgba(245,185,66,0.16), transparent 55%), var(--board-blue); color:var(--paper); padding:56px 24px 0; overflow:hidden; }
  .hero-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; padding-bottom:56px; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--sign-yellow); border:1px solid rgba(245,185,66,0.4); padding:6px 12px; border-radius:999px; margin-bottom:22px; }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--charge-green); box-shadow:0 0 0 3px rgba(46,139,87,0.3);}
  .hero h1{ font-size:clamp(2.0rem, 4vw, 3.1rem); line-height:1.08; margin:0 0 18px; font-weight:800; }
  .hero h1 .accent{ color:var(--sign-yellow); }
  .hero p.lede{ font-size:1.03rem; line-height:1.6; color:rgba(250,246,236,0.82); max-width:48ch; margin:0 0 30px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:8px; font-weight:700; font-size:0.92rem; text-decoration:none; border:2px solid transparent; transition:transform 0.15s ease; }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--sign-yellow); color:var(--board-blue-deep); border-color:var(--board-blue-deep);}
  .btn-ghost{ background:transparent; color:var(--paper); border-color:rgba(250,246,236,0.4);}
  .btn-ghost:hover{ border-color:var(--paper); }
  .rating-row{ display:flex; align-items:center; gap:12px; color:rgba(250,246,236,0.75); font-size:0.85rem; flex-wrap:wrap; }
  .stars{ color:var(--sign-yellow); letter-spacing:2px; font-size:1rem; }

  .hero-logo-panel{
    background:#fff; border-radius:16px; padding:26px;
    box-shadow:12px 14px 0 rgba(0,0,0,0.28); transform:rotate(1.2deg);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    border:6px solid var(--sign-yellow);
  }
  .hero-logo-panel img{ width:min(280px, 78%); margin-bottom:6px; }
  .hero-logo-panel .tag{ font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--board-blue-deep); font-size:1.05rem; }

  /* ============ TRUST STRIP ============ */
  .trust-strip{ background:var(--sign-yellow); border-top:3px solid var(--board-blue-deep); border-bottom:3px solid var(--board-blue-deep); }
  .trust-inner{ max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; flex-wrap:wrap; gap:10px 32px; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:0.76rem; color:var(--board-blue-deep); font-weight:500; }
  .trust-inner span{ display:flex; align-items:center; gap:8px; }
  .trust-inner b{ font-weight:700; }

  /* ============ SECTION GENERIC ============ */
  section{ padding:84px 24px; scroll-margin-top:80px; }
  .section-inner{ max-width:1180px; margin:0 auto; }
  .kicker{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--rust); margin-bottom:12px; font-weight:500; }
  .section-head{ max-width:640px; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(1.65rem,3vw,2.3rem); margin:0 0 14px; font-weight:700;}
  .section-head p{ color:var(--ink-soft); line-height:1.65; font-size:1rem; margin:0;}

  /* ============ ABOUT ============ */
  .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; }
  .about-logo-card{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:28px; text-align:center; }
  .about-logo-card img{ margin:0 auto 14px; width:min(220px,80%); }
  .about-logo-card .est{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:1.5px; color:var(--ink-soft); text-transform:uppercase; }
  .about-copy p{ line-height:1.7; color:var(--ink-soft); font-size:1rem; margin:0 0 16px; }
  .about-values{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
  .about-values li{ display:flex; gap:10px; align-items:flex-start; font-size:0.94rem; }
  .about-values svg{ flex:none; margin-top:3px; width:17px; height:17px; color:var(--charge-green); }

  /* ============ PRODUCTS ============ */
  .lanes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .lane{ border-radius:14px; padding:32px 26px 28px; position:relative; overflow:hidden; }
  .lane.rickshaw{ background:var(--board-blue); color:var(--paper); }
  .lane.scooter{ background:var(--charge-green-deep); color:var(--paper); }
  .lane.solar{ background:var(--sign-yellow); color:var(--board-blue-deep); }
  .lane-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:1.4px; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:16px; }
  .lane.rickshaw .lane-tag, .lane.scooter .lane-tag{ background:rgba(245,185,66,0.16); color:var(--sign-yellow); border:1px solid rgba(245,185,66,0.4);}
  .lane.solar .lane-tag{ background:rgba(15,61,92,0.1); color:var(--board-blue-deep); border:1px solid rgba(15,61,92,0.3);}
  .lane h3{ font-size:1.3rem; margin:0 0 8px; font-weight:700; }
  .lane p.desc{ line-height:1.6; margin:0 0 20px; font-size:0.9rem; }
  .lane.rickshaw p.desc, .lane.scooter p.desc{ color:rgba(250,246,236,0.82); }
  .lane.solar p.desc{ color:rgba(10,43,65,0.78); }
  .lane ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .lane li{ display:flex; gap:9px; align-items:flex-start; font-size:0.86rem; line-height:1.5;}
  .lane li svg{ flex:none; margin-top:3px; width:16px; height:16px; }
  .lane.rickshaw li svg, .lane.scooter li svg{ color:var(--sign-yellow); }
  .lane.solar li svg{ color:var(--rust); }
  .lane-icon{ position:absolute; right:-14px; bottom:-18px; opacity:0.1; width:130px; height:130px; }

  /* ============ GALLERY ============ */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
    grid-auto-rows:180px;
  }
  .gallery-grid figure{ margin:0; position:relative; overflow:hidden; border-radius:10px; border:1.5px solid var(--line); cursor:pointer; background:#000;}
  .gallery-grid img, .gallery-grid video{ width:100%; height:100%; object-fit:cover; transition:transform 0.35s ease; }
  .gallery-grid figure:hover img, .gallery-grid figure:hover video{ transform:scale(1.06); }
  .gallery-grid figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:10px 12px 8px;
    font-size:0.72rem; color:#fff; background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    font-family:'JetBrains Mono',monospace; letter-spacing:0.3px;
  }
  .gallery-grid .big{ grid-column:span 2; grid-row:span 2; }
  .gallery-grid .video-badge{
    position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); color:#fff;
    border-radius:999px; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  }
  @media (max-width:900px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .gallery-grid .big{ grid-column:span 2; grid-row:span 1; }
  }

  /* lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(10,15,20,0.92); z-index:100;
    display:none; align-items:center; justify-content:center; padding:32px;
  }
  .lightbox.open{ display:flex; }
  .lightbox img, .lightbox video{ max-width:min(920px,92vw); max-height:86vh; border-radius:8px; }
  .lightbox .close{
    position:absolute; top:20px; right:24px; background:none; border:none; color:#fff;
    font-size:2rem; cursor:pointer; line-height:1;
  }
  .lightbox .cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:rgba(255,255,255,0.75); font-family:'JetBrains Mono',monospace; font-size:0.8rem; }

  /* ============ REVIEWS ============ */
  .review-wrap{ background:var(--board-blue-deep); color:var(--paper); border-radius:16px; padding:44px 38px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; }
  .review-score{ text-align:center; }
  .review-score .big{ font-family:'Baloo 2',sans-serif; font-size:3.2rem; font-weight:800; color:var(--sign-yellow); line-height:1;}
  .review-score .stars{ margin:8px 0 6px; }
  .review-score .cap{ font-size:0.76rem; color:rgba(250,246,236,0.65); font-family:'JetBrains Mono',monospace;}
  .review-quote p{ font-size:1.08rem; line-height:1.6; margin:0 0 12px; color:rgba(250,246,236,0.92); font-family:'Baloo 2',sans-serif; font-weight:500;}
  .review-quote span{ color:rgba(250,246,236,0.6); font-size:0.84rem; }

  /* ============ CONTACT ============ */
  .contact-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:34px; }
  .contact-card{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:32px; }
  .info-row{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
  .info-row:last-child{ border-bottom:none; }
  .info-row .ic{ width:38px; height:38px; border-radius:8px; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; flex:none; color:var(--board-blue); }
  .info-row .ic svg{ width:18px; height:18px; }
  .info-row h5{ margin:0 0 4px; font-size:0.76rem; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); font-weight:600;}
  .info-row p, .info-row a{ margin:0; font-size:0.96rem; text-decoration:none; color:var(--ink); font-weight:600;}
  .info-row a:hover{ color:var(--board-blue); }
  .map-frame{ border-radius:14px; overflow:hidden; border:1.5px solid var(--line); min-height:320px; }
  .map-frame iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }

  /* ============ FOOTER ============ */
  footer{ background:var(--board-blue); color:rgba(250,246,236,0.7); }
  .footer-inner{ max-width:1180px; margin:0 auto; padding:32px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:0.84rem; }
  .footer-inner a{ color:var(--sign-yellow); text-decoration:none; font-weight:600; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:880px){
    .hero-inner{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .lanes{ grid-template-columns:1fr; }
    .review-wrap{ grid-template-columns:1fr; text-align:center; }
    .contact-grid{ grid-template-columns:1fr; }
    .trust-inner{ justify-content:center; text-align:center; }
    section{ padding:60px 20px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .btn, .gallery-grid img{ transition:none; }
  }