/* ===== HERO ===== */
.hero {
    position: relative;
    overflow: clip;
    padding-top: clamp(6rem, 10vw, 10rem);
    padding-bottom: clamp(3rem, 7vw, 7rem);
    text-align: center;
  }
  
  .hero-inner { max-width: 1100px; margin-inline: auto; }
  
  /* Background: subtle stars + two halos */
  .hero-bg { position: absolute; inset: -10% -5% -10% -5%; z-index: -1; pointer-events: none; }
  .stars {
    position: absolute; inset: 0;
    background:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7) 99%, transparent 100%),
      radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.4) 99%, transparent 100%),
      radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.5) 99%, transparent 100%),
      radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,0.35) 99%, transparent 100%);
    opacity: .25;
  }
  .halo {
    position: absolute;
    filter: blur(50px);
    opacity: .22;
    transform: translate3d(0,0,0);
  }
  .halo-a {
    width: 50vw; height: 50vw; max-width: 720px; max-height: 720px;
    top: -12%; left: -6%;
    background: radial-gradient(35% 35% at 50% 50%, color-mix(in srgb, var(--primary) 85%, #000), transparent 70%);
    animation: floatA 14s ease-in-out infinite;
  }
  .halo-b {
    width: 46vw; height: 46vw; max-width: 660px; max-height: 660px;
    bottom: -14%; right: -8%;
    background: radial-gradient(35% 35% at 50% 50%, rgba(122,162,255,0.35), transparent 70%);
    animation: floatB 16s ease-in-out infinite;
  }
  @keyframes floatA { 0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8px,-6px,0)} }
  @keyframes floatB { 0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-10px,8px,0)} }
  
  /* Eyebrow */
  .eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.45rem .8rem;border:1px solid var(--border);border-radius:999px;
    color:var(--text-muted);font-weight:400;letter-spacing:.2px;
    background:rgba(255,255,255,0.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    margin-bottom:1.5rem;
    font-size: clamp(0.75rem, 1rem, 1.2rem);
  }

  
  /* Title with subtle gradient + soft glow */
  .hero-title{
    font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
    line-height: 1.05;
    margin: 0 0 .6rem 0;
    letter-spacing: -0.02em;
  }
  .gradient-text{
    background: linear-gradient(180deg, var(--text) 0%, color-mix(in srgb, var(--text) 80%, var(--primary)) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow: 0 0 24px rgba(124,131,255,0.12);
  }
  
  .hero-subtitle{
    color:var(--text-muted);
    max-width:70ch;
    margin:0 auto 1.4rem auto;
  }
  
  /* CTAs */
  .hero-ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;}
  .hero-ctas .primary-button-design{box-shadow:0 10px 24px rgba(79,70,229,.22);}
  .hero-ctas .primary-button-design:hover{box-shadow:0 14px 28px rgba(79,70,229,.28);}
  
  /* Socials */
  .socials{display:flex;gap:.6rem;justify-content:center;margin-top:50px;}
  .socials a{
    width:42px;height:42px;display:grid;place-items:center;
    border-radius:12px;border:1px solid var(--border);
    background:rgba(255,255,255,0.02);
    transition:transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .socials a:hover{transform:translateY(-2px);background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);}
  .socials i{font-size:1rem;color:var(--text);opacity:.9;}
  




  /* ===== ABOUT / WHAT I DO ===== */

.about { position: relative; overflow: clip; }
.about-inner { max-width: 1200px; margin-inline: auto; }

