/* ============================================================
   ACHU PRADEEP — COMMAND COSMOS
   Dark cinematic portfolio · gold-dominant / cyan secondary
   ============================================================ */

:root{
  --bg:        #0A0D12;
  --bg-2:      #0E1218;
  --navy:      #131A24;
  --panel:     rgba(var(--bg-rgb),0.55);
  --panel-line:rgba(var(--accent-rgb),0.16);
  --line:      rgba(var(--ink-rgb),0.08);

  --gold:      #4D9FFF;
  --gold-br:   #7FB8FF;
  --cyan:      #DCE7F5;
  --cyan-dim:  rgba(var(--accent2-rgb),0.6);

  --ink:       #EAF0FF;
  --ink-soft:  #aab3c8;
  --ink-mute:  #66708a;

  --accent:    var(--gold);
  --accent-2:  var(--cyan);

  /* theme-engine tokens (lerped by JS) */
  --accent-rgb: 77,159,255;
  --accent2-rgb: 220,231,245;
  --bg-rgb: 10,13,18;
  --ink-rgb: 234,240,255;
  --name-a: #ffffff;
  --name-b: #c9d3ec;
  --vignette: rgba(0,0,0,0.55);
  --on-accent: #0A0D12;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "DM Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --glow-gold: 0 0 28px rgba(var(--accent-rgb),0.35);
  --glow-cyan: 0 0 28px rgba(var(--accent2-rgb),0.30);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:auto;
}
body.lenis-on{ overflow:hidden; } /* lenis manages scroll once booted */
body.booting{ overflow:hidden; height:100vh; }
body.modal-lock{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(var(--accent-rgb),0.25); color:var(--ink); }

/* ---------- persistent cosmos canvas ---------- */
#cosmos{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; display:block; pointer-events:none;
}
#cosmos.interactive{ pointer-events:auto; }
.cosmos-fallback{
  position:fixed; inset:0; z-index:0; display:none;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(var(--accent-rgb),0.16), transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(var(--accent2-rgb),0.10), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, var(--bg-2), var(--bg) 70%);
}
body.static-mode .cosmos-fallback{ display:block; }
body.static-mode #cosmos{ display:none; }

/* grain + vignette overlays */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 50%, transparent 55%, var(--vignette) 100%);
}

/* cursor light */
#cursor-light{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:3;
  margin:-260px 0 0 -260px; pointer-events:none; opacity:0;
  transition:opacity .4s;
  background:radial-gradient(circle, rgba(var(--accent-rgb),0.10), transparent 60%);
  mix-blend-mode:screen;
}

/* ---------- content layering ---------- */
main, .nav, .footer, .modal{ position:relative; z-index:4; }
.section{ position:relative; padding:140px 28px; min-height:100vh; display:flex; align-items:center; }
.hero{ min-height:100vh; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; }

/* ---------- typography ---------- */
.kicker{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.04;
  letter-spacing:-0.02em; margin-bottom:28px; text-wrap:balance;
}
.lead{ font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--ink-soft); max-width:54ch; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:18px clamp(20px,4vw,44px);
  transition:background .4s, backdrop-filter .4s, padding .4s;
}
.nav.scrolled{
  background:rgba(var(--bg-rgb),0.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding-top:12px; padding-bottom:12px;
}
.nav__brand{ display:flex; align-items:center; gap:12px; margin-right:18px; }
.nav__mark{
  width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-br), var(--gold) 50%, transparent 72%);
  box-shadow:var(--glow-gold); position:relative; flex:none;
}
.nav__mark::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(var(--accent2-rgb),0.5); animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.nav__name{ font-family:var(--display); font-weight:600; letter-spacing:.04em; font-size:1rem; }
.nav__name em{ font-style:normal; color:var(--accent); margin-left:2px; }
.nav__role{ display:inline-flex; align-items:center; gap:3px; margin-right:auto;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft); white-space:nowrap; }
.nav__role::before{ content:"//"; color:var(--ink-mute); margin-right:7px; }
.cursor--nav{ width:7px; height:13px; margin-left:2px; }
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--ink-soft); position:relative; padding:4px 0; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--accent); transition:width .3s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after, .nav__links a.active::after{ width:100%; }
.nav__links a.active{ color:var(--accent); }
.nav__cta{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.05em;
  padding:9px 18px; border:1px solid var(--accent);
  border-radius:999px; color:var(--accent); transition:.25s;
}
.nav__cta:hover{ background:var(--accent); color:var(--on-accent); box-shadow:var(--glow-gold); }
.nav__menu{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__menu span{ width:24px; height:2px; background:var(--ink); border-radius:2px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.86rem; letter-spacing:.04em;
  padding:14px 26px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s, box-shadow .3s, background .3s, color .3s, border-color .3s; position:relative; overflow:hidden;
}
.btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.32) 50%, transparent 68%);
  transform:translateX(-140%); transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.btn:hover::before{ transform:translateX(140%); }
