/* =====================================================================
   Irwan Mohi — Infrastructure Portfolio
   Dark dashboard theme (GitHub / Grafana / Datadog inspired)
   Sections: 1 Tokens · 2 Base · 3 Background · 4 Nav · 5 Hero
             6 Dashboard · 7 About · 8 Skills · 9 Experience
             10 Projects · 11 Stack · 12 Map · 13 Certs · 14 Contact
             15 Footer · 16 Light theme · 17 Responsive · 18 Motion
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --bg:            #0a0e14;
  --bg-2:          #0d1117;
  --surface:       rgba(22, 27, 34, .62);
  --surface-solid: #161b22;
  --border:        rgba(139, 148, 158, .18);
  --border-str:    rgba(139, 148, 158, .32);

  --text:          #e6edf3;
  --text-2:        #9aa7b4;
  --text-3:        #6e7b8a;

  --blue:          #2f81f7;
  --blue-2:        #58a6ff;
  --cyan:          #22d3ee;
  --cyan-2:        #67e8f9;
  --violet:        #a371f7;
  --green:         #3fb950;
  --amber:         #d29922;
  --rose:          #f85149;

  --accent-grad:   linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);

  --radius:        16px;
  --radius-sm:     10px;
  --shadow:        0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:     0 24px 60px rgba(0,0,0,.55);

  --font:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nav-h:         68px;
  --ease:          cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-weight:700; letter-spacing:-.02em; line-height:1.25; }

a{ color:var(--blue-2); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--cyan-2); }

code{ font-family:var(--mono); font-size:.86em; color:var(--cyan-2);
      background:rgba(34,211,238,.08); padding:.12em .4em; border-radius:5px; }

::selection{ background:rgba(47,129,247,.35); color:#fff; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:var(--blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; color:#fff; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

.section-pad{ padding:clamp(64px, 9vw, 120px) 0; position:relative; z-index:1; }

/* Section headings */
.sec-head{ max-width:760px; margin:0 auto clamp(32px,5vw,56px); text-align:center; }
.sec-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.22); border-radius:999px;
  padding:.35rem .9rem; margin:0 0 1rem;
}
.sec-title{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin:0 0 .75rem; }
.sec-sub{ color:var(--text-2); margin:0; font-size:1.02rem; }

/* Reusable glass card */
.card-glass, .glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  position:relative;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.07), transparent 42%);
  opacity:.9;
}

.badge-soft{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  padding:.28rem .65rem; border-radius:999px; white-space:nowrap;
  border:1px solid currentColor;
}
.badge-soft.green{ color:var(--green); background:rgba(63,185,80,.1); }
.badge-soft.blue { color:var(--blue-2); background:rgba(47,129,247,.1); }
.badge-soft.cyan { color:var(--cyan);   background:rgba(34,211,238,.1); }
.badge-soft.amber{ color:var(--amber);  background:rgba(210,153,34,.1); }

.chip-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.chip{
  font-family:var(--mono); font-size:.72rem; color:var(--text-2);
  background:rgba(139,148,158,.09); border:1px solid var(--border);
  padding:.25rem .6rem; border-radius:6px; white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{ color:var(--cyan-2); border-color:rgba(34,211,238,.4); }

.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ position:relative; padding-left:1.6rem; margin-bottom:.55rem; color:var(--text-2); }
.check-list li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.1rem; font-size:.72rem; color:var(--cyan);
}
.check-list.tight li{ margin-bottom:.35rem; font-size:.94rem; }

.c-g{ color:var(--green); } .c-c{ color:var(--cyan); }

/* AOS failure guard.
   aos.css hides every [data-aos] element with opacity:0, and only aos.js ever
   reveals it. If the CDN is blocked — corporate firewall, content blocker, a
   filtered network — the stylesheet can still load while the script does not,
   and the entire page renders blank. script.js adds .aos-on to <html> only
   after AOS.init() has actually run, so until then nothing stays hidden.
   Reduced-motion visitors never get the class at all. */
html:not(.aos-on) [data-aos]{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}

