/* ============================================================
   RAGHAV KUINKEL — Cybersecurity Portfolio
   style.css  |  Dark HUD / Neon Cyber Theme
   ============================================================ */

/* ── 1. CSS VARIABLES ─────────────────────────────────────── */
:root {
  --bg:          #030810;
  --bg2:         #060d18;
  --bg3:         #091524;
  --cyan:        #00e5ff;
  --cyan-d:      rgba(0,229,255,.13);
  --cyan-glow:   rgba(0,229,255,.35);
  --violet:      #b06fff;
  --violet-d:    rgba(176,111,255,.13);
  --violet-glow: rgba(176,111,255,.35);
  --green:       #00ffa3;
  --red:         #ff4560;
  --amber:       #ffb830;
  --gold:        #ffd700;
  --text:        #c8d9ec;
  --text-dim:    #5e7185;
  --border:      rgba(0,229,255,.09);
  --glass:       rgba(6,13,24,.72);
  --radius:      12px;
  --nav-h:       62px;
  --tr:          .26s cubic-bezier(.4,0,.2,1);
  --font-head:   'Orbitron', sans-serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-mono:   'Share Tech Mono', monospace;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:1rem;
  line-height:1.72; overflow-x:hidden; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .scanlines,#bgCanvas { display:none !important; }
}

/* ── 3. CANVAS + SCANLINES ───────────────────────────────── */
#bgCanvas {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-2; opacity:.48; pointer-events:none;
}
.scanlines {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 4px
  );
  animation:scanMove 10s linear infinite;
}
@keyframes scanMove { to { background-position:0 100px; } }

/* ── 4. UTILITIES ─────────────────────────────────────────── */
.con { max-width:1100px; margin:0 auto; padding:0 22px; }
.acc { color:var(--cyan); }
.sec { padding:96px 0; position:relative; z-index:1; }
.sec-tag {
  font-family:var(--font-mono); font-size:.76rem; color:var(--violet);
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px; opacity:.85;
}
.sm-tag { margin-top:56px; margin-bottom:10px; }
.sec-ttl {
  font-family:var(--font-head);
  font-size:clamp(1.8rem,4vw,2.7rem);
  font-weight:700; color:#ddeeff; letter-spacing:.04em; margin-bottom:52px;
}
.hidden { display:none !important; }

/* Glass card */
.glass-card {
  background:var(--glass); border:1px solid var(--border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius); padding:28px; position:relative;
  overflow:hidden;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
}
.glass-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(130deg,rgba(0,229,255,.035),transparent 55%);
  pointer-events:none;
}
.glass-card:hover,.glass-card:focus-visible {
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan),0 0 26px var(--cyan-glow),inset 0 0 18px rgba(0,229,255,.04);
  transform:translateY(-4px); outline:none;
}

/* Scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.rv.in { opacity:1; transform:translateY(0); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-size:.95rem; font-weight:700;
  letter-spacing:.09em; padding:11px 26px; border-radius:8px;
  border:none; cursor:pointer; position:relative; overflow:hidden;
  transition:all var(--tr); white-space:nowrap; text-decoration:none;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.06); transform:translateX(-100%);
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after { transform:translateX(0); }
.btn-p {
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:#000; box-shadow:0 0 18px var(--cyan-glow);
}
.btn-p:hover { box-shadow:0 0 30px var(--cyan-glow),0 0 14px var(--violet-glow); transform:translateY(-2px); }
.btn-o {
  background:transparent; color:var(--cyan); border:1px solid var(--cyan);
  box-shadow:inset 0 0 10px rgba(0,229,255,.04);
}
.btn-o:hover { background:var(--cyan-d); box-shadow:0 0 18px var(--cyan-glow); transform:translateY(-2px); }
.btn-w { width:100%; justify-content:center; }

/* Tags */
.tag {
  font-family:var(--font-mono); font-size:.7rem; color:var(--violet);
  background:var(--violet-d); border:1px solid rgba(176,111,255,.2);
  border-radius:4px; padding:3px 9px; letter-spacing:.05em;
}

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.chip {
  font-family:var(--font-mono); font-size:.76rem; color:var(--cyan);
  background:var(--cyan-d); border:1px solid rgba(0,229,255,.22);
  border-radius:20px; padding:5px 14px;
  transition:all var(--tr); cursor:default;
}
.chip:hover {
  background:var(--cyan); color:#000;
  box-shadow:0 0 10px var(--cyan-glow); transform:translateY(-2px);
}

