/* =========================================================
   Page-level styles : hero, projects, skills, timeline,
   certificates, fun-facts, contact form
   ========================================================= */

/* ---- HERO -------------------------------------------------------------- */
.hero{ padding:46px 0 54px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero-left .kicker{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(42px,7vw,82px); line-height:.98; font-weight:700; letter-spacing:-.035em;
  margin-bottom:8px;
}
.hero h1 .ln2{ color:var(--accent); display:block; }
.hero h1 [data-scramble]{ cursor:crosshair; }
.hero .role{
  font-family:var(--mono); font-size:clamp(16px,2.2vw,22px); color:var(--text); margin:6px 0 22px;
  min-height:1.4em;
}
.hero .role::before{ content:'> '; color:var(--accent); }
.hero .role [data-rotate]{ color:var(--accent); border-right:2px solid var(--accent); padding-right:3px; }
.hero p.bio{ color:var(--text-dim); font-size:16.5px; max-width:46ch; margin-bottom:30px; }
.hero .btns{ margin-bottom:34px; }

.hero-meta{ display:flex; gap:30px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px; }
.hero-meta .m{ font-family:var(--mono); }
.hero-meta .m .k{ display:block; font-size:11px; color:var(--text-mut); letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.hero-meta .m .v{ font-size:15px; color:var(--text); }
.hero-meta .m .v.accent{ color:var(--accent); }

/* terminal in hero */
.hero-term{ width:100%; }
.term-body .t-row{ white-space:pre-wrap; word-break:break-word; }
.t-prompt{ color:var(--accent-d); }
.t-cmd{ color:var(--text); }
.t-cur{ color:var(--accent); }
.t-out{ color:var(--text-dim); padding-left:2px; }
.t-out.hl{ color:var(--text); }
.t-out.ok{ color:var(--accent); text-shadow:0 0 14px var(--accent-gl); }
.term-body{ min-height:230px; }

/* avatar chip floating on terminal bar */
.term .title .live{ color:var(--accent); }
.term .title .live::before{ content:'● '; }

/* ---- PROJECTS ---------------------------------------------------------- */
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px 24px 22px;
  position:relative; transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--gl-soft), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.card:hover{ border-color:var(--line-hi); transform:translateY(-4px); box-shadow:0 24px 60px -36px rgba(0,0,0,.9); }
.card:hover::before{ opacity:1; }
.card-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.card-ico{
  width:46px; height:46px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--gl-soft); border:1px solid var(--line); color:var(--accent); font-size:18px;
}
.card-ico .pico{
  position:relative; width:27px; height:27px; display:block;
}
.card-ico .pico img{ position:absolute; inset:0; width:27px; height:27px; object-fit:contain; display:block; transition:opacity .25s var(--ease); }
.card-ico .pico .red{ opacity:0; }
[data-theme="hacker"] .card-ico .pico .blue{ opacity:0; }
[data-theme="hacker"] .card-ico .pico .red{ opacity:1; }
.card h4{ font-size:17.5px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.card h4 .ext{ font-family:var(--mono); font-size:11px; color:var(--text-mut); display:block; margin-top:3px; }
.card p{ color:var(--text-dim); font-size:14px; line-height:1.6; }
.card .ghlink{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-family:var(--mono); font-size:12.5px; color:var(--accent); text-decoration:none;
  border:1px solid var(--line); padding:7px 12px; border-radius:7px; transition:all .2s;
}
.card .ghlink:hover{ background:var(--gl-soft); border-color:var(--line-hi); gap:11px; }
.card .tag{
  position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:10.5px;
  color:var(--text-mut); letter-spacing:.08em; text-transform:uppercase;
}

/* ---- SKILLS (soft) ----------------------------------------------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.two-col.rg-gap{ gap:24px 60px; position:relative; }
@media (min-width:921px){
  .two-col.rg-gap::before{ content:''; position:absolute; left:50%; top:4px; bottom:4px; width:1px; background:linear-gradient(var(--line-hi), transparent); }
}
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px 26px 24px;
}
.panel h3{ font-family:var(--mono); font-size:15px; color:var(--accent); margin-bottom:12px; display:flex; gap:9px; align-items:baseline; }
.panel h3::before{ content:'#'; color:var(--text-mut); }
.panel p{ color:var(--text-dim); font-size:15px; }

/* ---- HOBBY blocks ------------------------------------------------------ */
.hobby-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.hobby{ display:flex; gap:16px; align-items:flex-start; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--card); transition:border-color .25s, transform .25s; }
.hobby:hover{ border-color:var(--line-hi); transform:translateY(-3px); }
.hobby .hi{ width:46px; height:46px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--gl-soft); border:1px solid var(--line); color:var(--accent); font-size:18px; }
.hobby h4{ font-size:16px; font-weight:600; margin-bottom:5px; }
.hobby p{ color:var(--text-dim); font-size:14px; }
.hobby a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line-hi); }