/* ---------- 3. Animated background ---------- */
.bg-aurora{
  position:fixed; inset:-30% -20%; z-index:-3; pointer-events:none;
  background:
    radial-gradient(45% 45% at 18% 22%, rgba(47,129,247,.30), transparent 62%),
    radial-gradient(40% 40% at 82% 18%, rgba(34,211,238,.24), transparent 62%),
    radial-gradient(45% 45% at 70% 82%, rgba(163,113,247,.20), transparent 62%),
    radial-gradient(40% 40% at 25% 85%, rgba(47,129,247,.18), transparent 62%);
  filter:blur(40px);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  { transform:translate3d(0,0,0) scale(1);      }
  50% { transform:translate3d(-3%,2%,0) scale(1.08);}
  100%{ transform:translate3d(3%,-2%,0) scale(1.04);}
}

.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(139,148,158,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,148,158,.055) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 20%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 20%, #000 30%, transparent 78%);
}

#particles-js{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* ---------- 4. Navigation ---------- */
.site-nav{
  height:var(--nav-h);
  background:rgba(10,14,20,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-nav.scrolled{
  background:rgba(10,14,20,.88);
  border-bottom-color:var(--border);
}
.navbar-brand{
  font-family:var(--mono); font-weight:700; font-size:1rem;
  color:var(--text) !important; display:flex; align-items:center; gap:.55rem;
}
.brand-dot{
  width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(63,185,80,.16);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.45} }
.brand-path{ color:var(--cyan); }

.site-nav .nav-link{
  color:var(--text-2); font-size:.93rem; font-weight:500;
  padding:.5rem .85rem !important; border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.site-nav .nav-link:hover{ color:var(--text); background:rgba(139,148,158,.08); }
.site-nav .nav-link.active{ color:var(--cyan); background:rgba(34,211,238,.09); }

.navbar-toggler{ border:1px solid var(--border); color:var(--text); padding:.35rem .6rem; }
.navbar-toggler:focus{ box-shadow:none; }

.theme-toggle{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(139,148,158,.09); border:1px solid var(--border);
  color:var(--text-2); cursor:pointer; transition:all .2s var(--ease);
}
.theme-toggle:hover{ color:var(--cyan); border-color:rgba(34,211,238,.4); }

.nav-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--accent-grad); box-shadow:0 0 12px rgba(34,211,238,.6);
}

/* ---------- 5. Hero ---------- */
.hero{ padding-top:calc(var(--nav-h) + clamp(48px,7vw,90px)); min-height:100svh; display:flex; align-items:center; }

.hero-id{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }

.avatar{
  width:82px; height:82px; flex:none; border-radius:50%; object-fit:cover;
  background:var(--surface-solid);
  border:2px solid transparent;
  box-shadow:0 0 0 2px var(--blue), 0 0 22px rgba(34,211,238,.35);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.avatar:hover{ transform:scale(1.05); box-shadow:0 0 0 2px var(--cyan), 0 0 30px rgba(34,211,238,.5); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.78rem; color:var(--green);
  background:rgba(63,185,80,.08); border:1px solid rgba(63,185,80,.25);
  border-radius:999px; padding:.35rem .9rem; margin-bottom:1.4rem;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:currentColor; position:relative; flex:none;
}
.pulse-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; animation:pulse 2s ease-out infinite;
}
@keyframes pulse{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.9);opacity:0} }

