/* =============================================================================
   Fill Design Group — Digital Business Card
   css/styles.css
   ============================================================================= */

/* ----------------------------------------------------------- Design tokens */
:root {
  --bg:            #05070A;
  --bg-soft:       #080B11;
  --primary:       #0A84FF;
  --primary-bright:#3AA0FF;
  --primary-dim:   rgba(10,132,255,.14);
  --text:          #F4F6FA;
  --text-soft:     #9AA6B8;
  --text-dim:      #5C6678;
  --card:          rgba(255,255,255,.04);
  --card-hover:    rgba(255,255,255,.06);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --glow:          rgba(10,132,255,.45);
  --radius:        20px;
  --radius-lg:     28px;
  --maxw:          1180px;
  --ease:          cubic-bezier(.16,.84,.44,1);
  --ease-out:      cubic-bezier(.22,1,.36,1);
  --shadow-soft:   0 10px 40px -12px rgba(0,0,0,.6);
  --shadow-card:   0 24px 70px -30px rgba(0,0,0,.85);
  --font:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ Reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--primary); color: #fff; }

/* ------------------------------------------------------------- Utilities */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--primary-bright); margin-bottom:18px;
}
.eyebrow::before { content:""; width:24px; height:1px; background:var(--primary); display:inline-block; }
.section-title {
  font-size: clamp(1.9rem, 4.5vw, 3.1rem); font-weight: 700; letter-spacing:-.03em;
  line-height:1.05; margin-bottom: 16px;
}
.section-sub { color: var(--text-soft); font-size: clamp(1rem,1.6vw,1.12rem); max-width: 56ch; }
.section-head { margin-bottom: clamp(40px, 6vw, 64px); }
.grad-text { background: linear-gradient(120deg,#fff 20%, var(--primary-bright)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ----------------------------------------------------- Background aurora */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora__blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  mix-blend-mode: screen; will-change: transform;
}
.blob-1 { width: 46vw; height: 46vw; left:-8vw; top:-6vw;  background: radial-gradient(circle at 30% 30%, #0A84FF, transparent 62%); animation: drift1 22s var(--ease) infinite alternate; }
.blob-2 { width: 40vw; height: 40vw; right:-6vw; top: 8vw;  background: radial-gradient(circle at 70% 30%, #6E3AFF, transparent 60%); opacity:.32; animation: drift2 26s var(--ease) infinite alternate; }
.blob-3 { width: 38vw; height: 38vw; left: 24vw; bottom:-12vw; background: radial-gradient(circle at 50% 50%, #00C2FF, transparent 60%); opacity:.28; animation: drift3 30s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-6vw, 10vh, 0) scale(1.08); } }
@keyframes drift3 { to { transform: translate3d(4vw,-8vh, 0) scale(1.15); } }
.grain { position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------- Cursor glow */
.cursor-glow {
  position: fixed; top:0; left:0; width: 460px; height:460px; border-radius:50%;
  background: radial-gradient(circle, rgba(10,132,255,.16), transparent 60%);
  transform: translate(-50%,-50%); pointer-events:none; z-index:0; opacity:0;
  transition: opacity .4s ease; mix-blend-mode: screen; will-change: transform;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow.on { opacity:1; } }

/* ------------------------------------------------------------- Preloader */
.preloader {
  position: fixed; inset:0; z-index: 9999; display:grid; place-items:center;
  background: var(--bg); transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.done { opacity:0; visibility:hidden; }
.preloader__inner { display:grid; place-items:center; gap:22px; }
.preloader__ring { width:46px; height:46px; border-radius:50%;
  border:2px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preloader__label { font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color: var(--text-dim); }

/* --------------------------------------------------------- Scroll progress */
.progress-bar { position: fixed; top:0; left:0; height:2px; width:0; z-index:1000;
  background: linear-gradient(90deg, var(--primary), var(--primary-bright)); box-shadow:0 0 12px var(--glow); }

/* ---------------------------------------------------------------- Navbar */
.nav { position: fixed; top:14px; left:50%; transform: translateX(-50%); z-index: 900;
  width: min(94%, var(--maxw)); display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px 10px 18px; border-radius: 18px;
  background: rgba(8,11,17,.55); backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border:1px solid var(--border); transition: box-shadow .3s, background .3s; }
.nav.scrolled { background: rgba(8,11,17,.8); box-shadow: var(--shadow-soft); }
.nav__brand { display:inline-flex; align-items:center; gap:10px; }
.nav__mark { height: 30px; width:auto; }
.nav__word { font-size: 1rem; font-weight: 700; letter-spacing:-.02em; color: var(--text); white-space:nowrap; }
.nav__word b { color: var(--primary-bright); font-weight:700; }
@media (max-width: 480px){ .nav__word { display:none; } }
.nav__cta { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600;
  padding: 9px 16px; border-radius: 12px; background: var(--primary); color:#fff;
  transition: transform .25s var(--ease), box-shadow .25s; box-shadow: 0 8px 24px -8px var(--glow); }
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px var(--glow); }
.nav__cta svg { width:16px; height:16px; }

/* ------------------------------------------------------------------ Hero */
.hero { min-height: 100svh; display:grid; place-items:center; padding-top: 96px; padding-bottom: 60px; position:relative; }
.hero__grid { display:grid; gap: clamp(36px, 6vw, 72px); grid-template-columns: 1.05fr .95fr; align-items:center; width:100%; }
@media (max-width: 880px){ .hero__grid { grid-template-columns: 1fr; text-align:center; } }

.hero__badge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px;
  background: var(--card); border:1px solid var(--border); font-size:.8rem; color: var(--text-soft); margin-bottom:26px; }
.hero__badge .dot { width:7px; height:7px; border-radius:50%; background:#22d37e; box-shadow:0 0 0 0 rgba(34,211,126,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,211,126,.5);} 70%{box-shadow:0 0 0 8px rgba(34,211,126,0);} 100%{box-shadow:0 0 0 0 rgba(34,211,126,0);} }

.hero__name { font-size: clamp(2.1rem, 4.6vw, 3.25rem); font-weight: 800; letter-spacing:-.035em; line-height: 1.02; }
.hero__title { display:inline-block; margin-top:12px; font-size: clamp(1rem,2vw,1.18rem); font-weight:600; color: var(--primary-bright); letter-spacing:.01em; }
.hero__headline { margin-top: 22px; font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--text); max-width: 30ch; }
@media (max-width:880px){ .hero__headline { margin-inline:auto; } }
.hero__bio { margin-top: 16px; color: var(--text-soft); max-width: 44ch; font-size:1rem; }
@media (max-width:880px){ .hero__bio { margin-inline:auto; } }
.hero__actions { margin-top: 32px; display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:880px){ .hero__actions { justify-content:center; } }

/* word-reveal for name */
.reveal-word { display:inline-block; overflow:hidden; vertical-align:bottom; }
.reveal-word > span { display:inline-block; transform: translateY(0); }

/* Hero entrance — pure CSS, plays once on load. Content stays visible if animations
   are unsupported or reduced-motion is on (no JS dependency). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-word > span { animation: wordUp .95s cubic-bezier(.22,1,.36,1) both; }
  .hero__badge    { animation: fadeUp .8s var(--ease-out) both; animation-delay:.12s; }
  .hero__title    { animation: fadeUp .8s var(--ease-out) both; animation-delay:.26s; }
  .hero__headline { animation: fadeUp .8s var(--ease-out) both; animation-delay:.34s; }
  .hero__bio      { animation: fadeUp .8s var(--ease-out) both; animation-delay:.42s; }
  .hero__actions  { animation: fadeUp .8s var(--ease-out) both; animation-delay:.50s; }
  .hero__visual   { animation: fadeUp 1s var(--ease-out) both;  animation-delay:.28s; }
}
@keyframes wordUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }

/* Profile card (signature: magnetic tilt) */
.profile-card { position: relative; width: min(380px, 86vw); margin-inline:auto;
  border-radius: var(--radius-lg); padding: 26px; transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--border-strong); box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform .15s var(--ease-out); will-change: transform; }
.profile-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(140deg, var(--primary), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.7; pointer-events:none; }
.profile-card__shine { position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.12), transparent 45%); opacity:0; transition:opacity .3s; }
.profile-card:hover .profile-card__shine { opacity:1; }
.profile-card__photo { width: 100%; aspect-ratio: 1; border-radius: 20px; object-fit: cover;
  border:1px solid var(--border); transform: translateZ(40px); }
.profile-card__meta { margin-top:18px; display:flex; align-items:center; justify-content:space-between; transform: translateZ(28px); }
.profile-card__meta h3 { font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.profile-card__meta p { font-size:.85rem; color: var(--text-soft); }
.profile-card__qr { width:54px; height:54px; border-radius:12px; background:#fff; padding:5px; }
.profile-card__qr img { width:100%; height:100%; }

/* --------------------------------------------------------------- Buttons */
.btn { position: relative; display:inline-flex; align-items:center; gap:9px; overflow:hidden;
  padding: 13px 20px; border-radius: 14px; font-size:.92rem; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--border); background: var(--card); color: var(--text);
  transition: transform .25s var(--ease), border-color .25s, background .25s; will-change: transform; }
.btn svg { width:18px; height:18px; }
.btn:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--card-hover); }
.btn--primary { background: var(--primary); border-color: transparent; color:#fff; box-shadow: 0 12px 30px -10px var(--glow); }
.btn--primary:hover { background: var(--primary-bright); box-shadow: 0 16px 40px -10px var(--glow); }
.btn--ghost { background: transparent; }
.ripple { position:absolute; border-radius:50%; transform: scale(0); background: rgba(255,255,255,.35);
  animation: ripple .6s var(--ease-out); pointer-events:none; }
@keyframes ripple { to { transform: scale(2.6); opacity:0; } }

/* Action grid (hero quick actions) */
.actions-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); gap:12px; }

/* --------------------------------------------------------------- About */
.about { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items:center; }
@media (max-width:820px){ .about { grid-template-columns:1fr; } }
.about__points { display:grid; gap:14px; margin-top:26px; }
.about__point { display:flex; gap:14px; align-items:flex-start; }
.about__point i { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px;
  background: var(--primary-dim); color: var(--primary-bright); }
.about__point i svg { width:18px; height:18px; }
.about__point h4 { font-size:1rem; font-weight:600; }
.about__point p { font-size:.9rem; color: var(--text-soft); }
.about__visual { aspect-ratio: 4/5; border-radius: var(--radius-lg); border:1px solid var(--border);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(10,132,255,.18), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  display:grid; place-items:center; position:relative; overflow:hidden; }
.about__visual::after { content:""; position:absolute; inset:0;
  background-image: linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size: 40px 40px; mask: radial-gradient(circle at 50% 40%, #000, transparent 75%); opacity:.5; }
.about__visual .mark { width:160px; opacity:1; position:relative; z-index:1; filter: drop-shadow(0 10px 40px var(--glow)); }
.footer__brandmark { display:inline-flex; align-items:center; gap:10px; }
.footer__brandmark img { height: 34px; width:auto; }
.footer__brandmark span { font-size:1.05rem; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.footer__brandmark b { color: var(--primary-bright); }

/* --------------------------------------------------------------- Cards */
.card-grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(248px,1fr)); }
.glass-card { position:relative; padding:26px; border-radius: var(--radius);
  background: var(--card); border:1px solid var(--border); overflow:hidden;
  transition: transform .35s var(--ease), border-color .35s, background .35s; will-change: transform; }
.glass-card::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--primary-dim), transparent 40%);
  transition:opacity .35s; pointer-events:none; }
.glass-card:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--card-hover); }
.glass-card:hover::after { opacity:1; }
.glass-card .ic { width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  background: var(--primary-dim); color: var(--primary-bright); margin-bottom:18px; }
.glass-card .ic svg { width:22px; height:22px; }
.glass-card h3 { font-size:1.08rem; font-weight:650; letter-spacing:-.01em; margin-bottom:8px; }
.glass-card p { font-size:.9rem; color: var(--text-soft); }

