:root{
    --bg:#0A0A0A; --surface:#141414; --surface2:#1B1B1B;
    --cyan:#00C2FF; --orange:#FF7A00; --white:#FFFFFF;
    --muted:rgba(255,255,255,.64);
    --line:rgba(255,255,255,.08);
    --grad:linear-gradient(120deg,#FF7A00 0%,#FF3D6E 42%,#00C2FF 100%);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:84px}
  body{
    margin:0; background:var(--bg); color:var(--white);
    font-family:'Outfit',system-ui,sans-serif; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.font-display{font-family:'Sora',system-ui,sans-serif}
  a{text-decoration:none;color:inherit}
  ::selection{background:var(--orange);color:#000}

  /* focus visibility for accessibility */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px;
  }

  .grad-text{
    background:var(--grad); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .grad-btn{
    background:var(--grad); color:#0A0A0A; font-weight:700;
    box-shadow:0 8px 30px rgba(255,122,0,.28), 0 4px 14px rgba(0,194,255,.22);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .grad-btn:hover{transform:translateY(-2px); box-shadow:0 14px 44px rgba(255,122,0,.42),0 8px 22px rgba(0,194,255,.34); filter:saturate(1.08)}
  .ghost-btn{
    border:1px solid rgba(255,255,255,.22); color:#fff; background:rgba(255,255,255,.02);
    transition:border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .ghost-btn:hover{border-color:var(--cyan); background:rgba(0,194,255,.06); transform:translateY(-2px)}

  /* glassmorphism card */
  .glass{
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid var(--line);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-radius:22px;
  }
  .card-hover{transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease}
  .card-hover:hover{transform:translateY(-8px); border-color:rgba(0,194,255,.4);
    box-shadow:0 26px 60px -24px rgba(0,194,255,.35), 0 0 0 1px rgba(255,122,0,.12) inset}

  /* eyebrow label */
  .eyebrow{letter-spacing:.28em; font-size:.72rem; font-weight:600; color:var(--cyan); text-transform:uppercase}

  /* ===== SIGNATURE: groove equalizer ===== */
  .eq{display:inline-flex; align-items:flex-end; gap:4px; height:26px}
  .eq span{
    width:5px; border-radius:4px; background:var(--grad); height:40%;
    animation:bounce 1.1s ease-in-out infinite;
  }
  .eq span:nth-child(1){animation-delay:0s}
  .eq span:nth-child(2){animation-delay:.15s}
  .eq span:nth-child(3){animation-delay:.3s}
  .eq span:nth-child(4){animation-delay:.45s}
  .eq span:nth-child(5){animation-delay:.6s}
  .eq span:nth-child(6){animation-delay:.28s}
  .eq span:nth-child(7){animation-delay:.5s}
  @keyframes bounce{0%,100%{height:22%}50%{height:100%}}

  /* big ambient hero equalizer strip */
  .hero-eq{position:absolute; inset:auto 0 0 0; height:38%; display:flex; align-items:flex-end;
    gap:6px; padding:0 4vw; opacity:.16; pointer-events:none; filter:blur(.3px)}
  .hero-eq i{flex:1; border-radius:8px 8px 0 0; background:var(--grad); height:20%;
    animation:bounce 1.8s ease-in-out infinite}

  .glow-orange{position:absolute; border-radius:50%;
    background:radial-gradient(circle,rgba(255,122,0,.5),transparent 62%); filter:blur(70px)}
  .glow-cyan{position:absolute; border-radius:50%;
    background:radial-gradient(circle,rgba(0,194,255,.42),transparent 62%); filter:blur(70px)}

  /* grain overlay */
  .grain::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* scroll reveal */
  .reveal{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
  body.ug-anim .reveal{opacity:0; transform:translateY(26px)}
  body.ug-anim .reveal.in{opacity:1; transform:none}

  /* nav underline */
  .navlink{position:relative}
  .navlink::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
    background:var(--grad); transition:width .3s ease}
  .navlink:hover::after,.navlink.active::after{width:100%}

  /* photo tile (editorial placeholder – swap the background-image with real photography) */
  .tile{position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--line);
    background:linear-gradient(160deg,#161616,#0d0d0d)}
  .tile .art{position:absolute; inset:0; display:grid; place-items:center; opacity:.9; transition:transform .6s ease}
  .tile:hover .art{transform:scale(1.06)}
  .tile .cap{position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.82)); z-index:2}
  .tile .badge{position:absolute; top:14px; left:14px; z-index:2; font-size:.68rem; letter-spacing:.14em;
    text-transform:uppercase; padding:6px 12px; border-radius:999px; font-weight:600;
    background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px)}

  /* accordion */
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease}
  .faq.open .faq-a{max-height:260px}
  .faq.open .faq-ic{transform:rotate(45deg)}
  .faq-ic{transition:transform .3s ease}

  /* testimonials */
  .t-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1)}
  .t-slide{min-width:100%}
  @media(min-width:900px){.t-slide{min-width:50%}}

  /* mobile menu */
  #mobileMenu{transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease}
  #mobileMenu.hidden-menu{transform:translateY(-14px); opacity:0; pointer-events:none}

  /* floating buttons */
  .fab{position:fixed; z-index:60; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .25s ease}
  .fab:hover{transform:scale(1.08)}

  @media (max-width:1023px){
    .fab{bottom:92px}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; scroll-behavior:auto !important;
      transition-duration:.001ms !important}
    .reveal{opacity:1; transform:none}
  }

  /* --- mobile hardening --- */
  html{-webkit-text-size-adjust:100%}
  *{-webkit-tap-highlight-color:transparent}
  section[id]{scroll-margin-top:88px}
  @media (max-width:1023px){
    .fab{bottom:88px !important}
    .hero-eq{height:30%}
  }
  @media (max-width:400px){
    .grad-btn,.ghost-btn{width:100%;justify-content:center}
  }