:root{
    --bg:#080a13;
    --bg-alt:#0c0f1c;
    --card:#12162650;
    --card-solid:#131728;
    --card-border:rgba(255,64,140,.18);
    --pink:#ff2f7e;
    --pink-2:#ff6fa8;
    --pink-glow:#ff0f6e;
    --magenta:#c81466;
    --gold:#ffd08a;
    --text:#f3f1f6;
    --text-muted:#8d93ac;
    --text-dim:#5c6padd;
    --radius:18px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans', sans-serif;
    overflow-x:hidden;
    position:relative;
    line-height:1.6;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-.02em;}
  .mono{font-family:'JetBrains Mono', monospace;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--pink); color:#fff;}

  /* scrollbar */
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--pink),var(--magenta)); border-radius:10px;}

  /* background ambience */
  #petal-canvas{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:1; pointer-events:none; opacity:.55;
  }
  .noise-overlay{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 900px 500px at 15% 0%, rgba(255,47,126,.14), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 15%, rgba(200,20,102,.12), transparent 60%),
      radial-gradient(ellipse 800px 600px at 50% 100%, rgba(255,111,168,.08), transparent 60%);
  }

  section{position:relative; z-index:2;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  @media(max-width:640px){ .wrap{padding:0 20px;} }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--pink-2); font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:linear-gradient(90deg,var(--pink),transparent); display:inline-block;}

  .glow-text{
    background:linear-gradient(120deg,#fff 10%, var(--pink-2) 55%, var(--pink) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ============ NAV ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0;
  }
  .navbar{
    max-width:var(--maxw); margin:0 auto; padding:10px 14px 10px 22px;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(10,12,22,.65);
    backdrop-filter:blur(16px);
    border:1px solid var(--card-border);
    border-radius:999px;
  }
  .logo{
    display:flex; align-items:center; gap:8px;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem;
    letter-spacing:.02em;
  }
  .logo svg{width:22px;height:22px;}
  .logo .k{color:var(--pink-2);}
  .nav-links{display:flex; gap:2px; align-items:center;}
  .nav-links a{
    font-size:.86rem; font-weight:500; color:var(--text-muted);
    padding:9px 16px; border-radius:999px; transition:.25s;
    position:relative;
  }
  .nav-links a:hover, .nav-links a.active{ color:#fff; background:rgba(255,47,126,.12); }
  .hire-btn{
    background:linear-gradient(120deg,var(--pink),var(--magenta));
    color:#fff !important; font-weight:600; font-size:.84rem;
    padding:10px 22px !important; border-radius:999px;
    box-shadow:0 4px 20px rgba(255,47,126,.35);
    transition:.25s;
  }
  .hire-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 26px rgba(255,47,126,.5); }
  .burger{display:none; width:22px; height:16px; position:relative; cursor:pointer; background:none; border:none;}
  .burger span{position:absolute; height:2px; width:100%; background:#fff; left:0; transition:.3s;}
  .burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:7px;} .burger span:nth-child(3){top:14px;}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media(max-width:860px){
    .nav-links{
      position:fixed; top:78px; left:16px; right:16px;
      flex-direction:column; align-items:stretch; gap:2px;
      background:rgba(10,12,22,.97); border:1px solid var(--card-border);
      border-radius:18px; padding:14px;
      transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s;
    }
    .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .nav-links a{padding:12px 16px;}
    .hire-btn{ display:none; }
    .burger{display:block;}
  }

  /* ============ HERO ============ */
  .hero{ padding:170px 0 0; }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;
  }
  .hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.08; margin-bottom:14px;}
  .role-line{
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(1.2rem,2.6vw,1.6rem);
    color:var(--pink-2); margin-bottom:22px; min-height:1.6em; display:flex; align-items:center; gap:8px;
  }
  .role-line .cursor{ width:2px; height:1.1em; background:var(--pink-2); animation:blink 1s step-end infinite; }
  @keyframes blink{ 50%{opacity:0;} }
  .hero p.desc{ color:var(--text-muted); max-width:480px; margin-bottom:34px; font-size:1rem; }
  .hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(120deg,var(--pink),var(--magenta));
    color:#fff; font-weight:600; padding:14px 26px; border-radius:12px;
    box-shadow:0 8px 30px rgba(255,47,126,.35); transition:.25s; font-size:.92rem;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(255,47,126,.5); }
  .social-row{ display:flex; gap:10px; }
  .social-row a{
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--card-border); background:rgba(255,255,255,.02); transition:.25s;
  }
  .social-row a:hover{ background:var(--pink); border-color:var(--pink); transform:translateY(-3px); }
  .social-row svg{ width:17px; height:17px; }

  /* hero art */
  .hero-art{
    position:relative; display:flex; align-items:center; justify-content:center;
    align-self:end;
    height:560px; max-height:60vh;
  }
  .hero-art .ring{
    position:absolute; width:340px; height:490px; border-radius:50%;
    border:1px dashed rgba(255,111,168,.32);
    animation:spin 40s linear infinite;
  }
  .hero-art .ring.r2{ width:290px; height:430px; border-color:rgba(255,47,126,.18); animation-direction:reverse; animation-duration:55s;}
  @keyframes spin{ to{ transform:rotate(360deg);} }
  .portrait-img{
    position:relative; z-index:2;
    height:100%; width:auto; max-width:100%;
    object-fit:contain; object-position:center bottom;
    filter:drop-shadow(0 20px 40px rgba(255,15,110,.35));
  }

  /* cyberpunk neon flicker effect on "Alexandra" in the hero heading */
  .glitch-name{
    position:relative;
    display:inline-block;
    cursor:pointer;
    color:var(--text);
  }
  .glitch-name.cyber-active{
    animation:cyberFlicker 4.5s linear infinite;
  }
  @keyframes cyberFlicker{
    0%, 19%, 21%, 23%, 53%, 56%, 61%, 100%{
      opacity:1;
      color:var(--text);
      text-shadow:0 0 4px var(--pink-2), 0 0 14px rgba(255,47,126,.6), 0 0 26px rgba(111,240,255,.3);
    }
    20%, 54%{ opacity:.3; text-shadow:none; color:#4a4f66; }
    22%{ opacity:.85; text-shadow:0 0 3px #6ff0ff; color:#6ff0ff; }
    60%{ opacity:.55; text-shadow:0 0 8px var(--pink); }
  }
  .glitch-name::before,
  .glitch-name::after{
    content:attr(data-text);
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none; opacity:0;
  }
  .glitch-name.glitch-burst::before{
    color:var(--pink);
    animation:cyberSliceA .22s steps(2) forwards;
  }
  .glitch-name.glitch-burst::after{
    color:#6ff0ff;
    animation:cyberSliceB .22s steps(2) forwards;
  }
  @keyframes cyberSliceA{
    0%{ opacity:.9; clip-path:inset(8% 0 72% 0); transform:translate(-4px,0); }
    50%{ opacity:.7; clip-path:inset(48% 0 22% 0); transform:translate(3px,0); }
    100%{ opacity:0; clip-path:inset(80% 0 4% 0); transform:translate(0,0); }
  }
  @keyframes cyberSliceB{
    0%{ opacity:.9; clip-path:inset(65% 0 10% 0); transform:translate(4px,0); }
    50%{ opacity:.7; clip-path:inset(14% 0 58% 0); transform:translate(-3px,0); }
    100%{ opacity:0; clip-path:inset(4% 0 84% 0); transform:translate(0,0); }
  }
  .crt-filter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.25) 2px,
        rgba(0, 0, 0, 0.25) 4px
    );
    pointer-events: none;
    z-index: 10;
    animation: crt-scanline-flicker 0.08s steps(2) infinite;
  }
  @keyframes crt-scanline-flicker {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.92;
    }
  }
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero p.desc{margin-left:auto; margin-right:auto;}
    .hero-cta{justify-content:center;}
    .role-line{justify-content:center;}
    .hero-art{margin-top:20px; height:420px; max-height:52vh;}
  }

  /* marquee */
  .marquee-wrap{
    background:linear-gradient(120deg, var(--magenta), var(--pink) 60%, var(--pink-2));
    padding:16px 0; overflow:hidden; position:relative; z-index:2;
  }
  .marquee-track{ display:flex; width:max-content; will-change:transform; }
  .marquee-track.marquee-running{ animation-name:marquee-scroll; animation-timing-function:linear; animation-iteration-count:infinite; }
  @keyframes marquee-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(var(--marquee-distance,-50%),0,0); } }
  .marquee-group{ display:flex; gap:60px; padding-right:60px; flex-shrink:0; }
  .marquee-track span{
    display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif;
    font-weight:600; color:#fff; font-size:1.05rem; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em;
  }
  .marquee-track span::before{ content:'✦'; opacity:.8; font-size:.9rem;}

  /* section heading pattern */
  .sec-head{ text-align:center; margin-bottom:56px; }
  .sec-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); }
  .sec-head p{ color:var(--text-muted); margin-top:8px; }
  .blossom{ filter:hue-rotate(0deg); }

  /* ============ ABOUT ============ */
  .about{ padding:130px 0 100px; }
  .about-grid{ display:grid; grid-template-columns:.85fr 1fr .8fr; gap:40px; align-items:center; }
  .about-text h2{ font-size:clamp(1.9rem,3.6vw,2.5rem); margin-bottom:16px; }
  .about-text p{ color:var(--text-muted); margin-bottom:30px; max-width:380px;}
  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 30px; }
  .stat-grid .num{ font-family:'Space Grotesk',sans-serif; font-size:2.1rem; font-weight:700; color:var(--pink-2); }
  .stat-grid .lab{ font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}

  .fan-wrap{ display:flex; align-items:center; justify-content:center; position:relative; }
  .fan-glow{ position:absolute; width:320px; height:320px; background:radial-gradient(circle, rgba(255,47,126,.4), transparent 70%); filter:blur(30px); }
  .fan-img{ position:relative; z-index:2; width:260px; animation:float 6s ease-in-out infinite; filter:drop-shadow(0 16px 30px rgba(255,15,110,.3)); }
  @keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

  .card-stack{ display:flex; flex-direction:column; gap:20px; }
  .info-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:22px 24px; backdrop-filter:blur(10px); transition:.3s;
  }
  .info-card:hover{ border-color:var(--pink); transform:translateY(-3px); box-shadow:0 10px 30px rgba(255,47,126,.15); }
  .info-card h4{ color:var(--pink-2); font-size:1.02rem; margin-bottom:8px; }
  .info-card p{ font-size:.87rem; color:var(--text-muted); }

  @media(max-width:960px){
    .about-grid{ grid-template-columns:1fr; text-align:center; }
    .about-text p{ margin-left:auto; margin-right:auto; }
    .stat-grid{ max-width:320px; margin:0 auto; }
  }

  /* ============ SKILLS ============ */
  .skills{ padding:100px 0; }
  .skills-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .skill-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:26px; backdrop-filter:blur(10px);
  }
  .skill-card h3{ font-size:1rem; margin-bottom:18px; color:#fff; display:flex; align-items:center; gap:10px;}
  .skill-card h3 .dot{ width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); }
  .skill-row{ margin-bottom:14px; }
  .skill-row:last-child{ margin-bottom:0; }
  .skill-row .top{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--text-muted); margin-bottom:6px;}
  .bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; }
  .bar-fill{ height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--pink),var(--pink-2)); transition:width 1.4s cubic-bezier(.22,1,.36,1); }
  @media(max-width:760px){ .skills-grid{grid-template-columns:1fr;} }

  /* ============ CERTIFICATES ============ */
  .certs{ padding:100px 0; }
  .cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .cert-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:26px; transition:.3s; backdrop-filter:blur(10px);
  }
  .cert-card:hover{ transform:translateY(-5px); border-color:var(--pink); box-shadow:0 14px 34px rgba(255,47,126,.16); }
  .cert-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
  .cert-top h4{ font-size:1.02rem; line-height:1.3; max-width:75%; }
  .cert-year{ font-family:'JetBrains Mono',monospace; color:var(--pink-2); font-size:.78rem; font-weight:600; }
  .cert-issuer{ color:var(--text-muted); font-size:.82rem; margin-bottom:16px; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .tag{ font-size:.72rem; padding:4px 10px; border-radius:999px; background:rgba(255,47,126,.12); color:var(--pink-2); border:1px solid rgba(255,47,126,.25); }
  .cert-link{ font-size:.82rem; color:var(--text); display:inline-flex; align-items:center; gap:6px; font-weight:500; }
  .cert-link svg{ width:14px; height:14px; }
  @media(max-width:960px){ .cert-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:640px){ .cert-grid{ grid-template-columns:1fr; } }

  /* ============ EDUCATION ============ */
  .edu{ padding:100px 0 120px; }
  .edu-layout{ display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
  .branch-wrap{ position:relative; display:flex; justify-content:center; padding:20px 0; }
  .branch-glow{ position:absolute; width:460px; height:460px; background:radial-gradient(circle, rgba(255,47,126,.38), transparent 70%); filter:blur(40px); }
  .branch-img{ position:relative; z-index:2; width:420px; max-width:100%; filter:drop-shadow(0 18px 34px rgba(255,15,110,.28)); }

  .timeline{ position:relative; padding-left:34px; }
  .timeline::before{
    content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(var(--pink), transparent);
  }
  .timeline-item{ position:relative; margin-bottom:26px; }
  .timeline-item::before{
    content:''; position:absolute; left:-34px; top:6px; width:14px; height:14px; border-radius:50%;
    background:var(--bg); border:2px solid var(--pink); box-shadow:0 0 12px rgba(255,47,126,.6);
  }
  .timeline-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:20px 24px; backdrop-filter:blur(10px); transition:.25s;
  }
  .timeline-card:hover{ border-color:var(--pink); transform:translateX(4px); }
  .timeline-card h4{ font-size:1.02rem; margin-bottom:4px; }
  .timeline-card .school{ color:var(--pink-2); font-size:.85rem; margin-bottom:8px; }
  .timeline-card .meta{ display:flex; gap:16px; font-size:.78rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
  @media(max-width:900px){ .edu-layout{ grid-template-columns:1fr; } .branch-wrap{ margin-bottom:10px; } .branch-img{ width:320px; } .branch-glow{ width:360px; height:360px; } }

  /* ============ PROJECTS ============ */
  .projects{ padding:100px 0; }
  .proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .proj-card{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--card-border);
    background:var(--card-solid); transition:.3s; position:relative;
  }
  .proj-card:hover{ transform:translateY(-6px); border-color:var(--pink); box-shadow:0 18px 40px rgba(255,47,126,.18); }
  .proj-thumb{ height:150px; position:relative; overflow:hidden; }
  .proj-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,12,22,.6)); }
  .proj-body{ padding:20px 22px 24px; }
  .proj-body h4{ font-size:1.02rem; margin-bottom:8px; }
  .proj-body p{ font-size:.84rem; color:var(--text-muted); margin-bottom:16px; }
  @media(max-width:960px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:640px){ .proj-grid{ grid-template-columns:1fr; } }

  /* ============ CONTACT ============ */
  .contact{ padding:100px 0 60px; }
  .contact-panel{
    background:linear-gradient(135deg, rgba(255,47,126,.1), rgba(200,20,102,.06));
    border:1px solid var(--card-border); border-radius:28px; padding:56px 48px;
    display:grid; grid-template-columns:.9fr 1.1fr; gap:50px;
  }
  .contact-left h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px; }
  .contact-left p{ color:var(--text-muted); margin-bottom:26px; max-width:360px; }
  .contact-info{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
  .contact-info div{ display:flex; align-items:center; gap:12px; font-size:.88rem; color:var(--text-muted); }
  .contact-info svg{ width:17px; height:17px; color:var(--pink-2); flex-shrink:0;}
  form{ display:flex; flex-direction:column; gap:14px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  input, textarea{
    background:rgba(255,255,255,.04); border:1px solid var(--card-border); border-radius:10px;
    padding:13px 16px; color:#fff; font-family:'DM Sans',sans-serif; font-size:.9rem; outline:none; transition:.2s;
  }
  input:focus, textarea:focus{ border-color:var(--pink); background:rgba(255,255,255,.07); }
  textarea{ resize:vertical; min-height:100px; }
  .send-btn{
    align-self:flex-start; background:linear-gradient(120deg,var(--pink),var(--magenta)); color:#fff;
    border:none; padding:14px 30px; border-radius:10px; font-weight:600; font-size:.9rem; cursor:pointer;
    transition:.25s; box-shadow:0 8px 26px rgba(255,47,126,.3);
  }
  .send-btn:hover{ transform:translateY(-2px); }
  @media(max-width:840px){
    .contact-panel{ grid-template-columns:1fr; padding:36px 24px; }
    .form-row{ grid-template-columns:1fr; }
  }

  footer{ padding:36px 0 40px; text-align:center; color:var(--text-muted); font-size:.82rem; position:relative; z-index:2; }
  footer .foot-social{ display:flex; justify-content:center; gap:14px; margin-bottom:16px; }
  footer .foot-social a{
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--card-border); transition:.2s;
  }
  footer .foot-social a:hover{ background:var(--pink); border-color:var(--pink); }
  footer .foot-social svg{ width:15px; height:15px; }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

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