/* Skip link */
    .skip-link{position:absolute;top:-100px;left:16px;z-index:100;
      padding:8px 16px;background:var(--color-accent);color:var(--color-base);
      font-family:var(--font-mono);font-size:12px;border-radius:var(--radius-md);
      text-decoration:none;transition:top 0.2s;}
    .skip-link:focus{top:16px}
  


/* ── TOKENS ─────────────────────────────────────── */
:root {
  --bg: #050510;
  --bg-elevated: #08081a;
  --surface: rgba(0, 229, 255, 0.025);
  --surface-hover: rgba(0, 229, 255, 0.06);
  --fg: #e0e8f4;
  --muted: #74849f;
  --dim: #2a3550;
  --border: rgba(0, 229, 255, 0.06);
  --border-glow: rgba(0, 229, 255, 0.15);

  --accent: #00e5ff;
  --accent-glow: rgba(0, 229, 255, 0.25);
  --accent-dim: rgba(0, 229, 255, 0.06);

  --success: #00ff88;
  --success-glow: rgba(0, 255, 136, 0.18);
  --warn: #ffb444;
  --warn-glow: rgba(255, 180, 68, 0.18);
  --danger: #ff3366;
  --danger-glow: rgba(255, 51, 102, 0.18);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
}

/* ── RESET ───────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* ── AMBIENT ─────────────────────────────────────── */
.ambient-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.025;
  background-image:
    linear-gradient(rgba(0,229,255,0.3) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,0.3) 1px,transparent 1px);
  background-size:64px 64px;
}
.scanlines{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.018;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.5) 2px,rgba(0,0,0,0.5) 4px);
}
canvas#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.6}

/* ── WRAPPER ─────────────────────────────────────── */
.wrap{max-width:1340px;margin:0 auto;padding:32px 32px 60px;position:relative;z-index:1}

/* ── STICKY NAV ──────────────────────────────────── */
.nav-sticky{
  position:sticky;top:0;z-index:50;
  padding:12px 0;
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  background:rgba(5,5,16,0.85);
  border-bottom:1px solid var(--border);
  transition:border-color 0.3s ease;
}
.nav-sticky.scrolled{border-bottom-color:var(--border-glow)}
.nav-inner{
  max-width:1340px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.nav-brand{
  font-family:var(--font-display);font-size:20px;font-weight:600;
  color:var(--fg);letter-spacing:-0.01em;
}
.nav-brand span{color:var(--accent)}
.nav-links{display:flex;gap:4px;flex-wrap:wrap}
.nav-link{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  color:var(--muted);padding:5px 10px;border-radius:3px;
  letter-spacing:0.03em;text-transform:uppercase;
  transition:all 0.2s ease;position:relative;
}
.nav-link:hover,.nav-link.active{color:var(--accent);background:var(--accent-dim)}
.nav-link.active::after{
  content:'';position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
}
/* MOBILE MENU */
.nav-toggle{
  display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:4px;z-index:101;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--accent);
  transition:all 0.3s;
}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.nav-links.mobile-open{
  display:flex;flex-direction:column;position:absolute;
  top:100%;left:0;right:0;
  background:rgba(5,5,16,0.97);backdrop-filter:blur(20px);
  padding:16px;gap:0;border-bottom:1px solid var(--border-glow);
}
.nav-links.mobile-open .nav-link{
  padding:12px 10px;font-size:12px;border-bottom:1px solid var(--border);text-align:center;
}
.nav-links.mobile-open .nav-link:last-child{border-bottom:none}
.nav-links.mobile-open .nav-link.active::after{display:none}


/* ── HEADER ──────────────────────────────────────── */
.header{padding:48px 0 24px;text-align:center;position:relative}
.header-logo{
  font-family:var(--font-display);font-size:var(--text-hero);
  font-weight:300;color:var(--fg);letter-spacing:-0.02em;line-height:1;
  position:relative;display:inline-block;
  text-shadow:var(--shadow-glow);margin:0;
}
.header-logo span{color:var(--accent);font-weight:500}
.header-logo::after{
  content:'';position:absolute;bottom:-8px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0.5;
}
.header-sub{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  letter-spacing:0.08em;text-transform:uppercase;margin-top:14px;
}
.header-status{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:5px 16px;border-radius:3px;font-size:10px;font-weight:500;
  background:var(--success-glow);border:1px solid rgba(0,255,136,0.25);
  color:var(--success);
  font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase;
}
.header-status::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--success);
  box-shadow:0 0 10px var(--success);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 10px var(--success)}50%{opacity:0.4;box-shadow:0 0 4px var(--success)}}

/* ── QUICK SEARCH ────────────────────────────────── */
.search-wrap{display:flex;justify-content:center;margin:24px 0 0}
.search-box{
  position:relative;width:100%;max-width:400px;
}
.search-input{
  width:100%;padding:10px 16px 10px 36px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;color:var(--fg);font-family:var(--font-mono);
  font-size:12px;outline:none;transition:all 0.3s ease;
}
.search-input:focus{border-color:var(--border-glow);background:rgba(0,229,255,0.04);box-shadow:0 0 20px rgba(0,229,255,0.06)}
.search-input::placeholder{color:var(--muted);opacity:.7}
.search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--muted);pointer-events:none;
}

