/* ============================================================
   SUBHABRATA KHARA — PORTFOLIO
   Editorial / engineering system · PHP edition
   ============================================================ */

:root{
  --paper:#f3f1ea; --paper2:#eceadf; --card:#ffffff;
  --ink:#16151a; --muted:#6e6b62; --line:#dcd8cb;
  --dark:#131319; --accent:#2940c0;
  --mono:'Space Mono',monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent); color:#fff;}
a{color:inherit;}
img{max-width:100%;display:block;}

.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
.section{padding:124px 0;}
.section--paper2{background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section--dark{background:var(--dark); color:#f3f1ea;}

/* ---- Section label ---- */
.sec-head{display:flex; align-items:center; gap:16px; margin-bottom:54px;}
.sec-head .num{font-family:var(--mono); font-size:12px; color:var(--accent);}
.sec-head .lbl{font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted);}
.sec-head .rule{flex:1; height:1px; background:var(--line);}
.section--dark .sec-head .lbl{color:rgba(243,241,234,0.6);}
.section--dark .sec-head .rule{background:rgba(255,255,255,0.12);}

h1,h2,h3{margin:0;}
.h2{font-size:clamp(28px,3.6vw,46px); font-weight:600; letter-spacing:-1px; line-height:1.08;}
.lead{font-size:16px; line-height:1.7; color:var(--muted);}

/* ---- Nav ---- */
nav.bar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:60px; padding:0 28px;
  background:rgba(19,19,25,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
nav.bar .logo{font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:1px; text-decoration:none; color:#f3f1ea;}
nav.bar .logo b{color:var(--accent); font-weight:700;}
nav.bar .links{display:flex; align-items:center; gap:26px;}
nav.bar .links a, nav.bar .links button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  color:rgba(243,241,234,0.6); text-decoration:none; background:none; border:none; cursor:pointer; padding:0;
  transition:color .2s;
}
nav.bar .links a:hover, nav.bar .links button:hover, nav.bar .links a.active{color:#f3f1ea;}
nav.bar .cta{
  font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:8px 16px; border:1px solid var(--accent); color:#fff; background:var(--accent);
  border-radius:100px; text-decoration:none; transition:opacity .2s;
}
nav.bar .cta:hover{opacity:.85;}
.nav-toggle{display:none;}

/* ---- Buttons ---- */
.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase;
  padding:14px 26px; border-radius:100px; text-decoration:none; display:inline-block;
  cursor:pointer; border:1px solid transparent; transition:transform .25s,border-color .25s,opacity .2s;
}
.btn--accent{background:var(--accent); color:#fff;}
.btn--accent:hover{transform:translateY(-2px);}
.btn--ghost-light{background:transparent; color:#f3f1ea; border-color:rgba(255,255,255,0.26);}
.btn--ghost-light:hover{border-color:#f3f1ea;}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn--ghost:hover{border-color:var(--accent);}
.btn--dark{background:var(--ink); color:var(--paper);}
.btn--dark:hover{transform:translateY(-2px);}

/* ---- Hero ---- */
header.hero{
  position:relative; background:var(--dark); color:#f3f1ea;
  min-height:100vh; padding:120px 7vw 70px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
header.hero .ghost{
  position:absolute; right:-1vw; bottom:-9vh; font-family:var(--mono); font-weight:700;
  font-size:48vh; line-height:1; color:rgba(255,255,255,0.022);
  pointer-events:none; user-select:none; letter-spacing:-2vh;
}
header.hero .inner{position:relative; max-width:1200px; width:100%; margin:0 auto;}
.status-row{display:flex; align-items:center; gap:14px; margin-bottom:34px;}
.status-row .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent);}
.status-row span:last-child{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:rgba(243,241,234,0.6);}
header.hero h1{font-size:clamp(52px,9.5vw,140px); font-weight:600; letter-spacing:-3px; line-height:0.9;}
header.hero h1 b{color:var(--accent); font-weight:600;}
.role-line{font-family:var(--mono); font-size:clamp(12px,1.35vw,15px); letter-spacing:1px; color:rgba(243,241,234,0.8); margin:30px 0 0;}
.hero-desc{max-width:580px; font-size:clamp(16px,1.5vw,18px); line-height:1.7; color:rgba(243,241,234,0.7); margin:24px 0 0;}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:42px;}
.hero-social{display:flex; flex-wrap:wrap; gap:28px; margin-top:46px;}
.hero-social a{
  font-family:var(--mono); font-size:12px; letter-spacing:.5px; color:rgba(243,241,234,0.78);
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.hero-social a:hover{color:#fff; border-color:var(--accent);}

/* ---- Stats ---- */
.stats{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line);}
.stats .cell{background:var(--paper); padding:42px 30px;}
.stats .big{font-family:var(--mono); font-size:clamp(34px,5vw,54px); font-weight:700; color:var(--ink); line-height:1;}
.stats .big b{color:var(--accent); font-weight:700;}
.stats .cap{font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:12px;}

/* ---- Grids & cards ---- */
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:72px; align-items:start;}
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:34px;}
.card-pad{padding:28px;}

.about-p{font-size:16px; line-height:1.8; margin:0 0 20px;}
.about-p.muted{color:var(--muted);}
.about-p strong{font-weight:600;}

.id-card .id-head{display:flex; align-items:center; gap:16px; margin-bottom:26px;}
.id-card .badge{width:54px; height:54px; border-radius:8px; background:var(--dark); color:#f3f1ea; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:20px;}
.id-card .badge b{color:var(--accent);}
.id-row{display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); gap:14px;}
.id-row:last-child{border-bottom:none;}
.id-row .k{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted);}
.id-row .v{font-size:13px; text-align:right;}
.id-row .v a{color:var(--accent); text-decoration:none; word-break:break-all;}

.mini-label{font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:24px;}
.section--dark .mini-label{color:rgba(243,241,234,0.6);}

.edu-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:24px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px;}
.edu-card .t{font-size:16px; font-weight:600; letter-spacing:-.2px;}
.edu-card .s{font-size:13px; color:var(--muted); margin-top:5px;}
.edu-card .yr{font-family:var(--mono); font-size:11px; color:var(--muted);}
.edu-card .gpa{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--accent); margin-top:4px;}

