:root{
    --bg-0:#07060a;
    --bg-1:#0d0a08;
    --gold-1:#e9c46a;
    --gold-2:#d4af37;
    --gold-3:#8a6d1a;
    --gold-soft: rgba(233,196,106,0.14);
    --glass-fill: rgba(255,255,255,0.035);
    --glass-fill-strong: rgba(255,255,255,0.06);
    --glass-border: rgba(233,196,106,0.22);
    --glass-border-soft: rgba(233,196,106,0.10);
    --text-hi:#f3ecdd;
    --text-mid:#c9c2b3;
    --text-low:#79746a;
    --radius:18px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(233,196,106,0.10), transparent 60%),
      radial-gradient(900px 500px at 90% 10%, rgba(212,175,55,0.08), transparent 55%),
      linear-gradient(180deg, var(--bg-0) 0%, #0a0805 45%, #0c0906 100%);
    color:var(--text-hi);
    font-family:'Manrope', sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  /* ambient gold aurora blobs */
  .aurora{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  .aurora span{
    position:absolute; border-radius:50%; filter:blur(90px); opacity:0.35;
    animation: drift 26s ease-in-out infinite alternate;
  }
  .aurora span:nth-child(1){ width:520px; height:520px; background:radial-gradient(circle, rgba(233,196,106,0.35), transparent 70%); top:-10%; left:-8%; animation-duration:30s;}
  .aurora span:nth-child(2){ width:420px; height:420px; background:radial-gradient(circle, rgba(212,175,55,0.28), transparent 70%); bottom:-12%; right:-6%; animation-duration:24s; animation-delay:-6s;}
  .aurora span:nth-child(3){ width:300px; height:300px; background:radial-gradient(circle, rgba(255,215,120,0.18), transparent 70%); top:40%; left:45%; animation-duration:34s; animation-delay:-12s;}
  @keyframes drift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(60px,40px) scale(1.15); }
  }

  section, header, footer{ position:relative; z-index:1; }

  ::selection{ background:var(--gold-2); color:#100c04; }

  /* ---------- NAVBAR — LIQUID GLASS ---------- */
  header.navbar{
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    width:min(92%, 980px); z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 26px;
    background: linear-gradient(120deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 40%, rgba(233,196,106,0.05));
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:999px;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.3);
  }
  header.navbar .brand{
    font-family:'Cormorant Garamond', serif;
    font-size:1.35rem; font-weight:600; letter-spacing:0.04em;
    color:var(--text-hi);
  }
  header.navbar .brand span{ color:var(--gold-1); }
  nav.links{ display:flex; gap:6px; }
  nav.links a{
    color:var(--text-mid); text-decoration:none;
    font-family:'Space Mono', monospace;
    font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
    padding:9px 15px; border-radius:999px;
    transition: all 0.35s ease;
    position:relative;
  }
  nav.links a:hover{
    color:#100c04;
    background: linear-gradient(120deg, var(--gold-1), var(--gold-2));
    box-shadow:0 4px 18px rgba(212,175,55,0.35);
  }
  .nav-toggle{ display:none; }

  /* ---------- GLASS CARD BASE ---------- */
  .glass{
    background: linear-gradient(155deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 55%, rgba(233,196,106,0.03));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border:1px solid var(--glass-border-soft);
    border-radius:var(--radius);
    box-shadow:
      0 10px 40px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.08);
    position:relative;
    overflow:hidden;
  }
  .glass::before{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 30%, rgba(233,196,106,0.09) 48%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.9s ease;
    pointer-events:none;
  }
  .glass:hover::before{ transform: translateX(120%); }

  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--gold-1); opacity:0.85;
    display:flex; align-items:center; gap:10px;
    margin-bottom:16px;
  }
  .eyebrow::before{
    content:''; width:26px; height:1px; background:var(--gold-1); opacity:0.6;
  }

  h1, h2, h3{ font-family:'Cormorant Garamond', serif; font-weight:600; line-height:1.08; }
  .lede{ color:var(--text-mid); font-weight:300; line-height:1.7; }

  .container{ max-width:1080px; margin:0 auto; padding:0 28px; }

  /* ---------- HERO ---------- */
  section.hero{
    min-height:100vh;
    display:flex; align-items:center;
    padding-top:120px; padding-bottom:80px;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap:50px; align-items:center;
    width:100%;
  }
  .hero h1{
    font-size:clamp(3rem, 7vw, 5.4rem);
    letter-spacing:0.005em;
    background: linear-gradient(120deg, #fff 20%, var(--gold-1) 55%, var(--gold-3) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:22px;
  }
  .hero .role{
    font-family:'Space Mono', monospace; font-size:0.85rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--text-mid); margin-bottom:28px;
    display:flex; gap:14px; flex-wrap:wrap;
  }
  .hero .role em{ color:var(--gold-1); font-style:normal; }
  .hero p.lede{ max-width:480px; font-size:1.05rem; margin-bottom:34px; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family:'Space Mono', monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    padding:15px 30px; border-radius:999px; text-decoration:none; display:inline-block;
    transition: all 0.35s ease; border:1px solid var(--glass-border);
  }
  .btn-primary{
    background: linear-gradient(120deg, var(--gold-1), var(--gold-2));
    color:#100c04; font-weight:700; border:none;
    box-shadow:0 10px 30px rgba(212,175,55,0.28);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(212,175,55,0.4); }
  .btn-ghost{ color:var(--text-hi); background:var(--glass-fill); }
  .btn-ghost:hover{ border-color:var(--gold-1); color:var(--gold-1); }

  .hero-visual{
    aspect-ratio: 4/5; padding:2px;
    background: linear-gradient(155deg, rgba(233,196,106,0.35), rgba(255,255,255,0.05) 40%, rgba(233,196,106,0.08));
    border-radius:24px;
  }
  .hero-visual-inner{
    width:100%; height:100%; border-radius:22px;
    background: linear-gradient(165deg, #1a140a 0%, #0a0805 60%, #14100a 100%);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .hero-visual-inner .profile-photo{
    width:100%; height:100%; object-fit:cover;
    filter: saturate(0.9) contrast(1.05);
    opacity:0.96;
  }
  .hero-visual-inner .initials{
    font-family:'Cormorant Garamond', serif; font-size:9rem; font-weight:500;
    background: linear-gradient(150deg, var(--gold-1), rgba(233,196,106,0.25));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    opacity:0.9;
  }
  .hero-visual-inner::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
    animation: sheen 5s ease-in-out infinite;
  }
  @keyframes sheen{
    0%,100%{ transform:translateX(-30%); }
    50%{ transform:translateX(30%); }
  }

  .scroll-hint{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    font-family:'Space Mono', monospace; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--text-low); display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-hint .line{ width:1px; height:30px; background:linear-gradient(var(--gold-1), transparent); animation:pulse-line 2s ease-in-out infinite; }
  @keyframes pulse-line{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

  /* ---------- SECTION HEADERS ---------- */
  section{ padding:120px 0; }
  .section-head{ margin-bottom:56px; max-width:640px; }
  .section-head h2{ font-size:clamp(2.2rem, 4vw, 3rem); color:var(--text-hi); }
  .section-head .lede{ margin-top:14px; }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:40px; align-items:start; }
  .about-card{ padding:38px; }
  .stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
  .stat{ padding:22px 18px; text-align:left; }
  .stat .num{ font-family:'Cormorant Garamond', serif; font-size:2.2rem; color:var(--gold-1); font-weight:600; }
  .stat .label{ font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-low); margin-top:6px; }
  .skills-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
  .skill-tag{
    font-family:'Space Mono', monospace; font-size:0.72rem; letter-spacing:0.04em;
    padding:9px 16px; border-radius:999px; color:var(--text-mid);
    background:var(--glass-fill); border:1px solid var(--glass-border-soft);
  }

  /* ---------- PORTFOLIO ---------- */
  .work-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
  .work-card{ padding:30px; display:flex; flex-direction:column; gap:16px; min-height:300px; }
  .work-card .tag{
    font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gold-1); opacity:0.8;
  }
  .work-card h3{ font-size:1.6rem; color:var(--text-hi); }
  .work-card p{ color:var(--text-mid); font-size:0.92rem; line-height:1.6; font-weight:300; flex-grow:1; }
  .work-card .meta{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:14px; border-top:1px solid var(--glass-border-soft);
    font-family:'Space Mono', monospace; font-size:0.68rem; color:var(--text-low); text-transform:uppercase; letter-spacing:0.05em;
  }

  /* ---------- BUSINESS & SERVICES ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  .service-card{ padding:34px; }
  .service-card .idx{ font-family:'Space Mono', monospace; font-size:0.75rem; color:var(--gold-1); opacity:0.7; margin-bottom:18px; display:block;}
  .service-card h3{ font-size:1.5rem; margin-bottom:12px; color:var(--text-hi); }
  .service-card p{ color:var(--text-mid); font-weight:300; font-size:0.92rem; line-height:1.65; }

  .biz-banner{
    margin-top:26px; padding:44px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  }
  .biz-banner h3{ font-size:1.8rem; max-width:420px; color:var(--text-hi); }
  .biz-banner p{ color:var(--text-mid); font-weight:300; max-width:340px; font-size:0.92rem; }

  /* ---------- CONTACT (no interactive links) ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .contact-card{ padding:30px; display:flex; flex-direction:column; gap:8px; }
  .contact-card .label{
    font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-1); opacity:0.85;
  }
  .contact-card .value{ font-size:1.15rem; color:var(--text-hi); font-weight:400; word-break:break-word; }
  .contact-card .sub{ font-size:0.82rem; color:var(--text-low); font-weight:300; }

  footer{
    padding:44px 0 34px; text-align:center;
    color:var(--text-low); font-family:'Space Mono', monospace; font-size:0.72rem; letter-spacing:0.05em;
    border-top:1px solid var(--glass-border-soft); margin-top:60px;
  }
  footer span{ color:var(--gold-1); }

  /* focus visibility */
  a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-1); outline-offset:3px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 860px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:280px; margin:0 auto; }
    .about-grid{ grid-template-columns:1fr; }
    .work-grid{ grid-template-columns:1fr; }
    .services-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .stat-row{ grid-template-columns:1fr; }
    nav.links{
      position:fixed; top:80px; right:16px; left:16px;
      flex-direction:column; padding:16px;
      background: rgba(10,8,5,0.92); backdrop-filter: blur(20px);
      border:1px solid var(--glass-border); border-radius:18px;
      display:none;
    }
    nav.links.open{ display:flex; }
    nav.links a{ text-align:center; }
    .nav-toggle{
      display:block; background:none; border:none; color:var(--gold-1); font-size:1.3rem; cursor:pointer;
    }
  }