.about-bg { position: absolute; inset: -15% -5% -10% -5%; z-index: -1; pointer-events: none; }
.about-halo { position: absolute; filter: blur(60px); opacity: .16; }
.halo-left {
  width: 44vw; height: 44vw; max-width: 620px; max-height: 620px;
  top: -8%; left: -6%;
  background: radial-gradient(35% 35% at 50% 50%, color-mix(in srgb, var(--primary) 80%, #000), transparent 70%);
}
.halo-right {
  width: 42vw; height: 42vw; max-width: 600px; max-height: 600px;
  bottom: -16%; right: -8%;
  background: radial-gradient(35% 35% at 50% 50%, rgba(122,162,255,0.28), transparent 70%);
}

/* Headline: clean, no gradient; italic accents */
.about-title{
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 0 .7rem 0;
}
.about-title em{
  font-style: italic;
  color: var(--text);
  text-shadow: 0 0 20px rgba(124,131,255,0.10);
}

.about-sub{
  color: var(--text-muted);
  max-width: 70ch;
  margin-bottom: 1.5rem;
}

/* Meter: left segments vivid → fade out to the right */
.about-meter{
  display:flex; align-items:center; gap:.55rem; margin-bottom: 1.8rem;
}
.about-meter .seg{
  height: 8px;
  width: clamp(46px, 7vw, 70px);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 65%, #000), rgba(255,255,255,0.08));
  box-shadow: 0 0 14px rgba(79,70,229,0.25);
  opacity: 1;
}
.about-meter .seg:nth-child(2){ opacity:.85; }
.about-meter .seg:nth-child(3){ opacity:.65; }
.about-meter .seg.dim     { opacity:.55; box-shadow:none; background: rgba(255,255,255,0.08); }
.about-meter .seg.dimmer  { opacity:.38; box-shadow:none; background: rgba(255,255,255,0.06); }

/* Grid (aligned equal cards) */
.about-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
    align-items: stretch;
  }
  @media (max-width: 1100px){ .about-grid{ grid-template-columns: repeat(2, 1fr);} }
  @media (max-width: 600px){ .about-grid{ grid-template-columns: 1fr; } }
  
  /* Card base */
  .cap{
    position: relative;
    padding: 1.25rem 1.2rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: .55rem;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
    overflow: hidden; /* for inner glow clip */
  }
  
  /* Icon glow source (top-left) */
  .cap::before{
    content:"";
    position:absolute; top:-40px; left:-40px;
    width:220px; height:220px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .18;
    transform: translateZ(0);
    transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
    pointer-events:none;
    background: radial-gradient(60% 60% at 50% 50%, var(--cap-glow) 0%, transparent 70%);
  }
  .cap:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    border-color: rgba(255,255,255,0.10);
  }
  .cap:hover::before{ opacity:.24; transform: translateZ(0) scale(1.04); }
  
  /* Badge: icon only (no tile), sits at corner */
  .cap-badge{
    position:absolute; top:14px; left:14px;
    width: 28px; height: 28px;
    display:grid; place-items:center;
  }
  .cap-badge i{
    font-size: 1.15rem;
    color: var(--cap-color);         /* colored icon */
    text-shadow:
      0 0 18px color-mix(in srgb, var(--cap-color) 40%, transparent),
      0 0 34px color-mix(in srgb, var(--cap-color) 28%, transparent);
  }
  
  /* Content spacing (align with badge) */
  .cap-title{ margin: 0; padding-top: 2.25rem; font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); }
  .cap-text { color: var(--text-muted); }
  
  /* Per-card color tokens (icon + glow) */
  .cap--design { --cap-color: #7c3aed; --cap-glow: rgba(124,58,237,0.9); }
  .cap--front  { --cap-color: #22d3ee; --cap-glow: rgba(34,211,238,0.9); }
  .cap--back   { --cap-color: #10b981; --cap-glow: rgba(16,185,129,0.9); }
  .cap--brand  { --cap-color: #f472b6; --cap-glow: rgba(244,114,182,0.9); }
  



  

/* ===== SKILLS (2-card, perfectly aligned) ===== */

.skills-inner { max-width: 1200px; margin-inline: auto; }
.skills-title {
  font-size: clamp(1rem, 1rem + 2.8vw, 2rem);
  margin-bottom: 1rem;
}

/* 2-col → 1-col, force same row height + top align */
.skills-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.6rem);
  align-items: start;          /* ⬅ top align */
  grid-auto-rows: 1fr;         /* ⬅ equal row heights */
  margin-top: .5rem;
}
@media (max-width: 900px){
  .skills-grid{ grid-template-columns: 1fr; }
}

/* Card base — full height, no vertical shift on hover */
.skill-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  overflow: hidden;
}
.skill-card:hover{
  /* keep height/position identical; only glow */
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.10);
}

/* Header — fixed height so both cards match exactly */
.skill-head{
  position: relative;
  margin: 0 0 1rem 0;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  min-height: 90px;            /* ⬅ same header height */
}

