/* ==========================================================================
   Boris Vareskovic — CV site
   Clean, dark design system shared across all pages.
   ========================================================================== */

:root{
  --bg:#0B0D10;
  --surface:#15181D;
  --surface-soft:#1C2027;
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.18);
  --ink:#F3F4F6;
  --ink-soft:#C7CBD1;
  --muted:#868C96;
  --accent:#2453E0;
  --accent-hover:#1B41B8;
  --accent-soft:rgba(36,83,224,0.14);
  --accent-soft-strong:rgba(36,83,224,0.22);
  --accent-line:rgba(36,83,224,0.4);
  --accent2:#0E8F6F;
  --accent2-hover:#0B7259;
  --accent2-soft:rgba(14,143,111,0.14);
  --accent2-soft-strong:rgba(14,143,111,0.22);
  --accent2-line:rgba(14,143,111,0.4);
  --gradient:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-bg:rgba(11,13,16,0.78);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 10px 30px -14px rgba(0,0,0,0.55);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,0.6);
  --maxw:1080px;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--ink-soft);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
.heading{ font-family:'Space Grotesk',sans-serif; color:var(--ink); }

/* ── layout helpers ── */
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; padding:0 24px; }

/* ── ambient background aura ── */
.aura{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aura span{ position:absolute; border-radius:50%; filter:blur(95px); opacity:0.4; will-change:transform; }
.aura-a{ width:34vw; height:34vw; max-width:520px; max-height:520px; background:var(--accent); top:-10vw; left:-8vw; animation:auraFloat 20s ease-in-out infinite; }
.aura-b{ width:30vw; height:30vw; max-width:460px; max-height:460px; background:var(--accent2); bottom:-8vw; right:-6vw; animation:auraFloat 24s ease-in-out infinite reverse; }
.aura-c{ width:22vw; height:22vw; max-width:340px; max-height:340px; background:var(--accent); top:38vh; left:48vw; opacity:0.14; animation:auraFloat 28s ease-in-out infinite; }
@keyframes auraFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(3vw,-2vw) scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .aura span{ animation:none; } }

/* ── nav ── */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000; height:68px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-nav .wrap{ display:flex; align-items:center; height:100%; gap:8px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; background:var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.82em; letter-spacing:0.2px;
  box-shadow:0 4px 14px -4px rgba(36,83,224,0.45);
}
.brand-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.02em; letter-spacing:-0.1px; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-link{
  position:relative; color:var(--muted); text-decoration:none; font-size:0.88em; font-weight:500;
  padding:9px 14px; border-radius:8px; transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-link:hover{ color:var(--ink); background:var(--surface-soft); }
.nav-link.active{ color:var(--accent); background:var(--accent-soft); }
.nav-cta{
  margin-left:8px !important; color:#fff !important;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  background-size:160% 160%; background-position:0% 50%;
  transition:background-position .5s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 6px 16px -6px rgba(36,83,224,0.4);
}
.nav-cta:hover{ background-position:100% 50%; box-shadow:0 8px 20px -6px rgba(14,143,111,0.45); }

.nav-back{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); text-decoration:none;
  font-size:0.88em; font-weight:500; padding:9px 15px; border-radius:8px; border:1px solid var(--border);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav-back:hover{ background:var(--surface-soft); border-color:var(--border-strong); color:var(--ink); transform:translateX(-2px); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:8px; color:var(--ink);
  width:38px; height:38px; cursor:pointer; font-size:0.95em; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.nav-toggle:hover{ border-color:var(--border-strong); }

@media (max-width:780px){
  .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:68px; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--border); padding:10px 20px 18px; box-shadow:var(--shadow-md);
    opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .nav-links.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .nav-link{ padding:11px 14px; }
  .nav-cta{ margin-left:0 !important; margin-top:4px; text-align:center; }
  .nav-toggle{ display:flex; }
}

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:10px;
  font-weight:600; font-size:0.93em; text-decoration:none; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), background-position .5s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  background-size:160% 160%; background-position:0% 50%;
  color:#fff; box-shadow:0 10px 24px -10px rgba(36,83,224,0.45);
}
.btn-primary:hover{ background-position:100% 50%; box-shadow:0 14px 28px -10px rgba(14,143,111,0.5); }
.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--border-strong); color:var(--ink); }

/* ── hero ── */
.hero{ position:relative; z-index:1; padding:150px 0 76px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:0.76em; font-weight:500; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--accent); margin-bottom:20px;
}
.eyebrow::before{ content:''; width:20px; height:2px; border-radius:2px; background:var(--gradient); }

.hero-grid{ display:grid; grid-template-columns:1.35fr 0.85fr; gap:56px; align-items:center; }
@media (max-width:820px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }

.hero h1{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(2.2em,5.2vw,3.4em);
  line-height:1.06; letter-spacing:-1.2px; color:var(--ink); margin-bottom:18px;
}