.btn:active{ transform:scale(.965); }
.btn--primary{ background:linear-gradient(180deg,var(--gold-br),var(--gold)); color:var(--on-accent); font-weight:600; box-shadow:var(--glow-gold); }
.btn--primary:hover{ box-shadow:0 0 40px rgba(var(--accent-rgb),0.55); }
.btn--ghost{ border-color:rgba(var(--ink-rgb),0.22); color:var(--ink); background:rgba(var(--ink-rgb),0.02); }
.btn--ghost:hover{ border-color:var(--accent-2); color:var(--ink); box-shadow:var(--glow-cyan); }

/* ============ HERO (pinned while the name falls) ============ */
.section.hero{ display:block; padding:0; min-height:100vh; text-align:left; }
.hero__pin{
  position:sticky; top:0; min-height:100vh; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px clamp(20px,4vw,28px) 60px;
}
/* flight active: hero gains a scroll runway; the pin holds the viewport while the name falls */
.name-flying .section.hero{ height:155vh; min-height:0; }
.hero__content{ width:100%; max-width:var(--maxw); margin:0 auto; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.28em;
  color:var(--accent-2); margin-bottom:26px;
  padding:7px 14px; border:1px solid rgba(var(--accent2-rgb),0.25); border-radius:999px;
  background:rgba(var(--accent2-rgb),0.04);
}
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.hero__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.6rem,9.5vw,7.6rem); line-height:.92; letter-spacing:-0.03em;
  margin-bottom:18px; white-space:nowrap;
  background:linear-gradient(180deg,var(--name-a) 30%, var(--name-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* ghost: reserves layout while the flying name is airborne */
.name-flying .hero__name .slot-ghost{ visibility:hidden; }

/* --- scroll-scrubbed 3D flying name --- */
.fly-name{
  position:fixed; top:0; left:0; z-index:60; pointer-events:none;
  transform-origin:left top; will-change:transform; white-space:nowrap;
  display:none;
}
.name-flying .fly-name{ display:block; }
.fly-name__inner{
  display:inline-block; transform-origin:50% 50%; will-change:transform,filter;
  font-family:var(--display); font-weight:700; font-size:120px; line-height:.92; letter-spacing:-0.03em;
  background:linear-gradient(180deg,var(--name-a) 30%, var(--name-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
.fly-name__inner em{
  font-style:normal;
  background:linear-gradient(180deg,var(--gold-br),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.name-flying #navName{ opacity:0; }
/* gesture: brand re-entry when the flying name returns home */
#navName{ display:inline-block; transform-origin:50% 100%; }
#navName.returning{ animation:navReturn .9s cubic-bezier(.2,.8,.2,1); }
@keyframes navReturn{
  0%{ transform:translateY(-16px) rotateX(70deg) scale(.92); filter:blur(5px); }
  55%{ transform:translateY(2px) rotateX(-10deg) scale(1.03); filter:blur(0); }
  100%{ transform:none; filter:none; }
}
.nav__brand{ perspective:500px; position:relative; }
#navName.returning::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:navSweep .9s ease-out;
}
@keyframes navSweep{ 0%{ transform:scaleX(0); opacity:1; } 70%{ transform:scaleX(1); opacity:.9; } 100%{ transform:scaleX(1); opacity:0; } }
.nav__brand:has(#navName.returning) .nav__mark{ animation:markPulse .9s ease-out; }
@keyframes markPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0.7); } 100%{ box-shadow:0 0 0 18px rgba(var(--accent-rgb),0); } }
.name-dock{ width:100%; margin-top:20px; }

.hero__role{
  font-family:var(--mono); font-size:clamp(1rem,2.6vw,1.7rem);
  color:var(--accent); letter-spacing:.02em; min-height:1.6em; margin-bottom:22px;
}
.cursor{ display:inline-block; width:.55ch; height:1em; background:var(--accent); margin-left:4px; vertical-align:-2px; animation:blink 1.05s steps(2) infinite; }
.cursor--role{ background:var(--accent); }
@keyframes blink{ 50%{ opacity:0; } }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.18rem); color:var(--ink-soft); max-width:50ch; margin-bottom:36px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:44px; font-family:var(--mono); font-size:.84rem; color:var(--ink-soft); }
.hero__meta span{ display:inline-flex; align-items:center; gap:9px; }
.hero__meta i{ width:7px; height:7px; border-radius:1px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 8px var(--accent); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; }
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.25em; color:var(--ink-mute); text-transform:uppercase;
}
.hero__scroll i{ width:1px; height:42px; background:linear-gradient(var(--accent),transparent); animation:scrolldown 1.8s infinite; }
@keyframes scrolldown{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 50.1%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============ ABOUT ============ */
.about__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
/* --- animated AI portrait (video frame) --- */
.portrait-persp{ perspective:900px; }
.portrait-frame{
  position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden;
  border:1px solid var(--panel-line);
  background:var(--navy);
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-rgb),0.06) inset;
  transition:transform .25s ease-out, box-shadow .4s;
  transform-style:preserve-3d; will-change:transform;
}
.portrait-frame:hover{ box-shadow:0 40px 100px rgba(0,0,0,0.6), 0 0 44px rgba(var(--accent-rgb),0.12); }
.pframe__stack{ position:absolute; inset:0; }
.pframe__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  opacity:0; filter:saturate(.92) contrast(1.07) brightness(.95);
  transition:opacity 1.1s ease;
}
.pframe__img.active{ opacity:1; }
.pframe__img:nth-child(1).active{ animation:kenA 6s ease-in-out forwards; }
.pframe__img:nth-child(2).active{ animation:kenB 6s ease-in-out forwards; }
.pframe__img:nth-child(3).active{ animation:kenC 6s ease-in-out forwards; }
@keyframes kenA{ 0%{ transform:scale(1.06) translate(1.4%,1%); } 100%{ transform:scale(1.13) translate(-1%,-1.2%); } }
@keyframes kenB{ 0%{ transform:scale(1.14) translate(-1.4%,-1%); } 100%{ transform:scale(1.05) translate(0.8%,0.6%); } }
@keyframes kenC{ 0%{ transform:scale(1.05) translate(-1%,1.2%); } 100%{ transform:scale(1.14) translate(1.2%,-0.8%); } }
.pframe__img.in{ animation:glitchIn .62s steps(8) !important; }
@keyframes glitchIn{
  0%{ clip-path:inset(0 0 82% 0); transform:translateX(-8px) scale(1.08); filter:saturate(.9) contrast(1.45) brightness(1.5); opacity:1; }
  20%{ clip-path:inset(28% 0 38% 0); transform:translateX(6px) scale(1.08); opacity:1; }
  40%{ clip-path:inset(60% 0 8% 0); transform:translateX(-5px) scale(1.08); opacity:1; }
  60%{ clip-path:inset(10% 0 55% 0); transform:translateX(4px) scale(1.08); filter:saturate(1.4) contrast(1.2) hue-rotate(14deg); opacity:1; }
  80%{ clip-path:inset(45% 0 20% 0); transform:translateX(-3px) scale(1.08); opacity:1; }
  100%{ clip-path:inset(0 0 0 0); transform:scale(1.06); filter:saturate(.92) contrast(1.07) brightness(.95); opacity:1; }
}
.portrait-frame.glitching .portrait-grid{ opacity:.5; }
.portrait-frame.glitching::before{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(var(--accent2-rgb),0.07) 0 2px, transparent 2px 5px); animation:flick .62s steps(4); }
@keyframes flick{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
.pframe__hud{ position:absolute; top:12px; left:14px; right:14px; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pframe__rec{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--ink);
  padding:5px 10px; border-radius:999px; background:rgba(var(--bg-rgb),0.62); border:1px solid rgba(var(--accent2-rgb),0.22); backdrop-filter:blur(4px); white-space:nowrap; }
.pframe__rec i{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); animation:pulse 1.4s infinite; }
.pframe__tc{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--ink-soft); text-shadow:0 1px 5px rgba(0,0,0,0.8); font-variant-numeric:tabular-nums; }
.pframe__frameno{ position:absolute; right:16px; bottom:14px; z-index:3; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; color:var(--ink-soft); text-shadow:0 1px 5px rgba(0,0,0,0.8); }
.portrait-grade{ position:absolute; inset:0; z-index:2; mix-blend-mode:soft-light; pointer-events:none;
  background:linear-gradient(150deg, rgba(var(--accent-rgb),0.32), transparent 45%, rgba(var(--accent2-rgb),0.20)); }