/* ── SECTIONS ────────────────────────────────────── */
.section{margin-bottom:56px}
.section-head{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.section-title{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;
}
.section-count{
  font-family:var(--font-mono);font-size:10px;color:var(--accent);
  background:var(--accent-dim);padding:2px 8px;border-radius:3px;
  letter-spacing:0.05em;
}

/* ── CARDS GRID ──────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.cards--compact{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.card{
  display:flex;flex-direction:column;gap:12px;
  padding:24px 22px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;position:relative;overflow:hidden;
  transition:all 0.4s var(--ease-out-expo);
  cursor:pointer;transform-style:preserve-3d;
  perspective:800px;
}
.card:hover{
  background:var(--surface-hover);border-color:var(--border-glow);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 40px rgba(0,229,255,0.04);
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity 0.5s ease;
}
.card:hover::before{opacity:0.6}
.card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at var(--mx,50%) var(--my,50%),rgba(0,229,255,0.06),transparent 70%);
  opacity:0;transition:opacity 0.3s ease;
}
.card:hover::after{opacity:1}

/* card header row */
.card-top{display:flex;align-items:center;gap:10px}
.card-icon{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:3px;background:var(--accent-dim);color:var(--accent);
  flex-shrink:0;transition:all 0.3s ease;
}
.card:hover .card-icon{box-shadow:0 0 16px rgba(0,229,255,0.15);background:rgba(0,229,255,0.1)}

.card-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--fg);letter-spacing:-0.01em}
.card-desc{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
.card-url{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  letter-spacing:0.02em;word-break:break-all;
  opacity:.8;transition:color .3s ease,opacity .3s ease;
}
.card:hover .card-url{opacity:1;color:var(--accent)}

/* status dot */
.card-status{
  display:inline-flex;align-items:center;gap:5px;
  align-self:flex-start;
  font-family:var(--font-mono);font-size:9px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.05em;
}
.status-dot{width:5px;height:5px;border-radius:50%}
.status-online{color:var(--success)}.status-online .status-dot{background:var(--success);box-shadow:0 0 6px var(--success)}
.status-offline{color:var(--danger)}.status-offline .status-dot{background:var(--danger);box-shadow:0 0 6px rgba(255,51,102,0.5)}
.status-warn{color:var(--warn)}.status-warn .status-dot{background:var(--warn);box-shadow:0 0 6px rgba(255,180,68,0.5)}

/* tag pills */
.card-tag{
  display:inline-flex;align-self:flex-start;padding:2px 8px;border-radius:2px;
  font-family:var(--font-mono);font-size:8px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.06em;
}
.tag-online{background:var(--success-glow);color:var(--success);border:1px solid rgba(0,255,136,0.2)}
.tag-media{background:var(--warn-glow);color:var(--warn);border:1px solid rgba(255,180,68,0.2)}
.tag-tool{background:rgba(165,180,252,0.08);color:#a5b4fc;border:1px solid rgba(165,180,252,0.2)}
.tag-system{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,229,255,0.2)}

/* compact card variant */
.card--compact{
  padding:16px 18px;gap:8px;
}
.card--compact .card-icon{width:28px;height:28px}
.card--compact .card-name{font-size:14px}
.card--compact .card-desc{font-size:11px}

/* ── MONITORING DASHBOARD ────────────────────────── */

/* Status banner */
.mon-banner{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;
  transition:border-color 0.5s,background 0.5s;
}
.mon-banner--ok{border-color:var(--success-glow);background:rgba(0,255,136,0.04)}
.mon-banner--warn{border-color:var(--danger-glow);background:rgba(255,51,102,0.04)}
.mon-banner-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--success);
  box-shadow:0 0 10px var(--success), 0 0 20px var(--success-glow);
  animation:monBannerPulse 2s ease-in-out infinite;
}
.mon-banner-dot--warn{background:var(--warn);box-shadow:0 0 10px var(--warn), 0 0 20px var(--warn-glow)}
@keyframes monBannerPulse{
  0%,100%{box-shadow:0 0 6px var(--success), 0 0 14px var(--success-glow)}
  50%{box-shadow:0 0 14px var(--success), 0 0 28px var(--success-glow)}
}
.mon-banner-text{
  font-family:var(--font-display);font-size:16px;font-weight:500;
  color:var(--fg);flex:1;
}
.mon-banner-time{
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  letter-spacing:0.06em;
}