.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--ink); border:1px solid var(--line); padding:6px 12px; border-radius:100px; background:var(--card);}
.chip-sm{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:5px 10px; border-radius:100px;}
.skill-group{margin-bottom:20px;}
.skill-group .gt{font-family:var(--mono); font-size:11px; color:var(--accent); margin-bottom:10px; letter-spacing:.5px;}

/* ---- Capabilities ---- */
.cap-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:36px; display:flex; flex-direction:column; transition:border-color .25s,transform .25s;}
.cap-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.cap-card .idx{font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--accent);}
.cap-card h3{font-size:22px; font-weight:600; letter-spacing:-.4px; margin:18px 0 12px;}
.cap-card p{font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 0 22px; flex:1;}

/* ---- Projects ---- */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px;}
.filter-btn{font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:9px 16px; border-radius:100px; cursor:pointer; transition:all .25s; background:transparent; color:var(--muted); border:1px solid var(--line);}
.filter-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.grid-projects{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:20px;}
.proj{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:28px; display:flex; flex-direction:column; transition:border-color .25s,transform .25s;}
.proj:hover{border-color:var(--accent); transform:translateY(-3px);}
.proj .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.proj .type{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); padding:4px 10px; border-radius:100px;}
.proj .yr{font-family:var(--mono); font-size:12px; color:var(--muted);}
.proj h3{font-size:19px; font-weight:600; letter-spacing:-.3px; line-height:1.25; margin:0 0 12px;}
.proj p{font-size:13.5px; line-height:1.65; color:var(--muted); margin:0 0 18px; flex:1;}
.proj .tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px;}
.proj .foot{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:16px;}
.proj .status{font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--ink); display:flex; align-items:center; gap:6px;}
.proj .status .d{width:6px; height:6px; border-radius:50%; background:var(--accent);}
.proj .priv{font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--muted);}
.proj .link{font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--accent); text-decoration:none; margin-left:auto;}
.proj .link:hover{text-decoration:underline;}

