/* =========================================================
   Amer Aldossri — portfolio
   Design language: a calm, dark network-schematic / status
   dashboard. Grounded in the subject: topology diagrams,
   signal states, call-out annotations, monospace data.
   ========================================================= */

:root{
  --bg:        #0A0E16;
  --panel:     #10161F;
  --panel-2:   #141B27;
  --line:      #202A3A;
  --line-soft: #182131;
  --text:      #E9EDF6;
  --text-mute: #8B95AC;
  --text-dim:  #5C667C;
  --accent:    #57E0C9;
  --accent-dim:#3AA893;
  --amber:     #F2A94E;
  --accent-soft: rgba(87,224,201,0.10);
  --radius: 3px;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body::before{
  /* faint schematic grid, fixed, very low contrast */
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:0.35;
  pointer-events:none;
  z-index:0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
}

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
  position:relative;
  z-index:1;
}

img,svg{ display:block; max-width:100%; }

::selection{ background:var(--accent); color:#04140F; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- type ---------- */

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--text);
}

.mono{ font-family:var(--font-mono); }

.section-head{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:24px;
  align-items:start;
  margin-bottom:44px;
}
.section-head .tag{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--accent);
  padding-top:6px;
}
.section-head h2{
  font-size:clamp(26px,3.4vw,34px);
}
.section-head p{
  color:var(--text-mute);
  max-width:56ch;
  margin:10px 0 0;
  font-size:15.5px;
}

@media (max-width:640px){
  .section-head{ grid-template-columns:1fr; gap:8px; }
}

section{
  padding:88px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1;
}
section:last-of-type{ border-bottom:none; }

/* ---------- nav ---------- */

header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,22,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1080px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--text);
}
.brand .node{
  width:28px;height:28px;
  border:1px solid var(--accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--accent);
  position:relative;
}
.brand .node::after{
  content:"";
  position:absolute; inset:-5px;
  border:1px solid var(--line);
  border-radius:50%;
}
.navlinks{
  display:flex; align-items:center; gap:28px;
  font-size:14.5px;
  color:var(--text-mute);
}
.navlinks a{ transition:color .15s ease; }
.navlinks a:hover{ color:var(--text); }
.navlinks .btn{
  color:var(--text);
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:var(--radius);
}
.navlinks .btn:hover{ border-color:var(--accent); color:var(--accent); }
.navtoggle{ display:none; }

@media (max-width:720px){
  .navlinks{
    position:fixed; inset:60px 0 auto 0;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start;
    padding:20px 28px 26px;
    gap:18px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .navlinks.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .navtoggle{
    display:block;
    background:none; border:1px solid var(--line); border-radius:var(--radius);
    color:var(--text); width:38px;height:34px; font-size:16px;
  }
}

/* ---------- hero ---------- */

.hero{
  padding:76px 0 90px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
}

.status{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-mute);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:20px;
  margin-bottom:26px;
}
.status .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(87,224,201,0.6);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(87,224,201,0.45); }
  70%{ box-shadow:0 0 0 7px rgba(87,224,201,0); }
  100%{ box-shadow:0 0 0 0 rgba(87,224,201,0); }
}