/* ---- FUN FACTS --------------------------------------------------------- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.fact{ text-align:center; padding:30px 18px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,var(--card-hi),var(--card)); position:relative; }
.fact i{ font-size:22px; color:var(--accent); margin-bottom:14px; display:block; }
.fact .num{ font-family:var(--mono); font-size:40px; font-weight:700; color:var(--text); line-height:1; letter-spacing:-.02em; }
.fact .num.txt{ font-size:25px; letter-spacing:0; }
.fact .lbl{ font-size:13px; color:var(--text-dim); margin-top:10px; font-family:var(--mono); }

/* ---- PAGE HEADER (resume / contact) ----------------------------------- */
.page-head{ padding:50px 0 20px; }
.page-head h1{ font-size:clamp(40px,6vw,68px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.page-head h1 .accent{ color:var(--accent); }
.page-head .sub{ font-family:var(--mono); color:var(--text-dim); margin-top:14px; font-size:15px; }
.page-head .sub::before{ content:'> '; color:var(--accent); }

/* resume quick stats — full-width strip */
.rstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px; }
.rstats .st{
  display:flex; flex-direction:column; gap:5px; padding:18px 22px 16px;
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg,var(--card-hi),var(--card)); position:relative; overflow:hidden;
}
.rstats .st::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--accent),transparent); opacity:.7; }
.rstats .st b{ font-family:var(--mono); font-size:30px; font-weight:700; color:var(--accent); line-height:1; letter-spacing:-.02em; }
.rstats .st span{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:.03em; }
@media (max-width:680px){ .rstats{ grid-template-columns:1fr 1fr; } }

/* ---- TIMELINE ---------------------------------------------------------- */
.tl{ position:relative; }
.tl::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; transform:translateX(-50%); background:linear-gradient(var(--accent),transparent); }
.tl-item{ position:relative; padding:0 0 34px 30px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:7px; top:6px; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 12px var(--accent-gl); }
.tl-item.cur::before{ background:var(--accent); }
.tl-period{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.04em; }
.tl-period.now{ color:var(--accent); }
.tl-org{ font-family:var(--mono); font-size:12px; color:var(--text-mut); display:block; margin:2px 0 4px; }
.tl-item h4{ font-size:18px; font-weight:600; margin-bottom:7px; letter-spacing:-.01em; }
.tl-item p{ color:var(--text-dim); font-size:14.5px; line-height:1.6; }
.tl-item a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line-hi); }

/* ---- CERTIFICATES ------------------------------------------------------ */
.cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cert{ position:relative; display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-decoration:none; color:inherit; cursor:pointer; transition:all .22s var(--ease); }
.cert:hover{ border-color:var(--line-hi); transform:translateY(-3px); }
.cert .clogo{ width:54px; height:54px; flex:none; border-radius:11px; background:var(--card-hi); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.cert .clogo img{ max-width:40px; max-height:40px; width:auto; height:auto; object-fit:contain; display:block; }
.cert .cinfo{ min-width:0; padding-right:18px; }
.cert h4{ font-size:15.5px; font-weight:600; margin-bottom:3px; color:var(--text); line-height:1.25; }
.cert .cmeta{ font-family:var(--mono); font-size:11.5px; color:var(--text-mut); }
.cert .cmeta b{ color:var(--text-dim); font-weight:500; }
.cert .cdesc{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:7px; text-wrap:pretty; }
.cert .cverify{ display:inline-flex; align-items:center; gap:7px; margin-top:11px; font-family:var(--mono); font-size:11.5px; color:var(--accent); text-decoration:none; border:1px solid var(--line); padding:6px 11px; border-radius:7px; transition:border-color .2s, background-color .2s, transform .2s; }
.cert .cverify-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.cert .cverify-row .cverify{ margin-top:0; }
.cert .cverify:hover{ border-color:var(--accent); background:var(--gl-soft); transform:translateY(-1px); }
.cert .cverify i{ font-size:11px; }
.cert:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cert .czoom{ position:absolute; top:16px; right:16px; font-size:12px; color:var(--text-mut); opacity:0; transition:opacity .2s, color .2s; }
.cert:hover .czoom{ opacity:1; color:var(--accent); }

/* ---- PUBLICATIONS ------------------------------------------------------ */
.pub-list{ display:flex; flex-direction:column; gap:14px; }
.pub{ display:flex; align-items:center; gap:22px; padding:20px 24px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-decoration:none; color:inherit; cursor:pointer; transition:all .22s var(--ease); }
.pub:hover{ border-color:var(--line-hi); transform:translateY(-3px); }
.pub-year{ font-family:var(--mono); font-size:13px; color:var(--accent); flex:none; width:56px; text-align:center; padding:8px 0; border:1px solid var(--line); border-radius:8px; background:var(--gl-06); }
.pub-body{ flex:1; min-width:0; }
.pub-body h4{ font-size:16.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; color:var(--text); }
.pub-body .pub-meta{ font-family:var(--mono); font-size:12px; color:var(--text-mut); }
.pub-body .pub-meta b{ color:var(--text-dim); font-weight:500; }
.pub-tag{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:5px; padding:2px 7px; margin-bottom:8px; }
.pub-actions{ display:flex; gap:8px; flex:none; }
.pub-act{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); border:1px solid var(--line); border-radius:7px; padding:7px 11px; display:inline-flex; gap:6px; align-items:center; transition:all .2s; }
.pub:hover .pub-act{ border-color:var(--line-hi); }
.pub-act.go:hover, .pub:hover .pub-act.go{ color:var(--accent); }
@media (max-width:680px){
  .pub{ flex-wrap:wrap; gap:14px; }
  .pub-actions{ width:100%; }
}

