/* ═══════════════════════════════════════════════════
   common.css — Shared foundation for all pages
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── VARIABLES ── */
:root {
  --neo-light: rgba(255,255,255,0.07);
  --neo-dark: rgba(0,0,0,0.55);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg2: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.13);
  --glass-shine: rgba(255,255,255,0.5);
  --text-primary: rgba(255,255,255,0.95);
  --text-secondary: rgba(255,255,255,0.5);
  --text-muted: rgba(255,255,255,0.25);
  --accent: rgba(110,175,255,1);
  --accent-rgb: 110,175,255;
  --accent-glow: rgba(110,175,255,0.3);
  --accent-soft: rgba(110,175,255,0.1);
}
[data-theme="light"] {
  --neo-light: rgba(255,255,255,0.88);
  --neo-dark: rgba(150,165,195,0.55);
  --glass-bg: rgba(255,255,255,0.42);
  --glass-bg2: rgba(255,255,255,0.58);
  --glass-border: rgba(255,255,255,0.72);
  --glass-shine: rgba(255,255,255,0.95);
  --text-primary: rgba(8,12,28,0.95);
  --text-secondary: rgba(8,12,28,0.65);
  --text-muted: rgba(8,12,28,0.48);
  --accent: rgba(25,85,210,1);
  --accent-rgb: 25,85,210;
  --accent-glow: rgba(25,85,210,0.2);
  --accent-soft: rgba(25,85,210,0.08);
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; background-color: #03040a; }
html[data-theme="light"] { background-color: #eef0f8; }
body { font-family: 'Syne', sans-serif; color: var(--text-primary); min-height: 100vh; overflow-x: hidden; transition: color 0.6s; }

/* ── BACKGROUND LAYERS ── */
.bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -3; background-size: cover; background-position: center center; transition: opacity 0.8s ease; pointer-events: none; }

.bg-dark-img { background-image: url('../images/img-drk.png'); opacity: 1; }
.bg-light-img { background-image: url('../images/img-lgt.png'); opacity: 0; }
[data-theme="light"] .bg-dark-img { opacity: 0; }
[data-theme="light"] .bg-light-img { opacity: 1; }
.bg-overlay { position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent-rgb),0.04), transparent 70%); pointer-events: none; transition: background 0.6s; }
.bg-veil { position: fixed; inset: 0; z-index: -2; background: rgba(4,5,10,0.38); pointer-events: none; transition: background 0.6s; }
[data-theme="light"] .bg-veil { background: rgba(238,240,248,0.32); }

/* ── CINEMA FRAME ── */
.cinema-frame {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 8%, transparent 22%),
    linear-gradient(to left,  rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 8%, transparent 22%),
    linear-gradient(to bottom,rgba(0,0,0,0.35) 0%, transparent 14%),
    linear-gradient(to top,   rgba(0,0,0,0.35) 0%, transparent 14%);
  transition: opacity 0.5s;
}
[data-theme="light"] .cinema-frame {
  background:
    linear-gradient(to right, rgba(230,232,242,0.6) 0%, rgba(230,232,242,0.18) 8%, transparent 22%),
    linear-gradient(to left,  rgba(230,232,242,0.6) 0%, rgba(230,232,242,0.18) 8%, transparent 22%),
    linear-gradient(to bottom,rgba(230,232,242,0.4) 0%, transparent 14%),
    linear-gradient(to top,   rgba(230,232,242,0.4) 0%, transparent 14%);
}

