/* ===== Tokens ===== */
:root{
  --bg-0:#ffffff; --bg-1:#f6f7fb; --bg-2:#eef1f7;
  --text:#0b0b0e; --muted:#666a73; --border:#e6e8ef;
  --accent:#6d5dfc; /* brand accent */
  --radius:16px; --radius-lg:22px; --radius-full:999px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --shadow-md:0 12px 40px rgba(0,0,0,.08);
  --container:1200px;
}

/* ===== Base ===== */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  line-height:1.6; letter-spacing:.01em;
  background: radial-gradient(1200px 600px at 10% -10%, #ffffff 0%, var(--bg-1) 60%, #fff 100%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
}

img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.narrow{max-width:780px; margin:0 auto}

/* Skip link */
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:16px; padding:8px 12px; background:#fff; border:1px solid var(--border)}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(180%) blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); border-bottom:1px solid var(--border)}
.header-inner{height:68px; display:flex; align-items:center; justify-content:space-between}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:700}
.brand-logo{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--text); color:#fff}

.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--border); background:#fff; border-radius:12px}
.nav-toggle-bar{width:20px; height:2px; background:var(--text); display:block; margin:6px auto}
.site-nav ul{display:flex; gap:10px; align-items:center; margin:0; padding:0; list-style:none}
.pill{display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:var(--radius-full);
  border:1px solid var(--border); background:rgba(255,255,255,.85); color:var(--text); box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.pill:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); background:#fff; text-decoration:none}

@media (max-width:860px){
  .nav-toggle{display:inline-block}
  .site-nav{display:none}
  .site-nav.open{display:block; position:absolute; left:0; right:0; top:68px; background:#fff; border-bottom:1px solid var(--border)}
  .site-nav ul{flex-direction:column; align-items:stretch; padding:12px}
}

/* ===== Typography ===== */
.kicker{font:600 13px Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.display{font-size:clamp(36px,6vw,64px); line-height:1.05; margin:.1rem 0 1rem; letter-spacing:-.02em}
.h1{font-size:clamp(32px,4.5vw,48px); line-height:1.15; margin:0 0 14px}
.h2{font-size:clamp(24px,3.2vw,36px); margin:0 0 14px}
.h3{font-size:20px; margin:0 0 6px}
.lead{font-size:18px; color:var(--muted); max-width:60ch}
.grad{background:linear-gradient(90deg, #6d5dfc, #00bcd4 60%, #7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ===== Sections ===== */
.section{padding:84px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px}

/* ===== Hero ===== */
.hero-inner{display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:center}
.hero-media{position:relative; display:flex; justify-content:center}
.avatar{width:220px; height:220px; border-radius:50%; object-fit:cover; border:8px solid rgba(255,255,255,.9); box-shadow:var(--shadow-md)}
.glow{position:absolute; inset:auto; width:280px; height:160px; filter:blur(40px); background:radial-gradient(circle at 50% 50%, #6d5dfc55, transparent 60%); transform:translateY(60px)}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr; text-align:center}}

/* Buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 18px; border-radius:14px; border:1px solid var(--border); font-weight:700; letter-spacing:.01em; overflow:hidden}
.btn > span{position:relative; z-index:1}
.btn:after{content:""; position:absolute; inset:0; transform:translateY(60%); opacity:0; transition:.35s ease; background:radial-gradient(120px 60px at 50% 120%, rgba(255,255,255,.7), transparent 70%)}
.btn:hover:after{transform:translateY(0); opacity:1}
.btn-primary{background:var(--text); color:#fff; border-color:var(--text)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:rgba(255,255,255,.85); color:var(--text)}
.btn-small{height:38px; padding:0 14px; font-size:14px}

/* Chips & tags */
.chip{display:inline-flex; align-items:center; height:32px; padding:0 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.9); color:#333; font-weight:600}
.chip-row{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 28px}
.chip.is-active{background:#fff; box-shadow:var(--shadow-sm); border-color:#d6d9e3}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{display:inline-flex; align-items:center; height:26px; padding:0 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font:500 12px "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

/* Cards / Grids */
.grid{display:grid; gap:22px}
.services-grid{grid-template-columns:repeat(3,1fr)}
.work-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.services-grid,.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.services-grid,.work-grid{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.78); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, background .22s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); background:#fff}
.work-media img{border-radius:14px; border:1px solid var(--border)}
.work-body p{color:var(--muted); margin:8px 0 12px}

/* CTA */
.cta{text-align:center}
.cta-inner{background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); border:1px solid var(--border); border-radius:24px; padding:40px; box-shadow:var(--shadow-sm)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:34px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-inner p{margin:0; color:var(--muted)}
.footer-inner .social{display:flex; gap:16px; list-style:none; margin:0; padding:0}
@media (max-width:700px){.footer-inner{flex-direction:column}}

/* Contact page list */
.contact-list{display:flex; flex-direction:column; gap:16px; max-width:520px; margin:32px auto 0; padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.8); box-shadow:var(--shadow-sm)}
.contact-list li{list-style:none; font-size:18px; display:flex; align-items:center; gap:12px}
.contact-list a{color:var(--text); font-weight:500}
.contact-list a:hover{color:var(--accent)}
.contact-icon{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:14px}

/* ===== Reveal on scroll ===== */
.reveal > *{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.in-view > *{opacity:1; transform:translateY(0)}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important}}


/* Keep equal height but don't stretch button */
.services-grid .card {
  display: flex;
  flex-direction: column;
}

.services-grid .card .chip {
  align-self: flex-start;   /* кнопка сохраняет свою ширину */
  margin-top: auto;         /* прижимает вниз */
}


.card-link {
  display: block;
  color: inherit; /* сохраняем цвета текста */
  text-decoration: none;
  height: 100%;
}

.card-link:hover .h3 {
  color: var(--accent);
}

/* Remove underline for clickable project cards */
.card-link {
  display: block;
  color: inherit;         /* текст наследует цвет */
  text-decoration: none;  /* убираем подчёркивание */
  height: 100%;
}

.card-link:hover {
  text-decoration: none;  /* на всякий случай */
}

.card-link:hover .card {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}


/* Make full card clickable without underline */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.card-link:hover {
  text-decoration: none;
}

.card-link:hover .h3 {
  color: var(--accent);
}

.card-link:hover .card {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}