/* Stat cards grid */
.mon-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;
}
.mon-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:20px 16px 14px;
  text-align:center;
  transition:border-color 0.4s,box-shadow 0.4s,transform 0.3s;
}
.mon-card:hover{
  border-color:var(--border-glow);
  box-shadow:var(--glow-subtle);
  transform:translateY(-2px);
}
.mon-card-bg{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--accent-dim) 0%,transparent 100%);
  opacity:0;transition:opacity 0.5s;
  pointer-events:none;z-index:0;
}
.mon-card--good .mon-card-bg{opacity:1}
.mon-card--accent{border-top:2px solid var(--accent)}
.mon-card--danger{border-top:2px solid var(--danger)}
.mon-card--success{border-top:2px solid var(--success)}
.mon-card--uptime{border-top:2px solid rgba(165,180,252,0.6)}
.mon-card-icon{
  position:relative;z-index:1;
  font-size:22px;margin-bottom:6px;
  opacity:0.7;
}
.mon-card-value{
  position:relative;z-index:1;
  font-family:var(--font-display);font-size:36px;font-weight:600;
  color:var(--fg);line-height:1;
}
.mon-card-label{
  position:relative;z-index:1;
  font-family:var(--font-mono);font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;
}
.mon-card-bar{
  position:relative;z-index:1;
  height:3px;background:var(--border);border-radius:2px;margin-top:12px;overflow:hidden;
}
.mon-card-fill{
  height:100%;border-radius:2px;width:0;
  transition:width 0.8s var(--ease-out-expo);
}
.mon-card--accent .mon-card-fill{background:linear-gradient(90deg,var(--accent),#00b8d4)}
.mon-card--danger .mon-card-fill{background:linear-gradient(90deg,var(--danger),#ff6680)}
.mon-card--success .mon-card-fill{background:linear-gradient(90deg,var(--success),#00e070)}
.mon-card--uptime .mon-card-fill{background:linear-gradient(90deg,rgba(165,180,252,0.8),rgba(130,140,248,0.8))}

/* Container dot grid */
.mon-dots{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:10px 0;
}
.mon-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--border);
  transition:background 0.4s,box-shadow 0.4s,transform 0.3s;
  cursor:default;
}
.mon-dot--running{background:var(--accent);box-shadow:0 0 6px rgba(0,229,255,0.3)}
.mon-dot--healthy{background:var(--success);box-shadow:0 0 8px var(--success-glow)}
.mon-dot--stopped{background:var(--danger);box-shadow:0 0 4px rgba(255,51,102,0.3);animation:monDotAlert 1.5s ease-in-out infinite}
.mon-dot:hover{transform:scale(1.5);z-index:2}
@keyframes monDotAlert{
  0%,100%{opacity:0.3}
  50%{opacity:1}
}

/* Responsive */
@media(max-width:768px){
  .mon-cards{grid-template-columns:repeat(2,1fr)}
  .mon-banner{flex-direction:column;gap:6px;text-align:center}
}
@media(max-width:480px){
  .mon-cards{grid-template-columns:1fr}
}

/* ── DISKS ──────────────────────────────────────── */
.disk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.disk-card{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:14px 16px;transition:border-color 0.3s,box-shadow 0.3s;
}
.disk-card:hover{border-color:var(--border-glow);box-shadow:var(--glow-subtle)}
.disk-card.critical{border-color:var(--danger-glow)}
.disk-card.critical:hover{border-color:var(--danger)}
.disk-card.warning{border-color:var(--warn-glow)}
.disk-drive{font-family:var(--font-display);font-size:20px;font-weight:600}
.disk-label{font-size:10px;color:var(--muted);margin-top:2px}
.disk-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-top:10px;overflow:hidden}
.disk-bar{height:100%;border-radius:2px;transition:width 0.6s var(--ease-out-expo)}
.disk-bar--ok{background:var(--success)}
.disk-bar--warn{background:var(--warn)}
.disk-bar--crit{background:var(--danger)}
.disk-meta{display:flex;justify-content:space-between;margin-top:6px}
.disk-free{font-size:11px;color:var(--muted)}
.disk-pct{font-size:11px;font-family:var(--font-mono);color:var(--accent)}
.disk-card.critical .disk-pct{color:var(--danger)}
.disk-card.warning .disk-pct{color:var(--warn)}

/* ── SSL ─────────────────────────────────────────── */
.ssl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ssl-card{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:16px 18px;display:flex;align-items:center;gap:12px;
  transition:border-color 0.3s;
}
.ssl-card:hover{border-color:var(--border-glow)}
.ssl-card.ok{border-left:3px solid var(--success)}
.ssl-card.warn{border-left:3px solid var(--warn)}
.ssl-card.bad{border-left:3px solid var(--danger)}
.ssl-icon{font-size:24px;flex-shrink:0}
.ssl-domain{font-family:var(--font-display);font-size:14px;font-weight:600}
.ssl-days{font-size:28px;font-weight:600;line-height:1}
.ssl-days--ok{color:var(--success)}
.ssl-days--warn{color:var(--warn)}
.ssl-days--bad{color:var(--danger)}
.ssl-expires{font-size:10px;color:var(--muted);margin-top:2px}

/* ── SCROLL HINT ─────────────────────────────────── */
.scroll-hint{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:40px;padding-bottom:4px;
  opacity:1;transition:opacity 0.4s;
}
.scroll-hint.hidden{opacity:0;pointer-events:none}
.scroll-hint-text{
  font-family:var(--font-mono);font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.1em;
}
.scroll-hint-chevron{
  color:var(--accent);animation:chevronBounce 2s ease-in-out infinite;
}
@keyframes chevronBounce{
  0%,100%{transform:translateY(0);opacity:0.5}
  50%{transform:translateY(6px);opacity:1}
}

/* ── FOOTER ──────────────────────────────────────── */
.footer{padding:40px 0 0;text-align:center;border-top:1px solid var(--border)}
.footer-line{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  letter-spacing:0.08em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
}
.footer-line a{color:var(--accent);transition:color 0.2s}
.footer-line a:hover{color:var(--fg)}
.footer-contacts{margin-top:10px}
.footer-contacts a{padding:2px 6px}

/* ── REVEAL ANIMATIONS ───────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:all 0.7s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal--left{transform:translateX(-24px)}
.reveal--left.visible{transform:translateX(0)}
.reveal--right{transform:translateX(24px)}
.reveal--right.visible{transform:translateX(0)}

/* ── GLITCH EFFECT ───────────────────────────────── */
@keyframes glitch1{0%,100%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}}
@keyframes glitch2{0%,100%{transform:translate(0)}20%{transform:translate(2px,-1px)}40%{transform:translate(-2px,1px)}60%{transform:translate(1px,-1px)}80%{transform:translate(-1px,1px)}}
.header-logo:hover{animation:glitch1 0.3s ease infinite}
.header-logo:hover span{animation:glitch2 0.25s ease 0.05s infinite}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:768px){
  .wrap{padding:20px 20px 40px}
  .nav-toggle{display:flex}
  .nav-links:not(.mobile-open){display:none}
  .cards{grid-template-columns:1fr}
  .cards--compact{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .nav-inner{padding:0 14px;gap:8px}
  .nav-link{font-size:9px;padding:4px 8px}
  .header{padding:32px 0 16px}
  .header-logo{font-size:clamp(3rem,12vw,4.5rem)}
  .search-input{font-size:11px;padding:8px 12px 8px 32px}
}
@media(max-width:480px){
  .cards--compact{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .nav-links{gap:2px}
  .nav-link{padding:4px 6px;letter-spacing:0.02em}
}

/* ── SKELETON LOADING ─────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 2px;
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text--short { width: 60%; }
.skeleton-bar { height: 4px; margin-top: 10px; }
.skeleton-card { height: 80px; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── FOCUS-VISIBLE ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow);
}
.nav-link:focus-visible {
  outline-offset: 0;
  background: var(--accent-dim);
  color: var(--accent);
}
.search-input:focus-visible {
  outline: none;
  border-color: var(--border-glow);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* ── PERFORMANCE ───────────────────────────────── */
.card {
  will-change: transform;
  transform: translateZ(0);
}

/* ── STAGGERED CARD ENTRY ──────────────────────── */
.cards .card:nth-child(1) { transition-delay: 0s; }
.cards .card:nth-child(2) { transition-delay: 0.06s; }
.cards .card:nth-child(3) { transition-delay: 0.12s; }
.cards .card:nth-child(4) { transition-delay: 0.18s; }
.cards--compact .card:nth-child(1) { transition-delay: 0s; }
.cards--compact .card:nth-child(2) { transition-delay: 0.05s; }
.cards--compact .card:nth-child(3) { transition-delay: 0.10s; }

/* ── STATUS BREATHE ────────────────────────────── */
.header-status {
  transition: box-shadow 0.8s ease-in-out;
  animation: statusBreathe 3s ease-in-out infinite;
}
@keyframes statusBreathe {
  0%, 100% { box-shadow: 0 0 8px var(--success-glow); }
  50% { box-shadow: 0 0 18px var(--success), 0 0 32px var(--success-glow); }
}

/* RESET reduced motion */
@media(prefers-reduced-motion:reduce){
  .skeleton { animation: none; background: var(--surface); }
  .header-status { animation: none; }
  .card { will-change: auto; }
}

/* ── REDUCED MOTION ──────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  .header-logo:hover{animation:none}
  .card{transform:none!important}
  .card:hover{transform:none!important}
  .reveal{opacity:1;transform:none}
  canvas#particles{display:none}
  .scanlines{display:none}
}

/* ── NO RESULTS ──────────────────────────────────── */
.no-results{
  display:none;text-align:center;padding:32px;color:var(--muted);
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.03em;
  grid-column:1/-1;
}
.no-results.show{display:block}


/* ── GLITCH CYCLING ──────────────────────────────── */
.glitch-text { position: relative; }
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.glitch-text.glitch-active::before {
  opacity: 0.75; color: #ff3366;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
  animation: glitch-skew 0.15s ease-in-out;
  text-shadow: -2px 0 #ff3366;
}
.glitch-text.glitch-active::after {
  opacity: 0.75; color: #00e5ff;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-skew-rev 0.12s ease-in-out;
  text-shadow: 2px 0 #00e5ff;
}
@keyframes glitch-skew {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-1px, -2px); }
  80% { transform: translate(2px, 1px); }
  100% { transform: translate(0); }
}
@keyframes glitch-skew-rev {
  0% { transform: translate(0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(1px, -1px); }
  100% { transform: translate(0); }
}

/* ── ENHANCED BACKGROUND ──────────────────────────── */
.hero-orb {
  position: fixed; border-radius: 50%;
  filter: blur(120px); pointer-events: none; z-index: 0;
  opacity: 0.04;
  animation: orbPulse 8s ease-in-out infinite;
}
.hero-orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #00e5ff, transparent 70%);
  top: -200px; left: 10%;
  animation-delay: 0s;
}
.hero-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #00ff88, transparent 70%);
  top: 300px; right: 5%;
  animation-delay: -4s;
}
.hero-orb--3 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #a5b4fc, transparent 70%);
  bottom: -200px; left: 30%;
  animation-delay: -2s; opacity: 0.025;
}
@keyframes orbPulse {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.04; }
  25% { transform: translate(40px, -30px) scale(1.15); opacity: 0.06; }
  50% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.03; }
  75% { transform: translate(-30px, -10px) scale(1.1); opacity: 0.05; }
}