.portrait-frame::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(var(--bg-rgb),0.55) 100%); }
.portrait-grid{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.15; transition:opacity .3s;
  background-image:linear-gradient(rgba(var(--accent2-rgb),0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent2-rgb),0.4) 1px, transparent 1px);
  background-size:26px 26px; mask:radial-gradient(circle at 70% 30%, #000, transparent 70%); }
.ph-mono{ font-family:var(--mono); font-size:.74rem; color:var(--ink-mute); letter-spacing:.05em; }
.portrait-hud{ position:absolute; width:34px; height:34px; border:2px solid var(--accent-2); opacity:.85; z-index:3; }
.portrait-hud--tl{ display:none; }
.portrait-hud--br{ bottom:14px; right:14px; border-left:0; border-top:0; opacity:.45; }
.portrait-scan{ position:absolute; left:0; right:0; height:2px; top:0; z-index:3; background:linear-gradient(90deg,transparent,var(--accent-2),transparent); animation:scan 4.5s linear infinite; opacity:.5; }
.portrait-tag{ position:absolute; left:16px; bottom:14px; z-index:3; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; color:var(--ink); text-shadow:0 1px 6px rgba(0,0,0,0.7); }
@keyframes scan{ to{ top:100%; } }
.about__body .lead{ margin-bottom:42px; }
.stats{ display:flex; flex-wrap:wrap; gap:42px; }
.stat b{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,4vw,3rem); color:var(--accent); display:block; line-height:1; }
.stat span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-mute); text-transform:uppercase; }