.hero h1{
  font-size:clamp(38px,6vw,60px);
  line-height:1.04;
}
.hero .role{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:16px;
  margin-top:16px;
  letter-spacing:0.01em;
}
.hero p.lede{
  color:var(--text-mute);
  font-size:17px;
  max-width:46ch;
  margin:20px 0 32px;
}
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.btn-primary,.btn-secondary{
  font-size:14.5px;
  padding:12px 22px;
  border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn-primary{
  background:var(--accent);
  color:#04140F;
  font-weight:600;
  border:1px solid var(--accent);
}
.btn-primary:hover{ transform:translateY(-1px); background:#6BEBD6; }
.btn-secondary{
  border:1px solid var(--line);
  color:var(--text);
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

/* hero network diagram */
.hero-visual{
  aspect-ratio:1/1;
  max-width:440px;
  margin:0 auto;
  position:relative;
}
.hero-visual svg{ width:100%; height:100%; }
.hv-line{ stroke:var(--line); stroke-width:1; }
.hv-line-active{ stroke:var(--accent-dim); stroke-width:1; opacity:0.7; }
.hv-node-fill{ fill:var(--panel-2); stroke:var(--line); stroke-width:1; }
.hv-node-center{ fill:var(--panel-2); stroke:var(--accent); stroke-width:1.5; }
.hv-label{ font-family:var(--font-mono); font-size:9.5px; fill:var(--text-mute); }
.hv-label-center{ font-family:var(--font-mono); font-size:11px; fill:var(--accent); font-weight:600; }
.hv-ping{ animation:ping 3.6s ease-in-out infinite; }
@keyframes ping{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}

/* ---------- about ---------- */

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }

.about-copy p{ color:var(--text-mute); font-size:16px; margin:0 0 16px; }
.about-copy p:last-child{ margin-bottom:0; }

.facts{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}
.fact{
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.fact:last-child{ border-bottom:none; }
.fact .k{ color:var(--text-dim); font-family:var(--font-mono); font-size:12.5px; }
.fact .v{ color:var(--text); text-align:right; }

/* ---------- skills ---------- */

.skill-groups{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:36px 48px;
}
@media (max-width:700px){ .skill-groups{ grid-template-columns:1fr; } }

.skill-group h3{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-mute);
  border:1px solid var(--line);
  padding:6px 11px;
  border-radius:20px;
  transition:border-color .15s ease, color .15s ease;
}
.pill:hover{ border-color:var(--accent-dim); color:var(--accent); }

/* ---------- experience timeline ---------- */

.timeline{ position:relative; }
.tl-item{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:24px;
  padding-bottom:48px;
  position:relative;
}
.tl-item:last-child{ padding-bottom:0; }
.tl-rail{
  position:relative;
  display:flex; justify-content:center;
}
.tl-rail::before{
  content:"";
  position:absolute; top:22px; bottom:-48px;
  width:1px; background:var(--line);
}
.tl-item:last-child .tl-rail::before{ display:none; }
.tl-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--panel-2);
  border:1.5px solid var(--accent);
  margin-top:6px;
}
.tl-item.current .tl-dot{ background:var(--accent); }

.tl-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:8px 20px;
  margin-bottom:6px;
}
.tl-role{ font-size:18px; font-weight:600; font-family:var(--font-display); }
.tl-org{ color:var(--accent); font-size:14.5px; }
.tl-date{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);
  white-space:nowrap;
}
.tl-item ul{
  margin:12px 0 0; padding-left:18px;
  color:var(--text-mute); font-size:15px;
}
.tl-item li{ margin-bottom:6px; }
.tl-item li::marker{ color:var(--text-dim); }

/* ---------- education & certs ---------- */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }

.edu-item{
  border-left:1px solid var(--line);
  padding-left:18px;
  margin-bottom:26px;
}
.edu-item:last-child{ margin-bottom:0; }
.edu-item h3{ font-size:16px; margin-bottom:4px; }
.edu-item .org{ color:var(--text-mute); font-size:14.5px; }
.edu-item .meta{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-top:6px; }

.cert-list{ list-style:none; margin:0; padding:0; }
.cert-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.cert-list li:first-child{ padding-top:0; }
.cert-list li:last-child{ border-bottom:none; }
.cert-list .issuer{ color:var(--text-dim); font-size:12.5px; font-family:var(--font-mono); }

/* ---------- projects ---------- */

.projects{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
@media (max-width:760px){ .projects{ grid-template-columns:1fr; } }

.project{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  background:var(--panel);
  position:relative;
  transition:border-color .18s ease, transform .18s ease;
}
.project:hover{ border-color:var(--accent-dim); transform:translateY(-2px); }
.project .idx{
  font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
  margin-bottom:16px; display:block;
}
.project h3{ font-size:19px; margin-bottom:10px; }
.project p{ color:var(--text-mute); font-size:14.5px; margin:0 0 18px; }
.project .tags{ display:flex; flex-wrap:wrap; gap:7px; }
.project .tags span{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--accent); background:var(--accent-soft);
  padding:4px 9px; border-radius:3px;
}

/* ---------- contact ---------- */

.contact-wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:start;
}
@media (max-width:760px){ .contact-wrap{ grid-template-columns:1fr; } }

.contact-copy h2{ font-size:clamp(28px,4vw,38px); margin-bottom:16px; }
.contact-copy p{ color:var(--text-mute); font-size:16px; max-width:44ch; }

.contact-list{ display:flex; flex-direction:column; gap:0; margin-top:28px; }
.contact-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.contact-row:first-child{ padding-top:0; }
.contact-row .k{ color:var(--text-dim); font-family:var(--font-mono); font-size:12.5px; }
.contact-row .v{ color:var(--text); transition:color .15s ease; }
.contact-row a.v:hover{ color:var(--accent); }

.contact-panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  padding:28px;
}
.contact-panel .tag{ font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-bottom:14px; display:block; }
.contact-panel p{ color:var(--text-mute); font-size:14.5px; margin:0 0 20px; }

/* ---------- footer ---------- */

footer{
  padding:32px 0;
}
.foot-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--text-dim);
}
.foot-row a{ color:var(--text-dim); }
.foot-row a:hover{ color:var(--accent); }