/* ── 5. NAVBAR ────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  background:rgba(3,8,16,.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:background var(--tr);
}
.navbar.scrolled {
  background:rgba(3,8,16,.97);
  border-bottom-color:rgba(0,229,255,.18);
}
.nav-wrap {
  max-width:1100px; margin:0 auto; padding:0 22px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:var(--font-head); font-size:1.25rem; font-weight:900;
  color:var(--cyan); letter-spacing:.12em;
  transition:text-shadow var(--tr);
}
.nav-logo:hover { text-shadow:0 0 14px var(--cyan); }
.lb { color:var(--violet); }
.nav-list { display:flex; align-items:center; gap:4px; }
.na {
  font-family:var(--font-body); font-size:.88rem; font-weight:600;
  color:var(--text-dim); padding:6px 13px; border-radius:6px;
  letter-spacing:.06em; position:relative;
  transition:color var(--tr),background var(--tr); overflow:hidden;
}
.na::after {
  content:''; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%); width:0; height:2px;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  transition:width var(--tr);
}
.na:hover,.na:focus-visible,.na.active { color:var(--cyan); background:var(--cyan-d); outline:none; }
.na:hover::after,.na.active::after { width:60%; }
.nav-cta { border:1px solid var(--cyan); color:var(--cyan) !important; }
.nav-cta:hover { background:var(--cyan) !important; color:#000 !important; }
.nav-cta::after { display:none; }

/* Hamburger */
.ham {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:7px; border-radius:6px; transition:background var(--tr);
}
.ham:hover { background:var(--cyan-d); }
.ham:focus-visible { outline:2px solid var(--cyan); }
.ham span {
  display:block; width:22px; height:2px; background:var(--cyan);
  border-radius:2px; transition:transform var(--tr),opacity var(--tr);
}
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-list.mob { display:flex !important; flex-direction:column; position:absolute;
  top:var(--nav-h); left:0; right:0; background:rgba(3,8,16,.98);
  border-bottom:1px solid var(--border); padding:14px 20px 22px; gap:2px; }
.nav-list.mob .na { padding:11px 12px; }

/* ── 6. HERO ──────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center;
  padding:calc(var(--nav-h) + 52px) 22px 80px;
  max-width:1100px; margin:0 auto; position:relative; z-index:1;
}
.hero-wrap { display:flex; align-items:center; gap:52px; flex-wrap:wrap; }
.hero-txt { flex:1; min-width:280px; max-width:600px; }
.hero-eye {
  font-family:var(--font-mono); font-size:.83rem; color:var(--text-dim);
  margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.eye-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green);
  animation:dotP 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes dotP { 50% { opacity:.3; } }
.eye-lbl { color:var(--text); }
.bcur { color:var(--cyan); animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }

/* Hero name + glitch */
.hero-name {
  font-family:var(--font-head); font-size:clamp(2rem,6vw,4rem);
  font-weight:900; color:#fff; letter-spacing:.05em; line-height:1.08; margin-bottom:14px;
}
.glitch-h { position:relative; }
.glitch-h::before,.glitch-h::after {
  content:attr(data-text); position:absolute; inset:0;
  font-size:inherit; font-weight:inherit; letter-spacing:inherit; overflow:hidden;
}
.glitch-h::before {
  color:var(--cyan); clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
  animation:gTop 5s infinite linear; opacity:0;
}
.glitch-h::after {
  color:var(--violet); clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%);
  animation:gBot 5s infinite linear; opacity:0;
}
.glitch-h:hover::before,.glitch-h:hover::after { opacity:1; }
@keyframes gTop { 0%,88%,94%,100%{transform:translate(0)} 90%{transform:translate(-3px,-2px)} }
@keyframes gBot { 0%,86%,92%,100%{transform:translate(0)} 88%{transform:translate(3px,2px)} 91%{transform:translate(-2px,1px)} }