.hero-name{
  font-size:clamp(2.6rem, 7vw, 4.4rem); font-weight:800; margin:0 0 .35rem;
  background:linear-gradient(180deg,#fff 30%, #9aa7b4 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-role{ font-size:clamp(1.05rem,2.4vw,1.4rem); font-weight:600; margin:0 0 1rem; }
.grad-text{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-role .sep{ color:var(--text-3); margin:0 .5rem; }

.hero-typed{
  font-family:var(--mono); font-size:.95rem; color:var(--text-2);
  min-height:1.8em; margin:0 0 1.2rem;
}
.hero-typed .prompt{ color:var(--cyan); margin-right:.5rem; }
.typed-cursor{ color:var(--cyan); font-weight:400; }

.hero-lead{ color:var(--text-2); max-width:60ch; margin:0 0 2rem; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.5rem; }

.btn-accent, .btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.95rem; padding:.72rem 1.35rem; border-radius:12px;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-accent{
  background:var(--accent-grad); color:#04121f;
  box-shadow:0 8px 24px rgba(47,129,247,.32);
}
.btn-accent:hover{ color:#04121f; transform:translateY(-2px); box-shadow:0 14px 34px rgba(34,211,238,.4); }
.btn-ghost{
  background:rgba(139,148,158,.07); border-color:var(--border-str); color:var(--text);
}
.btn-ghost:hover{ color:var(--cyan-2); border-color:rgba(34,211,238,.45); transform:translateY(-2px); background:rgba(34,211,238,.07); }

.hero-facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:2.2rem; padding:0; margin:0;
}
.hero-facts li{ display:flex; flex-direction:column; }
.hero-facts strong{
  font-family:var(--mono); font-size:1.7rem; font-weight:700;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-facts span{ font-size:.8rem; color:var(--text-3); letter-spacing:.03em; }

/* Terminal */
.terminal{ overflow:hidden; }
.terminal-bar{
  display:flex; align-items:center; gap:.45rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--border);
  background:rgba(13,17,23,.6);
}
.tdot{ width:11px; height:11px; border-radius:50%; }
.tdot.red{ background:#ff5f57; } .tdot.amber{ background:#febc2e; } .tdot.green{ background:#28c840; }
.terminal-title{
  font-family:var(--mono); font-size:.76rem; color:var(--text-3);
  margin-left:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.terminal-badge{
  margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--cyan);
  border:1px solid rgba(34,211,238,.25); background:rgba(34,211,238,.07);
  padding:.15rem .5rem; border-radius:6px; white-space:nowrap;
}
.terminal-body{
  margin:0; padding:1.15rem 1.25rem; font-family:var(--mono);
  font-size:.8rem; line-height:1.75; color:var(--text-2);
  overflow-x:auto; max-height:420px;
}
.terminal-body .c-p{ color:var(--green); }
.terminal-body .c-d{ color:var(--blue-2); }
.cursor{ color:var(--cyan); animation:blink 1.1s steps(2) infinite; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  color:var(--text-3); border:1px solid var(--border);
  animation:bob 2.2s ease-in-out infinite;
}
.scroll-cue:hover{ color:var(--cyan); border-color:rgba(34,211,238,.4); }
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* ---------- 6. Dashboard ---------- */
.status-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  padding:.85rem 1.25rem; border-radius:var(--radius);
}
.status-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
}
.status-pill.ok{ color:var(--green); }
.status-meta{ font-family:var(--mono); font-size:.76rem; color:var(--text-3); display:inline-flex; align-items:center; gap:.45rem; }

.metric{ padding:1.4rem; height:100%; }
.metric:hover{ transform:translateY(-4px); border-color:var(--border-str); box-shadow:var(--shadow-lg); }
.metric-head{ display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1rem; }
.metric-icon{
  width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:1rem;
}
.metric-icon.blue  { color:var(--blue-2); background:rgba(47,129,247,.13);  border:1px solid rgba(47,129,247,.25); }
.metric-icon.cyan  { color:var(--cyan);   background:rgba(34,211,238,.13);  border:1px solid rgba(34,211,238,.25); }
.metric-icon.violet{ color:var(--violet); background:rgba(163,113,247,.13); border:1px solid rgba(163,113,247,.25); }
.metric-icon.green { color:var(--green);  background:rgba(63,185,80,.13);   border:1px solid rgba(63,185,80,.25); }
.metric-icon.amber { color:var(--amber);  background:rgba(210,153,34,.13);  border:1px solid rgba(210,153,34,.25); }
.metric-icon.rose  { color:var(--rose);   background:rgba(248,81,73,.13);   border:1px solid rgba(248,81,73,.25); }

.metric-title{ font-size:.98rem; margin:0; }
.metric-sub{ font-family:var(--mono); font-size:.72rem; color:var(--text-3); margin:.15rem 0 0; }

.gauge-wrap{ position:relative; width:132px; margin:0 auto .4rem; }
.gauge{ width:132px; height:132px; transform:rotate(-90deg); display:block; }
.gauge-track{ fill:none; stroke:rgba(139,148,158,.14); stroke-width:9; }
.gauge-arc{
  fill:none; stroke-width:9; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset .9s var(--ease);
}
.gauge-arc.blue  { stroke:var(--blue);   filter:drop-shadow(0 0 6px rgba(47,129,247,.55)); }
.gauge-arc.cyan  { stroke:var(--cyan);   filter:drop-shadow(0 0 6px rgba(34,211,238,.55)); }
.gauge-arc.violet{ stroke:var(--violet); filter:drop-shadow(0 0 6px rgba(163,113,247,.55)); }
.gauge-val{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  font-family:var(--mono); font-size:1.75rem; font-weight:700; color:var(--text);
}
.gauge-val small{ font-size:.9rem; color:var(--text-3); }

.spark{ width:100%; height:44px; display:block; margin-top:.4rem; }
.spark-line{ fill:none; stroke-width:1.8; }
.spark-line.blue{ stroke:var(--blue-2); } .spark-line.cyan{ stroke:var(--cyan); } .spark-line.violet{ stroke:var(--violet); }
.spark-fill.blue{ fill:rgba(47,129,247,.16); } .spark-fill.cyan{ fill:rgba(34,211,238,.16); } .spark-fill.violet{ fill:rgba(163,113,247,.16); }
.spark-fill{ stroke:none; }

.svc-list{ list-style:none; padding:0; margin:0; font-family:var(--mono); font-size:.78rem; }
.svc-list li{ display:flex; align-items:center; gap:.55rem; padding:.32rem 0; border-bottom:1px dashed rgba(139,148,158,.1); color:var(--text-2); }
.svc-list li:last-child{ border-bottom:0; }
.svc-list em{ margin-left:auto; font-style:normal; font-size:.7rem; color:var(--text-3); }
.svc-led{ width:7px; height:7px; border-radius:50%; flex:none; }
.svc-led.ok{ background:var(--green); box-shadow:0 0 8px rgba(63,185,80,.8); }
.svc-led.warn{ background:var(--amber); box-shadow:0 0 8px rgba(210,153,34,.8); }

.chart-card{ padding:1.4rem; height:100%; }
.chart-head{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:1rem; font-family:var(--mono); font-size:.75rem; color:var(--text-3); }
.chart-legend b{ color:var(--text); }
.lg{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:.35rem; }
.lg.cyan{ background:var(--cyan); } .lg.blue{ background:var(--blue); }

.area-chart{ width:100%; height:200px; display:block; }
.area-chart .grid-lines line{ stroke:rgba(139,148,158,.1); stroke-width:1; }
.area-chart .line{ fill:none; stroke-width:2; }
.area-chart .line.cyan{ stroke:var(--cyan); filter:drop-shadow(0 0 5px rgba(34,211,238,.5)); }
.area-chart .line.blue{ stroke:var(--blue-2); }
.area-chart .area{ stroke:none; }
.area-chart .area.cyan{ fill:rgba(34,211,238,.14); }
.area-chart .area.blue{ fill:rgba(47,129,247,.12); }

.uptime-strip{ display:flex; gap:2px; height:44px; margin:.35rem 0 .4rem; }
.uptime-strip span{ flex:1; border-radius:2px; background:var(--green); opacity:.75; transition:opacity .2s, transform .2s; }
.uptime-strip span:hover{ opacity:1; transform:scaleY(1.12); }
.uptime-strip span.warn{ background:var(--amber); }
.uptime-strip span.down{ background:var(--rose); }
.uptime-legend{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; color:var(--text-3); }

.mini-stats{ list-style:none; padding:1rem 0 0; margin:1rem 0 0; border-top:1px solid var(--border); }
.mini-stats li{ display:flex; justify-content:space-between; font-size:.85rem; padding:.28rem 0; color:var(--text-2); }
.mini-stats b{ font-family:var(--mono); color:var(--text); }

/* ---------- 7. About ---------- */
.focus-card{ height:100%; }
.focus-title{ font-size:1rem; display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; }
.focus-title i{ color:var(--cyan); }

/* ---------- 8. Skills ---------- */
.skill-card{ padding:1.5rem; height:100%; }
.skill-card:hover{ transform:translateY(-4px); border-color:var(--border-str); }
.skill-cat{ display:flex; align-items:center; gap:.75rem; font-size:1.05rem; margin:0 0 1.35rem; }
.skill{ margin-bottom:1rem; }
.skill:last-child{ margin-bottom:0; }
.skill-top{ display:flex; justify-content:space-between; font-size:.87rem; margin-bottom:.4rem; color:var(--text-2); }
.skill-top b{ font-family:var(--mono); font-size:.78rem; color:var(--cyan); }
.bar{ height:7px; border-radius:99px; background:rgba(139,148,158,.13); overflow:hidden; }
.bar > span{
  display:block; height:100%; width:0; border-radius:99px;
  background:var(--accent-grad); box-shadow:0 0 10px rgba(34,211,238,.45);
  transition:width 1.4s var(--ease);
}

/* ---------- 9. Experience ---------- */
.timeline{ position:relative; max-width:960px; margin:0 auto; padding-left:0; }
.timeline::before{
  content:""; position:absolute; left:19px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg, var(--blue), var(--cyan), transparent);
  opacity:.45;
}
.tl-item{ position:relative; padding-left:64px; margin-bottom:2rem; }
.tl-item:last-child{ margin-bottom:0; }
.tl-marker{
  position:absolute; left:0; top:14px; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:.95rem; color:var(--cyan);
  background:var(--surface-solid); border:1px solid var(--border-str);
  box-shadow:0 0 0 5px rgba(10,14,20,.85);
}
.tl-card{ padding:1.6rem; }
.tl-card:hover{ border-color:var(--border-str); }
.tl-head{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:flex-start; }
.tl-head h3{ font-size:1.22rem; margin:0 0 .25rem; }
.tl-tag{ font-size:.8rem; font-weight:500; color:var(--text-3); }
.tl-org{ font-family:var(--mono); font-size:.8rem; color:var(--text-3); margin:0; }
.tl-intro{ color:var(--text-2); margin:1rem 0; }
.tl-sub{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); margin:1.35rem 0 .7rem;
}

