:root{
    --navy-dark:#080e1c;
    --navy-mid:#0e172b;
    --navy-line:#1a2642;
    --gold:#d4af37;
    --gold-soft:#a88a42;
    --ivory:#f0ece2;
    --muted:#828fa0;
    --green:#4ade80;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy-dark);
    color:var(--ivory);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--gold);color:var(--navy-dark);}

  /* background texture */
  .bg-grid{
    position:fixed; inset:0; z-index:0;
    background-image: radial-gradient(var(--navy-line) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity:.5;
    pointer-events:none;
  }
  .bg-fade{
    position:fixed; inset:0; z-index:0;
    background: radial-gradient(ellipse at 50% 30%, transparent 0%, var(--navy-dark) 75%);
    pointer-events:none;
  }

  .wrap{max-width:960px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}

  /* nav */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:26px 32px;
    font-family:'JetBrains Mono',monospace;
    font-size:14px;
    backdrop-filter: blur(6px);
    background:linear-gradient(var(--navy-dark) 60%, transparent);
  }
  nav .handle{color:var(--gold); letter-spacing:.5px; display:flex; align-items:center; gap:10px;}
  nav .handle img{height:26px; width:26px; object-fit:contain;}
  nav .links a{color:var(--muted); text-decoration:none; margin-left:28px; transition:color .2s;}
  nav .links a:hover{color:var(--ivory);}

  /* corner marks */
  .corner{position:fixed; width:34px; height:34px; border-color:var(--gold); z-index:40; pointer-events:none;}
  .corner.tl{top:56px; left:32px; border-top:3px solid var(--gold); border-left:3px solid var(--gold);}
  .corner.tr{top:56px; right:32px; border-top:3px solid var(--gold); border-right:3px solid var(--gold);}
  .corner.bl{bottom:32px; left:32px; border-bottom:3px solid var(--gold); border-left:3px solid var(--gold);}
  .corner.br{bottom:32px; right:32px; border-bottom:3px solid var(--gold); border-right:3px solid var(--gold);}
  @media(max-width:700px){.corner{display:none;}}

  /* logo mark (real brand asset) */
  .logo-mark-wrap{
    position:relative;
    width:220px; height:220px;
    margin:0 auto;
    opacity:0; transform:translateY(14px);
    animation:rise .9s ease forwards .15s;
  }
  .logo-mark-wrap::before{
    content:'';
    position:absolute; inset:-30px;
    background:radial-gradient(circle, rgba(74,222,128,.28) 0%, rgba(212,175,55,.12) 45%, transparent 72%);
    border-radius:50%;
    filter:blur(6px);
    animation:glow 3.6s ease-in-out infinite;
    z-index:0;
  }
  .logo-mark-wrap img{
    position:relative; z-index:1;
    width:100%; height:100%; object-fit:contain;
    animation:float 5s ease-in-out infinite;
    filter:drop-shadow(0 0 18px rgba(74,222,128,.25));
  }
  @keyframes float{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-14px);}
  }
  @keyframes glow{
    0%,100%{opacity:.55; transform:scale(1);}
    50%{opacity:1; transform:scale(1.06);}
  }
  @media(max-width:600px){ .logo-mark-wrap{width:160px; height:160px;} }

  /* hero */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding-top:80px;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace; color:var(--gold);
    font-size:15px; letter-spacing:2px; margin-bottom:36px;
    opacity:0; animation: rise .8s ease forwards;
  }
  h1.title{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(48px,9vw,104px);
    line-height:1.02;
    letter-spacing:-1px;
    margin-top:28px;
    opacity:0; animation: rise .9s ease forwards .3s;
  }
  h1.title .accent{color:var(--gold); display:block;}
  .teeth{
    display:flex; justify-content:center; gap:6px; margin:26px 0;
    opacity:0; animation: rise .9s ease forwards .45s;
  }
  .teeth span{
    width:0; height:0;
    border-left:8px solid transparent; border-right:8px solid transparent;
    border-top:13px solid var(--gold-soft);
  }
  .teeth span:nth-child(even){ border-top:none; border-bottom:13px solid var(--gold-soft); align-self:flex-start;}
  .tagline{
    font-size:clamp(18px,2.4vw,24px); color:var(--muted); font-weight:500;
    opacity:0; animation: rise .9s ease forwards .6s;
  }
  .hero-cta{
    margin-top:52px;
    font-family:'JetBrains Mono',monospace; color:var(--green); font-size:15px;
    opacity:0; animation: rise .9s ease forwards .75s;
  }
  .scroll-cue{
    position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    opacity:0; animation: rise .8s ease forwards 1s;
  }
  .scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:pulse 1.8s ease-in-out infinite;}

  @keyframes rise{to{opacity:1; transform:translateY(0);}}
  @keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

  /* section shared */
  section{padding:130px 0;}
  .label{
    font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:14px;
    letter-spacing:2px; margin-bottom:18px; display:block;
  }
  h2{
    font-family:'Playfair Display',serif; font-weight:700;
    font-size:clamp(32px,5vw,52px); margin-bottom:44px; letter-spacing:-.5px;
  }
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* about */
  .about-grid{display:grid; grid-template-columns:1fr; gap:28px;}
  .about-text p{font-size:19px; line-height:1.75; color:#cfd3dc; margin-bottom:20px; max-width:680px;}
  .about-text strong{color:var(--ivory); font-weight:600;}
  .about-text .g{color:var(--green);}

  /* pillars */
  .pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--navy-line); border:1px solid var(--navy-line);}
  .pillar{background:var(--navy-dark); padding:38px 32px;}
  .pillar .num{font-family:'JetBrains Mono',monospace; color:var(--green); font-size:14px; margin-bottom:14px; display:block;}
  .pillar h3{font-family:'Playfair Display',serif; font-size:24px; margin-bottom:10px; color:var(--gold);}
  .pillar p{color:var(--muted); font-size:15.5px; line-height:1.6;}
  @media(max-width:700px){.pillars{grid-template-columns:1fr;}}

  /* work */
  .work-list{display:flex; flex-direction:column;}
  .work-item{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:28px 0; border-bottom:1px solid var(--navy-line);
    gap:20px; flex-wrap:wrap;
  }
  .work-item:first-child{border-top:1px solid var(--navy-line);}
  .work-item h3{font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--ivory);}
  .work-item .tag{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--gold); letter-spacing:1px;}
  .work-item p{color:var(--muted); font-size:15px; max-width:420px; margin-top:6px;}

  /* contact */
  .contact{text-align:center;}
  .contact h2{margin-bottom:20px;}
  .contact p{color:var(--muted); font-size:18px; max-width:520px; margin:0 auto 44px; line-height:1.6;}
  .contact-links{display:flex; justify-content:center; gap:18px; flex-wrap:wrap;}
  .contact-links a{
    font-family:'JetBrains Mono',monospace; font-size:15px;
    color:var(--ivory); text-decoration:none;
    border:1px solid var(--navy-line); padding:14px 28px;
    transition:border-color .25s, color .25s;
  }
  .contact-links a:hover{border-color:var(--gold); color:var(--gold);}
  .contact-links a.primary{background:var(--gold); color:var(--navy-dark); border-color:var(--gold); font-weight:700;}
  .contact-links a.primary:hover{color:var(--navy-dark); opacity:.9;}

  footer{
    text-align:center; padding:60px 0 60px;
    font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted);
  }
  footer span{color:var(--gold);}
  footer img{width:120px; opacity:.9; margin-bottom:18px; filter:drop-shadow(0 0 14px rgba(74,222,128,.18));}