/* ============ SKILLS (horizontal rail) ============ */
.skills{ display:block; height:300vh; min-height:0; padding:0; align-items:initial; }
.skills__pin{ position:sticky; top:0; height:100vh; min-height:600px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.skills__head{ margin:0 auto 26px; padding:0 clamp(20px,5vw,64px); }
.skills__hint{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--accent-2); margin-top:4px; }
.skills__hint i{ font-style:normal; animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(7px); } }
.skills__viewport{ width:100%; overflow:hidden; }
.skills__grid{ display:flex; gap:22px; will-change:transform; padding:8px max(20px, calc((100vw - var(--maxw))/2)); }
.skills__grid.rail-on{ transition:transform .2s cubic-bezier(.2,.7,.2,1); }
.skills__progress{ margin:24px auto 0; padding:0 clamp(20px,5vw,64px); width:100%; }
.skills__progress i{ display:block; height:2px; width:0; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(var(--accent-rgb),0.4); transition:width .1s linear; }

.skill-card{
  flex:0 0 clamp(260px, 26vw, 330px); align-self:stretch;
  border:1px solid rgba(var(--ink-rgb),0.10); border-radius:18px; padding:26px 24px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 9%, rgba(var(--bg-rgb),0.85)), rgba(var(--bg-rgb),0.9));
  backdrop-filter:blur(10px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.skill-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--card-accent); box-shadow:0 0 18px var(--card-accent); opacity:.85; }
.skill-card::after{ content:""; position:absolute; top:-40%; right:-30%; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 65%); opacity:.5; pointer-events:none; }
.skill-card:hover{ transform:translateY(-8px); border-color:var(--card-accent); box-shadow:0 26px 60px rgba(0,0,0,0.5); }
.skill-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.skill-card__no{ font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; color:var(--card-accent); }
.skill-node{ width:16px; height:16px; border-radius:50%; background:var(--card-accent); box-shadow:0 0 18px var(--card-accent); flex:none; position:relative; }
.skill-node::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--card-accent); opacity:.5; }
.skill-card h3{ font-family:var(--display); font-weight:600; font-size:1.24rem; letter-spacing:.005em; margin-bottom:16px; line-height:1.15; }
.skill-card .tags{ margin-bottom:18px; }
.skill-card__count{ margin-top:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.tags li{ font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--ink-soft); padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(var(--ink-rgb),0.03); transition:.25s; }
.skill-card:hover .tags li{ border-color:color-mix(in srgb, var(--card-accent) 35%, transparent); color:var(--ink); }
.tags--lg li{ font-size:.82rem; padding:8px 15px; }

