/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ink:        #050505;
  --ink-2:      #0B0B0B;
  --line:       rgba(245,245,240,0.14);
  --line-strong:rgba(245,245,240,0.28);

  --text:       #F5F5F0;
  --text-muted: #8A8A83;
  --text-dim:   #4A4A45;

  --accent:     #2DD4C8; /* signal teal — used only as a small live marker */

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --container: 1320px;
  --edge: 40px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--display); margin:0; letter-spacing:-0.02em; }
p{ margin:0; }
.mono{ font-family: var(--mono); }
.muted{ color: var(--text-muted); }

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

::selection{ background: var(--accent); color: #050505; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}
.ticker__track{
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  animation: ticker 26s linear infinite;
}
.ticker__track span{ margin-right: 14px; }
.ticker__dot{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background: var(--accent); vertical-align: middle;
}
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* =========================================================
   TOP NAV
   ========================================================= */
.topnav{
  position: sticky; top:0; z-index: 60;
  display:flex; align-items:center; justify-content: space-between;
  padding: 22px var(--edge);
  background: rgba(5,5,5,0.75);
  backdrop-filter: blur(10px);
}
.topnav__mark{
  font-family: var(--mono); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.topnav__toggle{
  display:flex; align-items:center; gap: 14px;
  background:none; border:none; cursor:pointer; color: var(--text);
}
.topnav__toggle-text{ font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; }
.topnav__toggle-icon{ display:flex; flex-direction:column; gap:5px; width:26px; }
.topnav__toggle-icon span{ display:block; height:1.5px; background: var(--text); transition: transform .3s ease, opacity .3s ease; }
.menu-open .topnav__toggle-icon span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.menu-open .topnav__toggle-icon span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   FULLSCREEN MENU
   ========================================================= */
.menu{
  position: fixed; inset: 0; z-index: 55;
  background: var(--ink);
  display:flex; flex-direction: column; justify-content: center;
  padding: 0 var(--edge);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
}
.menu-open .menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.menu__inner{ max-width: var(--container); margin: 0 auto; width: 100%; }
.menu__link{
  display:flex; align-items: baseline; gap: 22px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 5rem);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  transition: color .3s ease, padding-left .3s ease;
}
.menu__link:first-child{ border-top: 1px solid var(--line); }
.menu__link:hover{ color: var(--text); padding-left: 16px; }
.menu__num{ font-family: var(--mono); font-size: 0.9rem; color: var(--accent); align-self: flex-start; margin-top: 14px; }
.menu__arrow{ margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; font-size: 1.6rem; }
.menu__link:hover .menu__arrow{ opacity: 1; transform: translateX(0); }
.menu__footer{
  max-width: var(--container); margin: 50px auto 0; width: 100%;
  display:flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
}
.menu__footer a:hover{ color: var(--text); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  max-width: var(--container);
  margin: 0 auto;
  padding: 9vw var(--edge) 60px;
  min-height: 88vh;
  display:flex; flex-direction: column; justify-content: center;
  position: relative;
}
.eyebrow{
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px;
}
.hero__title{ display:flex; flex-direction: column; }
.hero__line{ font-family: var(--display); line-height: 0.92; }
.hero__line--light{
  font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--text-muted);
}
.hero__line--huge{
  font-weight: 700; font-size: clamp(3.6rem, 15vw, 12rem);
  text-transform: uppercase;
}
.hero__sub{
  max-width: 640px; margin-top: 32px; font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--text-muted);
}
.hero__bottom{
  display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap;
  gap: 24px; margin-top: 64px;
}
.hero__roles{
  display:flex; gap: 14px; font-family: var(--mono); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim);
}
.hero__roles span{ border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 16px; }
.hero__actions{ display:flex; gap: 14px; }

.btn{
  font-family: var(--mono); font-size: 0.82rem;
  padding: 15px 28px; border-radius: 999px;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  border: 1px solid transparent;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--text); color: var(--ink); }
