:root{
    --ink:#10131a;
    --paper:#f3f5f7;
    --paper-2:#e9edf1;
    --primary:#2452ff;
    --primary-dark:#173399;
    --accent:#ff7a1a;
    --text:#171b23;
    --text-soft:#565f6d;
    --line:#d8dee4;
    --white:#ffffff;
    --radius:14px;
    --shadow:0 10px 30px -12px rgba(16,19,26,0.25);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.55;
  }
  h1,h2,h3,.display{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:0.95;
    margin:0;
  }
  .mono{ font-family:'IBM Plex Mono',monospace; }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  section{padding:88px 0;}
  @media(max-width:640px){ section{padding:56px 0;} }

  /* custom click cursor ripple */
  .click-ripple{
    position:fixed;
    width:14px;height:14px;
    border:2px solid var(--accent);
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%) scale(1);
    opacity:0.9;
    z-index:9999;
    animation:ripple 550ms ease-out forwards;
  }
  @keyframes ripple{
    to{ transform:translate(-50%,-50%) scale(4); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .click-ripple{ display:none; }
  }

  /* header */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(243,245,247,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px;max-width:1180px;margin:0 auto;
  }
  .logo{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:800; font-size:28px; text-transform:uppercase;
    display:flex; align-items:center; gap:4px;
  }
  .logo .dot{ color:var(--accent); }
  .nav-links{ display:flex; gap:28px; align-items:center; font-weight:600; font-size:15px;}
  .nav-links a{ text-decoration:none; color:var(--text); }
  .nav-links a:hover{ color:var(--primary); }
  .nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; background:none; border:none; cursor:pointer; padding:8px;
    border-radius:8px;
  }
  .nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); transition:transform 160ms ease, opacity 160ms ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-cta-mobile{ display:none; }
  @media(max-width:860px){
    .nav-toggle{ display:flex; }
    .nav-cta-desktop{ display:none; }
    .nav-links{
      position:fixed; top:65px; left:0; right:0; z-index:150;
      background:var(--paper); border-bottom:1px solid var(--line);
      flex-direction:column; align-items:flex-start; gap:6px;
      padding:12px 24px 20px;
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:transform 160ms ease, opacity 160ms ease;
    }
    .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .nav-links a{ width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
    .nav-links a:last-child{ border-bottom:none; }
    .nav-cta-mobile{ display:flex; margin-top:8px; width:100%; }
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:15px; text-decoration:none;
    padding:13px 24px; border-radius:999px; border:none; cursor:pointer;
    transition:transform 120ms ease, box-shadow 120ms ease;
    font-family:'Inter',sans-serif;
  }
  .btn:active{ transform:translateY(2px) scale(0.98); }
  .btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 0 var(--primary-dark); }
  .btn-primary:active{ box-shadow:0 2px 0 var(--primary-dark); }
  .btn-accent{ background:var(--accent); color:#1a0e00; box-shadow:0 6px 0 #b3540a; }
  .btn-accent:active{ box-shadow:0 2px 0 #b3540a; }
  .btn-ghost{ background:transparent; color:var(--text); border:2px solid var(--line); }
  .btn:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }

  /* hero */
  .hero{
    padding:96px 0 72px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 18% 20%, rgba(36,82,255,0.07) 0, transparent 45%),
      radial-gradient(circle at 82% 0%, rgba(255,122,26,0.10) 0, transparent 40%);
  }
  .hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}
  @media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
    color:var(--primary); background:var(--white); border:1px solid var(--line);
    padding:6px 14px; border-radius:999px; margin-bottom:22px;
  }
  .eyebrow::before{ content:''; width:7px;height:7px;border-radius:50%; background:var(--accent); }
  .hero h1{ font-size:clamp(48px,7vw,84px); }
  .hero h1 .accent{ color:var(--primary); }
  .hero p.lead{ font-size:19px; color:var(--text-soft); max-width:46ch; margin:24px 0 34px;}
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .hero-stats{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; }
  .hero-stats div strong{ display:block; font-family:'IBM Plex Mono',monospace; font-size:26px; color:var(--ink);}
  .hero-stats div span{ font-size:13px; color:var(--text-soft); }

  /* cursor / click visual panel */
  .cursor-card{
    background:var(--ink); color:#fff; border-radius:20px; padding:34px;
    box-shadow:var(--shadow);
    position:relative;
  }
  .cursor-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#9db1ff; letter-spacing:0.06em; text-transform:uppercase;}
  .price-line{ display:flex; align-items:baseline; gap:10px; margin:18px 0 6px;}
  .price-line .amt{ font-family:'IBM Plex Mono',monospace; font-size:44px; font-weight:600; }
  .price-line .per{ color:#9aa4b5; font-size:14px; }
  .cursor-card .bar{ height:8px; background:#232a3a; border-radius:99px; overflow:hidden; margin:18px 0;}
  .cursor-card .bar span{ display:block; height:100%; width:64%; background:linear-gradient(90deg,var(--primary),var(--accent)); }
  .click-badge{
    position:absolute; right:26px; bottom:-18px;
    background:var(--accent); color:#1a0e00; font-weight:800;
    font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase;
    padding:10px 18px; border-radius:12px; font-size:15px;
    box-shadow:var(--shadow);
    animation:click-pulse 2.4s ease-in-out infinite;
  }
  @keyframes click-pulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

  /* how it works */
  .steps{ background:var(--ink); color:#fff; }
  .steps h2{ color:#fff; font-size:clamp(34px,5vw,52px); }
  .section-label{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; display:block;}
  .step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px; background:#232a3a; border-radius:16px; overflow:hidden;}
  @media(max-width:900px){ .step-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .step-grid{ grid-template-columns:1fr; } }
  .step{ background:var(--ink); padding:32px 26px; }
  .step .num{ font-family:'IBM Plex Mono',monospace; color:#5b6b8f; font-size:14px; }
  .step h3{ font-size:26px; margin:14px 0 8px; color:#fff; text-transform:none; font-weight:700;}
  .step p{ color:#a7b0c0; font-size:15px; margin:0; }

  /* why us */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
  @media(max-width:900px){ .why-grid{ grid-template-columns:1fr; } }
  .why-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
  .why-card .ic{ width:44px;height:44px;border-radius:10px; background:var(--paper-2); display:flex;align-items:center;justify-content:center; margin-bottom:16px; font-size:20px;}
  .why-card h3{ text-transform:none; font-size:20px; font-weight:700; margin-bottom:8px;}
  .why-card p{ color:var(--text-soft); font-size:15px; margin:0;}

  /* about */
  .about-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center; }
  @media(max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
  .about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .about-stat{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px; text-align:center; }
  .about-stat strong{ display:block; font-family:'IBM Plex Mono',monospace; font-size:26px; color:var(--primary); margin-bottom:6px; }
  .about-stat span{ font-size:13px; color:var(--text-soft); }
  @media(max-width:480px){ .about-stats{ grid-template-columns:1fr 1fr; } }

  /* calculator */
  .calc{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:40px; margin-top:48px; box-shadow:var(--shadow); }
  .calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px;}
  @media(max-width:800px){ .calc-grid{ grid-template-columns:1fr; } }
  .field{ margin-bottom:20px; }
  .field label{ display:flex; justify-content:space-between; font-weight:600; font-size:14px; margin-bottom:8px;}
  .field label .val{ font-family:'IBM Plex Mono',monospace; color:var(--primary); }
  input[type=range]{ width:100%; accent-color:var(--primary); }
  input[type=number]{
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace; font-size:15px; background:var(--paper);
  }
  input[type=number]:focus-visible, input[type=range]:focus-visible{ outline:3px solid var(--primary); outline-offset:2px;}
  .result-panel{ background:var(--ink); color:#fff; border-radius:16px; padding:32px; display:flex; flex-direction:column; justify-content:center;}
  .result-panel .label{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:#9db1ff; text-transform:uppercase; letter-spacing:0.06em;}
  .result-panel .big{ font-family:'IBM Plex Mono',monospace; font-size:52px; font-weight:600; margin:10px 0; transition:opacity 150ms ease;}
  .result-panel .sub{ color:#a7b0c0; font-size:14px; }
  .result-breakdown{ display:flex; gap:22px; margin-top:22px; flex-wrap:wrap;}
  .result-breakdown div span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:16px; }
  .result-breakdown div small{ color:#8b95a8; font-size:12px; }
  .calc-note{ font-size:13px; color:var(--text-soft); margin-top:18px; }

  /* inventory categories */
  .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px;}
  @media(max-width:900px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }
  .cat-card{
    position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5;
    background:linear-gradient(160deg,var(--primary),var(--ink));
    background-size:cover; background-position:center;
    color:#fff;
    display:flex; align-items:flex-end; padding:22px; cursor:pointer;
    transition:transform 160ms ease; text-decoration:none;
  }
  .cat-card::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,12,18,0) 35%, rgba(10,12,18,0.85) 100%);
  }
  .cat-card > div{ position:relative; z-index:1; }
  .cat-card:nth-child(2){ background-color:var(--accent); }
  .cat-card:nth-child(3){ background-color:#3a4a66; }
  .cat-card:nth-child(4){ background-color:var(--primary-dark); }
  .cat-card:hover{ transform:translateY(-6px); }
  .cat-card h3{ font-size:26px; text-transform:none; font-weight:700;}
  .cat-card span{ font-family:'IBM Plex Mono',monospace; font-size:13px; opacity:0.85;}

  /* testimonials */
  .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
  @media(max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
  .testi{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
  .testi .stars{ color:var(--accent); font-family:'IBM Plex Mono',monospace; letter-spacing:2px; margin-bottom:14px;}
  .testi p{ font-size:15px; color:var(--text); margin:0 0 16px; }
  .testi .who{ font-size:13px; color:var(--text-soft); font-weight:600; }

  /* application form */
  .apply{ background:var(--paper-2); }
  .apply-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:52px; align-items:start;}
  @media(max-width:900px){ .apply-grid{ grid-template-columns:1fr; } }
  .apply-form{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:36px; box-shadow:var(--shadow);}
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }
  .form-group{ margin-bottom:18px; }
  .form-group label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px;}
  .form-group input, .form-group select, .form-group textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
    font-family:'Inter',sans-serif; font-size:15px; background:var(--paper);
  }
  .form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible{
    outline:3px solid var(--primary); outline-offset:1px;
  }
  fieldset{ border:none; padding:0; margin:0 0 22px; }
  fieldset legend{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--primary); margin-bottom:12px; padding:0;}
  .apply-list{ list-style:none; padding:0; margin:24px 0 0; }
  .apply-list li{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-size:15px;}
  .apply-list li:first-child{ border-top:none; }
  .apply-list .n{ font-family:'IBM Plex Mono',monospace; color:var(--primary); font-weight:600;}
  #formStatus{ margin-top:16px; font-weight:600; font-size:14px; display:none; }
  #formStatus.show{ display:block; }

  /* faq */
  .faq-item{ border-bottom:1px solid var(--line); padding:20px 0;}
  .faq-item summary{ cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; align-items:center;}
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; font-family:'IBM Plex Mono',monospace; font-size:22px; color:var(--primary); }
  .faq-item[open] summary::after{ content:'–'; }
  .faq-item p{ color:var(--text-soft); margin:12px 0 0; font-size:15px; max-width:70ch;}

  /* cta band */
  .cta-band{ background:var(--ink); color:#fff; text-align:center; }
  .cta-band h2{ color:#fff; font-size:clamp(32px,5vw,52px); }
  .cta-band p{ color:#a7b0c0; max-width:50ch; margin:16px auto 32px; font-size:17px;}
  .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  .float-cta{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    z-index:200;
    box-shadow:0 12px 28px -8px rgba(16,19,26,0.45);
    animation:float-bob 3.2s ease-in-out infinite;
  }
  .float-cta:hover{ animation-play-state:paused; }
  @keyframes float-bob{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(-6px); }
  }
  @media (prefers-reduced-motion: reduce){
    .float-cta{ animation:none; }
  }
  @media(max-width:640px){
    .float-cta{ bottom:16px; padding:12px 20px; font-size:14px; }
  }

  footer{ background:#0b0d12; color:#8b95a8; padding:56px 0 28px; font-size:14px;}
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid #202634;}
  @media(max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  .foot-grid h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px;}
  .foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
  .foot-grid a{ text-decoration:none; color:#8b95a8; }
  .foot-grid a:hover{ color:#fff; }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:24px; flex-wrap:wrap; gap:10px;}