/* ============ PROJECTS ============ */
.projects{ flex-direction:column; align-items:stretch; justify-content:center; }
.projects > .wrap{ margin-left:auto; margin-right:auto; }
.section-hint{ font-family:var(--mono); font-size:.92rem; color:var(--accent-2); margin-top:6px; }
.section-hint .hint-sub{ color:var(--ink-mute); }
.constellation-stage{ position:relative; width:100%; height:min(56vh,560px); margin:18px 0 30px; pointer-events:none; }
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; }
.proj-card{
  border:1px solid var(--line); border-radius:18px; padding:0;
  background:var(--panel); backdrop-filter:blur(8px); cursor:pointer; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.proj-card:hover{ transform:translateY(-7px); border-color:var(--pc,var(--accent)); box-shadow:0 26px 64px rgba(0,0,0,0.5); }

/* cover media banner */
.proj-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); }
.proj-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.proj-card:hover .proj-card__media img{ transform:scale(1.13); }
.proj-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(var(--bg-rgb),0.55) 78%, var(--panel)); }
.proj-card__scan{ position:absolute; left:0; right:0; top:0; height:42px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 30%, transparent), transparent); transition:opacity .3s; }
.proj-card:hover .proj-card__scan{ opacity:1; animation:cardScan 2.4s linear infinite; }
@keyframes cardScan{ 0%{ transform:translateY(-50px); } 100%{ transform:translateY(240px); } }
.proj-card__media .proj-card__cat{ position:absolute; top:14px; left:14px; z-index:2; margin:0;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:#fff;
  padding:5px 10px; border-radius:999px; background:rgba(var(--bg-rgb),0.72); border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); backdrop-filter:blur(4px); }
.proj-card__icon{ position:absolute; right:14px; bottom:-22px; z-index:2; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:var(--pc,var(--accent));
  background:rgba(var(--bg-rgb),0.86); border:1px solid color-mix(in srgb, var(--pc,var(--accent)) 45%, transparent); box-shadow:0 8px 24px rgba(0,0,0,0.4); transition:.35s; }
.proj-card:hover .proj-card__icon{ box-shadow:0 0 26px color-mix(in srgb, var(--pc,var(--accent)) 55%, transparent); transform:translateY(-2px); }
.proj-card__icon svg{ width:26px; height:26px; }

/* body */
.proj-card__body{ padding:30px 24px 24px; display:flex; flex-direction:column; flex:1; position:relative; }
.proj-card__idx{ position:absolute; top:-30px; left:24px; z-index:2; font-family:var(--mono); font-size:.72rem; color:#fff; opacity:.85; }
.proj-card__cat{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; color:var(--pc,var(--accent)); }
.proj-card h3{ font-family:var(--display); font-weight:600; font-size:1.18rem; margin-bottom:10px; word-break:break-word; }
.proj-card p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:18px; }
.proj-card .tags{ margin-bottom:6px; }
.proj-card .tags li{ font-size:.7rem; padding:4px 9px; }
.proj-card__open{ font-family:var(--mono); font-size:.74rem; color:var(--pc,var(--accent)); margin-top:auto; padding-top:18px; display:inline-flex; gap:7px; align-items:center; letter-spacing:.05em; white-space:nowrap; }
.proj-card__open i{ font-style:normal; transition:transform .25s; }
.proj-card:hover .proj-card__open i{ transform:translateX(5px); }

/* modal media orb */
.modal-orb{ position:relative; z-index:2; width:130px; height:130px; display:grid; place-items:center; color:var(--pc); }
.modal-orb__glow{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--pc) 55%, transparent), transparent 65%); animation:badgePulse 3.6s ease-in-out infinite; }
.modal-orb__icon{ position:relative; z-index:2; width:74px; height:74px; border-radius:20px; display:grid; place-items:center;
  background:rgba(var(--bg-rgb),0.7); border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); box-shadow:0 0 30px color-mix(in srgb, var(--pc) 40%, transparent); }
.modal-orb__icon svg{ width:38px; height:38px; }

/* ============ TRADING ============ */
.trading{ position:relative; overflow:hidden; }
.trading::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(95deg, rgba(var(--bg-rgb),0.95) 0%, rgba(var(--bg-rgb),0.82) 34%, rgba(var(--bg-rgb),0.4) 58%, rgba(var(--bg-rgb),0.08) 78%, transparent 90%); }
.trading > .wrap{ position:relative; z-index:1; }
.trading__body{ position:relative; }
.trading__body::before{ content:""; position:absolute; inset:-26px -34px; z-index:-1; border-radius:20px;
  background:radial-gradient(130% 110% at 0% 42%, rgba(var(--bg-rgb),0.78), rgba(var(--bg-rgb),0.34) 65%, transparent 88%); }