/* ---------- 10. Projects ---------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-bottom:2.5rem; }
.filter-btn{
  font-size:.85rem; font-weight:500; color:var(--text-2);
  background:rgba(139,148,158,.07); border:1px solid var(--border);
  padding:.45rem 1.05rem; border-radius:999px; cursor:pointer;
  transition:all .25s var(--ease);
}
.filter-btn:hover{ color:var(--text); border-color:var(--border-str); }
.filter-btn.active{ color:#04121f; background:var(--accent-grad); border-color:transparent; font-weight:600; }

.project-col{ transition:opacity .35s var(--ease), transform .35s var(--ease); }
.project-col.hidden{ display:none; }

.project{ height:100%; overflow:hidden; display:flex; flex-direction:column; }
.project:hover{ transform:translateY(-6px); border-color:var(--border-str); box-shadow:var(--shadow-lg); }
.project-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); }
.project-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.project:hover .project-media img{ transform:scale(1.05); }
.project-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(13,17,23,.85) 100%);
}
.project-tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-family:var(--mono); font-size:.68rem; color:var(--cyan);
  background:rgba(10,14,20,.75); border:1px solid rgba(34,211,238,.3);
  padding:.25rem .6rem; border-radius:6px; backdrop-filter:blur(6px);
  display:inline-flex; align-items:center; gap:.4rem;
}
.project-body{ padding:1.35rem; display:flex; flex-direction:column; flex:1; }
.project-body h3{ font-size:1.08rem; margin:0 0 .6rem; display:flex; align-items:center; gap:.5rem; }
.project-body > p{ color:var(--text-2); font-size:.92rem; margin:0; }
.oss-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

.achv{ list-style:none; padding:1rem 0 0; margin:1rem 0 0; border-top:1px solid var(--border); }
.achv li{ position:relative; padding-left:1.35rem; font-size:.86rem; color:var(--text-2); margin-bottom:.45rem; }
.achv li::before{
  content:"\f0da"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:.2rem; top:0; color:var(--cyan); font-size:.7rem;
}
.project-link{
  margin-top:auto; padding-top:1rem; font-family:var(--mono); font-size:.8rem;
  display:inline-flex; align-items:center; gap:.45rem;
}

/* ---------- 11. Tech stack ---------- */
.tech-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.tech{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.4rem .75rem; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.tech i{ font-size:1.7rem; color:var(--text-2); transition:color .3s var(--ease); }
.tech span{ font-family:var(--mono); font-size:.78rem; color:var(--text-3); }
.tech:hover{ transform:translateY(-5px); border-color:rgba(34,211,238,.42); }
.tech:hover i{ color:var(--cyan); }
.tech:hover span{ color:var(--text); }

/* ---------- 12. Map ---------- */
.map-card{ padding:1.25rem; }
#worldMap{ width:100%; height:auto; display:block; }
.map-dots{ color:rgba(139,148,158,.30); }
.map-arcs path{
  fill:none; stroke:url(#arcGrad); stroke-width:1.4; opacity:.55;
  stroke-dasharray:6 6; animation:dash 14s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-240; } }
.map-nodes .halo{ fill:none; stroke:var(--cyan); stroke-width:1.2; opacity:0; transform-origin:center; }
.map-nodes .node{ fill:var(--cyan); }
.map-nodes .node.origin{ fill:var(--blue-2); }
.map-nodes text{
  font-family:var(--mono); font-size:11px; fill:var(--text-3);
}
.map-legend{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.5rem; padding:1rem .5rem 0; margin:0;
  border-top:1px solid var(--border); font-family:var(--mono); font-size:.74rem; color:var(--text-3);
}
.map-legend li{ display:flex; align-items:center; gap:.5rem; }
.led{ width:9px; height:9px; border-radius:50%; }
.led.origin{ background:var(--blue-2); box-shadow:0 0 8px var(--blue-2); }
.led.edge{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.led.route{ background:transparent; border:1px dashed var(--cyan); border-radius:2px; }

/* ---------- 13. Certifications ---------- */
.cert{ padding:1.75rem 1.4rem; text-align:center; height:100%;
       display:flex; flex-direction:column; align-items:center; gap:.5rem;
       border-style:dashed; }
.cert:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,.4); }
.cert-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:1.35rem; color:var(--cyan);
  background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25);
  margin-bottom:.4rem;
}
.cert h3{ font-size:1.05rem; margin:0; }
.cert p{ font-size:.85rem; color:var(--text-3); margin:0 0 .6rem; }