/* ── LOADER ── */
.loader { position: fixed; inset: 0; z-index: 9999; background: #03040a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity 0.7s, visibility 0.7s; }
.loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-name { font-size: clamp(28px,5vw,52px); font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(135deg,#fff 30%,rgba(var(--accent-rgb),0.9)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.loader-bar-wrap { width: 180px; height: 1px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0; background: var(--accent); animation: loaderFill 1.4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes loaderFill { to { width: 100%; } }
.loader-label { font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.25); text-transform: uppercase; }

/* ── NAVIGATION ── */
.nav-wrap { position: fixed; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1000; }
.nav-capsule {
  display: flex; align-items: center;
  background: rgba(8,12,22,0.52);
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 100px;
  padding: 6px 8px 6px 22px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.35), 4px 8px 28px rgba(0,0,0,0.55), -2px -2px 10px rgba(255,255,255,0.035), 0 0 0 0.5px rgba(255,255,255,0.04);
}
[data-theme="light"] .nav-capsule {
  background: rgba(242,244,252,0.7); border-color: rgba(255,255,255,0.82);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(170,182,212,0.4), 6px 10px 28px rgba(140,155,195,0.38), -4px -4px 14px rgba(255,255,255,0.88);
}
.nav-brand { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); white-space: nowrap; text-decoration: none; display: flex; align-items: center; gap: 9px; margin-right: 16px; }
.nav-brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent-glow); animation: dotPulse 2.5s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent-glow); } 50% { box-shadow: 0 0 4px var(--accent), 0 0 8px var(--accent-glow); } }
.nav-sep { width: 1px; height: 18px; background: linear-gradient(to bottom, transparent, var(--glass-border), transparent); margin-right: 10px; flex-shrink: 0; }
.nav-links { display: flex; gap: 2px; list-style: none; position: relative; z-index: 1; }
.nav-pill {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 100px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 4px 12px rgba(0,0,0,0.28);
  pointer-events: none;
  transition: left .38s cubic-bezier(.34,1.4,.64,1), width .38s cubic-bezier(.34,1.4,.64,1), opacity .2s;
  opacity: 0;
}
[data-theme="light"] .nav-pill { background: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.95); box-shadow: inset 0 1px 0 #fff, 3px 3px 8px rgba(150,165,200,0.28), -2px -2px 6px rgba(255,255,255,0.82); }
.nav-links a { display: block; padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 500; letter-spacing: 0.07em; color: var(--text-secondary); text-decoration: none; transition: color .25s; white-space: nowrap; position: relative; z-index: 1; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-toggle { width: 38px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.11); cursor: pointer; position: relative; margin-left: 10px; flex-shrink: 0; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.04); }
[data-theme="light"] .nav-toggle { background: rgba(200,208,228,0.4); box-shadow: inset 2px 2px 6px rgba(130,145,185,0.38), inset -1px -1px 4px rgba(255,255,255,0.72); }
.toggle-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transition: transform .35s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 8px var(--accent-glow), 1px 1px 3px rgba(0,0,0,0.3); }
[data-theme="light"] .toggle-knob { transform: translateX(16px); }
.nav-ham { display: none; flex-direction: column; gap: 4px; cursor: pointer; margin-left: 10px; }
.nav-ham span { display: block; width: 18px; height: 1.5px; background: var(--text-secondary); border-radius: 2px; }
.mob-drawer { display: none; position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 999; width: 210px; background: rgba(8,12,22,0.88); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.11); border-radius: 20px; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
[data-theme="light"] .mob-drawer { background: rgba(242,244,252,0.92); border-color: rgba(255,255,255,0.82); box-shadow: 0 20px 60px rgba(140,155,195,0.38), inset 0 1.5px 0 rgba(255,255,255,0.92); }
.mob-drawer.open { display: block; }
.mob-drawer a { display: block; padding: 12px 16px; color: var(--text-secondary); text-decoration: none; font-size: 13px; letter-spacing: 0.06em; border-radius: 12px; transition: background .2s, color .2s; }
.mob-drawer a:hover, .mob-drawer a.active { background: rgba(255,255,255,0.06); color: var(--text-primary); }
[data-theme="light"] .mob-drawer a:hover, [data-theme="light"] .mob-drawer a.active { background: rgba(25,85,210,0.07); }

/* ── GLASS CARD ── */
.gcard {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 24px; position: relative; overflow: hidden;
  box-shadow: inset 0 1.5px 0 var(--glass-shine), inset 0 -1px 0 rgba(0,0,0,0.18), inset 1px 0 0 rgba(255,255,255,0.07), 8px 10px 28px var(--neo-dark), -4px -4px 14px var(--neo-light), 0 0 0 0.5px rgba(255,255,255,0.04);
  transition: transform .4s cubic-bezier(.34,1.3,.64,1), box-shadow .4s;
}
.gcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-shine) 50%, transparent); pointer-events: none; }
.gcard::after  { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 60%; background: linear-gradient(180deg, var(--glass-shine), transparent); pointer-events: none; }
.gcard:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: inset 0 1.5px 0 var(--glass-shine), 12px 20px 44px var(--neo-dark), -4px -4px 14px var(--neo-light), 0 0 44px rgba(var(--accent-rgb),0.12), 0 0 0 1px rgba(var(--accent-rgb),0.18);
}