.trading__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.trading__viz{
  position:relative; aspect-ratio:16/11; border-radius:14px; overflow:hidden;
  border:1px solid var(--panel-line); background:#02060e;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
}
.viz-chart{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:hue-rotate(28deg) saturate(.72) contrast(1.08) brightness(.88); animation:vizDrift 22s ease-in-out infinite; }
@keyframes vizDrift{ 0%,100%{ transform:scale(1.06) translate(0,0); } 50%{ transform:scale(1.14) translate(-2%,-1.5%); } }
.viz-grid{ position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:linear-gradient(rgba(var(--accent2-rgb),0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent2-rgb),0.5) 1px, transparent 1px);
  background-size:38px 38px; }
.viz-scan{ position:absolute; left:0; right:0; top:0; height:90px; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--accent2-rgb),0.18), transparent); animation:vizScan 5s linear infinite; }
@keyframes vizScan{ 0%{ transform:translateY(-100px); } 100%{ transform:translateY(620px); } }
.viz-fvg{ position:absolute; left:0; right:0; height:34px; pointer-events:none; mix-blend-mode:screen; }
.viz-fvg--1{ top:32%; background:linear-gradient(90deg, transparent, rgba(var(--accent2-rgb),0.22), transparent); animation:fvgPulse 3.2s ease-in-out infinite; }
.viz-fvg--2{ top:58%; background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.22), transparent); animation:fvgPulse 3.2s ease-in-out infinite .8s; }
@keyframes fvgPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.95; } }
.viz-live{ position:absolute; top:14px; left:16px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--ink);
  padding:6px 11px; border-radius:999px; background:rgba(var(--bg-rgb),0.7); border:1px solid rgba(var(--accent2-rgb),0.3); backdrop-filter:blur(6px); }
.viz-live i{ width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 8px var(--accent-2); animation:pulse 1.6s infinite; }
.viz-tag{ position:absolute; bottom:14px; left:16px; z-index:3; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,0.8); }
.tags--lg{ margin-top:30px; }

/* ============ EXPERIENCE / TIMELINE ============ */
.timeline{ list-style:none; margin-top:54px; position:relative; padding-left:40px; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--accent),rgba(var(--accent2-rgb),0.4),transparent); }
.tl-item{ position:relative; padding:0 0 46px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-40px; top:5px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); transition:.4s; }
.tl-item.lit .tl-dot{ background:var(--accent); box-shadow:var(--glow-gold); }
.tl-when{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--accent-2); }
.tl-role{ font-family:var(--display); font-weight:600; font-size:1.28rem; margin:6px 0 2px; }
.tl-co{ color:var(--ink-soft); font-size:.96rem; }
.tl-co b{ color:var(--ink); font-weight:600; }

/* ============ CERTS ============ */
.badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
.badge{
  position:relative; min-height:280px; border-radius:16px; padding:30px 24px 26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.05), transparent 60%), var(--navy);
  border:1px solid var(--panel-line); overflow:hidden;
  transition:transform .5s, border-color .5s, box-shadow .5s;
}
.badge::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%, rgba(var(--ink-rgb),0.10) 48%, transparent 62%); transform:translateX(-130%); transition:transform 1s; pointer-events:none; }
.badge:hover::before{ transform:translateX(130%); }
.badge:hover{ transform:translateY(-7px); border-color:color-mix(in srgb, var(--bc) 60%, transparent); box-shadow:0 26px 70px rgba(0,0,0,0.5); }
.badge__mark{ position:relative; display:grid; place-items:center; width:128px; height:128px; }
.badge__mark--rh::before{ content:""; position:absolute; width:112px; height:112px; border-radius:22px; z-index:1;
  background:linear-gradient(160deg,#fdfdfd,#e9ebef); border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 10px 30px rgba(238,0,0,0.28), inset 0 1px 0 #fff; animation:badgeFloat 5s ease-in-out infinite; }
.badge__mark img{ width:88px; height:auto; position:relative; z-index:2; animation:badgeFloat 5s ease-in-out infinite; }
.badge__mark--shield svg{ width:74px; height:auto; position:relative; z-index:2; animation:badgeFloat 5s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(var(--accent2-rgb),0.6)); }
.badge__halo{ position:absolute; inset:4px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(238,0,0,0.40), transparent 64%); animation:badgePulse 3.4s ease-in-out infinite; }
.badge__halo--cy{ background:radial-gradient(circle, rgba(var(--accent2-rgb),0.3), transparent 62%); }
.badge__mark::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--bc) 55%, transparent); opacity:.5; animation:spin 16s linear infinite; }
@keyframes badgeFloat{ 0%,100%{ transform:translateY(-4px) rotate(-1deg); } 50%{ transform:translateY(5px) rotate(1deg); } }
@keyframes badgePulse{ 0%,100%{ opacity:.45; transform:scale(.92); } 50%{ opacity:.9; transform:scale(1.12); } }
.badge__meta{ display:flex; flex-direction:column; gap:6px; }
.badge__abbr{ font-family:var(--display); font-weight:700; font-size:1.6rem; letter-spacing:.02em; color:var(--ink); }
.badge h3{ font-family:var(--body); font-weight:500; font-size:.92rem; color:var(--ink-soft); line-height:1.35; }
.badge p{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--bc) 75%, #fff); }
.edu{ margin-top:40px; font-family:var(--mono); font-size:.86rem; color:var(--ink-soft); letter-spacing:.03em; }
.edu strong{ color:var(--accent); }