.btn--primary:hover{ background: var(--accent); }
.btn--ghost{ border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn--wide{ width: 100%; justify-content: center; }

.scrollcue{
  position: absolute; bottom: 0; left: var(--edge);
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase;
}
.scrollcue span{
  width:1px; height: 34px; background: var(--line-strong); position: relative; overflow: hidden;
}
.scrollcue span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--accent); animation: scrolldrop 1.8s ease-in-out infinite;
}
@keyframes scrolldrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{
  max-width: var(--container);
  margin: 0 auto;
  padding: 110px var(--edge);
  border-top: 1px solid var(--line);
}
.section__head{
  display:flex; align-items: baseline; gap: 18px; margin-bottom: 60px;
}
.section__num{ font-family: var(--mono); color: var(--accent); font-size: 1rem; }
.section__head h2{
  font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; font-weight: 700;
}
.section__count{ margin-left: auto; color: var(--text-dim); font-size: 0.85rem; }

/* =========================================================
   ROWS (work / projects / education / achievements)
   ========================================================= */
.rows{ display:flex; flex-direction: column; }
.row{
  display:grid;
  grid-template-columns: 64px 1fr 1.2fr auto;
  align-items: start;
  gap: 32px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  transition: background .3s ease, padding-left .3s ease;
}
.rows > .row:last-child{ border-bottom: 1px solid var(--line); }
.row--link{ cursor: pointer; }
.row--link:hover{ background: var(--ink-2); padding-left: 14px; }
.row__index{ color: var(--text-dim); font-size: 0.85rem; padding-top: 6px; }
.row__main h3{
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; margin-bottom: 8px;
}
.row__org{ color: var(--accent); font-size: 0.82rem; }
.row__desc{ color: var(--text-muted); font-size: 0.95rem; max-width: 520px; }
.row__tags{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag{
  font-family: var(--mono); font-size: 0.7rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 5px 12px; color: var(--text-muted);
}
.row__arrow{
  color: var(--text-dim); font-size: 1.4rem; padding-top: 4px;
  transition: transform .3s ease, color .3s ease;
}
.row--link:hover .row__arrow{ transform: translate(4px,-4px); color: var(--accent); }
.rows--projects .row{ grid-template-columns: 64px 1fr auto; }

@media (max-width: 860px){
  .row{ grid-template-columns: 40px 1fr; }
  .row__desc{ grid-column: 1 / -1; max-width: none; margin-top: 4px; }
  .row__arrow{ display:none; }
  .rows--projects .row{ grid-template-columns: 40px 1fr; }
}

/* =========================================================
   SKILLS (word cloud, agency client-list style)
   ========================================================= */
.skillcloud{ display:flex; flex-direction: column; gap: 34px; }
.skillcloud__group{
  display:grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.skillcloud__label{
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
}
.skillcloud__words{
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2.2rem); text-transform: uppercase;
  color: var(--text); line-height: 1.3;
}
@media (max-width: 700px){
  .skillcloud__group{ grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact__headline{
  font-size: clamp(2.4rem, 7vw, 5.5rem); font-weight: 700; text-transform: uppercase;
  line-height: 1.02; margin-bottom: 70px;
}
.contact__wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.contact__form{ display:flex; flex-direction: column; gap: 20px; }
.contact__form label{ display:flex; flex-direction: column; gap: 8px; }
.contact__form label span{
  font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.contact__form input, .contact__form textarea{
  background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 15px 16px; color: var(--text);
  font-family: var(--body); font-size: 0.95rem; resize: vertical;
}
.contact__form input:focus, .contact__form textarea:focus{ border-color: var(--accent); }
.contact__note{ text-align:center; font-size: 0.72rem; }

.contact__direct{ display:flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.contact__big{
  font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 18px;
  transition: color .2s ease, border-color .2s ease;
}
.contact__big:hover{ color: var(--accent); border-color: var(--accent); }

.inline-link{ color: var(--accent); }
.inline-link:hover{ text-decoration: underline; }

@media (max-width: 780px){
  .contact__wrap{ grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  max-width: var(--container); margin: 0 auto;
  padding: 40px var(--edge) 60px;
  display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 16px;
  color: var(--text-dim); font-size: 0.8rem;
}
.footer__links{ display:flex; gap: 20px; }
.footer__links a:hover{ color: var(--text); }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity: 1; transform: translateY(0); }