:root{
    --bg:#F6F5F1;
    --ink:#10151C;
    --ink-soft:#4A5160;
    --surface:#FFFFFF;
    --line:#E6E2D8;
    --blue:#2451FF;
    --blue-deep:#1739C4;
    --amber:#FFB020;
    --amber-deep:#E0961A;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.55;overflow-x:hidden;width:100%;
  }
  h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;margin:0;letter-spacing:-0.02em;color:var(--ink);}
  .mono{font-family:'JetBrains Mono','Courier New',monospace;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{padding:88px 0;}
  ::selection{background:var(--amber);color:var(--ink);}

  /* ---- header ---- */
  header{
    position:sticky;top:0;z-index:60;
    background:rgba(246,245,241,0.88);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;max-width:1180px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-mark{
    width:40px;height:40px;border-radius:10px;background:var(--ink);
    display:flex;align-items:center;justify-content:center;color:#fff;
    font-family:'Sora',sans-serif;font-weight:800;font-size:16px;flex-shrink:0;
  }
  .brand-mark-logo{object-fit:contain;background:var(--surface);padding:4px;}
  .brand-name{font-size:17px;font-weight:700;}
  .brand-sub{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em;margin-top:1px;}
  nav.links{display:flex;gap:36px;font-size:14px;font-weight:600;}
  nav.links a{color:var(--ink-soft);transition:color .15s;}
  nav.links a:hover{color:var(--ink);}
  .nav-cta{
    background:var(--blue);color:#fff;font-weight:700;font-size:13.5px;
    padding:12px 22px;border-radius:100px;white-space:nowrap;
    box-shadow:0 6px 16px rgba(36,81,255,.28);
  }
  .nav-cta:hover{background:var(--blue-deep);}
  .burger{display:none;background:none;border:none;font-size:24px;cursor:pointer;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--blue-deep);
    background:rgba(36,81,255,.08);border:1px solid rgba(36,81,255,.18);
    padding:7px 14px;border-radius:100px;letter-spacing:.04em;margin-bottom:22px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);}
  .hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
  .btn{
    padding:15px 26px;border-radius:100px;font-size:14.5px;font-weight:700;
    display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  }
  .btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(36,81,255,.28);}
  .btn-primary:hover{background:var(--blue-deep);}
  .btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--ink);}

  /* ---- hero banner (full-bleed photo) ---- */
  .hero-banner{
    position:relative;min-height:78vh;
    background:linear-gradient(135deg,#0B1220 0%,#16224A 45%,#1739C4 100%);
    background-size:cover;background-position:center;
    overflow:hidden;
  }
  .hero-banner::before{
    content:"";position:absolute;inset:0;z-index:0;
    background-image:radial-gradient(circle,rgba(255,255,255,.10) 1.5px,transparent 1.5px);
    background-size:26px 26px;opacity:.5;pointer-events:none;
  }
  .hero-scrim{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(6,9,15,.88) 0%,rgba(6,9,15,.68) 38%,rgba(6,9,15,.28) 68%,rgba(6,9,15,.05) 100%),
               linear-gradient(0deg,rgba(6,9,15,.55) 0%,transparent 45%);
  }
  .hero-banner-content{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding-top:0;padding-bottom:64px;
  }
  .eyebrow-on-photo{
    background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;
    backdrop-filter:blur(6px);
  }
  .eyebrow-on-photo .dot{background:var(--amber);}
  .hero-banner-headline{color:#fff;font-size:54px;font-weight:800;line-height:1.06;max-width:640px;}
  .hero-banner-lede{color:rgba(255,255,255,.82);font-size:17px;margin-top:20px;max-width:480px;}
  .btn-ghost-on-photo{
    background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4);
    backdrop-filter:blur(6px);
  }
  .btn-ghost-on-photo:hover{background:rgba(255,255,255,.18);}
  .hero-trust-row{
    display:flex;align-items:center;gap:12px;margin-top:34px;
    font-family:'JetBrains Mono',monospace;font-size:12.5px;color:rgba(255,255,255,.75);
  }
  .hero-trust-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);}
  @media (max-width:900px){
    .hero-banner{min-height:60vh;}
    .hero-banner-content{padding-bottom:40px;}
    .hero-banner-headline{font-size:36px;}
  }

  /* ---- spec strip (signature element) ---- */
  .spec-strip{
    background:var(--amber);border-radius:var(--radius);
    margin:80px 28px 0;max-width:1124px;margin-left:auto;margin-right:auto;
    transform:rotate(-0.6deg);
    box-shadow:0 18px 40px rgba(224,150,26,.25);
  }
  .spec-strip-inner{
    display:grid;grid-template-columns:repeat(4,1fr);
    transform:rotate(0.6deg);
  }
  .spec-item{
    padding:26px 22px;text-align:center;position:relative;
  }
  .spec-item:not(:last-child)::after{
    content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;
    background:repeating-linear-gradient(180deg,rgba(16,21,28,.35) 0 6px,transparent 6px 12px);
  }
  .spec-item .num{font-family:'Sora',sans-serif;font-weight:800;font-size:30px;}
  .spec-item .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;color:rgba(16,21,28,.75);}

  /* ---- section headers ---- */
  .section-head{max-width:560px;margin-bottom:48px;}
  .section-tag{
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--blue-deep);
    text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:12px;
  }
  .section-head h2{font-size:34px;font-weight:800;}
  .section-head p{color:var(--ink-soft);font-size:16px;margin-top:14px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

  /* ---- services ---- */
  .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .service-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:30px 26px;transition:transform .18s,box-shadow .18s;
  }
  .service-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(16,21,28,.08);}
  .service-icon{
    width:52px;height:52px;border-radius:12px;background:rgba(36,81,255,.08);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  }
  .service-icon svg{width:26px;height:26px;stroke:var(--blue);}
  .service-card h3{font-size:18px;margin-bottom:8px;}
  .service-card p{font-size:14px;color:var(--ink-soft);}

  /* ---- categories ---- */
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .cat-card{background:var(--surface);padding:36px 26px;transition:background .15s;}
  .cat-card:hover{background:#FBFAF6;}
  .cat-icon{width:44px;height:44px;margin-bottom:20px;}
  .cat-icon svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.6;}
  .cat-card h3{font-size:19px;margin-bottom:8px;}
  .cat-card p{font-size:13.5px;color:var(--ink-soft);}

  /* ---- why us ---- */
  .why-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .why-list{display:flex;flex-direction:column;gap:26px;}
  .why-row{display:flex;gap:18px;align-items:flex-start;}
  .why-row .check{
    width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-top:2px;
  }
  .why-row h4{font-size:16.5px;margin-bottom:5px;}
  .why-row p{font-size:14px;color:var(--ink-soft);}
  .why-visual{
    background:radial-gradient(circle at 15% 100%, #1739C4 0%, transparent 45%),
               linear-gradient(135deg, #10151C 0%, #0B1220 55%, #16224A 100%);
    border-radius:var(--radius);padding:36px;color:#fff;position:relative;overflow:hidden;
  }
  .why-visual::before{
    content:"";position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(36,81,255,.35),transparent 70%);
    top:-100px;right:-100px;
  }
  .why-visual .quote{font-family:'Sora',sans-serif;font-size:22px;font-weight:600;line-height:1.4;position:relative;}
  .why-visual .who{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--amber);position:relative;}

  /* ---- testimonials ---- */
  .quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
  .stars{color:var(--amber);font-size:14px;letter-spacing:2px;margin-bottom:14px;}
  .quote-card p{font-size:14.5px;color:var(--ink-soft);font-style:italic;}
  .quote-card .who{margin-top:16px;font-size:13.5px;font-weight:700;}
  .quote-card .who span{color:var(--ink-soft);font-weight:400;font-family:'JetBrains Mono',monospace;font-size:11.5px;}

  /* ---- showrooms ---- */
  .rooms-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .room-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;}
  .room-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
  .room-top h3{font-size:20px;}
  .room-pill{font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(36,81,255,.08);color:var(--blue-deep);padding:5px 12px;border-radius:100px;}
  .room-line{display:flex;gap:12px;font-size:14px;color:var(--ink-soft);margin-bottom:13px;}
  .room-line svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;stroke:var(--blue);}
  .room-line b{color:var(--ink);font-weight:600;}

  /* ---- CTA band ---- */
  .cta-section{padding:40px 0;}
  .cta-band{
    background:var(--ink);border-radius:24px;max-width:1124px;margin:0 auto;
    padding:64px 50px;color:#fff;display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;
    position:relative;overflow:hidden;text-align:center;
  }
  .cta-band::before{
    content:"";position:absolute;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,176,32,.28),transparent 70%);bottom:-160px;left:-100px;
  }
  .cta-band h2{font-size:30px;max-width:480px;position:relative;color:#fff;}
  .cta-band .btn-primary{position:relative;}

  /* ---- contact ---- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
  .field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:8px;font-family:'JetBrains Mono',monospace;}
  .field input,.field textarea{
    width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
    padding:13px 15px;font-size:14.5px;font-family:inherit;color:var(--ink);
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);}
  .field textarea{resize:vertical;min-height:120px;}
  .field{margin-bottom:18px;}

  /* ---- footer ---- */
  footer{background:var(--ink);color:#fff;padding:60px 0 28px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
  .foot-brand p{color:#9AA3B2;font-size:13.5px;margin-top:16px;max-width:260px;}
  .foot-col h4{font-size:12px;color:#9AA3B2;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;font-weight:600;}
  .foot-col a{display:block;color:#D6DAE3;font-size:13.5px;margin-bottom:12px;}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#8D96A6;flex-wrap:wrap;gap:10px;}

  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{height:320px;margin-top:20px;}
    .hero h1{font-size:38px;}
    .services-grid,.cat-grid{grid-template-columns:repeat(2,1fr);}
    .spec-strip-inner{grid-template-columns:repeat(2,1fr);}
    .spec-item:nth-child(2)::after{display:none;}
    .why-wrap,.rooms-grid,.quotes-grid,.contact-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    nav.links{display:none;}
    .burger{display:block;}
  }

/* ---- product catalog grid (dynamic products page/section) ---- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.product-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;
}
.product-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(16,21,28,.08);}
.product-media{aspect-ratio:1/1;background:#FBFAF6;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;}
.product-media img{width:100%;height:100%;object-fit:contain;}
.product-badge{position:absolute;top:10px;left:10px;background:var(--amber);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:100px;}
.product-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-cat{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;}
.product-name{font-size:16px;font-weight:700;}
.product-brand{font-size:13px;color:var(--ink-soft);}
.product-price{margin-top:auto;padding-top:10px;font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--blue-deep);}
.chip-filter{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;padding:9px 18px;border-radius:100px;
  border:1.5px solid var(--line);color:var(--ink-soft);display:inline-block;margin:0 8px 8px 0;
}
.chip-filter.active,.chip-filter:hover{border-color:var(--blue);color:var(--blue-deep);}
.empty-state{text-align:center;padding:70px 20px;border:1.5px dashed var(--line);border-radius:var(--radius);color:var(--ink-soft);}

/* ---- contact map embed ---- */
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.map-embed iframe{width:100%;height:260px;border:0;display:block;}
.map-embed-empty{
  height:260px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;background:var(--surface);color:var(--ink-soft);font-size:13.5px;
}
.flash{padding:14px 18px;border-radius:10px;font-size:13.5px;margin-bottom:20px;border:1.5px solid;}
.flash-success{background:rgba(36,81,255,.06);border-color:var(--blue);color:var(--blue-deep);}
.flash-error{background:rgba(224,87,74,.08);border-color:#E0574A;color:#C23B2E;}

@media (max-width:900px){ .product-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- brand marquee ---- */
.marquee-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;overflow:hidden;position:relative;background:#FFE87C;
}
.marquee-wrap::before,.marquee-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee-wrap::before{left:0;background:linear-gradient(90deg,#FFE87C,transparent);}
.marquee-wrap::after{right:0;background:linear-gradient(-90deg,#FFE87C,transparent);}
.marquee-track{display:flex;gap:64px;width:max-content;animation:nc-scroll 24s linear infinite;align-items:center;}
@keyframes nc-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;overflow-x:auto;}}
.marquee-track:hover{animation-play-state:paused;}
.brand-chip{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--ink-soft);white-space:nowrap;font-family:'Sora',sans-serif;}
.brand-chip img{height:30px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.75);}
.brand-chip:hover img{filter:grayscale(0) opacity(1);}

/* ---- hero banner slider ---- */
.hero-slides{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:translateX(-100%);transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.hero-slide.active{transform:translateX(0);z-index:1;}
.hero-slide.prev{transform:translateX(100%);}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none;}}
.hero-slide-dots{position:absolute;bottom:24px;right:28px;z-index:3;display:flex;gap:8px;}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s,width .2s;}
.hero-dot.active{background:#fff;width:22px;border-radius:6px;}