/* ---------- 14. Contact ---------- */
.contact-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.45rem;
  padding:1.9rem 1.25rem; height:100%; color:var(--text);
}
.contact-card:hover{ transform:translateY(-5px); border-color:rgba(34,211,238,.4); color:var(--text); }
.contact-icon{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; margin-bottom:.35rem; }
.contact-icon.blue  { color:var(--blue-2); background:rgba(47,129,247,.13); }
.contact-icon.cyan  { color:var(--cyan);   background:rgba(34,211,238,.13); }
.contact-icon.violet{ color:var(--violet); background:rgba(163,113,247,.13); }
.contact-icon.green { color:var(--green);  background:rgba(63,185,80,.13); }
.contact-card h3{ font-size:1rem; margin:0; }
.contact-card p{ font-family:var(--mono); font-size:.82rem; color:var(--text-3); margin:0; word-break:break-word; }

/* The WhatsApp card is a <button> (it copies a username rather than navigating) */
button.contact-card{
  width:100%; font:inherit; cursor:pointer; text-align:center;
  -webkit-appearance:none; appearance:none;
}
.contact-hint{
  font-family:var(--mono); font-size:.66rem; line-height:1.45; color:var(--text-3);
  opacity:.75; margin-top:.15rem;
}
button.contact-card.copied .contact-hint{ color:var(--green); opacity:1; }
button.contact-card.copied{ border-color:rgba(63,185,80,.5); }