.hero-hl {
  font-family:var(--font-mono); font-size:clamp(.9rem,2.2vw,1.18rem);
  color:var(--cyan); margin-bottom:12px; letter-spacing:.07em;
}
.hl-sep { color:var(--violet); margin:0 8px; }
.hero-loc { font-family:var(--font-mono); font-size:.8rem; color:var(--text-dim); margin-bottom:16px; }
.hero-bio { font-size:1rem; color:var(--text-dim); margin-bottom:32px; line-height:1.78; }
.hero-bio strong { color:var(--text); }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }

/* Terminal */
.terminal {
  flex:0 0 340px; min-width:240px;
  background:rgba(0,0,0,.62); border:1px solid rgba(0,229,255,.18);
  border-radius:10px; overflow:hidden;
  box-shadow:0 0 32px rgba(0,229,255,.1);
}
.term-bar {
  display:flex; align-items:center; gap:7px; padding:9px 14px;
  background:rgba(0,0,0,.45); border-bottom:1px solid rgba(0,229,255,.1);
}
.td { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.td-r{background:#ff5f57}.td-a{background:#febc2e}.td-g{background:#28c840}
.term-ttl { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); margin-left:4px; }
.term-body {
  padding:16px 18px; min-height:150px;
  font-family:var(--font-mono); font-size:.8rem; line-height:1.85;
  display:flex; flex-direction:column; gap:1px;
}
.tl-row { display:flex; gap:6px; }
.tp { color:var(--green); }
.tc { color:var(--text-dim); }
.ta { color:var(--violet); }
.tv { color:var(--cyan); }
.tcur { color:var(--cyan); animation:blink 1s step-end infinite; }

/* Hero rings */
.hero-rings { position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:420px; height:420px; pointer-events:none; z-index:-1; }
.ring { position:absolute; border-radius:50%; border:1px solid; }
.r1 { inset:0; border-color:rgba(0,229,255,.055); animation:rP 5s ease-in-out infinite; }
.r2 { inset:60px; border-color:rgba(176,111,255,.09); animation:rP 5s ease-in-out infinite .8s; }
.r3 { inset:120px; border-color:rgba(0,229,255,.14); animation:rP 5s ease-in-out infinite 1.6s; }
@keyframes rP { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.04);opacity:1} }

/* ── 7. ABOUT ─────────────────────────────────────────────── */
.about-s { background:var(--bg2); }
.about-grid { display:grid; grid-template-columns:200px 1fr; gap:52px; align-items:start; }
.av-col { display:flex; flex-direction:column; align-items:center; gap:14px; }
.av-frame { position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
.av-core {
  width:110px; height:110px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan-d),var(--violet-d));
  border:2px solid var(--cyan); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 22px var(--cyan-glow); z-index:1;
}
.av-init { font-family:var(--font-head); font-size:2rem; font-weight:900; color:var(--cyan); }
.av-ring { position:absolute; border-radius:50%; border:1px dashed; animation:spin linear infinite; }
.ar1 { inset:0; border-color:rgba(0,229,255,.22); animation-duration:14s; }
.ar2 { inset:14px; border-color:rgba(176,111,255,.18); animation-duration:9s; animation-direction:reverse; }
@keyframes spin { to { transform:rotate(360deg); } }
.av-badge {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:.68rem; color:var(--green);
  background:rgba(0,255,163,.08); border:1px solid rgba(0,255,163,.18);
  border-radius:20px; padding:5px 12px; white-space:nowrap;
}
.av-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:dotP 2s ease-in-out infinite; }
.about-body p { color:var(--text-dim); margin-bottom:14px; line-height:1.78; }
.about-body strong { color:var(--text); }

/* ── 8. SKILLS ────────────────────────────────────────────── */
.skills-s { background:var(--bg); }
.sk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }

.sk-card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px 22px 22px;
  position:relative; overflow:hidden; cursor:default;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
  backdrop-filter:blur(10px);
}
/* Scanner line */
.card-scan {
  position:absolute; left:0; right:0; height:52px; top:-52px;
  background:linear-gradient(to bottom,transparent,rgba(0,229,255,.055),transparent);
  pointer-events:none;
}
.sk-card:hover .card-scan,.sk-card:focus-visible .card-scan,
.cert-card:hover .cc-scan,.cert-card:focus-visible .cc-scan {
  animation:scanSweep .55s ease-in-out forwards;
}
@keyframes scanSweep { 0%{top:-52px} 100%{top:110%} }

