:root{
    --black:#0a0a0b;
    --charcoal:#17171a;
    --charcoal-2:#1f1f23;
    --hairline:#2b2b30;
    --yellow:#f5b400;
    --yellow-bright:#ffd43b;
    --amber-deep:#c98600;
    --grey-circuit:#8b8b90;
    --white:#faf9f6;
    --white-dim:#c9c8c4;
    --display:'Space Grotesk', sans-serif;
    --body:'Inter', sans-serif;
    --mono:'JetBrains Mono', monospace;
    --max:1180px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--black);
    color:var(--white);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}

  :focus-visible{
    outline:2px solid var(--yellow-bright);
    outline-offset:3px;
  }

  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--yellow);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;
    background:var(--yellow);
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
    flex-shrink:0;
  }

  h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.01em;}

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    background:rgba(10,10,11,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline);
  }
  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{height:36px;width:36px;}
  .brand-text{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:0.01em;}
  .brand-text span{color:var(--yellow);}

  .nav-links{display:flex;align-items:center;gap:2px;}
  .nav-links a{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:10px 16px;
    color:var(--white-dim);
    position:relative;
    transition:color .2s ease;
  }
  .nav-links a:hover{color:var(--white);}
  .nav-links a::after{
    content:"";
    position:absolute;
    bottom:6px;left:16px;right:16px;
    height:1px;
    background:var(--yellow);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  .nav-links a:hover::after{transform:scaleX(1);}

  .nav-cta{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.05em;
    padding:10px 20px;
    border:1px solid var(--yellow);
    color:var(--black);
    background:var(--yellow);
    transition:background .2s ease, color .2s ease;
    margin-left:12px;
  }
  .nav-cta:hover{background:var(--yellow-bright);}

  .burger{display:none;background:none;border:none;color:var(--white);width:32px;height:32px;cursor:pointer;}

  /* ---------- HEX CIRCUIT DIVIDER (signature element) ---------- */
  .circuit-divider{
    position:relative;
    height:64px;
    width:100%;
  }
  .circuit-divider svg{width:100%;height:100%;display:block;}
  .circuit-divider .trace{
    fill:none;
    stroke:var(--hairline);
    stroke-width:1.5;
  }
  .circuit-divider .trace-live{
    fill:none;
    stroke:var(--yellow);
    stroke-width:1.5;
    stroke-dasharray:6 400;
    animation:travel 7s linear infinite;
  }
  .circuit-divider .node{fill:var(--charcoal-2);stroke:var(--grey-circuit);stroke-width:1.5;}
  .circuit-divider .node-hot{fill:var(--yellow);stroke:var(--yellow);}
  @keyframes travel{
    0%{stroke-dashoffset:0;}
    100%{stroke-dashoffset:-800;}
  }
  @media (prefers-reduced-motion:reduce){
    .circuit-divider .trace-live{animation:none;stroke-dasharray:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:190px 0 120px;
    overflow:hidden;
  }
  .hex-field{
    position:absolute;inset:0;
    opacity:0.35;
    pointer-events:none;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:60px;
    align-items:center;
    position:relative;
  }
  .hero h1{
    font-size:clamp(38px,5vw,64px);
    line-height:1.05;
    margin-bottom:24px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--yellow);
    background:linear-gradient(180deg,transparent 62%, rgba(245,180,0,0.28) 62%);
  }
  .hero p.lead{
    font-size:18px;
    color:var(--white-dim);
    max-width:520px;
    margin-bottom:36px;
  }
  .btn-row{display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.04em;
    padding:15px 26px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:all .2s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--yellow);color:var(--black);}
  .btn-primary:hover{background:var(--yellow-bright);transform:translateY(-1px);}
  .btn-ghost{border-color:var(--hairline);color:var(--white);}
  .btn-ghost:hover{border-color:var(--yellow);color:var(--yellow);}

  .hero-panel{
    position:relative;
    aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-panel img{
    width:78%;
    filter:drop-shadow(0 0 60px rgba(245,180,0,0.18));
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
  }
  @media (prefers-reduced-motion:reduce){ .hero-panel img{animation:none;} }

  .stat-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .stat{
    padding:28px 32px;
    border-right:1px solid var(--hairline);
  }
  .stat:last-child{border-right:none;}
  .stat-num{font-family:var(--mono);font-size:26px;color:var(--yellow);}
  .stat-label{font-size:12.5px;color:var(--white-dim);margin-top:4px;letter-spacing:0.02em;}

  /* ---------- SECTION SHELL ---------- */
  section{padding:110px 0;position:relative;}
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .section-head h2{font-size:clamp(28px,3.4vw,40px);}
  .section-head p{color:var(--white-dim);margin-top:16px;font-size:16px;}

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:70px;
    align-items:start;
  }
  .about-frame{
    position:relative;
    border:1px solid var(--hairline);
    padding:40px;
    background:var(--charcoal);
  }
  .about-frame::before,.about-frame::after{
    content:"";
    position:absolute;width:14px;height:14px;
    border:1px solid var(--yellow);
  }
  .about-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
  .about-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
  .about-frame img{width:60px;margin-bottom:24px;}
  .about-frame h3{font-size:20px;margin-bottom:14px;}
  .about-frame p{color:var(--white-dim);font-size:15px;}
  .about-copy p{color:var(--white-dim);margin-bottom:20px;font-size:16px;}
  .about-copy p:first-child{color:var(--white);font-size:18px;}
  .credential-list{margin-top:32px;display:flex;flex-direction:column;gap:14px;}
  .credential{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;color:var(--white-dim);}
  .credential .hexmark{
    flex-shrink:0;margin-top:5px;
    width:10px;height:10px;
    background:var(--yellow);
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  }

  /* ---------- SERVICES ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--hairline);
    border:1px solid var(--hairline);
  }
  .service-card{
    background:var(--black);
    padding:36px 30px;
    transition:background .25s ease;
  }
  .service-card:hover{background:var(--charcoal);}
  .service-index{font-family:var(--mono);font-size:12px;color:var(--amber-deep);margin-bottom:22px;}
  .service-hex{
    width:44px;height:44px;
    margin-bottom:22px;
    background:var(--charcoal-2);
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--hairline);
  }
  .service-card:hover .service-hex{border-color:var(--yellow);}
  .service-hex svg{width:20px;height:20px;stroke:var(--yellow);}
  .service-card h3{font-size:17px;margin-bottom:10px;}
  .service-card p{font-size:14.5px;color:var(--white-dim);}
  .tag-soon{
    display:inline-block;
    margin-top:14px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.08em;
    color:var(--amber-deep);
    border:1px solid var(--amber-deep);
    padding:3px 8px;
    text-transform:uppercase;
  }

  /* ---------- PORTFOLIO ---------- */
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .port-card{
    border:1px solid var(--hairline);
    background:var(--charcoal);
    overflow:hidden;
  }
  .port-visual{
    aspect-ratio:4/3;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    background:
      linear-gradient(135deg, var(--charcoal-2) 0%, var(--black) 100%);
    overflow:hidden;
  }
  .port-visual .hexbg{position:absolute;inset:0;opacity:0.5;}
  .port-visual .initial{
    font-family:var(--display);
    font-size:52px;
    color:var(--yellow);
    opacity:0.9;
    position:relative;
    z-index:1;
  }
  .port-body{padding:26px 28px 30px;}
  .port-cat{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px;}
  .port-body h3{font-size:18px;margin-bottom:10px;}
  .port-body p{font-size:14px;color:var(--white-dim);margin-bottom:16px;}
  .port-meta{display:flex;gap:16px;font-family:var(--mono);font-size:11.5px;color:var(--grey-circuit);border-top:1px solid var(--hairline);padding-top:14px;}

  /* ---------- PRICING ---------- */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .price-card{
    border:1px solid var(--hairline);
    padding:38px 32px;
    background:var(--charcoal);
    display:flex;flex-direction:column;
  }
  .price-card.featured{
    border-color:var(--yellow);
    background:var(--charcoal-2);
    position:relative;
  }
  .price-card.featured::before{
    content:"MOST BOOKED";
    position:absolute;top:-1px;right:-1px;
    font-family:var(--mono);
    font-size:10px;letter-spacing:0.08em;
    background:var(--yellow);color:var(--black);
    padding:6px 12px;
  }
  .price-tier{font-family:var(--mono);font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-circuit);margin-bottom:18px;}
  .price-card.featured .price-tier{color:var(--yellow);}
  .price-amount{font-family:var(--mono);font-size:40px;color:var(--white);margin-bottom:6px;}
  .price-amount span{font-size:14px;color:var(--white-dim);}
  .price-note{font-size:13.5px;color:var(--white-dim);margin-bottom:28px;}
  .price-features{flex-grow:1;display:flex;flex-direction:column;gap:13px;margin-bottom:32px;}
  .price-features li{display:flex;gap:10px;font-size:14px;color:var(--white-dim);align-items:flex-start;}
  .price-features li::before{
    content:"";flex-shrink:0;margin-top:6px;
    width:8px;height:8px;
    background:var(--yellow);
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  }
  .price-cta{
    text-align:center;
    padding:13px;
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.05em;
    border:1px solid var(--hairline);
  }
  .price-card.featured .price-cta{background:var(--yellow);color:var(--black);border-color:var(--yellow);}
  .price-card:not(.featured) .price-cta:hover{border-color:var(--yellow);color:var(--yellow);}

  /* ---------- CONTACT ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
  }
  .contact-info h2{margin-bottom:20px;}
  .contact-info p{color:var(--white-dim);margin-bottom:32px;}
  .contact-line{
    display:flex;
    justify-content:space-between;
    padding:16px 0;
    border-bottom:1px solid var(--hairline);
    font-size:14.5px;
  }
  .contact-line span:first-child{font-family:var(--mono);color:var(--grey-circuit);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;}
  .contact-line span:last-child{color:var(--white);}

  form{display:flex;flex-direction:column;gap:20px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  label{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--grey-circuit);
    margin-bottom:8px;
    display:block;
  }
  input,select,textarea{
    width:100%;
    background:var(--charcoal);
    border:1px solid var(--hairline);
    color:var(--white);
    padding:13px 14px;
    font-family:var(--body);
    font-size:14.5px;
    transition:border-color .2s ease;
  }
  input:hover,select:hover,textarea:hover{border-color:var(--grey-circuit);}
  input:focus,select:focus,textarea:focus{border-color:var(--yellow);outline:none;}
  textarea{resize:vertical;min-height:120px;}
  .submit-btn{
    align-self:flex-start;
    background:var(--yellow);
    color:var(--black);
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.05em;
    padding:15px 32px;
    border:none;
    cursor:pointer;
    transition:background .2s ease;
  }
  .submit-btn:hover{background:var(--yellow-bright);}

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--hairline);
    padding:40px 0;
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-row .brand-text{font-size:14px;}
  footer p{font-family:var(--mono);font-size:12px;color:var(--grey-circuit);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:900px){
    .nav-links{display:none;}
    .burger{display:block;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-panel{order:-1;max-width:280px;margin:0 auto 20px;}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .portfolio-grid{grid-template-columns:1fr;}
    .pricing-grid{grid-template-columns:1fr;}
    .stat-strip{grid-template-columns:repeat(2,1fr);}
    .stat{border-bottom:1px solid var(--hairline);}
    .form-row{grid-template-columns:1fr;}
  }
  @media (max-width:520px){
    .services-grid{grid-template-columns:1fr;}
    .wrap{padding:0 20px;}
  }