/* --------------------------------------------------------------- Portfolio */
.portfolio-grid { display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.project { position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border);
  background: var(--card); transition: transform .4s var(--ease), border-color .4s; }
.project:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.project__media { aspect-ratio: 16/10; position:relative; overflow:hidden;
  background: linear-gradient(140deg, #0d1622, #0a1018); display:grid; place-items:center; }
.project__media img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.project:hover .project__media img { transform: scale(1.06); }
.project__media .ph { color: var(--text-dim); font-weight:700; letter-spacing:.04em; font-size:1.05rem; opacity:.6; }
.project__body { padding: 20px 22px 24px; }
.project__tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color: var(--primary-bright); font-weight:600; }
.project__body h3 { font-size:1.18rem; font-weight:700; margin:8px 0 8px; letter-spacing:-.02em; }
.project__body p { font-size:.9rem; color: var(--text-soft); margin-bottom:16px; }
.project__link { display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; color: var(--primary-bright); }
.project__link svg { width:16px; height:16px; transition: transform .25s; }
.project__link:hover svg { transform: translate(3px,-3px); }

/* --------------------------------------------------------------- Stats */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width:760px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat { text-align:center; padding: 30px 16px; border-radius: var(--radius);
  background: var(--card); border:1px solid var(--border); }
.stat__num { font-size: clamp(2.2rem,5vw,3.2rem); font-weight:800; letter-spacing:-.04em; line-height:1;
  background: linear-gradient(120deg,#fff, var(--primary-bright)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label { margin-top:10px; font-size:.86rem; color: var(--text-soft); }

/* --------------------------------------------------------- Testimonials */
.tcarousel { position:relative; overflow:hidden; }
.ttrack { display:flex; transition: transform .6s var(--ease); }
.tslide { flex:0 0 100%; min-width:100%; box-sizing:border-box; }
.tcard { padding: clamp(28px,4vw,44px); border-radius: var(--radius-lg);
  background: var(--card); border:1px solid var(--border); text-align:center; }
.tcard__stars { color:#FFC453; display:flex; gap:3px; justify-content:center; margin-bottom:18px; }
.tcard__stars svg { width:18px; height:18px; fill: currentColor; }
.tcard__quote { font-size: clamp(1.05rem,2.2vw,1.4rem); font-weight:500; line-height:1.5; letter-spacing:-.01em; max-width:60ch; margin-inline:auto; }
.tcard__person { margin-top:22px; display:flex; align-items:center; gap:12px; justify-content:center; }
.tcard__avatar { width:46px; height:46px; border-radius:50%; background: var(--primary-dim); color:var(--primary-bright);
  display:grid; place-items:center; font-weight:700; border:1px solid var(--border); }
.tcard__avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.tcard__name { font-weight:650; font-size:.95rem; }
.tcard__co { font-size:.82rem; color: var(--text-soft); }
.tdots { display:flex; gap:8px; justify-content:center; margin-top:26px; }
.tdot { width:8px; height:8px; border-radius:50%; background: var(--border-strong); transition: all .3s; }
.tdot.active { width:24px; border-radius:100px; background: var(--primary); }

/* --------------------------------------------------------------- Contact */
.contact-wrap { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,56px); align-items:start; }
@media (max-width:860px){ .contact-wrap { grid-template-columns:1fr; } }
.contact-aside .lead { font-size: clamp(1.6rem,3.4vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.contact-aside .channels { display:grid; gap:12px; margin-top:28px; }
.channel { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  background: var(--card); border:1px solid var(--border); transition: border-color .25s, transform .25s; }
.channel:hover { border-color: var(--border-strong); transform: translateX(4px); }
.channel i { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; background: var(--primary-dim); color: var(--primary-bright); }
.channel i svg { width:18px; height:18px; }
.channel span { font-size:.78rem; color: var(--text-dim); display:block; }
.channel strong { font-size:.92rem; font-weight:600; }

.form { padding: clamp(24px,4vw,34px); border-radius: var(--radius-lg);
  background: var(--card); border:1px solid var(--border); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .form__row { grid-template-columns:1fr; } }
.field { margin-bottom:14px; position:relative; }
.field label { font-size:.78rem; font-weight:600; color: var(--text-soft); display:block; margin-bottom:7px; }
.field input, .field select, .field textarea {
  width:100%; padding: 12px 14px; border-radius: 12px; font-size:.92rem; color: var(--text);
  background: rgba(255,255,255,.03); border:1px solid var(--border);
  transition: border-color .2s, box-shadow .2s; font-family:inherit; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); outline:none; }
.field select { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239AA6B8' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:36px; }
.field select option { background: var(--bg-soft); }
.field .err { color:#ff6b6b; font-size:.74rem; margin-top:5px; display:none; }
.field.invalid .err { display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color:#ff6b6b; }
.form__submit { width:100%; margin-top:6px; justify-content:center; }
.form__status { margin-top:14px; font-size:.9rem; text-align:center; min-height:1.2em; }
.form__status.ok { color:#22d37e; } .form__status.bad { color:#ff6b6b; }

/* --------------------------------------------------------------- QR block */
.qr-block { display:grid; place-items:center; text-align:center; gap:20px;
  padding: clamp(40px,6vw,64px); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10,132,255,.15), transparent 55%),
    var(--card); border:1px solid var(--border); }
.qr-block__frame { width: 200px; height:200px; padding:14px; border-radius:22px; background:#fff; box-shadow: var(--shadow-card); }
.qr-block__frame img { width:100%; height:100%; }
.qr-block h3 { font-size: clamp(1.3rem,3vw,1.9rem); font-weight:700; letter-spacing:-.02em; }
.qr-block p { color: var(--text-soft); }

/* --------------------------------------------------------------- Footer */
.footer { border-top:1px solid var(--border); padding-block: 56px 30px; }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width:760px){ .footer__grid { grid-template-columns: 1fr 1fr; gap:28px; } }
.footer__brand p { color: var(--text-soft); font-size:.9rem; margin-top:16px; max-width:34ch; }
.footer__col h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color: var(--text-dim); margin-bottom:14px; }
.footer__col a { display:block; font-size:.9rem; color: var(--text-soft); padding:5px 0; transition: color .2s; }
.footer__col a:hover { color: var(--text); }
.footer__socials { display:flex; gap:10px; margin-top:18px; }
.footer__socials a { width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background: var(--card); border:1px solid var(--border); transition: all .25s; }
.footer__socials a:hover { border-color: var(--primary); color: var(--primary-bright); transform: translateY(-3px); }
.footer__socials svg { width:18px; height:18px; }
.footer__bottom { margin-top:44px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color: var(--text-dim); font-size:.84rem; }

/* --------------------------------------------------------- Floating dock */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 800; display:flex; flex-direction:column; gap:10px; }
.fab a, .fab button { width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background: rgba(8,11,17,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border:1px solid var(--border); color: var(--text); box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), border-color .25s, background .25s, opacity .3s; }
.fab a:hover, .fab button:hover { transform: translateY(-3px) scale(1.05); border-color: var(--border-strong); }
.fab svg { width:21px; height:21px; }
.fab .wa:hover { background:#1fa355; border-color:#1fa355; color:#fff; }
.fab .call:hover { background: var(--primary); border-color: var(--primary); color:#fff; }
.fab #toTop { opacity:0; pointer-events:none; }
.fab #toTop.show { opacity:1; pointer-events:auto; }

/* --------------------------------------------------- Scroll-reveal init */
[data-reveal] { opacity:0; transform: translateY(26px); }
.reveal-ready [data-reveal] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; }

/* --------------------------------------------------------- Toast (share) */
.toast { position: fixed; left:50%; bottom: 90px; transform: translate(-50%, 20px); z-index:1100;
  padding: 12px 20px; border-radius: 14px; background: rgba(8,11,17,.92); border:1px solid var(--border-strong);
  color: var(--text); font-size:.88rem; box-shadow: var(--shadow-card); opacity:0; pointer-events:none;
  transition: opacity .3s, transform .3s; display:flex; align-items:center; gap:9px; }
.toast.show { opacity:1; transform: translate(-50%,0); }
.toast svg { width:17px; height:17px; color: var(--primary-bright); }