/* Neon trace border */
.sk-card::after,.cert-card::after {
  content:''; position:absolute; inset:-1px;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--cyan));
  background-size:200%; opacity:0; z-index:-1; transition:opacity var(--tr);
}
.sk-card:hover,.sk-card:focus-visible,
.cert-card:hover,.cert-card:focus-visible {
  border-color:transparent; box-shadow:0 0 22px var(--cyan-glow);
  transform:translateY(-5px); outline:none;
}
.sk-card:hover::after,.sk-card:focus-visible::after,
.cert-card:hover::after,.cert-card:focus-visible::after {
  opacity:1; animation:neonTrace 2s linear infinite;
}
@keyframes neonTrace { 0%{background-position:0%} 100%{background-position:200%} }

.sk-ico { font-size:1.8rem; margin-bottom:12px; display:block; transition:transform var(--tr),filter var(--tr); }
.sk-card:hover .sk-ico { transform:scale(1.15) rotate(-4deg); filter:drop-shadow(0 0 8px var(--cyan)); }
.sk-card h3 { font-family:var(--font-head); font-size:.94rem; font-weight:700; color:#ddeeff; margin-bottom:7px; letter-spacing:.05em; }
.sk-card p { font-size:.88rem; color:var(--text-dim); line-height:1.62; margin-bottom:16px; }
.bar-row { display:flex; align-items:center; gap:9px; }
.bar { flex:1; height:4px; background:rgba(255,255,255,.07); border-radius:10px; overflow:hidden; }
.bar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:10px; box-shadow:0 0 7px var(--cyan); transition:width 1.1s cubic-bezier(.4,0,.2,1); }
.bar-pct { font-family:var(--font-mono); font-size:.7rem; color:var(--cyan); min-width:33px; text-align:right; }

/* ── 9. EXPERIENCE ───────────────────────────────────────── */
.exp-s { background:var(--bg2); }
.tl { position:relative; padding-left:38px; }
.tl::before { content:''; position:absolute; left:10px; top:12px; bottom:12px; width:1px; background:linear-gradient(to bottom,var(--cyan),var(--violet),transparent); }
.tl-item { position:relative; margin-bottom:34px; }
.tl-item:last-child { margin-bottom:0; }
.tl-spine { position:absolute; left:-34px; top:22px; }
.tl-dot { width:20px; height:20px; border-radius:50%; background:var(--bg); border:2px solid var(--text-dim); display:flex; align-items:center; justify-content:center; transition:border-color var(--tr),box-shadow var(--tr); }
.tl-dot span { width:6px; height:6px; border-radius:50%; background:var(--text-dim); transition:background var(--tr); }
.tl-active { border-color:var(--cyan) !important; box-shadow:0 0 10px var(--cyan-glow) !important; }
.tl-active span { background:var(--cyan) !important; animation:dotP 2s ease-in-out infinite; }
.tl-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tl-role { font-family:var(--font-head); font-size:1rem; font-weight:700; color:#ddeeff; letter-spacing:.04em; }
.tl-org { font-family:var(--font-mono); font-size:.8rem; color:var(--violet); margin-top:4px; }
.tl-type { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); margin-top:2px; }
.tl-date { font-family:var(--font-mono); font-size:.74rem; color:var(--cyan); background:var(--cyan-d); border:1px solid rgba(0,229,255,.18); border-radius:4px; padding:3px 10px; white-space:nowrap; }
.tl-list { margin-bottom:16px; }
.tl-list li { position:relative; padding-left:18px; color:var(--text-dim); font-size:.88rem; margin-bottom:7px; line-height:1.65; }
.tl-list li::before { content:'▹'; position:absolute; left:0; color:var(--cyan); }
.tl-tags { display:flex; flex-wrap:wrap; gap:7px; }

/* Education */
.edu-block { margin-top:56px; }
.edu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.edu-card { display:flex; gap:18px; align-items:flex-start; cursor:default; }
.edu-ico { font-size:1.8rem; filter:drop-shadow(0 0 8px var(--cyan)); flex-shrink:0; }
.edu-card h3 { font-family:var(--font-head); font-size:.92rem; font-weight:700; color:#ddeeff; margin-bottom:4px; }
.edu-inst { font-family:var(--font-mono); font-size:.78rem; color:var(--cyan); margin-bottom:2px; }
.edu-dt { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); }