.light-sweep {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg,
    transparent 0%, transparent 45%,
    rgba(0,229,255,0.015) 50%,
    transparent 55%, transparent 100%);
  background-size: 400% 400%;
  animation: lightSweep 12s linear infinite;
}
@keyframes lightSweep {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.ambient-grid {
  animation: gridPulse 6s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.025; }
  50% { opacity: 0.04; }
}

.header::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transition: width 1s var(--ease-out-expo);
}
.header.seen::before { width: 60%; }

/* Pulse ring around logo */
.header-logo::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 8px;
  border: 1px solid rgba(0,229,255,0.08);
  animation: ringPulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.03); }
}

/* Responsive orbs */
@media(max-width:768px){
  .hero-orb--1 { width: 300px; height: 300px; top: -100px; }
  .hero-orb--2 { width: 200px; height: 200px; top: 500px; }
  .hero-orb--3 { display: none; }
}
@media(prefers-reduced-motion:reduce){
  .hero-orb, .light-sweep { display: none; }
  .glitch-text::before, .glitch-text::after { display: none; }
  .ambient-grid { animation: none; }
}


/* ── LUCIDE ICONS ────────────────────────────────── */
.lucide {
  flex-shrink: 0;
  vertical-align: middle;
}
.card-icon .lucide {
  transition: transform 0.3s var(--ease-out-expo);
}
.card:hover .card-icon .lucide {
  transform: scale(1.08);
}