.hero-position{
  font-size:1.14em; font-weight:600; color:var(--ink-soft); max-width:560px; margin-bottom:24px;
  line-height:1.5;
}
.hero-position span{ color:var(--accent); font-weight:400; margin:0 2px; }

.hero-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:0.74em; font-weight:500; letter-spacing:0.2px;
  padding:6px 12px; border-radius:7px; background:var(--surface);
  border:1px solid var(--border); color:var(--ink-soft);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.hero-tags .tag:nth-child(odd){ background:var(--accent-soft); border-color:var(--accent-line); }
.hero-tags .tag:nth-child(even){ background:var(--accent2-soft); border-color:var(--accent2-line); }
.tag:hover{ transform:translateY(-2px); }

.hero-portrait{ position:relative; justify-self:center; z-index:1; width:250px; }
.portrait-glow{
  position:absolute; inset:-12% -22%; border-radius:50%; z-index:0;
  background:conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
  filter:blur(46px); opacity:0.4; animation:spin 16s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .portrait-glow{ animation:none; } }
.portrait-photo{ position:relative; z-index:1; width:100%; line-height:0; }
.portrait-photo img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 24px 32px rgba(20,22,26,0.16));
}
.portrait-badge{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--gradient); color:#fff; font-family:'IBM Plex Mono',monospace;
  font-size:0.72em; font-weight:600; padding:8px 16px; border-radius:99px;
  white-space:nowrap; box-shadow:0 10px 24px -8px rgba(36,83,224,0.45);
}
@media (max-width:820px){
  .hero-portrait{ order:-1; width:210px; }
}

/* ── sections ── */
main{ position:relative; z-index:1; flex:1; }
.section{ padding:88px 0; border-top:1px solid var(--border); }
.section:first-of-type{ border-top:none; }
.section-header{ margin-bottom:38px; max-width:600px; }
.section-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.9em; letter-spacing:-0.6px; color:var(--ink); }
.section-lead{ color:var(--muted); font-size:0.98em; margin-top:10px; }

/* ── card base ── */
.card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card::after{
  content:''; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 70%);
  transition:opacity .4s var(--ease);
}
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }

/* about */
.about-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
.about-card{ padding:32px; }
.about-card p{ color:var(--ink-soft); }
.about-card p + p{ margin-top:14px; }

.facts-card{ padding:28px 30px; display:flex; flex-direction:column; gap:18px; }
.fact-row{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--border); padding-bottom:14px; }
.fact-row:last-child{ border-bottom:none; padding-bottom:0; }
.fact-label{ font-family:'IBM Plex Mono',monospace; font-size:0.72em; letter-spacing:0.8px; text-transform:uppercase; color:var(--muted); }
.fact-value{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3em;
  background:var(--gradient); background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* qualifications */
.qual-list{ display:flex; flex-direction:column; gap:12px; }
.qual-card{ display:flex; align-items:flex-start; gap:18px; padding:24px 26px; }
.qual-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.qual-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1.05em; transition:transform .3s var(--ease);
}
.qual-card:hover .qual-icon{ transform:scale(1.08) rotate(-4deg); }
.qual-card:nth-child(even) .qual-icon{ background:var(--accent2-soft); color:var(--accent2); }
.qual-body h4{ font-weight:700; font-size:1em; color:var(--ink); margin-bottom:3px; }
.qual-body h4 a{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease); }
.qual-body h4 a:hover{ border-color:var(--accent); color:var(--accent); }
.qual-meta{ font-family:'IBM Plex Mono',monospace; font-size:0.76em; color:var(--muted); margin-bottom:10px; }
.qual-links{ display:flex; flex-wrap:wrap; gap:7px; }
.qual-link{
  display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace;
  font-size:0.72em; font-weight:500; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); padding:5px 11px; border-radius:6px; text-decoration:none;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.qual-link:hover{ background:var(--accent-soft-strong); transform:translateY(-1px); }
.qual-card:nth-child(even) .qual-link{ color:var(--accent2); background:var(--accent2-soft); border-color:var(--accent2-line); }
.qual-card:nth-child(even) .qual-link:hover{ background:var(--accent2-soft-strong); }