/* ---- Research ---- */
.paper-card{border:1px solid rgba(255,255,255,0.14); border-radius:8px; padding:clamp(28px,4vw,52px); background:rgba(255,255,255,0.02);}
.paper-top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.tag-ieee{font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:1px; border:1px solid var(--accent); color:var(--accent); padding:8px 14px; border-radius:4px;}
.paper-card h2{font-size:clamp(26px,3.4vw,42px); font-weight:600; letter-spacing:-1px; line-height:1.12; margin:0 0 14px;}
.paper-card h2 b{color:var(--accent); font-weight:600;}
.paper-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); border-radius:6px; overflow:hidden; margin-bottom:30px;}
.paper-meta .m{background:var(--dark); padding:18px 20px;}
.paper-meta .mk{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:rgba(243,241,234,0.5); margin-bottom:6px;}
.paper-meta .mv{font-size:14px;}
.dark-chips{display:flex; flex-wrap:wrap; gap:7px;}
.dark-chip{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:rgba(243,241,234,0.7); border:1px solid rgba(255,255,255,0.16); padding:5px 10px; border-radius:100px;}
.method-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;}
.method{border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:26px;}
.method .i{font-family:var(--mono); font-size:11px; color:var(--accent); margin-bottom:14px;}
.method .t{font-size:16px; font-weight:600; margin-bottom:10px;}
.method p{font-size:13px; line-height:1.7; color:rgba(243,241,234,0.65); margin:0;}

/* ---- Experience ---- */
.exp-list{display:flex; flex-direction:column; gap:16px;}
.exp{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; padding:32px;}
.exp .head{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:6px;}
.exp h3{font-size:21px; font-weight:600; letter-spacing:-.3px;}
.exp .when{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.5px;}
.exp .org{font-size:13.5px; color:var(--muted); margin-bottom:18px;}
.exp ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:9px;}
.exp li{font-size:14px; line-height:1.6; color:var(--ink);}
.exp li strong{font-weight:600;}
.cert{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:24px;}
.cert .org{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:1px; margin-bottom:10px;}
.cert .t{font-size:15px; font-weight:600; margin-bottom:8px;}
.cert p{font-size:12.5px; line-height:1.6; color:var(--muted); margin:0;}
.link-pill{font-family:var(--mono); font-size:12px; letter-spacing:.5px; color:var(--accent); text-decoration:none; border:1px solid var(--line); padding:12px 18px; border-radius:100px; transition:border-color .25s;}
.link-pill:hover{border-color:var(--accent);}

/* ---- Resume / glance ---- */
.glance{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:36px;}
.glance .row{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line);}
.glance .row:last-child{border-bottom:none;}
.glance .k{font-size:13.5px; color:var(--muted);}
.glance .v{font-size:13.5px; font-weight:600; text-align:right;}