/* ============ CONTACT ============ */
.contact__wrap{ max-width:880px; }
.terminal{ border:1px solid var(--panel-line); border-radius:12px; overflow:hidden; background:rgba(var(--bg-rgb),0.8); backdrop-filter:blur(10px); margin:30px 0 36px; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.terminal__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(var(--ink-rgb),0.03); border-bottom:1px solid var(--line); }
.terminal__bar span{ width:11px; height:11px; border-radius:50%; background:var(--ink-mute); }
.terminal__bar span:nth-child(1){ background:#ff5f57; } .terminal__bar span:nth-child(2){ background:#febc2e; } .terminal__bar span:nth-child(3){ background:#28c840; }
.terminal__bar em{ margin-left:10px; font-family:var(--mono); font-size:.76rem; color:var(--ink-mute); font-style:normal; }
.terminal__body{ font-family:var(--mono); font-size:.92rem; line-height:1.9; padding:22px 22px 26px; color:var(--ink-soft); white-space:pre-wrap; min-height:160px; }
.terminal__body .p{ color:var(--accent-2); } .terminal__body .c{ color:var(--accent); } .terminal__body .o{ color:var(--ink); }
.contact__links{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-link{ display:flex; align-items:center; gap:16px; padding:18px 22px; border:1px solid var(--line); border-radius:12px; background:var(--panel); transition:.3s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden; }
.contact-link::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(var(--ink-rgb),0.07) 50%, transparent 65%);
  transform:translateX(-140%); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.contact-link:hover::before{ transform:translateX(140%); }
.contact-link:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,0.4); }
.contact-link i{ width:22px; height:22px; flex:none; color:var(--accent); display:block; }
.contact-link i svg{ width:100%; height:100%; display:block; }
.contact-link span{ display:flex; flex-direction:column; line-height:1.4; font-size:.9rem; }
.contact-link b{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; }
.contact__resume{ margin-top:30px; }

/* ============ FOOTER ============ */
.footer{ padding:44px 28px; border-top:1px solid var(--line); }
.footer__row{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.footer__meta{ font-family:var(--mono); font-size:.76rem; color:var(--ink-mute); letter-spacing:.04em; }

/* ============ MODAL ============ */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(var(--bg-rgb),0.78); backdrop-filter:blur(8px); }
.modal__card{
  position:relative; width:min(880px,100%); max-height:88vh; overflow:auto;
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--panel-line); border-radius:18px; background:var(--bg-2);
  box-shadow:0 40px 120px rgba(0,0,0,0.7);
}
.modal__close{ position:absolute; top:16px; right:16px; z-index:5; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,0.4); color:var(--ink); cursor:pointer; font-size:.9rem; transition:.2s; }
.modal__close:hover{ border-color:var(--accent); color:var(--accent); }
.modal__media{ position:relative; min-height:280px; background:var(--navy); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.modal-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:modalKen 16s ease-in-out infinite alternate; }
@keyframes modalKen{ 0%{ transform:scale(1.05) translate(0,0); } 100%{ transform:scale(1.16) translate(-2%,-2%); } }
.modal__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 40%, transparent 50%, rgba(var(--bg-rgb),0.55)); pointer-events:none; }
.modal-cover__scan{ position:absolute; left:0; right:0; top:0; height:70px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--ink-rgb),0.10), transparent); animation:modalScan 5s linear infinite; }
@keyframes modalScan{ 0%{ transform:translateY(-80px); } 100%{ transform:translateY(420px); } }
.modal__media .ph-frame{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background-image:repeating-linear-gradient(45deg, rgba(var(--ink-rgb),0.03) 0 9px, transparent 9px 20px); }
.modal__media .pulse-orb{ width:84px; height:84px; border-radius:50%; box-shadow:0 0 50px currentColor; }
.modal__info{ padding:34px 34px 38px; }
.modal__idx{ font-family:var(--mono); font-size:.74rem; color:var(--ink-mute); letter-spacing:.1em; }
.modal__title{ font-family:var(--display); font-weight:600; font-size:1.7rem; margin:8px 0 14px; }
.modal__desc{ color:var(--ink-soft); margin-bottom:20px; }
.modal__actions{ margin-top:26px; }

