:root{
    --bg:#070707;
    --surface: rgba(255,255,255,0.04);
    --surface-hover: rgba(255,255,255,0.07);
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --text: #ffffff;
    --text-secondary: rgba(255,255,255,.7);
    --text-tertiary: rgba(255,255,255,.45);
    --grad-a:#ff1f4d;
    --grad-b:#8b0000;
    --grad-c:#ff3b30;
  }
.min-h-screen {
    min-height: 69vh;
}
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.heading{font-family:'Space Grotesk',sans-serif;}
  ::selection{ background: var(--grad-c); color:#fff; }

  /* ambient background glow */
  .ambient{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(50% 40% at 15% 8%, rgba(255,31,77,0.14), transparent 70%),
      radial-gradient(45% 35% at 90% 25%, rgba(139,0,0,0.16), transparent 70%),
      radial-gradient(60% 40% at 50% 100%, rgba(255,59,48,0.08), transparent 70%);
  }

  .glass{
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
  }
  .glass-strong{
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-strong);
  }
  .grad-text{
    background: linear-gradient(120deg, #fff 10%, #ffb3c0 55%, var(--grad-a) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .grad-fill{ background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%); }

  .btn-primary{
    background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
    box-shadow: 0 8px 30px -8px rgba(255,31,77,.55);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease;
  }
  .btn-primary:hover{ transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 40px -6px rgba(255,31,77,.7); filter:brightness(1.08); }
  .btn-ghost{
    border:1px solid var(--border-strong);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    background: rgba(255,255,255,0.02);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }

  /* nav */
  #navbar{
    transition: all .5s cubic-bezier(.2,.8,.2,1);
  }
  #navbar.shrink{
    padding-top:.4rem; padding-bottom:.4rem;
    background: rgba(10,10,10,0.65);
  }
  .nav-link{ position:relative; color:var(--text-secondary); transition: color .3s ease; }
  .nav-link:hover{ color:#fff; }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0%; height:1px;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-c));
    transition: width .3s ease;
  }
  .nav-link:hover::after{ width:100%; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-delay-1.in-view{ transition-delay:.08s; }
  .reveal-delay-2.in-view{ transition-delay:.16s; }
  .reveal-delay-3.in-view{ transition-delay:.24s; }
  .reveal-delay-4.in-view{ transition-delay:.32s; }

  /* hero image float */
  @keyframes floaty{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-16px); }
  }
  .float-img{ animation: floaty 6s ease-in-out infinite; }

  /* card hover lift + glow */
  .lift-card{ transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease; }
  .lift-card:hover{
    transform: translateY(-8px);
    border-color: rgba(255,59,48,0.4);
    box-shadow: 0 24px 60px -20px rgba(255,31,77,.35);
  }

  /* skill bar */
  .skill-bar{ width:0%; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }

  /* portfolio */
  .p-item{ transition: opacity .5s ease, transform .5s ease; }
  .p-item.hide{ opacity:0; transform: scale(.96); pointer-events:none; position:absolute; }
  .p-img-wrap{ overflow:hidden; }
  .p-img{ transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
  .p-item:hover .p-img{ transform: scale(1.08); }
  .p-overlay{ opacity:0; transition: opacity .45s ease; background: linear-gradient(180deg, rgba(7,7,7,0) 30%, rgba(7,7,7,.92) 100%); }
  .p-item:hover .p-overlay{ opacity:1; }

  .filter-btn{ transition: all .3s ease; color: var(--text-secondary); }
  .filter-btn.active{ color:#fff; }

  /* workflow connector */
  .connector{
    height:1px;
    background: linear-gradient(90deg, rgba(255,59,48,0) 0%, rgba(255,59,48,.5) 50%, rgba(255,59,48,0) 100%);
    box-shadow: 0 0 12px 1px rgba(255,59,48,.4);
  }

  /* marquee */
  .marquee-track{ display:flex; width:max-content; animation: scroll-x 32s linear infinite; }
  @keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
  .tool-chip{ border:1px solid var(--border); background:var(--surface); }

  /* testimonials */
  /* .t-dot styling lives here; the old .t-slide fade system was replaced by
     the reels-carousel.js transform-based carousel (see portfolio.css) */
  .t-dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.2); transition: all .3s ease; }
  .t-dot.active{ background: var(--grad-c); width:22px; }

  /* profile-driven content helpers */
  .is-hidden{ display:none !important; }

  /* mobile menu */
  #mobileMenu{ transform: translateY(-12px); opacity:0; pointer-events:none; transition: all .35s ease; }
  #mobileMenu.open{ transform: translateY(0); opacity:1; pointer-events:auto; }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:8px; }

  @media (prefers-reduced-motion: reduce){
    .float-img, .marquee-track{ animation: none !important; }
    .reveal{ transition: none !important; opacity:1 !important; transform:none !important; }
  }