:root{
    --primary:#FF0055;
    --secondary:#6C63FF;
    --accent:#00E5FF;
    --bg:#0B0B12;
    --card: rgba(255,255,255,0.05);
    --text:#FFFFFF;
    --muted:#BFBFBF;
  }

  *{ box-sizing:border-box; }
  html{ background:var(--bg); }
  html.lenis{ height:auto; }
  .lenis.lenis-smooth{ scroll-behavior:auto !important; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    cursor:default;
  }

  ::selection{ background:var(--primary); color:#fff; }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--primary),var(--secondary)); border-radius:10px; }

  h1,h2,h3,h4, .font-display{ font-family:'Space Grotesk', sans-serif; }
  .font-mono{ font-family:'JetBrains Mono', monospace; }

  /* ---------- Utility gradients ---------- */
  .grad-text{
    background:linear-gradient(90deg,var(--primary),var(--secondary) 55%, var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .grad-line{
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  }

  .glass{
    background:var(--card);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.08);
  }

  section{ position:relative; }

  /* ---------- Cursor glow ---------- */
  #cursor-glow{
    position:fixed; top:0; left:0; width:520px; height:520px;
    border-radius:50%; pointer-events:none; z-index:2;
    background:radial-gradient(circle, rgba(255,0,85,0.10), rgba(108,99,255,0.06) 45%, transparent 70%);
    transform:translate(-50%,-50%);
    will-change:transform;
    mix-blend-mode:screen;
  }
  @media (max-width:768px){ #cursor-glow{ display:none; } }

  /* ---------- Custom cursor dot ---------- */
  #cursor-dot{
    position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
    background:var(--accent); pointer-events:none; z-index:9999; mix-blend-mode:difference;
    transform:translate(-50%,-50%);
  }
  @media (max-width:768px){ #cursor-dot{ display:none; } }

  /* ---------- Nav ---------- */
  #nav{
    transition:all .4s ease;
  }
  #nav.scrolled{
    background:rgba(11,11,18,0.7);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .nav-link{ position:relative; }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transition:width .35s ease;
  }
  .nav-link:hover::after{ width:100%; }

  /* ---------- Magnetic buttons ---------- */
  .magnetic{ display:inline-flex; will-change:transform; }

  /* ---------- Blobs ---------- */
  .blob{
    position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; pointer-events:none;
  }

  /* ---------- Floating icons hero ---------- */
  .float-icon{
    position:absolute; opacity:.5;
  }

  /* ---------- Section eyebrow ---------- */
  .eyebrow{
    letter-spacing:.25em; text-transform:uppercase; font-size:.7rem; color:var(--accent);
  }
  .eyebrow::before{
    content:''; display:inline-block; width:26px; height:1px; background:var(--accent);
    margin-right:10px; vertical-align:middle;
  }

  /* ---------- Honeycomb ---------- */
  .hex-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
  .hex{
    width:180px; height:200px; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.08);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:1.5rem; position:relative; overflow:hidden;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease, border-color .4s ease;
  }
  .hex:hover{
    transform:translateY(-10px) scale(1.05);
    border-color:rgba(255,0,85,.5);
    background:linear-gradient(160deg, rgba(255,0,85,0.14), rgba(108,99,255,0.08));
  }
  .hex .hex-detail{
    opacity:0; transform:translateY(8px); transition:all .35s ease; font-size:.72rem; color:var(--muted);
  }
  .hex:hover .hex-detail{ opacity:1; transform:translateY(0); }
  .hex:hover .hex-icon{ transform:scale(0) ; opacity:0; }
  .hex-icon{ transition:all .3s ease; }

  @media(max-width:640px){
    .hex{ width:135px; height:150px; padding:0.8rem; }
  }

  /* ---------- Counters ---------- */
  .counter-num{ font-variant-numeric:tabular-nums; }

  /* ---------- Process timeline ---------- */
  .process-track{ position:relative; }
  .process-line{
    position:absolute; height:2px; left:0; right:0; top:28px;
    background:rgba(255,255,255,0.08);
  }
  .process-line-fill{
    position:absolute; height:2px; left:0; top:0; width:0%;
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  }
  .process-dot{
    width:14px; height:14px; border-radius:50%; background:var(--bg);
    border:2px solid var(--secondary); position:relative; z-index:2;
  }

  /* ---------- Portfolio masonry ---------- */
  .masonry{ columns:1; column-gap:1.25rem; }
  @media(min-width:768px){ .masonry{ columns:2; } }
  @media(min-width:1100px){ .masonry{ columns:3; } }
  .masonry-item{ break-inside:avoid; margin-bottom:1.25rem; }

  .port-card{ position:relative; overflow:hidden; border-radius:1.1rem; }
  .port-card img, .port-card .fallback{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
  .port-card:hover img, .port-card:hover .fallback{ transform:scale(1.08); }
  .port-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:1.4rem; background:linear-gradient(180deg, transparent 20%, rgba(6,6,12,0.94) 100%);
    opacity:0; transition:opacity .4s ease; 
  }
  .port-card:hover .port-overlay{ opacity:1; }

  /* ---------- Lists inside project modal content ---------- */
  /* Tailwind's reset strips default <ul>/<li> styling, so any bullet list
     you add inside a project modal (.modal-panel) picks this up automatically. */
  .modal-panel ul{
    list-style:disc; padding-left:1.25rem;
    display:flex; flex-direction:column; gap:0.55rem;
  }
  .modal-panel ul li{
    color:rgba(255,255,255,0.6); font-size:0.9rem; line-height:1.6;
  }
  .modal-panel ul li::marker{ color:var(--accent); }

  .filter-btn{
    border:1px solid rgba(255,255,255,0.12); transition:all .3s ease;
  }
  .filter-btn.active, .filter-btn:hover{
    border-color:transparent; color:#fff;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
  }

  /* ---------- Experience timeline ---------- */
  .exp-line{
    position:absolute; left:19px; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg,var(--primary),var(--secondary),var(--accent));
  }
  @media(min-width:768px){ .exp-line{ left:50%; margin-left:-1px; } }
  .exp-dot{
    width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);
  }

  /* ---------- Skills radar ---------- */
  .radar-poly{ transition:all .5s ease; }

  /* ---------- Marquee ---------- */
  .marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .marquee-wrap{ overflow:hidden; }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

  .brand-track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }

  /* ---------- FAQ ---------- */
  .faq-item .faq-a{
    max-height:0; overflow:hidden; transition:max-height .5s ease;
  }
  .faq-item.open .faq-a{ max-height:240px; }
  .faq-item.open .faq-chevron{ transform:rotate(45deg); }
  .faq-chevron{ transition:transform .35s ease; }

  /* ---------- Form ---------- */
  .field{
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    transition:border-color .3s ease, background .3s ease;
  }
  .field:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,0.06); }

  /* ---------- misc reveal ---------- */
  .reveal{ opacity:0; transform:translateY(40px); }

  a, button{ -webkit-tap-highlight-color:transparent; }

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

  .noise{
    position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035; mix-blend-mode:overlay;
    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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:.6rem 1rem; z-index:9999;
  }
  .skip-link:focus{ left:1rem; top:1rem; }

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