/* polish-a11y2 2026-10-13: reduced-motion + focus-visible + tap-feedback (ui-ux-pro-max / motion-design) */
.card:active{transform:translateY(-2px) scale(.985)}
.nav-toggle:active{transform:scale(.94)}



  /* ================= Портфолио ================= */
  #portfolio .pf-intro{margin:18px 0 0;font-family:var(--font-display);font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.24;color:var(--fg)}
  #portfolio .pf-intro em{font-style:normal;color:var(--accent);text-shadow:0 0 26px var(--accent-glow)}
  #portfolio .pf-sub{margin:10px 0 0;max-width:820px;font-size:12.5px;line-height:1.7;color:var(--muted)}

  .pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}

  .pf-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:13px;background:var(--surface);border:1px solid var(--border);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;
    transition:transform .5s var(--ease-out-expo),border-color .45s,box-shadow .5s}
  .pf-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out-expo);
    background:radial-gradient(460px 320px at var(--mx,50%) var(--my,0%),rgba(var(--tint,0,229,255),.11),transparent 72%)}
  .pf-card:hover{border-color:rgba(var(--tint,0,229,255),.32);transform:translateY(-3px);box-shadow:0 28px 56px -34px rgba(var(--tint,0,229,255),.6)}
  .pf-card:hover::before{opacity:1}
  .pf-card:focus-visible{outline:1px solid rgb(var(--tint,0,229,255));outline-offset:3px}
  .pf-card--wide{grid-column:span 2;flex-direction:row;align-items:center;gap:22px}
  .pf-card--wide .pf-visual{flex:0 0 57%;min-width:0}
  .pf-card--wide .pf-body{padding-right:16px}

  /* --- витрина --- */
  .pf-visual{position:relative;padding:0 16px 16px 0}
  .pf-shot{position:relative;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#03030c;box-shadow:0 14px 34px -22px rgba(0,0,0,.9)}
  .pf-bar{display:flex;align-items:center;gap:5px;padding:7px 9px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.012)}
  .pf-bar i{display:block;width:5px;height:5px;border-radius:50%;background:var(--dim);flex:0 0 auto}
  .pf-bar i:nth-child(1){background:rgba(255,51,102,.5)}
  .pf-bar i:nth-child(2){background:rgba(255,180,68,.5)}
  .pf-bar i:nth-child(3){background:rgba(0,255,136,.5)}
  .pf-bar span{margin-left:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;
    transition:transform .8s var(--ease-out-expo),filter .6s}
  .pf-card:hover .pf-shot img{transform:scale(1.03);filter:saturate(1.04) contrast(1.04)}
  .pf-shot::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -30px 46px -28px rgba(3,3,12,.95)}

  .pf-mob{position:absolute;right:0;bottom:0;width:clamp(66px,12.5%,98px);height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top center;
    border-radius:9px;border:1px solid rgba(255,255,255,.16);background:#03030c;
    box-shadow:0 22px 44px -16px rgba(0,0,0,.95),0 0 0 3px rgba(5,5,16,.92);
    transition:transform .6s var(--ease-out-expo)}
  .pf-card:hover .pf-mob{transform:translateY(-5px)}

  /* --- текст --- */
  .pf-body{display:flex;flex-direction:column;gap:9px;min-width:0;padding:2px 4px 4px}
  .pf-meta{display:flex;flex-wrap:wrap;gap:6px}
  .pf-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
    background:var(--accent-dim);border:1px solid rgba(0,229,255,.14);padding:3px 7px;border-radius:2px}
  .pf-tag--demo{color:var(--warn);background:rgba(255,180,68,.07);border-color:rgba(255,180,68,.2)}
  .pf-name{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
  .pf-card--wide .pf-name{font-size:clamp(19px,2.1vw,23px)}
  .pf-desc{margin:0;font-size:12px;line-height:1.66;color:var(--muted)}
  .pf-card--wide .pf-desc{font-size:12.5px;max-width:44ch}
  .pf-stack{display:flex;flex-wrap:wrap;gap:5px;margin-top:1px}
  .pf-stack span{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--border);padding:2px 6px;border-radius:2px}
  .pf-result{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.4}
  .pf-result b{font-weight:500;white-space:nowrap;color:rgb(var(--tint,0,229,255))}
  .pf-result i{display:block;width:5px;height:5px;border-radius:50%;flex:0 0 auto;
    background:rgb(var(--tint,0,229,255));box-shadow:0 0 10px rgba(var(--tint,0,229,255),.8)}
  .pf-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--accent);opacity:.72;transition:opacity .35s,gap .35s var(--ease-out-expo)}
  .pf-card:hover .pf-go{opacity:1;gap:12px}

  /* --- процесс --- */
  .pf-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:22px;
    border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--border)}
  .pf-step{background:var(--bg-elevated);padding:16px 15px}
  .pf-step i{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--accent);font-style:normal}
  .pf-step b{display:block;margin-top:7px;font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--fg)}
  .pf-step p{margin:6px 0 0;font-size:11px;line-height:1.6;color:var(--muted)}

  /* --- цифры --- */
  .pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
  .pf-stat{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:4px}
  .pf-stat b{display:block;font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.03em;color:var(--fg);line-height:1}
  .pf-stat b em{font-style:normal;color:var(--accent);font-size:.6em}
  .pf-stat span{display:block;margin-top:7px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

    /* --- CTA --- */
  .pf-cta{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:22px;margin-top:12px;padding:28px;
    border:1px solid rgba(0,229,255,.16);border-radius:4px;overflow:hidden;
    background:radial-gradient(120% 160% at 0% 0%,rgba(0,229,255,.09),transparent 62%),var(--bg-elevated)}
  .pf-cta-head{max-width:660px}
  .pf-cta h3{margin:0;font-family:var(--font-display);font-size:clamp(17px,2.1vw,23px);font-weight:600;letter-spacing:-.02em;color:var(--fg)}
  .pf-cta p{margin:9px 0 0;max-width:520px;font-size:12px;line-height:1.65;color:var(--muted)}

  .pf-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .pf-btn{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:3px;
    border:1px solid var(--border);background:rgba(255,255,255,.014);text-decoration:none;color:var(--fg);
    transition:border-color .35s,background .35s,transform .35s var(--ease-out-expo),box-shadow .35s}
  .pf-ico{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
    border:1px solid rgba(var(--brand-rgb),.34);background:rgba(var(--brand-rgb),.12);color:rgb(var(--brand-rgb));
    transition:background .35s,color .35s,box-shadow .35s,transform .35s var(--ease-out-expo)}
  .pf-ico svg{display:block;width:17px;height:17px;fill:currentColor}
  .pf-btn-t{display:flex;flex-direction:column;gap:2px;min-width:0}
  .pf-btn-t b{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
  .pf-btn-t i{font-style:normal;font-family:var(--font-mono);font-size:9px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-btn:hover{transform:translateY(-2px);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.07);
    box-shadow:0 18px 34px -24px rgba(var(--brand-rgb),.95)}
  .pf-btn:hover .pf-ico{background:rgb(var(--brand-rgb));color:#04121a;transform:scale(1.06);box-shadow:0 0 18px rgba(var(--brand-rgb),.6)}
  .pf-btn--primary{background:rgba(var(--brand-rgb),.12);border-color:rgba(var(--brand-rgb),.45)}
  .pf-btn--primary .pf-ico{background:rgb(var(--brand-rgb));color:#04121a;box-shadow:0 0 16px rgba(var(--brand-rgb),.45)}
  .pf-btn--primary .pf-btn-t b{color:rgb(var(--brand-rgb))}

  .pf-cta-note{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .pf-live{display:block;width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 10px rgba(0,255,136,.85);animation:pfPulse 2.4s ease-in-out infinite}
  @keyframes pfPulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* --- кроме сайтов --- */
  .pf-more{position:relative;margin-top:12px;padding:26px 28px;border:1px solid var(--border);border-radius:4px;
    background:var(--bg-elevated);overflow:hidden}
  .pf-more::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 130% at 100% 0%,rgba(0,229,255,.06),transparent 62%)}
  .pf-kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .pf-more-head{position:relative;max-width:760px}
  .pf-more-head h3{margin:10px 0 0;font-family:var(--font-display);font-size:clamp(17px,2.1vw,22px);
    font-weight:600;letter-spacing:-.02em;color:var(--fg)}
  .pf-more-head p{margin:9px 0 0;font-size:12px;line-height:1.68;color:var(--muted)}

  .pf-skills{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    margin-top:22px;background:var(--border);border:1px solid var(--border);border-radius:3px;overflow:hidden}
  .pf-skill{position:relative;padding:19px 18px 17px;background:var(--bg-elevated);transition:background .4s}
  .pf-skill::after{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:rgb(var(--tint));
    opacity:0;transition:opacity .4s}
  .pf-skill:hover{background:var(--surface-hover)}
  .pf-skill:hover::after{opacity:1}
  .pf-skill-ico{display:grid;place-items:center;width:30px;height:30px;margin-bottom:12px;border-radius:3px;
    border:1px solid rgba(var(--tint),.3);background:rgba(var(--tint),.1);color:rgb(var(--tint))}
  .pf-skill-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .pf-skill b{display:block;font-family:var(--font-display);font-size:13px;font-weight:600;
    letter-spacing:-.01em;color:var(--fg);line-height:1.3}
  .pf-skill p{margin:7px 0 0;font-size:11.5px;line-height:1.62;color:var(--muted)}
  .pf-skill-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
  .pf-skill-tags span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);border:1px solid var(--border);padding:2px 5px;border-radius:2px}

  .pf-note{position:relative;display:flex;align-items:center;gap:8px;margin-top:16px;
    font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

  /* --- канал --- */
  .pf-chan{position:relative;display:flex;align-items:center;gap:18px;margin-top:12px;padding:20px 24px;
    border:1px solid rgba(var(--tint),.3);border-radius:4px;text-decoration:none;color:inherit;overflow:hidden;
    background:radial-gradient(90% 170% at 0% 50%,rgba(var(--tint),.15),transparent 66%),var(--bg-elevated);
    transition:transform .45s var(--ease-out-expo),border-color .4s,box-shadow .45s}
  .pf-chan:hover{transform:translateY(-2px);border-color:rgba(var(--tint),.55);
    box-shadow:0 26px 52px -32px rgba(var(--tint),.95)}
  .pf-chan-ico{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;
    background:rgb(var(--tint));color:#0a0a1a;box-shadow:0 0 26px rgba(var(--tint),.45)}
  .pf-chan-ico svg{width:26px;height:26px;fill:currentColor}
  .pf-chan-b{flex:1;min-width:0}
  .pf-chan-b .pf-kicker{color:rgb(var(--tint))}
  .pf-chan-b b{display:block;margin-top:7px;font-family:var(--font-display);font-size:clamp(15px,1.8vw,19px);
    font-weight:600;letter-spacing:-.02em;color:var(--fg)}
  .pf-chan-b p{margin:6px 0 0;max-width:62ch;font-size:11.5px;line-height:1.6;color:var(--muted)}
  .pf-chan-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
    font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--tint));white-space:nowrap;
    transition:gap .35s var(--ease-out-expo)}
  .pf-chan:hover .pf-chan-go{gap:12px}

  @keyframes pfIn{from{opacity:0;transform:translateY(18px) scale(.992)}to{opacity:1;transform:none}}
  #portfolio.visible .pf-card{animation:pfIn .68s var(--ease-out-expo) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
  #portfolio.visible .pf-flow,
  #portfolio.visible .pf-stats,
  #portfolio.visible .pf-more,
  #portfolio.visible .pf-chan,
  #portfolio.visible .pf-cta{animation:pfIn .68s var(--ease-out-expo) both;animation-delay:.42s}

  @media (max-width:900px){
    .pf-grid{grid-template-columns:minmax(0,1fr)}
    .pf-card--wide{grid-column:auto;flex-direction:column;align-items:stretch;gap:14px}
    .pf-card--wide .pf-visual{flex:auto}
    .pf-card--wide .pf-body{padding-right:4px}
    .pf-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pf-skills{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pf-chan{flex-wrap:wrap}
    .pf-cta{padding:22px}
    .pf-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:520px){
    .pf-flow{grid-template-columns:minmax(0,1fr)}
    .pf-card{padding:11px}
    .pf-stats{gap:8px}
    .pf-mob{width:62px}
    .pf-actions{grid-template-columns:minmax(0,1fr)}
    .pf-more{padding:20px 18px}
    .pf-skills{grid-template-columns:minmax(0,1fr)}
    .pf-chan{padding:18px;gap:14px}
    .pf-chan-go{width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    #portfolio.visible .pf-card,
    #portfolio.visible .pf-flow,
    #portfolio.visible .pf-stats,
    #portfolio.visible .pf-more,
    #portfolio.visible .pf-chan,
    #portfolio.visible .pf-cta{animation:none}
    .pf-card:hover{transform:none}
    .pf-card:hover .pf-shot img,
    .pf-card:hover .pf-mob{transform:none}
  }



/* polish-a11y3 2026-10-25: contrast + type floor + reduced-motion visibility
   (design-taste-frontend audit: muted 2.93:1, 94 blocks <13px, .card-url hidden) */
:root{--muted:#74849f}
h2.section-title{display:block;font-size:11.5px;font-weight:500;margin:0;line-height:1.2}
.pf-sub{margin-top:12px;max-width:74ch;font-size:14px;line-height:1.7;color:var(--fg);opacity:.86}
.pf-desc{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.pf-step p{font-size:13px;line-height:1.65}
.pf-stat span{font-size:11.5px;line-height:1.4;color:var(--muted)}
.card-desc{font-size:13.5px;line-height:1.6;color:var(--fg);opacity:.88}
.card-url{opacity:.8;transform:none;color:var(--muted)}
.card:hover .card-url{opacity:1;color:var(--accent)}
.disk-label,.disk-free,.ssl-expires{font-size:11.5px;color:var(--muted)}
.pf-btn-t i{font-size:10.5px;color:var(--muted)}
.pf-btn-t b{font-size:10.5px}
.pf-tag,.card-tag,.card-status{font-size:10px}
@media (prefers-reduced-motion:reduce){
  .card-url,.pf-bar span{opacity:.8!important;transform:none!important;visibility:visible!important}
}
@media (hover:none){
  .card-url{opacity:.8}
}



/* polish-type4 2026-10-25: second pass — the first block lost to #portfolio-scoped
   base rules (specificity 1,1,0 beats 0,1,0), and the label tier was still 8–11px. */
.header-lead{
  max-width:62ch;margin:20px auto 0;
  font-family:var(--font-display);font-size:clamp(18px,1.6vw,19px);
  line-height:1.5;letter-spacing:-.01em;color:var(--fg);opacity:.84;
  text-wrap:balance;text-align:center;
}
.header-sub{font-size:12px;letter-spacing:.12em;margin-top:18px;color:var(--muted)}
.header-status{font-size:11px}

/* ── running text: measure + size ───────────────────────────────── */
#portfolio .pf-sub{max-width:74ch;font-size:14px;line-height:1.7;color:var(--fg);opacity:.85}
#portfolio .pf-intro{font-size:clamp(19px,2.4vw,28px);line-height:1.26;max-width:24ch}
.pf-desc{font-size:13.5px;line-height:1.7}
.pf-card--wide .pf-desc{font-size:13.5px;line-height:1.7}
.card--compact .card-desc{font-size:13px;line-height:1.6}
.pf-step b{font-size:13.5px}
.pf-step p{font-size:13px;line-height:1.65;max-width:52ch}
.pf-more-head p{font-size:13.5px;line-height:1.7;max-width:66ch}
.pf-cta p{font-size:13.5px;line-height:1.7;max-width:62ch}
.pf-skill p{font-size:13px;line-height:1.6}
.pf-chan-b p{font-size:13px;line-height:1.6}
.no-results{font-size:13px}
.search-input{font-size:13px}

/* ── label tier: floor at ~11px, never 8–9px ────────────────────── */
.nav-link{font-size:11.5px}
h2.section-title,.section-title{font-size:12px;font-weight:500;margin:0}
.section-count{font-size:11px}
.card-tag{font-size:10.5px}
.card-status{font-size:10px}
.card-url{font-size:11.5px}
.mon-card-label{font-size:11px}
.mon-banner-time{font-size:12.5px}
.disk-label{font-size:12.5px}
.disk-free{font-size:12px}
.disk-pct{font-size:14px}
.ssl-expires{font-size:12px}
.scroll-hint-text{font-size:11px}
.footer-line{font-size:12px}
.pf-tag{font-size:10.5px}
.pf-stack span{font-size:10.5px}
.pf-stat span{font-size:12px}
.pf-btn-t b{font-size:11px}
.pf-btn-t i{font-size:10.5px}
.pf-cta-note{font-size:11px}
.pf-kicker{font-size:10.5px}
.pf-skill-tags span{font-size:10.5px}
.pf-note{font-size:11px}
.pf-chan-go{font-size:11px}
.pf-go{font-size:11px}
.pf-result{font-size:10.5px}
.pf-step i{font-size:10.5px}
.pf-bar span{font-size:11px}
.skip-link{font-size:13px}

.pf-desc,.pf-card--wide .pf-desc,.card--compact .card-desc,.pf-step p,.pf-more-head p,.pf-cta p{color:var(--fg);opacity:.88}
/* keep every changed piece visible without hover / with reduced motion */
@media (prefers-reduced-motion:reduce){
  .card-url,.pf-bar span,.pf-chan-go{opacity:.85!important;visibility:visible!important;transform:none!important}
}


/* fix 2026-10-26: декоративные слои карточки не должны перехватывать клики
   (.card::after накрывал всю карточку и блокировал кнопки «Скачать/Копировать/Убрать») */
.card::before,.card::after{pointer-events:none}