/* Subtle glow on left */
.skill-head::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 14px;
  pointer-events:none;
  background: radial-gradient(50% 60% at 6% 0%, var(--skill-glow) 0%, transparent 60%);
  opacity:.25; filter: blur(16px);
}

/* Icon + text alignment */
.skill-icon{
  position:absolute; top:12px; left:12px;
  width: 28px; height: 28px; display:grid; place-items:center;
}
.skill-icon i{
  color: var(--skill-color);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--skill-color) 45%, transparent),
    0 0 34px color-mix(in srgb, var(--skill-color) 28%, transparent);
}
.skill-head h3{
  margin: 0 0 .25rem 2.2rem;
  line-height: 1.3;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);
}
.skill-sub{
  margin: 0 0 0 2.2rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Per-card colors */
.skill--tech    { --skill-color:#22d3ee; --skill-glow:rgba(34,211,238,0.7); }
.skill--creative{ --skill-color:#7c3aed; --skill-glow:rgba(124,58,237,0.7); }

/* Chips — ensure bottom breathing room */
.skill-chips{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin-top: .6rem;
  margin-bottom: .3rem;        /* ⬅ space under last row */
}
.skill-chips li{
  padding: .42rem .62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-weight: 600; letter-spacing: .2px; font-size: .95rem;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.skill-chips li:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}








/* ===== FEATURED ===== */

.featured-inner { max-width: 1200px; margin-inline: auto; }
.featured-head { margin-bottom: 0.75rem; }
.featured-head h2 { margin-bottom: 0.3rem;   font-size: clamp(1rem, 1rem + 2.8vw, 2rem);}
.text-muted { color: var(--text-muted); }

.featured-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;      /* cards left, sticky details right */
  gap: clamp(1rem, 2.8vw, 2rem);
  align-items: start;
}
@media (max-width: 980px){
  .featured-grid{ grid-template-columns: 1fr; }
}

/* Cards list */
.proj-list{
  display: grid;
  gap: clamp(2rem, 2vw, 3.4rem);
}

/* Project card */
.proj-card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.proj-card::after{
  content:"";
  position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--proj-accent) 38%, transparent), transparent);
  opacity:.35;
}