/* experience timeline */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{
  content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--border);
}
.timeline-item{ position:relative; margin-bottom:14px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute; left:-32px; top:26px; width:19px; height:19px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border-strong); z-index:1;
  transition:box-shadow .3s var(--ease);
}
.timeline-item.current .timeline-dot{
  background:var(--gradient); border-color:transparent;
  box-shadow:0 0 0 5px var(--accent-soft), 0 0 0 1px rgba(14,143,111,0.15);
}
.timeline-card{ padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.timeline-item:hover .timeline-card{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.role{ font-weight:700; font-size:0.98em; color:var(--ink); margin-bottom:2px; }
.company{ font-family:'IBM Plex Mono',monospace; font-size:0.8em; color:var(--muted); }
.period{
  font-family:'IBM Plex Mono',monospace; font-size:0.74em; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:5px 12px; border-radius:6px; white-space:nowrap; flex-shrink:0;
}

/* skills */
.subhead{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05em; color:var(--ink);
  margin:0 0 14px; letter-spacing:-0.2px;
}
.subhead:not(:first-of-type){ margin-top:36px; }

.lang-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.lang-card{ display:flex; align-items:center; gap:14px; padding:18px 20px; }
.lang-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.lang-flag{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent); font-family:'IBM Plex Mono',monospace;
  font-weight:700; font-size:0.78em; letter-spacing:0.2px;
  display:flex; align-items:center; justify-content:center;
}
.lang-card:nth-child(even) .lang-flag{ background:var(--accent2-soft); color:var(--accent2); }
.lang-info{ flex:1; min-width:0; }
.lang-info h4{ font-weight:700; font-size:0.95em; color:var(--ink); }
.lang-info p{ font-family:'IBM Plex Mono',monospace; font-size:0.74em; color:var(--muted); margin-top:2px; }

/* focus areas */
.focus-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:680px){ .focus-grid{ grid-template-columns:1fr; } }
.focus-card{ padding:24px 26px; }
.focus-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.focus-header{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.focus-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1.05em; transition:transform .3s var(--ease);
}
.focus-card:hover .focus-icon{ transform:scale(1.08) rotate(-4deg); }
.focus-card:nth-child(even) .focus-icon{ background:var(--accent2-soft); color:var(--accent2); }
.focus-title{ font-weight:700; font-size:1.02em; color:var(--ink); }
.focus-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.focus-tag{
  font-size:0.8em; padding:5px 11px; border-radius:6px;
  background:var(--surface-soft); border:1px solid var(--border); color:var(--ink-soft);
}

/* tools */
.tools-groups{ display:flex; flex-direction:column; gap:14px; }
.tools-group{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.tools-label{
  font-size:0.72em; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  width:150px; flex-shrink:0;
}
.tools-row{ display:flex; flex-wrap:wrap; gap:7px; flex:1; min-width:200px; }

.level-chip{
  font-family:'IBM Plex Mono',monospace; font-size:0.68em; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line); padding:2px 8px; border-radius:5px;
  flex-shrink:0;
}
.lang-card:nth-child(even) .level-chip{ color:var(--accent2); background:var(--accent2-soft); border-color:var(--accent2-line); }

/* contact */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.contact-card{
  display:flex; align-items:center; gap:16px; padding:22px 24px; text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(36,83,224,0.28); border-color:var(--accent-line); }
.contact-card:nth-child(even):hover{ box-shadow:0 16px 32px -14px rgba(14,143,111,0.28); border-color:var(--accent2-line); }
.contact-icon{
  width:44px; height:44px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.05em; flex-shrink:0;
  transition:transform .3s var(--ease);
}
.contact-card:hover .contact-icon{ transform:scale(1.08) rotate(-4deg); }
.contact-card:nth-child(even) .contact-icon{ background:var(--accent2-soft); color:var(--accent2); }
.contact-lbl{ font-family:'IBM Plex Mono',monospace; font-size:0.7em; color:var(--muted); margin-bottom:3px; }
.contact-val{ font-size:0.94em; font-weight:700; color:var(--ink); }

/* ── generic page header (sub-pages) ── */
.page{ position:relative; z-index:1; flex:1; padding:150px 0 90px; }
.page-header{ margin-bottom:46px; max-width:600px; }
.page-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.9em,4vw,2.6em); letter-spacing:-0.8px; color:var(--ink); }
.page-lead{ color:var(--muted); font-size:1em; margin-top:12px; }

/* interests (hobbies) */
.interest-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:14px; }
.interest-card{
  padding:36px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.interest-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(36,83,224,0.25); }
.interest-card:nth-child(even):hover{ box-shadow:0 20px 40px -16px rgba(14,143,111,0.25); }
.interest-tag{ font-family:'IBM Plex Mono',monospace; font-size:0.68em; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.interest-icon{
  width:60px; height:60px; border-radius:16px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.5em; color:var(--accent);
  transition:transform .3s var(--ease);
}
.interest-card:hover .interest-icon{ transform:scale(1.1) rotate(-6deg); }
.interest-card:nth-child(even) .interest-icon{ background:var(--accent2-soft); color:var(--accent2); }
.interest-card h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.28em; letter-spacing:-0.3px; color:var(--ink); }
.interest-card p{ font-size:0.92em; color:var(--muted); max-width:230px; }
.interest-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:4px;
  font-family:'IBM Plex Mono',monospace; font-size:0.78em; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:9px 16px; border-radius:8px; text-decoration:none; transition:background .25s var(--ease), transform .25s var(--ease);
}
.interest-link:hover{ background:var(--accent-soft-strong); transform:translateY(-1px); }
.interest-card:nth-child(even) .interest-link{ color:var(--accent2); background:var(--accent2-soft); border-color:var(--accent2-line); }
.interest-card:nth-child(even) .interest-link:hover{ background:var(--accent2-soft-strong); }