/* ---- Contact ---- */
.contact-link{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:18px 22px; text-decoration:none; transition:border-color .25s;}
.contact-link:hover{border-color:var(--accent);}
.contact-link .k{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px;}
.contact-link .v{font-size:14px; color:var(--ink);}
.contact-link .arr{color:var(--accent);}
.cform{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:36px; display:flex; flex-direction:column; gap:18px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);}
.field input, .field textarea{font-family:var(--sans); font-size:14px; padding:13px 15px; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); outline:none;}
.field input:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical;}
.note{font-family:var(--mono); font-size:10px; color:var(--muted); text-align:center; margin:0; letter-spacing:.5px;}
.alert{font-family:var(--mono); font-size:12px; padding:13px 16px; border-radius:6px; letter-spacing:.3px;}
.alert.ok{background:rgba(41,64,192,0.08); border:1px solid var(--accent); color:var(--accent);}
.alert.err{background:rgba(255,107,107,0.08); border:1px solid #d65555; color:#b13b3b;}

/* ---- Footer ---- */
footer.site{background:var(--dark); color:#f3f1ea; padding:64px 0 48px;}
footer.site .inner{max-width:1200px; margin:0 auto; padding:0 32px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; align-items:flex-start;}
footer.site .logo{font-family:var(--mono); font-weight:700; font-size:20px; letter-spacing:1px;}
footer.site .logo b{color:var(--accent);}
footer.site .sub{font-family:var(--mono); font-size:11px; color:rgba(243,241,234,0.5); margin-top:8px; letter-spacing:.5px;}
footer.site .fnav{display:flex; gap:26px; flex-wrap:wrap;}
footer.site .fnav a{font-family:var(--mono); font-size:12px; color:rgba(243,241,234,0.65); text-decoration:none; transition:color .2s;}
footer.site .fnav a:hover{color:#fff;}
footer.site .right{text-align:right;}
footer.site .right div{font-family:var(--mono); font-size:11px; color:rgba(243,241,234,0.5); margin-top:8px;}
footer.site .right .open{color:rgba(243,241,234,0.65); display:flex; align-items:center; gap:7px; justify-content:flex-end;}
footer.site .right .open .d{width:6px; height:6px; border-radius:50%; background:var(--accent);}

/* ---- Page heading (interior pages) ---- */
.page-head{background:var(--dark); color:#f3f1ea; padding:128px 0 64px;}
.page-head .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:18px;}
.page-head h1{font-size:clamp(40px,6vw,76px); font-weight:600; letter-spacing:-2px; line-height:0.95;}
.page-head p{font-size:16px; line-height:1.7; color:rgba(243,241,234,0.7); margin:22px 0 0; max-width:560px;}

/* ---- Game modal ---- */
.modal-backdrop{position:fixed; inset:0; z-index:200; background:rgba(9,9,13,0.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:24px;}
.modal-backdrop.open{display:flex;}
.modal{width:100%; max-width:520px; background:#16161d; border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:32px; color:#f3f1ea; box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.modal-head .left{display:flex; align-items:center; gap:12px;}
.modal-title{font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent);}
.modal .x, .modal .back{background:none; border:none; color:rgba(243,241,234,0.55); cursor:pointer; padding:0 2px; transition:color .2s;}
.modal .x{font-size:24px; line-height:1;}
.modal .back{font-size:15px;}
.modal .x:hover, .modal .back:hover{color:#fff;}
.game-view{display:none;}
.game-view.show{display:block;}
.menu-btn{display:flex; align-items:center; gap:16px; text-align:left; width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:20px; cursor:pointer; color:#f3f1ea; transition:border-color .2s,transform .2s; margin-bottom:12px;}
.menu-btn:hover{border-color:var(--accent); transform:translateY(-2px);}
.menu-btn .emoji{font-size:30px; line-height:1;}
.menu-btn .mt{display:block; font-size:16px; font-weight:600; margin-bottom:4px;}
.menu-btn .ms{font-family:var(--mono); font-size:11px; color:rgba(243,241,234,0.6);}
.menu-btn .arr{margin-left:auto; color:var(--accent);}
.modal p.intro{font-size:13.5px; line-height:1.6; color:rgba(243,241,234,0.7); margin:0 0 22px;}
.scoreboard{display:flex; gap:32px; margin-bottom:18px;}
.scoreboard .sl{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:rgba(243,241,234,0.5); margin-bottom:5px;}
.scoreboard .sv{font-family:var(--mono); font-size:26px; font-weight:700; line-height:1;}
.scoreboard .sv.accent{color:var(--accent);}
.bug-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
.hole{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); transition:transform .08s; -webkit-tap-highlight-color:transparent;}
.hole.live{cursor:pointer; background:rgba(41,64,192,0.18); border-color:var(--accent);}
.hole .bug{font-size:30px; line-height:1; opacity:0; transition:opacity .1s;}
.hole.live .bug{opacity:1;}
.modal .game-msg{font-family:var(--mono); font-size:12.5px; color:rgba(243,241,234,0.7); text-align:center; margin:0 0 16px;}
.modal .btn-full{width:100%; font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; background:var(--accent); color:#fff; padding:14px; border:none; border-radius:100px; cursor:pointer; transition:transform .25s;}
.modal .btn-full:hover{transform:translateY(-2px);}
.ttt-msg{font-family:var(--mono); font-size:13px; color:rgba(243,241,234,0.8); text-align:center; margin:0 0 18px; min-height:20px;}
.ttt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:300px; margin:0 auto 18px;}
.ttt-cell{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:38px; font-weight:700; border-radius:8px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#fff; cursor:pointer; transition:border-color .2s;}
.ttt-cell.x{color:var(--accent); cursor:default;}
.ttt-cell.o{color:#f3f1ea; cursor:default;}
.ttt-score{display:flex; gap:24px; justify-content:center; margin-bottom:18px;}
.ttt-score .tc{text-align:center;}
.ttt-score .tl{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:rgba(243,241,234,0.5); margin-bottom:4px;}
.ttt-score .tv{font-family:var(--mono); font-size:20px; font-weight:700;}
.ttt-score .tv.accent{color:var(--accent);}

/* ---- Responsive ---- */
@media(max-width:720px){
  nav.bar .links{display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; gap:0; background:rgba(19,19,25,0.97); padding:8px 0;}
  nav.bar .links.show{display:flex;}
  nav.bar .links a, nav.bar .links button{padding:14px 28px; width:100%; box-sizing:border-box;}
  .nav-toggle{display:block; background:none; border:none; color:#f3f1ea; font-size:22px; cursor:pointer;}
  .grid-2{gap:40px;}
  .section{padding:84px 0;}
}