/* ── 10. CERTIFICATIONS ──────────────────────────────────── */
.certs-s { background:var(--bg); }
.cert-ctrl { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:36px; }
.cert-search {
  flex:1; min-width:220px;
  background:rgba(6,13,24,.8); border:1px solid var(--border); border-radius:8px;
  padding:10px 16px; color:var(--text); font-family:var(--font-mono); font-size:.83rem;
  outline:none; transition:border-color var(--tr),box-shadow var(--tr);
}
.cert-search::placeholder { color:rgba(94,113,133,.5); }
.cert-search:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.08); }
.cert-filters { display:flex; flex-wrap:wrap; gap:7px; }
.cfb {
  font-family:var(--font-mono); font-size:.74rem; font-weight:500;
  color:var(--text-dim); background:transparent; border:1px solid var(--border);
  border-radius:20px; padding:5px 14px; cursor:pointer;
  transition:all var(--tr); letter-spacing:.07em;
}
.cfb:hover,.cfb.active { color:var(--cyan); border-color:var(--cyan); background:var(--cyan-d); box-shadow:0 0 8px var(--cyan-glow); }
.cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; }
.cert-card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 20px;
  position:relative; overflow:hidden; cursor:default;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
  backdrop-filter:blur(10px);
}
.cc-scan { position:absolute; left:0; right:0; height:50px; top:-50px; background:linear-gradient(to bottom,transparent,rgba(0,229,255,.05),transparent); pointer-events:none; }
.cc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.cc-bdg { font-family:var(--font-mono); font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:4px; letter-spacing:.06em; }
.ms-bdg { background:rgba(0,120,212,.2); color:#4da6ff; border:1px solid rgba(0,120,212,.28); }
.so-bdg { background:rgba(255,69,96,.14); color:#ff7a92; border:1px solid rgba(255,69,96,.22); }
.cs-bdg { background:rgba(220,53,69,.16); color:#ff6b6b; border:1px solid rgba(220,53,69,.26); }
.gg-bdg { background:rgba(66,133,244,.16); color:#7db3ff; border:1px solid rgba(66,133,244,.26); }
.ft-bdg { background:rgba(230,82,0,.16); color:#ffaa55; border:1px solid rgba(230,82,0,.26); }
.ci-bdg { background:rgba(26,188,156,.16); color:#55e6cc; border:1px solid rgba(26,188,156,.26); }
.cc-dt { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); }
.cert-card h3 { font-family:var(--font-head); font-size:.86rem; font-weight:700; color:#ddeeff; margin-bottom:5px; line-height:1.4; }
.cc-sub { font-family:var(--font-mono); font-size:.73rem; color:var(--violet); margin-bottom:5px; }
.cc-id { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); }
.cc-id code { color:var(--cyan); background:var(--cyan-d); border-radius:3px; padding:1px 5px; }
.no-certs { text-align:center; padding:40px; font-family:var(--font-mono); font-size:.88rem; color:var(--text-dim); }

/* ── 11. ACHIEVEMENT ─────────────────────────────────────── */
.achv-s { background:var(--bg2); }
.achv-card { cursor:default; border-color:rgba(0,229,255,.12); }
.achv-card:hover { border-color:rgba(255,215,0,.42); box-shadow:0 0 0 1px rgba(255,215,0,.28),0 0 30px rgba(255,215,0,.18); }
.achv-top { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.achv-l { display:flex; align-items:center; gap:16px; }
.apple-ico { width:52px; height:52px; background:linear-gradient(135deg,var(--cyan-d),var(--violet-d)); border:1px solid rgba(0,229,255,.22); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0; filter:drop-shadow(0 0 8px var(--cyan-glow)); }
.apple-ico svg { width:28px; height:28px; }
.achv-name { font-family:var(--font-head); font-size:1.12rem; font-weight:700; color:#ddeeff; letter-spacing:.03em; }
.achv-sub { font-family:var(--font-mono); font-size:.76rem; color:var(--cyan); margin-top:4px; }
.achv-medal { font-family:var(--font-mono); font-size:.76rem; color:var(--gold); background:rgba(255,215,0,.09); border:1px solid rgba(255,215,0,.22); border-radius:20px; padding:5px 14px; white-space:nowrap; align-self:flex-start; }
.achv-list { padding-left:0; }
.achv-list li { position:relative; padding-left:18px; color:var(--text-dim); font-size:.9rem; margin-bottom:9px; line-height:1.65; }
.achv-list li::before { content:'▹'; position:absolute; left:0; color:var(--amber); }

/* ── 12. CONTACT ─────────────────────────────────────────── */
.contact-s { background:var(--bg); }
.contact-intro { color:var(--text-dim); max-width:560px; margin-bottom:44px; font-size:.98rem; }
.contact-wrap { display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:18px; }
.ci { display:flex; align-items:center; gap:12px; font-size:.88rem; color:var(--text-dim); }
.ci-ico { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--cyan-d); border:1px solid rgba(0,229,255,.16); border-radius:7px; font-size:1.08rem; flex-shrink:0; }
.ci-link { color:var(--cyan); font-family:var(--font-mono); font-size:.8rem; transition:color var(--tr),text-shadow var(--tr); }
.ci-link:hover { color:#fff; text-shadow:0 0 10px var(--cyan); }
/* Form */
.contact-form { display:flex; flex-direction:column; gap:17px; }
.fg { display:flex; flex-direction:column; gap:5px; }
.fl { font-family:var(--font-mono); font-size:.76rem; color:var(--cyan); letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; }
.req { color:var(--violet); margin-left:3px; }
.fi { background:rgba(6,13,24,.8); border:1px solid var(--border); border-radius:8px; padding:11px 15px; color:var(--text); font-family:var(--font-body); font-size:.95rem; outline:none; width:100%; transition:border-color var(--tr),box-shadow var(--tr); appearance:none; }
.fi::placeholder { color:rgba(94,113,133,.42); }
.fi:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.08),0 0 16px rgba(0,229,255,.05); }
.fi.err { border-color:var(--red); box-shadow:0 0 0 3px rgba(255,69,96,.09); }
.fi-ta { resize:vertical; min-height:125px; font-family:var(--font-body); }
.char-c { font-size:.7rem; color:var(--text-dim); font-weight:400; text-transform:none; letter-spacing:0; }
.char-c.warn { color:var(--amber); }
.char-c.over { color:var(--red); }
.fe { font-family:var(--font-mono); font-size:.72rem; color:var(--red); min-height:14px; }

/* ── 13. FOOTER ──────────────────────────────────────────── */
.footer { background:var(--bg); border-top:1px solid var(--border); padding:34px 22px; text-align:center; z-index:1; position:relative; }
.footer-in { display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer-logo { font-family:var(--font-head); font-size:1.15rem; font-weight:900; color:var(--cyan); letter-spacing:.14em; }
.footer-copy,.footer-tag { font-family:var(--font-mono); font-size:.74rem; color:var(--text-dim); }
.footer-tag { color:rgba(94,113,133,.45); }

/* ── 14. BACK TO TOP ─────────────────────────────────────── */
.btt { position:fixed; bottom:90px; right:24px; z-index:89; width:42px; height:42px; border-radius:50%; background:var(--glass); border:1px solid var(--cyan); color:var(--cyan); font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(12px); box-shadow:0 0 14px var(--cyan-glow); transition:all var(--tr); overflow:hidden; }
.btt:hover { background:var(--cyan); color:#000; box-shadow:0 0 24px var(--cyan-glow); transform:translateY(-3px); }
.btt:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.btt[hidden] { display:none; }

/* ── 15. TOAST ───────────────────────────────────────────── */
.toast { position:fixed; bottom:140px; right:24px; z-index:200; max-width:290px; background:var(--glass); border:1px solid var(--cyan); border-radius:10px; padding:13px 18px; font-family:var(--font-mono); font-size:.8rem; color:var(--cyan); box-shadow:0 0 22px var(--cyan-glow); backdrop-filter:blur(16px); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .28s ease,transform .28s ease; }
.toast.show { opacity:1; transform:translateY(0); pointer-events:all; animation:toastGlitch 2.2s forwards; }
@keyframes toastGlitch {
  0%,100%{text-shadow:none}
  10%{text-shadow:2px 0 0 rgba(255,69,96,.6),-2px 0 0 rgba(0,229,255,.6)}
  11%,28%{text-shadow:none}
  29%{text-shadow:-1px 0 0 rgba(176,111,255,.6),1px 0 0 rgba(0,229,255,.5)}
  30%,100%{text-shadow:none}
}

/* ── 16. CLICK FX ────────────────────────────────────────── */
.ripple { position:fixed; pointer-events:none; border-radius:50%; border:2px solid var(--cyan); transform:translate(-50%,-50%) scale(0); animation:ripFx .65s ease-out forwards; z-index:9999; box-shadow:0 0 7px var(--cyan-glow); }
@keyframes ripFx { 0%{transform:translate(-50%,-50%) scale(0);opacity:.9;width:0;height:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:0;width:110px;height:110px} }
.pkt { position:fixed; pointer-events:none; z-index:9998; border-radius:2px; animation:pktFly var(--d,.5s) ease-out forwards; }
@keyframes pktFly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)} }

/* ── 17. AI CHAT BUBBLE ──────────────────────────────────── */
.chat-bubble {
  position:fixed; bottom:24px; right:24px; z-index:98;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 22px var(--cyan-glow),0 4px 20px rgba(0,0,0,.5);
  transition:transform var(--tr),box-shadow var(--tr);
  animation:bubblePulse 3s ease-in-out infinite;
}
@keyframes bubblePulse { 0%,100%{box-shadow:0 0 22px var(--cyan-glow),0 4px 20px rgba(0,0,0,.5)} 50%{box-shadow:0 0 36px var(--cyan-glow),0 0 18px var(--violet-glow),0 4px 20px rgba(0,0,0,.5)} }
.chat-bubble:hover { transform:scale(1.08) translateY(-2px); box-shadow:0 0 36px var(--cyan-glow); }
.chat-bubble svg { width:24px; height:24px; color:#000; stroke:#000; }
.chat-notif { position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:var(--red); font-family:var(--font-mono); font-size:.66rem; color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); animation:notifPop .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes notifPop { 0%{transform:scale(0)} 100%{transform:scale(1)} }

/* ── 18. AI CHAT WINDOW ──────────────────────────────────── */
.chat-win {
  position:fixed; bottom:90px; right:24px; z-index:99;
  width:340px; max-width:calc(100vw - 32px);
  background:rgba(4,10,20,.88);
  border:1px solid rgba(0,229,255,.22);
  border-radius:16px; overflow:hidden;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 40px rgba(0,229,255,.14),0 8px 40px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  animation:chatPop .3s cubic-bezier(.34,1.56,.64,1) forwards;
  max-height:520px;
}
.chat-win[hidden] { display:none; }
@keyframes chatPop { 0%{opacity:0;transform:scale(.92) translateY(16px)} 100%{opacity:1;transform:scale(1) translateY(0)} }

/* Neon border hover on chat window */
.chat-win:hover { border-color:rgba(0,229,255,.42); box-shadow:0 0 0 1px rgba(0,229,255,.28),0 0 40px rgba(0,229,255,.2),0 8px 40px rgba(0,0,0,.7); }

/* Chat header */
.cw-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(0,229,255,.06); border-bottom:1px solid rgba(0,229,255,.12); flex-shrink:0; }
.cw-head-l { display:flex; align-items:center; gap:12px; }
.cw-av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.75rem; font-weight:900; color:#000; flex-shrink:0; box-shadow:0 0 10px var(--cyan-glow); }
.cw-name { font-family:var(--font-head); font-size:.85rem; font-weight:700; color:var(--cyan); letter-spacing:.08em; position:relative; }
.cw-status { font-family:var(--font-mono); font-size:.68rem; color:var(--green); display:flex; align-items:center; gap:5px; margin-top:2px; }
.cv-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); animation:dotP 2s ease-in-out infinite; flex-shrink:0; }
.cw-close { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:1.1rem; padding:4px 8px; border-radius:6px; transition:color var(--tr),background var(--tr); line-height:1; }
.cw-close:hover { color:var(--red); background:rgba(255,69,96,.12); }

/* Messages */
.cw-msgs { flex:1; overflow-y:auto; padding:14px 14px 8px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.cw-msgs::-webkit-scrollbar { width:4px; }
.cw-msgs::-webkit-scrollbar-track { background:transparent; }
.cw-msgs::-webkit-scrollbar-thumb { background:rgba(0,229,255,.2); border-radius:2px; }

/* Msg bubbles */
.msg { display:flex; flex-direction:column; gap:2px; animation:msgIn .25s ease-out forwards; }
@keyframes msgIn { 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:translateY(0)} }
.msg.bot { align-items:flex-start; }
.msg.user { align-items:flex-end; }
.msg-bubble { max-width:84%; padding:9px 13px; border-radius:12px; font-family:var(--font-body); font-size:.88rem; line-height:1.55; }
.msg.bot .msg-bubble { background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.16); color:var(--text); border-bottom-left-radius:4px; }
.msg.user .msg-bubble { background:linear-gradient(135deg,rgba(0,229,255,.22),rgba(176,111,255,.22)); border:1px solid rgba(0,229,255,.2); color:var(--text); border-bottom-right-radius:4px; }
.msg-time { font-family:var(--font-mono); font-size:.62rem; color:var(--text-dim); padding:0 3px; }

/* Typing indicator */
.typing-indicator { display:flex; gap:4px; padding:11px 14px; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.14); border-radius:12px; border-bottom-left-radius:4px; align-items:center; width:fit-content; }
.typing-indicator span { width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:typDot 1.2s ease-in-out infinite; }
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typDot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* Suggestion chips */
.cw-chips { display:flex; flex-wrap:wrap; gap:7px; padding:8px 14px; border-top:1px solid rgba(0,229,255,.08); flex-shrink:0; }
.chip-btn { font-family:var(--font-mono); font-size:.7rem; color:var(--cyan); background:var(--cyan-d); border:1px solid rgba(0,229,255,.2); border-radius:20px; padding:5px 10px; cursor:pointer; transition:all var(--tr); white-space:nowrap; }
.chip-btn:hover { background:var(--cyan); color:#000; box-shadow:0 0 8px var(--cyan-glow); }

/* Chat input */
.cw-input-row { display:flex; gap:8px; padding:10px 12px; border-top:1px solid rgba(0,229,255,.12); flex-shrink:0; }
.cw-input { flex:1; background:rgba(0,0,0,.4); border:1px solid rgba(0,229,255,.14); border-radius:8px; padding:9px 13px; color:var(--text); font-family:var(--font-body); font-size:.88rem; outline:none; transition:border-color var(--tr),box-shadow var(--tr); }
.cw-input::placeholder { color:rgba(94,113,133,.5); }
.cw-input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,229,255,.09); }
.cw-send { width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--cyan),var(--violet)); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--tr); }
.cw-send:hover { box-shadow:0 0 12px var(--cyan-glow); transform:scale(1.06); }
.cw-send svg { width:15px; height:15px; stroke:#000; }

/* ── 19. RESPONSIVE ──────────────────────────────────────── */
@media(max-width:900px){
  .hero-wrap { flex-direction:column; text-align:center; }
  .terminal { flex:none; width:100%; max-width:420px; order:-1; align-self:center; }
  .hero-btns { justify-content:center; }
  .hero-rings { display:none; }
  .about-grid { grid-template-columns:1fr; text-align:center; }
  .av-col { align-items:center; }
  .contact-wrap { grid-template-columns:1fr; }
  .contact-info { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .nav-list { display:none; }
  .ham { display:flex; }
}
@media(max-width:580px){
  .sec { padding:68px 0; }
  .sec-ttl { margin-bottom:32px; }
  .hero-name { font-size:clamp(1.7rem,9vw,2.4rem); }
  .btn { padding:10px 18px; font-size:.86rem; }
  .tl-head { flex-direction:column; }
  .cert-ctrl { flex-direction:column; align-items:stretch; }
  .contact-info { flex-direction:column; align-items:flex-start; }
  .chat-win { bottom:86px; right:12px; left:12px; width:auto; max-width:none; }
  .chat-bubble { right:12px; bottom:12px; }
  .btt { right:12px; bottom:80px; }
}