/* responsibilities (beschreibung) */
.resp-list{ display:flex; flex-direction:column; gap:12px; }
.resp-card{ overflow:hidden; transition:box-shadow .3s var(--ease), border-color .3s var(--ease); }
.resp-card:hover{ box-shadow:var(--shadow-md); }
.resp-header{ display:flex; align-items:center; gap:18px; padding:20px 26px; cursor:pointer; user-select:none; }
.resp-index{ font-family:'IBM Plex Mono',monospace; font-size:0.72em; font-weight:600; color:var(--muted); width:22px; flex-shrink:0; }
.resp-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1em;
  transition:transform .3s var(--ease);
}
.resp-card:hover .resp-icon{ transform:scale(1.08) rotate(-4deg); }
.resp-card:nth-child(even) .resp-icon{ background:var(--accent2-soft); color:var(--accent2); }
.resp-label{ font-weight:700; font-size:1.02em; color:var(--ink); flex:1; }
.resp-toggle{ color:var(--muted); font-size:0.85em; transition:transform .35s var(--ease), color .25s var(--ease); }
.resp-card.open .resp-toggle{ transform:rotate(180deg); color:var(--accent); }
.resp-card:nth-child(even).open .resp-toggle{ color:var(--accent2); }
.resp-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.resp-card.open .resp-body{ max-height:700px; }
.resp-items{
  list-style:none; margin:0 24px 22px 84px; padding-top:14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:11px;
  opacity:0; transform:translateY(-4px); transition:opacity .35s .05s var(--ease), transform .35s .05s var(--ease);
}
.resp-card.open .resp-items{ opacity:1; transform:none; }
.resp-items li{ position:relative; font-size:0.93em; color:var(--ink-soft); padding-left:18px; line-height:1.6; }
.resp-items li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.resp-card:nth-child(even) .resp-items li::before{ background:var(--accent2); }

/* ── footer ── */
.site-footer{
  position:relative; z-index:1; border-top:1px solid var(--border); text-align:center;
  padding:30px 20px; font-size:0.85em; color:var(--muted);
}
.site-footer a{ color:var(--muted); text-decoration:none; margin:0 10px; transition:color .25s var(--ease); }
.site-footer a:hover{ color:var(--accent); }
.site-footer p + p{ margin-top:8px; font-size:0.85em; }

/* ── back to top ── */
#btt{
  position:fixed; bottom:26px; right:26px; z-index:999; width:44px; height:44px;
  background:var(--ink); border:none; border-radius:50%;
  color:#fff; font-size:0.95em; cursor:pointer; display:none; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:var(--shadow-md);
}
#btt:hover{ background:var(--gradient); transform:translateY(-3px); box-shadow:0 14px 28px -10px rgba(14,143,111,0.45); }
#btt.vis{ display:flex; }

/* ── reveal on scroll ── */
.fi{ opacity:0; transform:translateY(16px) scale(.985); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.fi.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .fi{ opacity:1; transform:none; transition:none; }
}

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

/* ── mobile tightening ── */
@media (max-width:600px){
  .hero{ padding:112px 0 44px; }
  .page{ padding:112px 0 56px; }
  .section{ padding:56px 0; }
  .section-header{ margin-bottom:26px; }
  .page-header{ margin-bottom:30px; }

  .nav-toggle{ width:44px; height:44px; }
  .nav-back{ padding:11px 16px; min-height:44px; }
  .brand-name{ font-size:0.94em; }

  .hero h1{ margin-bottom:14px; }
  .hero-position{ margin-bottom:18px; font-size:1.05em; }
  .hero-tags{ margin-bottom:22px; }

  .about-card{ padding:24px 22px; }
  .facts-card{ padding:22px 22px; gap:14px; }
  .qual-card{ padding:20px 20px; gap:14px; }
  .timeline{ padding-left:26px; }
  .timeline-dot{ left:-26px; }
  .timeline-card{ padding:16px 18px; }
  .lang-card{ padding:16px 18px; }
  .focus-card{ padding:20px 20px; }
  .tools-label{ width:100%; }
  .contact-card{ padding:18px 20px; }
  .interest-card{ padding:28px 20px; }
  .resp-header{ padding:16px 18px; gap:14px; }
  .resp-items{ margin-left:0; }

  #btt{ width:48px; height:48px; bottom:18px; right:18px; }
}