/* ============ BOOT LOADER ============ */
.boot{ position:fixed; inset:0; z-index:1000; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .8s ease; }
.boot.done{ opacity:0; pointer-events:none; }
.boot__inner{ width:min(520px,86vw); text-align:left; }
.boot__core{ position:relative; width:70px; height:70px; margin:0 auto 30px; }
.boot__core span{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--accent); opacity:.7; animation:bootspin 2.4s linear infinite; }
.boot__core span:nth-child(2){ inset:10px; border-color:var(--accent-2); animation-duration:1.8s; animation-direction:reverse; }
.boot__core span:nth-child(3){ inset:24px; background:radial-gradient(circle,var(--gold-br),var(--gold)); border:0; box-shadow:var(--glow-gold); animation:none; }
@keyframes bootspin{ to{ transform:rotate(360deg); } }
.boot__log{ font-family:var(--mono); font-size:.8rem; line-height:1.8; color:var(--ink-soft); min-height:144px; white-space:pre-wrap; }
.boot__log .ok{ color:var(--accent-2); }
.boot__bar{ height:2px; background:rgba(var(--ink-rgb),0.1); border-radius:2px; overflow:hidden; margin-top:14px; }
.boot__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--glow-gold); transition:width .2s; }
.boot__skip{ margin-top:18px; background:none; border:0; color:var(--ink-mute); font-family:var(--mono); font-size:.78rem; cursor:pointer; letter-spacing:.06em; transition:color .2s; }
.boot__skip:hover{ color:var(--accent); }

/* ---------- reveal anim ---------- */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .about__portrait{ max-width:340px; }
  .trading__grid{ grid-template-columns:1fr; gap:36px; }
  .badges{ grid-template-columns:1fr; max-width:360px; }
  .modal__card{ grid-template-columns:1fr; }
  .modal__media{ min-height:200px; }
}
@media (max-width:760px){
  .skills{ height:280vh; }
  .skills__pin{ min-height:520px; }
  .skills__head{ margin-bottom:20px; }
  .skill-card{ flex:0 0 76vw; }
}
@media (max-width:720px){
  .section{ padding:96px 20px; }
  .wrap{ padding:0; }
  .h2{ font-size:clamp(1.85rem,7.5vw,2.4rem); }
  .nav{ padding:14px 18px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__role{ display:none; }
  .nav__menu{ display:flex; }
  .nav.open .nav__links{ display:flex; position:absolute; top:100%; right:14px; flex-direction:column; gap:16px; background:rgba(var(--bg-rgb),0.96); border:1px solid var(--line); padding:22px 28px; border-radius:14px; backdrop-filter:blur(14px); }
  .nav.open .nav__links a{ font-size:1rem; }
  .hero{ text-align:left; }
  .hero__content{ padding-top:40px; }
  .hero__name{ font-size:clamp(3rem,17vw,5rem); }
  .hero__role{ font-size:1.05rem; }
  .hero__meta{ gap:14px 22px; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1; justify-content:center; }
  .hero__scroll{ display:none; }
  .about__portrait{ max-width:100%; }
  .portrait-frame{ max-width:100%; }
  .stats{ gap:26px 34px; }
  .proj-grid{ grid-template-columns:1fr; gap:14px; }
  .trading__viz{ aspect-ratio:16/12; }
  .timeline{ padding-left:30px; }
  .tl-dot{ left:-30px; }
  .badges{ max-width:100%; }
  .contact__links{ grid-template-columns:1fr; }
  .terminal__body{ font-size:.78rem; }
  .footer__row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .constellation-stage{ display:none; }
  /* keep the cosmos behind content but calmer on phones */
  body::after{ background:radial-gradient(140% 100% at 50% 30%, transparent 50%, var(--vignette) 100%); }
}
@media (max-width:420px){
  .hero__name{ font-size:clamp(2.6rem,15vw,3.4rem); }
  .skill-card{ flex:0 0 82vw; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .portrait-scan, .hero__scroll i, .nav__mark::after, .cursor{ animation:none; }
  *{ scroll-behavior:auto !important; }
}