/* image frame */
.proj-frame{
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.proj-image{
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center 70%;
  transition: transform 400ms var(--ease), filter 400ms var(--ease);
}
.proj-card:hover .proj-image{
  transform: scale(1.03) rotate(-1.5deg);
  filter: brightness(1.03);
}

/* top-left color glow per project */
.proj-card::before{
  content:"";
  position:absolute; top:-60px; left:-60px; width:280px; height:280px;
  border-radius: 50%; filter: blur(60px);
  background: radial-gradient(60% 60% at 50% 50%, var(--proj-accent) 0%, transparent 70%);
  opacity:.16; pointer-events:none;
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.proj-card:hover::before{ opacity:.22; transform: scale(1.04); }

.proj-meta{ padding: 1rem 1.1rem 1.2rem; }
.proj-meta h3{ margin:0 0 .25rem 0; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); }
.proj-meta p{ margin:0; color: var(--text-muted); }

/* Per-project accents */
.proj--wedsi{ --proj-accent: #e11d48; }     /* red */
.proj--f2f  { --proj-accent: #22c55e; }     /* green */
.proj--bri  { --proj-accent: #f59e0b; }     /* orange */

/* Sticky details panel (desktop only) */
.proj-detail{
  position: sticky;
  top: 92px;
  align-self: start;
  border-radius: 20px;
  padding: 1.1rem 1.1rem 1.2rem;
  min-height: 420px;
}
.detail-eyebrow{
  display:inline-flex; gap:.5rem; align-items:center;
  font-weight: 800; letter-spacing:.12em; text-transform: uppercase;
  color: var(--text-muted);
  padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px;
  background: rgba(248, 246, 246, 0.457);
  margin-bottom:.6rem;
}
.detail-title{ margin:.1rem 0 .35rem 0; }
.detail-summary{ color: var(--text-muted); margin-bottom:1.2rem; max-width: 50ch; }

/* points */
.detail-points{ list-style:none; padding:0; margin: 0 0 1.55rem 0; display:grid; gap:.4rem;}
.detail-points li{
  position: relative; padding-left: 2.15rem; color: var(--text); 
}
.detail-points li::before{
  content:"✦"; position:absolute; left:0; top:0.5rem; font-size:.9rem; line-height:1;
  color: var(--detail-accent, var(--primary));
  text-shadow: 0 0 16px color-mix(in srgb, var(--detail-accent, var(--primary)) 40%, transparent);
}

/* badges */
.detail-badges{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.7rem; }
.detail-badges .badge{
  padding:.42rem .62rem; border-radius:999px; border:1px solid var(--border);
  background: rgba(255,255,255,0.02); color: var(--text);
  font-weight: 700; letter-spacing:.18px; font-size:.92rem;
}

.proj-static {
    display: none;
}

/* CTA */
.detail-ctas .detail-cta{ display:inline-flex; }

/* ===== MOBILE/TABLET MODE (≤ 980px) ===== */
@media (max-width: 980px){
  /* hide sticky panel entirely */
  .proj-detail{ display: none !important; }

  /* hide the small meta to avoid duplication */
  .proj-meta{ display: none; }

  /* show static block under each card */
  .proj-static{
    display: block;
    padding: 0.9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--border);
    position: relative;
  }
  .proj-static .ps-title{
    margin: 0 0 .25rem 0;
    font-size: clamp(1.05rem, 1rem + .6vw, 1.3rem);
  }
  .proj-static .ps-summary{
    margin: 0 0 .7rem 0;
    color: var(--text-muted);
  }
  .proj-static .ps-badges{
    display:flex; flex-wrap:wrap; gap:.45rem;
  }
  .proj-static .ps-badges .badge,
  .proj-static .ps-badges span{
    padding:.42rem .62rem; border-radius:999px; border:1px solid var(--border);
    background: rgba(255,255,255,0.02); color: var(--text);
    font-weight: 700; letter-spacing:.18px; font-size:.92rem;
  }
  .proj-static .ps-arrow{
    position: absolute; right: 1rem; bottom: 1.1rem;
    opacity: .9;
  }
}

/* Keep the actions centered */
.featured-actions{
  margin-top: clamp(1.2rem, 3.4vw, 2rem);
  display:flex; justify-content:center;
}







/* ===== CONTACT CTA (HERO) ===== */
.contact-cta { position: relative; padding-block: clamp(3rem, 6vw, 5rem); overflow: clip; padding-bottom: 0;}

.cta-wrap {
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,24,39,.96), rgba(17,24,39,.9));
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
  isolation: isolate;
}

.cta-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
.cta-bg .orb {
  position:absolute; width:44vmin; height:44vmin; border-radius:50%;
  filter: blur(50px); opacity:.22; mix-blend-mode:screen;
  transform: translateZ(0);
}
.cta-bg .orb-a { left:-10vmin; top:-12vmin;  background: radial-gradient(60% 60% at 50% 50%, var(--primary) 0%, transparent 70%); animation: floatA 14s ease-in-out infinite; }
.cta-bg .orb-b { right:-8vmin; bottom:-14vmin; background: radial-gradient(60% 60% at 50% 50%, #7aa2ff 0%, transparent 70%); animation: floatB 16s ease-in-out infinite; }
.cta-bg .orb-c { right:25%; top:-10vmin;     background: radial-gradient(60% 60% at 50% 50%, #22c55e 0%, transparent 70%); opacity:.14; animation: floatC 18s ease-in-out infinite; }

@keyframes floatA { 0%{transform:translate(0,0)} 50%{transform:translate(12px, -10px)} 100%{transform:translate(0,0)} }
@keyframes floatB { 0%{transform:translate(0,0)} 50%{transform:translate(-16px, 12px)} 100%{transform:translate(0,0)} }
@keyframes floatC { 0%{transform:translate(0,0)} 50%{transform:translate(10px, 8px)}   100%{transform:translate(0,0)} }

/* faint grid lines for depth */
.cta-bg .grid::before {
  content:""; position:absolute; inset:-10%; background:
    radial-gradient(ellipse at center, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 30px);
  transform: translateY(-4%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 95%);
  pointer-events:none;
  display:block;
  width:100%; height:120%;
}

.cta-content {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
}

.cta-kicker{
  display:inline-block;
  padding:.35rem .7rem; border:1px solid var(--border); border-radius:999px;
  background: rgba(255,255,255,.03); color: var(--text-muted);
  margin-bottom: clamp(1.2rem, 2vw, 1.4rem);
}

.cta-title{
  font-family: var(--font-display);
  font-weight: 800; line-height: 1.1;
  font-size: clamp(1.3rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing: .5px;
  margin: 0 0 1.2rem 0;
}
.cta-title span{
  background: linear-gradient(90deg, var(--text) 0%, color-mix(in srgb, var(--text) 80%, var(--primary)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 24px rgba(124,131,255,.18);
}

.cta-sub{
  max-width: 62ch; margin-inline: auto;
  color: var(--text-muted);
  font-size: clamp(1rem, .95rem + .4vw, 1.1rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.6rem);
}

.cta-actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.cta-btn{ display:inline-flex; align-items:center; gap:.6rem; }
.cta-btn .cta-arrow{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  font-weight: 900;
  transition: transform var(--fast) var(--ease);
}
.cta-btn:hover .cta-arrow{ transform: translateX(2px); }

/* responsive tightening */
@media (max-width:720px){
  .cta-title{ line-height:1.15; }
}



  
  /* ===== CONTACT MODAL ===== */
  .contact-modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:9999;
    pointer-events:none; opacity:0; transition: opacity var(--normal) var(--ease);
  }
  .contact-modal.is-open{ pointer-events:auto; opacity:1; }
  .contact-modal__backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(6px);
    opacity:0; transition: opacity var(--normal) var(--ease);
  }
  .contact-modal.is-open .contact-modal__backdrop{ opacity:1; }
  
  .contact-modal__dialog{
    position:relative; width:min(640px, 92vw);
    border:1px solid var(--border); border-radius:20px;
    background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.88));
    box-shadow: 0 40px 120px rgba(0,0,0,.45);
    transform: translateY(12px) scale(.98);
    opacity:.98;
    transition: transform var(--normal) var(--ease), opacity var(--normal) var(--ease);
    padding: clamp(1rem, 2.6vw, 1.25rem);
  }
  .contact-modal.is-open .contact-modal__dialog{ transform: translateY(0) scale(1); opacity:1; }
  
  .contact-modal__close {
    position: absolute;
    top: .6rem;
    left: 50%;
    transform: translateX(-50%); /* centers it perfectly */
    width: 66px;
    height: 7px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  
  .contact-modal__close:hover{ background: rgba(255,255,255,.06); transform: translateX(-50%);}
  
  .contact-modal__header{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem;
  }
  .contact-modal__header h3{ margin:0; font-size: clamp(1.1rem, 1.5rem + .6vw, 1.75rem); }
  .contact-modal__socials{ display:flex; gap:.5rem; list-style:none; margin:0; padding:0; }
  .contact-modal__socials a{
    display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
    border:1px solid var(--border); background: rgba(255,255,255,.03);
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .contact-modal__socials a:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }


  
  .contact-modal__form{ display:grid; gap:.75rem; }
  .cm-field{ display:grid; gap:.4rem; }
  .cm-field label{ font-weight:700; letter-spacing:.2px; }
  .cm-field input, .cm-field textarea{
    width:100%; border:1px solid var(--border); border-radius:14px;
    padding:.85rem .95rem; color:var(--text); background: rgba(255,255,255,.02);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
  }
  .cm-field input:focus, .cm-field textarea:focus{ outline:none; border-color: rgba(255,255,255,.18); box-shadow: var(--ring); background: rgba(255,255,255,.03); }
  .cm-err{ color:#fca5a5; font-size:.9rem; min-height:1.1em; }
  .cm-hp{ position:absolute; left:-9999px; opacity:0; }
  .cm-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.25rem; }
  .cm-note{ color:var(--text-muted); margin:.2rem 0 0 0; }
  .cm-toast{ display:none; margin-top:.6rem; border-radius:12px; padding:.65rem .8rem; border:1px solid transparent; }
  .cm-toast.show{ display:block; }
  .cm-toast.success{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); }
  .cm-toast.error{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); }