.cta-banner{
  margin-top:3rem; padding:2rem; display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.cta-banner h3{ font-size:1.3rem; margin:0 0 .4rem; }
.cta-banner p{ color:var(--text-2); }

/* ---------- 15. Footer ---------- */
.site-footer{
  border-top:1px solid var(--border); padding:1.75rem 0;
  background:rgba(10,14,20,.6); backdrop-filter:blur(10px); position:relative; z-index:1;
}
.footer-inner{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.footer-inner p{ font-size:.86rem; color:var(--text-3); }
.footer-links{ display:flex; gap:.6rem; }
.footer-links a{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:var(--text-2); background:rgba(139,148,158,.08); border:1px solid var(--border);
  transition:all .25s var(--ease);
}
.footer-links a:hover{ color:var(--cyan); border-color:rgba(34,211,238,.4); transform:translateY(-2px); }

.to-top{
  position:fixed; right:20px; bottom:20px; z-index:900;
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-grad); color:#04121f; border:0; cursor:pointer;
  box-shadow:0 8px 24px rgba(47,129,247,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .3s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- 16. Light theme ---------- */
[data-bs-theme="light"]{
  --bg:#f4f7fb; --bg-2:#ffffff;
  --surface:rgba(255,255,255,.72); --surface-solid:#ffffff;
  --border:rgba(15,23,42,.10); --border-str:rgba(15,23,42,.2);
  --text:#0f172a; --text-2:#475569; --text-3:#64748b;
  --blue:#1d63d8; --blue-2:#1a56c4; --cyan:#0e93ad; --cyan-2:#0b7f96; --violet:#7c3aed;
  --green:#118c3b; --amber:#a16207; --rose:#dc2626;
  --shadow:0 10px 30px rgba(15,23,42,.10);
  --shadow-lg:0 24px 60px rgba(15,23,42,.14);
}
[data-bs-theme="light"] .bg-aurora{ opacity:.55; }
[data-bs-theme="light"] .site-nav{ background:rgba(244,247,251,.72); }
[data-bs-theme="light"] .site-nav.scrolled{ background:rgba(244,247,251,.94); }
[data-bs-theme="light"] .hero-name{ background:linear-gradient(180deg,#0f172a 30%,#475569 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-bs-theme="light"] .terminal-bar,
[data-bs-theme="light"] .terminal-body{ background:#0d1117; color:#9aa7b4; }
[data-bs-theme="light"] .terminal-title{ color:#6e7b8a; }
[data-bs-theme="light"] .tl-marker{ box-shadow:0 0 0 5px rgba(244,247,251,.9); }
[data-bs-theme="light"] .btn-accent,
[data-bs-theme="light"] .filter-btn.active,
[data-bs-theme="light"] .to-top{ color:#fff; }
[data-bs-theme="light"] .site-footer{ background:rgba(255,255,255,.7); }
[data-bs-theme="light"] .map-dots{ color:rgba(15,23,42,.22); }

/* ---------- 17. Responsive ---------- */
@media (max-width: 991.98px){
  .site-nav .navbar-collapse{
    background:rgba(10,14,20,.97); border:1px solid var(--border); border-radius:14px;
    margin-top:.6rem; padding:.75rem;
  }
  [data-bs-theme="light"] .site-nav .navbar-collapse{ background:rgba(255,255,255,.98); }
  .hero{ min-height:auto; padding-bottom:5rem; }
  .scroll-cue{ display:none; }
  .hero-facts{ gap:1.5rem; }
}
@media (max-width: 767.98px){
  body{ font-size:15px; }
  .sec-title{ font-size:1.7rem; }
  .tl-item{ padding-left:52px; }
  .timeline::before{ left:15px; }
  .tl-marker{ width:32px; height:32px; font-size:.8rem; }
  .tl-card, .metric, .chart-card, .skill-card{ padding:1.15rem; }
  .terminal-body{ font-size:.7rem; padding:.9rem; }
  .hero-facts{ gap:1.25rem; }
  .hero-facts strong{ font-size:1.35rem; }
  .cta-banner{ padding:1.5rem; }
  .tech-grid{ grid-template-columns:repeat(auto-fill, minmax(105px,1fr)); }
  .tech{ padding:1.1rem .5rem; }
  .map-legend{ gap:.9rem; }
  .status-bar{ gap:.6rem 1rem; font-size:.9rem; }
  .status-meta.ms-auto{ margin-left:0 !important; }
}
@media (max-width: 575.98px){
  /* Bootstrap's .g-5 raises --bs-gutter-x to 3rem, so .row's negative margins
     become -24px a side while .container still pads only 12px. Above 576px the
     container's max-width absorbs the difference; below it the container is
     full-width and the row overflows the viewport by 12px each side. Restore the
     horizontal gutter here — .g-5 keeps its vertical spacing. */
  .row.g-5{ --bs-gutter-x: 1.5rem; }

  .hero-id{ gap:.75rem; }
  .avatar{ width:66px; height:66px; }
}

@media (max-width: 400px){
  .hero-cta .btn-accent, .hero-cta .btn-ghost{ width:100%; justify-content:center; }
  .hero-id{ flex-wrap:wrap; }
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .bg-aurora{ animation:none; }
}

/* Print */
@media print{
  .site-nav, .to-top, .scroll-cue, #particles-js, .bg-aurora, .bg-grid{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card-glass, .glass{ break-inside:avoid; border:1px solid #ccc; box-shadow:none; background:#fff; }
}