/* ---- RADAR ------------------------------------------------------------- */
.radar-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.radar-box{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; height:420px; position:relative; }
.skill-legend{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.skill-legend li{ display:flex; align-items:center; gap:14px; }
.skill-legend .sk-name{ font-family:var(--mono); font-size:13.5px; color:var(--text); width:165px; flex:none; }
.skill-legend .sk-bar{ flex:1; height:6px; background:rgba(255,255,255,.05); border-radius:4px; overflow:hidden; }
.skill-legend .sk-bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-d),var(--accent)); border-radius:4px; box-shadow:0 0 10px var(--accent-gl); width:0; transition:width 1.1s var(--ease); }
.skill-legend .sk-val{ font-family:var(--mono); font-size:12.5px; color:var(--accent); width:42px; text-align:right; }

/* ---- CONTACT ----------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; align-items:start; }
.info-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; }
.info-row{ display:flex; gap:15px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:0; }
.info-row .ii{ width:42px; height:42px; flex:none; border-radius:9px; background:var(--gl-soft); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); font-size:16px; }
.info-row h4{ font-size:15px; font-weight:600; }
.info-row p{ color:var(--text-dim); font-size:13px; font-family:var(--mono); }

.form-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form-card h3{ font-family:var(--mono); font-size:15px; color:var(--accent); margin-bottom:20px; }
.form-card h3::before{ content:'$ '; color:var(--text-mut); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:12px; color:var(--text-dim); letter-spacing:.03em; }
.field label::before{ content:'// '; color:var(--text-mut); }
.field input,.field textarea{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; padding:13px 14px;
  color:var(--text); font-family:var(--mono); font-size:14px; transition:border-color .2s, box-shadow .2s; resize:none;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--gl-12); }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-mut); }
.field.invalid input,.field.invalid textarea{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,81,104,.14); }
.field.invalid label{ color:var(--danger); }
.map-frame{ border:1px solid var(--line); border-radius:12px; overflow:hidden; height:300px; margin-bottom:26px; filter:var(--map-filter); }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
.form-status{ font-family:var(--mono); font-size:13px; margin-top:14px; min-height:1.2em; }
.form-status.ok{ color:#34d399; } .form-status.err{ color:var(--danger); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:38px; }
  .hero-term{ order:2; }
  .radar-wrap{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .proj-grid,.two-col,.hobby-grid,.cert-grid,.fgrid{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr 1fr; }
  .skill-legend .sk-name{ width:120px; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .hero{ padding:30px 0 40px; }
  .hero .btns{ width:100%; }
  .hero .btns .btn{ flex:1 1 auto; justify-content:center; }
  .hero-meta{ gap:18px 26px; }
  .page-head{ padding:36px 0 16px; }
  section{ padding:48px 0; }
  .rstats{ gap:10px; }
  .rstats .st{ padding:14px 16px 12px; }
  .rstats .st b{ font-size:25px; }
  .pub{ padding:18px; }
  .pub-year{ width:50px; }
  .cert{ padding:16px; }
  .info-card,.form-card,.panel{ padding:22px; }
  .radar-box{ height:340px; }
}
@media (max-width:380px){
  .rstats{ grid-template-columns:1fr; }
}