/* ── BUTTONS ── */
.btn-p { padding: 15px 36px; border-radius: 100px; background: var(--accent); color: #fff; font-family: 'Syne',sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -2px 0 rgba(0,0,0,0.18), 6px 8px 24px rgba(0,0,0,0.42), 0 0 32px rgba(var(--accent-rgb),0.38); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.btn-p:hover { transform: translateY(-3px) scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 8px 14px 32px rgba(0,0,0,0.48), 0 0 52px rgba(var(--accent-rgb),0.48); }
.btn-g { padding: 14px 34px; border-radius: 100px; background: var(--glass-bg2); color: var(--text-primary); font-family: 'Syne',sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; border: 1px solid var(--glass-border); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 6px 8px 20px var(--neo-dark), -3px -3px 10px var(--neo-light); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.btn-g:hover { transform: translateY(-3px) scale(1.03); border-color: rgba(var(--accent-rgb),0.38); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 8px 12px 28px var(--neo-dark), 0 0 26px rgba(var(--accent-rgb),0.14); }

/* ── SECTION BASE ── */
section { padding: 64px 5%; position: relative; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.sec-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sec-label::before { content: ''; width: 28px; height: 1px; background: var(--accent); }
.sec-label.center { justify-content: center; }
.sec-label.center::after { content: ''; width: 28px; height: 1px; background: var(--accent); }
.sec-title { font-size: clamp(34px,4.5vw,58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; color: var(--text-primary); margin-bottom: 36px; }
.sec-title.center { text-align: center; }
.sec-block { margin-bottom: 48px; }
.page { padding-top: 80px; padding-bottom: 48px; }
.page.deep { perspective: 1400px; perspective-origin: 50% 40%; }

/* ── PAGE HERO STRIP ── */
.hero-strip {
  padding: 56px 52px; margin-bottom: 60px;
  background: var(--glass-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: 28px;
  box-shadow: inset 0 1.5px 0 var(--glass-shine), 10px 14px 36px var(--neo-dark), -5px -5px 16px var(--neo-light);
  display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center;
  position: relative; overflow: hidden;
}
.hero-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-shine) 50%, transparent); }
.hero-avatar { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,rgba(var(--accent-rgb),0.3),rgba(var(--accent-rgb),0.05)); border: 2px solid rgba(var(--accent-rgb),0.3); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.08), 6px 8px 20px var(--neo-dark); margin-bottom: 20px; }
.hero-strip-name { font-size: clamp(26px,3.5vw,42px); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 4px; }
.hero-strip-role { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 20px; }
.meta-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.meta-item svg { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 2; flex-shrink: 0; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hbadge { padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; border: 1px solid var(--glass-border); background: var(--glass-bg2); color: var(--text-secondary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 3px 4px 10px var(--neo-dark); }
.hbadge.accent { border-color: rgba(var(--accent-rgb),0.3); color: var(--accent); background: var(--accent-soft); }

/* ── CONTACT FORM ── */
.contact-inner { max-width: 620px; margin: 0 auto; }
.contact-card { padding: 50px 54px; }
.contact-intro { font-size: 15px; color: var(--text-secondary); font-weight: 300; line-height: 1.8; }
.cform { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg { display: flex; flex-direction: column; gap: 7px; }
.fl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.fi { padding: 13px 18px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: 'Syne',sans-serif; font-size: 14px; font-weight: 300; outline: none; resize: none; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.32), inset -1px -1px 4px rgba(255,255,255,0.03); transition: border-color .25s, box-shadow .25s; }
[data-theme="light"] .fi { background: rgba(255,255,255,0.48); box-shadow: inset 3px 3px 8px rgba(150,162,198,0.32), inset -2px -2px 6px rgba(255,255,255,0.78); }
.fi:focus { border-color: rgba(var(--accent-rgb),0.48); box-shadow: inset 2px 2px 6px rgba(0,0,0,0.28), 0 0 0 3px rgba(var(--accent-rgb),0.09); }
.fi::placeholder { color: var(--text-muted); }
textarea.fi { min-height: 110px; line-height: 1.65; }
.socials { display: flex; gap: 12px; margin-top: 28px; justify-content: center; }
.soc-btn { width: 46px; height: 46px; border-radius: 14px; background: var(--glass-bg2); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: 4px 5px 14px var(--neo-dark), -2px -2px 8px var(--neo-light); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.soc-btn:hover { transform: translateY(-5px) scale(1.1); border-color: rgba(var(--accent-rgb),0.38); box-shadow: 6px 8px 20px var(--neo-dark), 0 0 24px rgba(var(--accent-rgb),0.18); }
.soc-btn svg { width: 18px; height: 18px; stroke: var(--text-secondary); fill: none; stroke-width: 1.8; transition: stroke .2s; }
.soc-btn:hover svg { stroke: var(--accent); }

/* ── CINEMATIC REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateX(-110px) translateZ(-60px) scale(0.93) rotateY(4deg);
  filter: blur(6px);
  transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
}
.reveal.from-right { transform: translateX(110px) translateZ(-60px) scale(0.93) rotateY(-4deg); filter: blur(6px); }
.reveal.vis { opacity: 1; transform: translateX(0) translateZ(0) scale(1) rotateY(0deg); filter: blur(0); }
.reveal.exit-left  { opacity: 0; transform: translateX(-110px) translateZ(-60px) scale(0.93) rotateY(4deg);  filter: blur(6px); }
.reveal.exit-right { opacity: 0; transform: translateX(110px) translateZ(-60px) scale(0.93) rotateY(-4deg); filter: blur(6px); }
.d1{transition-delay:.06s;} .d2{transition-delay:.13s;} .d3{transition-delay:.20s;} .d4{transition-delay:.27s;} .d5{transition-delay:.34s;}

/* ── RIPPLE ── */
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
.rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.25); transform: scale(0); animation: rippleAnim .6s linear; pointer-events: none; }

/* ── FOOTER ── */
footer { padding: 36px 5%; padding-bottom: calc(36px + env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.07em; }