/* ══════════════════════════════════════════════════════════════
   АНТАКОВ ВЛАДИМИР — Design System
   Tokens, Themes, Animations, Layout Utilities
   ══════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  background-attachment:fixed;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s,color .4s
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
ul{list-style:none}

/* ─── AMBIENT BACKGROUND — animated light effects ─── */
.ambient-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden
}
.ambient-aurora{
  position:absolute;inset:-50%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%,color-mix(in oklch,var(--accent) 8%,transparent) 0%,transparent 100%),
    radial-gradient(ellipse 40% 50% at 80% 70%,color-mix(in oklch,var(--gold) 6%,transparent) 0%,transparent 100%),
    radial-gradient(ellipse 30% 30% at 50% 50%,color-mix(in oklch,var(--accent) 4%,transparent) 0%,transparent 100%);
  animation:ambient-aurora 40s ease-in-out infinite;
  will-change:transform
}
@keyframes ambient-aurora{
  0%,100%{transform:translate(0%,0%) rotate(0deg) scale(1)}
  25%{transform:translate(4%,-3%) rotate(1.5deg) scale(1.02)}
  50%{transform:translate(-3%,4%) rotate(-1deg) scale(0.98)}
  75%{transform:translate(2%,-2%) rotate(0.5deg) scale(1.01)}
}

/* ─── CSS CUSTOM PROPERTIES (LIGHT) — Teal Edge ─── */
:root{
  /* Backgrounds — cool steel grays */
  --bg:oklch(100% 0 0);
  --bg-alt:oklch(93% 0.006 260);
  --surface:oklch(100% 0 0);
  --surface-hover:oklch(95% 0.005 260);

  /* Text — cool near-black */
  --fg:oklch(12% 0.008 260);
  --fg-secondary:oklch(30% 0.01 260);
  --muted:oklch(50% 0.012 260);

  /* Borders — cool light grays */
  --border:oklch(88% 0.005 260);
  --border-light:oklch(92% 0.004 260);

  /* Accent — teal (topomatic) */
  --accent:oklch(46% 0.12 185);
  --accent-hover:oklch(40% 0.12 185);
  --accent-light:oklch(86% 0.05 185);
  --accent-glow:oklch(46% 0.12 185 / 0.15);

  /* Silver accent (cold metallic) */
  --gold:oklch(72% 0.03 260);
  --gold-light:oklch(92% 0.02 260);

  /* Semantic */
  /* Edge gradient color — dark teal (topomatic) */
  --bg-edge:oklch(92% 0.015 185);

  /* Semantic */
  --success:oklch(52% 0.10 185);
  --warning:oklch(62% 0.10 90);
  --error:oklch(50% 0.14 25);

  /* Radius */
  --radius-xs:2px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:32px;
  --radius-full:9999px;

  /* Shadows — cooler */
  --shadow-sm:0 1px 3px rgba(10,15,30,.04),0 1px 2px rgba(10,15,30,.03);
  --shadow-md:0 4px 16px rgba(10,15,30,.06);
  --shadow-lg:0 12px 40px rgba(10,15,30,.08);
  --shadow-xl:0 24px 60px rgba(10,15,30,.1);
  --shadow-glow:0 0 30px var(--accent-glow);

  /* Typography — cold sans-serif */
  --font-display:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace;

  /* Layout */
  --max-w:1200px;
  --max-w-wide:1400px;
  --nav-h:56px;
  --gutter:clamp(16px,4vw,48px);

  /* Transitions */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:150ms;
  --duration-normal:300ms;
  --duration-slow:500ms;
}

/* ─── DARK THEME — Teal Edge ─── */
[data-theme="dark"]{
  --bg:oklch(10% 0.006 260);
  --bg-alt:oklch(13% 0.008 260);
  --surface:oklch(16% 0.01 260);
  --surface-hover:oklch(22% 0.01 260);
  --fg:oklch(93% 0.004 260);
  --fg-secondary:oklch(72% 0.006 260);
  --muted:oklch(55% 0.008 260);
  --border:oklch(25% 0.008 260);
  --border-light:oklch(20% 0.006 260);
  --bg-edge:oklch(12% 0.04 185);
  --accent:oklch(56% 0.12 185);
  --accent-hover:oklch(62% 0.12 185);
  --accent-light:oklch(20% 0.05 185);
  --accent-glow:oklch(56% 0.12 185 / 0.2);
  --gold:oklch(75% 0.03 260);
  --gold-light:oklch(25% 0.02 260);
  --shadow-sm:0 1px 3px rgba(0,0,0,.25);
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.45);
  --shadow-xl:0 24px 60px rgba(0,0,0,.55);
}

/* ─── CONTAINER ─── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.container-wide{max-width:var(--max-w-wide);margin:0 auto;padding:0 var(--gutter)}

/* ─── SECTION ─── */
.section{
  padding:clamp(60px,8vw,140px) 0;
  position:relative
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,48px);
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:clamp(8px,1.5vw,16px);
  line-height:1.15
}
.section-subtitle{
  color:var(--muted);
  font-size:clamp(15px,1.2vw,18px);
  max-width:620px;
  margin-bottom:clamp(32px,5vw,60px);
  line-height:1.55
}
.section-center{text-align:center}
.section-center .section-subtitle{margin-left:auto;margin-right:auto}
.label-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
  font-weight:600
}
.label-tag::before{
  content:'';
  width:4px;height:4px;
  border-radius:50%;
  background:currentColor;
  display:block
}

/* ─── DIVIDER ─── */
.divider{
  width:60px;height:2px;
  background:var(--accent);
  margin:clamp(20px,3vw,32px) 0;
  border-radius:1px
}
.divider.center{margin-left:auto;margin-right:auto}

/* ─── ORDER BADGE ─── */
.order-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;letter-spacing:.02em;
  padding:3px 10px;border-radius:100px;margin-left:8px;
  font-family:var(--font-body);vertical-align:middle;
  transition:all .3s;line-height:1.2
}
.order-badge.on{background:oklch(55% 0.15 145 / 0.15);color:oklch(50% 0.15 145)}
.order-badge.off{background:oklch(45% 0.12 30 / 0.15);color:oklch(55% 0.12 30)}
.order-badge .ob-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.order-badge.on .ob-dot{background:oklch(50% 0.15 145)}
.order-badge.off .ob-dot{background:oklch(55% 0.12 30)}
@media(max-width:768px){
  .order-badge{font-size:9px;padding:2px 8px;margin-left:0;margin-top:4px;display:inline-block}
  .nav-logo{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
}

/* ─── NAVIGATION ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:var(--bg);
  backdrop-filter:blur(20px) saturate(200%);
  -webkit-backdrop-filter:blur(20px) saturate(200%);
  border-bottom:1px solid var(--border);
  transition:transform var(--duration-normal) var(--ease-out),
             background var(--duration-slow),
             border-color var(--duration-slow)
}
/* ─── Holographic grid background ─── */
.nav::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 40px, color-mix(in oklch,var(--accent) 3%,transparent) 40px, color-mix(in oklch,var(--accent) 3%,transparent) 41px),
    repeating-linear-gradient(0deg, transparent, transparent 40px, color-mix(in oklch,var(--accent) 2%,transparent) 40px, color-mix(in oklch,var(--accent) 2%,transparent) 41px);
  opacity:0;
  transition:opacity 1s;
  animation:nav-grid-drift 24s linear infinite
}
.nav:hover::before,.nav.scrolled::before{opacity:1}
@keyframes nav-grid-drift{
  0%{transform:translate(0,0)}
  50%{transform:translate(-20px,-10px)}
  100%{transform:translate(0,0)}
}
/* ─── Cold scan line ─── */
.nav::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 15%,oklch(85% 0.06 210) 50%,var(--accent) 85%,transparent 100%);
  opacity:0;transition:opacity .6s;
  background-size:200% 100%;
  animation:nav-scan 3s ease-in-out infinite
}
@keyframes nav-scan{
  0%{background-position:-200% 0;opacity:0}
  30%{opacity:.8}70%{opacity:.8}
  100%{background-position:200% 0;opacity:0}
}
.nav:hover::after,.nav.scrolled::after{opacity:1}
.nav.scrolled{
  background:color-mix(in oklch,var(--bg) 98%,var(--accent) 2%);
  box-shadow:0 0 30px color-mix(in oklch,var(--accent) 6%,transparent),0 4px 20px rgba(0,0,0,.06)
}
.nav.hidden{transform:translateY(-100%)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;max-width:var(--max-w-wide);margin:0 auto;padding:0 var(--gutter)
}
.nav-logo{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;
  letter-spacing:-.02em;
  display:flex;align-items:center;gap:8px
}
.nav-logo-mark{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  display:block;
  position:relative;
  animation:pulse-dot 3s ease-in-out infinite;
  box-shadow:0 0 12px var(--accent),0 0 0 oklch(85% 0.06 210 / 0.5)
}
.nav-logo-mark::before{
  content:'';position:absolute;inset:-5px;
  border-radius:50%;
  border:1px solid color-mix(in oklch,var(--accent) 60%,transparent);
  opacity:0;animation:logo-ring 3s ease-in-out infinite
}
.nav-logo-mark::after{
  content:'';position:absolute;inset:-12px;
  border-radius:50%;
  border:1px solid color-mix(in oklch,var(--accent) 20%,transparent);
  opacity:0;animation:logo-outer-ring 3s ease-in-out infinite 1.5s
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 12px #FF4400,0 0 0 #FF440066}
  33%{box-shadow:0 0 20px #FF4400,0 0 8px #FF8800}
  66%{box-shadow:0 0 8px #FF4400,0 0 0 #FF440066}
  50%{opacity:.7;transform:scale(1.5)}
}
@keyframes logo-ring{
  0%{opacity:0;transform:scale(1)}50%{opacity:.6;transform:scale(1.8)}100%{opacity:0;transform:scale(2.5)}
}
@keyframes logo-outer-ring{
  0%{opacity:0;transform:scale(1)}50%{opacity:.3;transform:scale(1.4)}100%{opacity:0;transform:scale(1.8)}
}
.nav-links{display:flex;gap:clamp(2px,0.3vw,5px);align-items:center}
.nav-links a{
  font-size:14px;
  color:var(--fg-secondary);
  transition:color var(--duration-fast),text-shadow var(--duration-fast);
  letter-spacing:.02em;
  padding:6px 6px;
  border-radius:var(--radius-sm);
  position:relative;
  font-weight:450
}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:50%;right:50%;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in oklch,var(--accent) 0%,transparent),var(--accent),color-mix(in oklch,var(--accent) 0%,transparent));
  transition:left .3s var(--ease-out),right .3s var(--ease-out),opacity .3s;
  opacity:0;
  filter:blur(0.5px)
}
.nav-links a:hover::after{
  left:4px;right:4px;opacity:.5
}
.nav-links a:hover{
  color:var(--fg);
  text-shadow:0 0 24px color-mix(in oklch,var(--accent) 25%,transparent),0 0 48px color-mix(in oklch,var(--accent) 10%,transparent)
}
[data-theme="dark"] .nav-links a{color:var(--fg)}
[data-theme="dark"] .nav-dropdown-trigger{color:var(--fg)}
[data-theme="dark"] .nav-dropdown-menu a{color:var(--fg-secondary)}
[data-theme="dark"] .nav-mega-menu a{color:var(--fg-secondary)}
.nav-links a.active{
  color:var(--accent);
  text-shadow:0 0 24px color-mix(in oklch,var(--accent) 40%,transparent),0 0 60px color-mix(in oklch,var(--accent) 15%,transparent)
}
.nav-links a.active::after{
  left:4px;right:4px;opacity:.8
}
.nav-links a.nav-cta{
  background:linear-gradient(135deg,var(--accent),color-mix(in oklch,var(--accent) 70%,oklch(75% 0.06 210)));
  color:#fff!important;
  padding:6px 18px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:500;
  transition:transform var(--duration-fast),box-shadow var(--duration-fast);
  position:relative;overflow:hidden
}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in oklch,#fff 15%,transparent),transparent);
  transform:translateX(-100%);
  animation:cta-shimmer 4s ease-in-out infinite
}
@keyframes cta-shimmer{
  0%,70%,100%{transform:translateX(-100%)}
  30%{transform:translateX(100%)}
}
.nav-links a.nav-cta:hover{
  background:var(--accent-hover);
  transform:translateY(-1px);
  box-shadow:0 0 20px color-mix(in oklch,var(--accent) 25%,transparent)
}
/* Dropdown menu */
.nav-dropdown{position:relative;padding-bottom:8px;margin-bottom:-8px}
.nav-dropdown-trigger{
  display:flex;align-items:center;gap:4px;
  cursor:pointer;
  font-size:15px;color:var(--fg-secondary);
  padding:6px 6px;border-radius:var(--radius-sm);
  border:none;background:none;
  font-weight:450;font-family:inherit;
  position:relative;
  transition:color var(--duration-fast),text-shadow var(--duration-fast)
}
.nav-dropdown-trigger::after{
  content:'';position:absolute;bottom:-2px;left:50%;right:50%;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:left .3s var(--ease-out),right .3s var(--ease-out),opacity .3s;
  filter:blur(0.5px)
}
.nav-dropdown:hover .nav-dropdown-trigger::after{
  left:4px;right:4px;opacity:.5
}
.nav-dropdown-trigger:hover{
  color:var(--fg);
  text-shadow:0 0 24px color-mix(in oklch,var(--accent) 25%,transparent)
}
.nav-dropdown-trigger svg{width:14px;height:14px;transition:transform .3s var(--ease-out)}

/* ─── Desktop-only dropdown hover behavior ─── */
@media(min-width:901px){
.nav-dropdown:hover .nav-dropdown-trigger svg{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% - 8px);left:50%;transform:translateX(-50%) translateY(12px) scale(.96);
  background:color-mix(in oklch,var(--surface) 98%,var(--accent) 2%);
  border:1px solid color-mix(in oklch,var(--border) 70%,var(--accent) 30%);
  border-radius:var(--radius-md);
  padding:8px;min-width:360px;
  opacity:0;pointer-events:none;
  transform-origin:top center;
  transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s .25s,box-shadow .25s;
  box-shadow:0 0 0 color-mix(in oklch,var(--accent) 0%,transparent),var(--shadow-lg);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  max-width:calc(100vw - 32px);
  visibility:hidden;
  border-top:1px solid color-mix(in oklch,var(--accent) 40%,transparent)
}
.nav-dropdown:hover .nav-dropdown-menu{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(4px) scale(1);
  transition:opacity .12s var(--ease-out),transform .2s var(--ease-out);
  visibility:visible;
  box-shadow:0 0 40px color-mix(in oklch,var(--accent) 8%,transparent),var(--shadow-lg)
}
.nav-dropdown-menu a{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);
  font-size:15px;color:var(--fg-secondary);
  transition:all .25s var(--ease-out);
  white-space:nowrap;
  position:relative;
  overflow:hidden
}
.nav-dropdown-menu a::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:linear-gradient(to bottom,var(--accent),color-mix(in oklch,var(--accent) 60%,transparent));
  transform:scaleY(0);transition:transform .25s var(--ease-out);
  border-radius:0 2px 2px 0
}
.nav-dropdown-menu a:hover{
  background:color-mix(in oklch,var(--accent) 4%,var(--surface));
  color:var(--fg);
  padding-left:18px
}
.nav-dropdown-menu a:hover::before{
  transform:scaleY(1)
}
.nav-dropdown-menu a .dd-icon{
  width:5px;height:5px;
  border-radius:50%;
  background:color-mix(in oklch,var(--accent) 70%,transparent);
  flex-shrink:0;
  transition:transform .25s var(--ease-out),box-shadow .25s,background .25s
}
.nav-dropdown-menu a:hover .dd-icon{
  transform:scale(1.8);
  background:var(--accent);
  box-shadow:0 0 10px var(--accent)
}
@keyframes dd-item-in{
  from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}
}
.nav-dropdown-menu a:nth-child(1){animation:dd-item-in .2s var(--ease-out) both;animation-delay:0s}
.nav-dropdown-menu a:nth-child(2){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.02s}
.nav-dropdown-menu a:nth-child(3){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.04s}
.nav-dropdown-menu a:nth-child(4){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.06s}
.nav-dropdown-menu a:nth-child(5){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.08s}
.nav-dropdown-menu a:nth-child(6){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.10s}
.nav-dropdown-menu a:nth-child(7){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.12s}
.nav-dropdown-menu a:nth-child(8){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.14s}
.nav-dropdown-menu a:nth-child(9){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.16s}
.nav-dropdown-menu a:nth-child(10){animation:dd-item-in .2s var(--ease-out) both;animation-delay:.18s}
}

/* ─── Mega menu (desktop only) ─── */
@media(min-width:901px){
.nav-mega{position:relative}
.nav-mega-menu{
  position:absolute !important;
  top:calc(100% - 8px) !important;
  left:0 !important;
  transform:translateY(12px) scale(.96) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:8px !important;
  min-width:360px !important;
  max-width:440px !important;
  opacity:0;pointer-events:none;
  transform-origin:top left;
  transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s .25s,box-shadow .25s;
  visibility:hidden;
  background:color-mix(in oklch,var(--surface) 98%,var(--accent) 2%);
  border:1px solid color-mix(in oklch,var(--border) 70%,var(--accent) 30%);
  border-radius:var(--radius-md);
  border-top:1px solid color-mix(in oklch,var(--accent) 40%,transparent)
}
.nav-mega:hover .nav-mega-menu{
  opacity:1;pointer-events:auto;
  transform:translateY(4px) scale(1) !important;
  transition:opacity .12s var(--ease-out),transform .2s var(--ease-out);
  visibility:visible;
  box-shadow:0 0 40px color-mix(in oklch,var(--accent) 8%,transparent),var(--shadow-lg)
}
.nav-mega-menu a{
  white-space:normal !important;
  padding:8px 14px !important;
  border-radius:var(--radius-sm);
  font-size:15px;color:var(--fg-secondary);
  transition:all .2s var(--ease-out);
  position:relative;overflow:hidden
}
.nav-mega-menu a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);
  transform:scaleY(0);transition:transform .2s var(--ease-out);
  border-radius:0 2px 2px 0
}
.nav-mega-menu a:hover{
  background:color-mix(in oklch,var(--accent) 4%,var(--surface));
  color:var(--fg);
  padding-left:18px !important
}
.nav-mega-menu a:hover::before{
  transform:scaleY(1)
}
@keyframes mm-item-in{
  from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}
}
.nav-mega-menu a:nth-child(1){animation:mm-item-in .25s var(--ease-out) both;animation-delay:0s}
.nav-mega-menu a:nth-child(2){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.02s}
.nav-mega-menu a:nth-child(3){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.04s}
.nav-mega-menu a:nth-child(4){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.06s}
.nav-mega-menu a:nth-child(5){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.08s}
.nav-mega-menu a:nth-child(6){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.10s}
.nav-mega-menu a:nth-child(7){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.12s}
.nav-mega-menu a:nth-child(8){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.14s}
.nav-mega-menu a:nth-child(9){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.16s}
.nav-mega-menu a:nth-child(10){animation:mm-item-in .25s var(--ease-out) both;animation-delay:.18s}
}

/* Phone in nav-right */
.nav-phone{
  font-size:14px;font-weight:500;color:var(--fg-secondary)!important;
  letter-spacing:-0.01em;white-space:nowrap;
  transition:color var(--duration-fast),text-shadow var(--duration-fast);
  position:relative
}
.nav-phone:hover{
  color:var(--accent)!important;
  text-shadow:0 0 16px color-mix(in oklch,var(--accent) 25%,transparent)
}
.nav-phone svg{color:var(--accent);vertical-align:middle;margin-right:4px}

/* Logo update */
.nav-logo-text{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-0.01em;line-height:1.1}
.nav-logo-text small{font-size:11px;font-weight:400;letter-spacing:0.04em;opacity:0.7}
.nav-logo-sub{display:block;font-size:9px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-top:-1px;line-height:1.2;white-space:nowrap}

/* ─── Burger button base (MUST be before the mobile nav media query) ─── */
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:none;padding:8px;
  position:relative;transition:transform .2s
}
.nav-burger:hover{transform:scale(1.08)}
.nav-burger:active{transform:scale(.92)}
.nav-burger span{
  display:block;width:24px;height:2px;
  background:var(--fg);border-radius:2px;
  transition:all .25s var(--ease-in-out);
  transform-origin:center
}
.nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── Mobile nav — simple slide-down panel ─── */
@media(max-width:900px){
  .nav-mega-menu{min-width:auto!important;max-width:none!important;flex-direction:column!important;padding:0!important}

  .nav-links,.nav-right .theme-toggle,.nav-phone{display:none}
  .nav-links.open{display:flex}
  .nav-links{
    position:fixed;
    top:var(--nav-h);
    left:0;right:0;
    bottom:0;
    z-index:99;
    background:color-mix(in oklch,var(--bg) 98%,var(--accent) 2%);
    flex-direction:column;
    padding:8px 0 24px;
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:0 0 30px color-mix(in oklch,var(--accent) 6%,transparent),inset 0 1px 0 color-mix(in oklch,var(--accent) 20%,transparent);
    animation:mobile-nav-in .35s var(--ease-out) both
  }
  @keyframes mobile-nav-in{
    from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}
  }

  .nav-links a,.nav-links .nav-dropdown-trigger{
    padding:14px var(--gutter);
    font-size:15px;font-weight:600;color:var(--fg);
    width:100%;text-align:left;
    font-family:var(--font-display);
    border:none;background:none;
    display:flex;align-items:center;gap:10px;
    cursor:pointer;
    transition:background .2s var(--ease-out),color .15s,padding-left .2s;
    position:relative
  }
  .nav-links a::after{
    content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--accent);
    transform:scaleY(0);transition:transform .2s var(--ease-out);
    border-radius:0 2px 2px 0
  }
  .nav-links a:hover::after,.nav-links .nav-dropdown-trigger:hover::after{
    transform:scaleY(1)
  }
  .nav-links a:hover,.nav-links .nav-dropdown-trigger:hover{
    background:color-mix(in oklch,var(--accent) 4%,var(--bg));
    color:var(--accent);
    padding-left:calc(var(--gutter) + 4px)
  }
  .nav-links a.active{
    background:color-mix(in oklab,var(--accent),transparent 92%);
    color:var(--accent)
  }

  /* Dropdown trigger */
  .nav-links .nav-dropdown-trigger{
    justify-content:space-between
  }
  .nav-links .nav-dropdown-trigger svg{
    width:16px;height:16px;flex-shrink:0;
    transition:transform .3s var(--ease-out);
    color:var(--muted)
  }
  .nav-links .nav-dropdown.open > .nav-dropdown-trigger svg{
    transform:rotate(180deg);color:var(--accent)
  }

  /* Dropdown menu — fold animation */
  .nav-links .nav-dropdown-menu{
    display:grid!important;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s var(--ease-out);
    opacity:0;pointer-events:none;
    position:static;box-shadow:none;border:none;
    padding:0;margin:0;min-width:auto;width:100%
  }
  .nav-links .nav-dropdown.open .nav-dropdown-menu{
    grid-template-rows:1fr;
    opacity:1;pointer-events:auto
  }
  .nav-links .nav-dropdown-menu > *{min-height:0;overflow:hidden}
  .nav-links .nav-dropdown-menu a{
    padding:10px var(--gutter) 10px calc(var(--gutter) + 20px);
    font-size:14px;white-space:normal;
    border-left:2px solid var(--border-light);
    margin:0 16px 0 var(--gutter);
    border-radius:0;font-weight:500;
    transition:all .2s var(--ease-out),border-left-color .2s
  }
  .nav-links .nav-dropdown-menu a:last-child{margin-bottom:6px}
  .nav-links .nav-dropdown-menu a:hover{
    border-left-color:var(--accent);
    padding-left:calc(var(--gutter) + 24px);
    background:color-mix(in oklch,var(--accent) 3%,var(--bg))
  }

  /* Burger always visible on mobile */
  .nav-burger{display:flex;z-index:101;position:relative}
  .nav-right{gap:4px}
}

.nav-right{display:flex;align-items:center;gap:8px}
.theme-toggle{
  width:34px;height:34px;
  border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--duration-fast);
  font-size:14px;color:var(--fg-secondary);
  cursor:pointer;
  position:relative;overflow:hidden
}
.theme-toggle::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at center,var(--accent) 0%,transparent 70%);
  opacity:0;transition:opacity .3s;
  transform:scale(0);transition:transform .3s var(--ease-out),opacity .3s
}
.theme-toggle:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light)
}
.theme-toggle:hover::before{
  opacity:.12;transform:scale(1.5)
}
.theme-toggle:active{transform:scale(.92)}

/* ─── SCROLL TOP BUTTON ─── */
.scroll-top{
  position:fixed;bottom:32px;right:32px;z-index:999;
  width:48px;height:48px;
  border-radius:var(--radius-full);
  background:var(--accent);
  color:#fff;
  border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;
  transform:translateY(20px);
  transition:all .3s var(--ease-out);
  font-size:18px
}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.scroll-top:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg)
}
.scroll-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 32px;
  font-size:15px;font-weight:500;
  border-radius:var(--radius-sm);
  border:none;cursor:pointer;
  transition:all .25s var(--ease-out);
  font-family:var(--font-body);
  text-decoration:none;
  line-height:1;
  white-space:nowrap
}
.btn-primary{
  background:var(--accent);color:#fff
}
.btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:0 4px 20px var(--accent-glow)
}
.btn-secondary{
  background:transparent;color:var(--fg);
  border:1.5px solid var(--border)
}
.btn-secondary:hover{
  background:var(--bg-alt);
  border-color:var(--muted);
  transform:translateY(-1px)
}
.btn-ghost{
  background:transparent;color:var(--muted);
  border:none;padding:8px 16px
}
.btn-ghost:hover{color:var(--fg);background:var(--bg-alt)}
.btn-lg{padding:18px 40px;font-size:16px}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-accent-light{
  background:var(--accent-light);color:var(--accent);
  border:none
}
.btn-accent-light:hover{
  background:color-mix(in oklch,var(--accent-light) 80%,var(--accent));
  color:var(--accent)
}

/* ─── ANIMATIONS ─── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes rotate-slow{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes reveal-mask{
  0%{clip-path:inset(0 100% 0 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 10px var(--accent-glow)}
  50%{box-shadow:0 0 30px var(--accent-glow),0 0 60px var(--accent-glow)}
}
@keyframes typewriter{
  from{width:0}
  to{width:100%}
}
@keyframes blink-caret{
  50%{border-color:transparent}
}
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes morph-blob{
  0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}
  50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}
  100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}
}

/* ─── REVEAL ON SCROLL ─── */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:all .7s var(--ease-out)
}
.reveal.visible{
  opacity:1;transform:translateY(0)
}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

/* ─── PARALLAX LAYER ─── */
.parallax-layer{
  position:absolute;inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0
}
.parallax-layer > *{
  will-change:transform;
  transition:transform .1s linear
}

/* ─── GLASS / FROST ─── */
.glass{
  background:color-mix(in oklch,var(--surface) 70%,transparent);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--border)
}

/* ─── HERO SECTION ─── */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 75px) 0 80px;
  position:relative;
  overflow:visible
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden
}
.hero-bg-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  opacity:0;
  animation:hero-canvas-in 1s ease 0.3s forwards
}
@keyframes hero-canvas-in{
  to{opacity:1}
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
  position:relative;z-index:1
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;
  border:1px solid var(--border);padding:6px 16px;border-radius:100px;
  font-weight:500;font-family:var(--font-mono)
}
.hero-badge span{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);display:block;
  box-shadow:0 0 8px var(--accent);
  animation:pulse-dot 2s ease-in-out infinite
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(32px,4.5vw,58px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.025em;
  margin-bottom:16px
}
.hero h1 .line-reveal{
  display:block;overflow:hidden
}
.hero h1 .line-reveal span{
  display:block;
  animation:reveal-mask .8s var(--ease-out) forwards
}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
.hero-sub{
  font-size:clamp(16px,1.3vw,20px);
  color:var(--fg-secondary);
  max-width:540px;
  line-height:1.55;
  margin-bottom:8px
}
.hero-meta{
  display:flex;gap:clamp(16px,3vw,36px);flex-wrap:wrap;
  margin-bottom:18px;
  padding:12px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.hero-meta-item{
  display:flex;flex-direction:column;gap:2px
}
.hero-meta-item .hm-number{
  font-family:var(--font-display);
  font-size:18px;font-weight:600
}
.hero-meta-item .hm-label{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:500
}
.hero-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px
}
/* ─── HERO VISUAL — ENHANCED 3D STAGE ─── */
.hero-visual{
  position:relative;
  perspective:1200px;
  transform-style:preserve-3d
}
.hero-visual-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  max-height:540px;
  transform-style:preserve-3d;
  transition:transform .1s ease-out;
  will-change:transform
}

/* ── Morphing liquid blobs ── */
.hvs-blobs{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;border-radius:var(--radius-lg);
  pointer-events:none
}
.hvs-blob{
  position:absolute;
  width:80%;height:80%;
  top:10%;left:10%;
  border-radius:50%;
  background:radial-gradient(circle at 40% 50%,color-mix(in oklch,var(--accent) 16%,transparent) 0%,transparent 70%);
  animation:hvs-blob-morph 12s ease-in-out infinite;
  animation-delay:var(--delay,0s);
  opacity:.5;
  filter:blur(40px);
  will-change:transform,border-radius
}
.hvs-blob:nth-child(2){
  width:60%;height:60%;
  top:30%;left:25%;
  background:radial-gradient(circle at 60% 40%,color-mix(in oklch,var(--gold) 10%,transparent) 0%,transparent 70%);
  animation-duration:15s
}
.hvs-blob:nth-child(3){
  width:50%;height:50%;
  top:20%;left:45%;
  background:radial-gradient(circle at 30% 60%,color-mix(in oklch,var(--accent) 8%,transparent) 0%,transparent 70%);
  animation-duration:18s
}
@keyframes hvs-blob-morph{
  0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:translate(0,0) scale(1)}
  25%{border-radius:50% 60% 40% 30%/40% 60% 50% 50%;transform:translate(12px,-18px) scale(1.06)}
  50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:translate(-10px,12px) scale(0.94)}
  75%{border-radius:70% 30% 50% 50%/60% 40% 60% 40%;transform:translate(14px,6px) scale(1.03)}
}

/* ── Perspective drift grid ── */
.hvs-grid-3d{
  position:absolute;inset:0;z-index:1;
  overflow:hidden;pointer-events:none;
  border-radius:var(--radius-lg);
  opacity:0.06
}
.hvs-grid-3d::before{
  content:'';position:absolute;inset:-100%;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:36px 36px;
  animation:hvs-grid-drift 24s linear infinite;
  transform:perspective(600px) rotateX(4deg) translateY(-25%)
}
@keyframes hvs-grid-drift{
  to{transform:perspective(600px) rotateX(4deg) translateY(75%)}
}

/* ── Orbiting rings ── */
.hvs-orbits{
  position:absolute;inset:0;z-index:2;
  pointer-events:none
}
.hvs-orbit{
  position:absolute;
  top:50%;left:50%;
  width:var(--orbit-size,120%);height:var(--orbit-size,120%);
  transform:translate(-50%,-50%) rotateX(var(--orbit-tilt,0deg));
  transform-style:preserve-3d;
  animation:hvs-orbit-rotate var(--orbit-speed,20s) linear infinite
}
.hvs-orbit::before{
  content:'';position:absolute;inset:0;
  border:1px solid var(--accent);
  border-radius:50%;
  opacity:.08
}
@keyframes hvs-orbit-rotate{
  to{transform:translate(-50%,-50%) rotateX(var(--orbit-tilt,0deg)) rotateY(360deg)}
}
.hvs-orbit-dot{
  position:absolute;
  top:-5px;left:50%;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--accent);
  margin-left:-5px;
  opacity:0;
  animation:hvs-orbit-dot-pulse 5s ease-in-out infinite;
  animation-delay:var(--dot-delay,0s);
  box-shadow:0 0 14px var(--accent-glow),0 0 30px var(--accent-glow)
}
@keyframes hvs-orbit-dot-pulse{
  0%,100%{opacity:0;transform:scale(.4)}
  20%{opacity:1;transform:scale(1)}
  50%{opacity:.2;transform:scale(.6)}
}

/* ── Floating geometric crystals ── */
.hvs-crystal{
  position:absolute;
  left:var(--cx);top:var(--cy);
  width:var(--csize,30px);height:var(--csize,30px);
  z-index:3;
  animation:hvs-crystal-float var(--cspeed,14s) ease-in-out infinite;
  animation-delay:var(--cdelay,0s);
  pointer-events:none
}
.hvs-crystal::before{
  content:'';display:block;width:100%;height:100%;
  border:2px solid var(--gold);
  border-radius:3px;
  transform:rotate(45deg) scale(.7);
  opacity:.25;
  animation:hvs-crystal-spin 20s linear infinite
}
@keyframes hvs-crystal-float{
  0%,100%{transform:translateY(0) translateX(0) rotate(0deg)}
  25%{transform:translateY(-22px) translateX(8px) rotate(5deg)}
  50%{transform:translateY(-8px) translateX(-6px) rotate(-3deg)}
  75%{transform:translateY(-16px) translateX(10px) rotate(2deg)}
}
@keyframes hvs-crystal-spin{
  to{transform:rotate(405deg) scale(.7)}
}

/* ── Main card — animated gradient border ── */
.hvs-card{
  position:absolute;
  left:5%;top:5%;
  width:58%;height:72%;
  transform-style:preserve-3d;
  z-index:5;
  transition:transform .15s ease-out;
  will-change:transform
}
.hvs-card-border{
  position:absolute;inset:-2px;
  border-radius:calc(var(--radius-md) + 2px);
  z-index:0;
  background:conic-gradient(
    from 0deg at 50% 50%,
    var(--accent),
    var(--gold),
    var(--accent),
    transparent 30%,
    transparent 70%,
    var(--accent),
    var(--gold),
    var(--accent)
  );
  animation:hvs-border-spin 12s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  padding:2px;
  opacity:.6;
  transition:opacity .3s
}
.hvs-card:hover .hvs-card-border{
  opacity:1;
  animation-duration:2s
}
@keyframes hvs-border-spin{
  to{transform:rotate(360deg)}
}
.hvs-card-inner{
  position:relative;
  width:100%;height:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-alt);
  transform:translateZ(15px);
  z-index:1
}
.hvs-card-inner::before{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 60px color-mix(in oklch,var(--fg) 12%,transparent);
  z-index:2;pointer-events:none
}
.hvs-img-depth{
  position:absolute;inset:-8px;
  overflow:hidden;
  border-radius:var(--radius-md)
}
.hvs-card-inner img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(.2) contrast(1.05);
  transition:opacity .6s var(--ease-out),transform .8s cubic-bezier(.23,1,.32,1),filter .6s;
  opacity:1;
  will-change:transform
}
.hvs-card-inner img.fade-out{
  opacity:0
}
.hvs-card:hover .hvs-card-inner img{
  filter:grayscale(0) contrast(1.1)
}
.hvs-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,color-mix(in oklch,var(--fg) 55%,transparent) 100%);
  pointer-events:none;z-index:2
}

/* ── Enhanced scanline sweep ── */
.hvs-scanline{
  position:absolute;inset:0;
  pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent 0,color-mix(in oklch,var(--accent) 6%,transparent) 50%,transparent 100%);
  background-size:100% 300%;
  animation:hvs-scan 2.5s ease-in-out infinite;
  opacity:.4
}
@keyframes hvs-scan{
  0%{background-position:0 -100%}
  100%{background-position:0 200%}
}

/* ── Light rays volumetric effect ── */
.hvs-lightrays{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:var(--radius-lg);
  opacity:.12;
  mix-blend-mode:overlay
}
.hvs-ray{
  position:absolute;
  top:-20%;left:var(--rx,10%);
  width:var(--rw,2px);
  height:140%;
  background:linear-gradient(180deg,transparent,var(--accent) 30%,var(--accent) 60%,transparent);
  transform:rotate(var(--rdeg,8deg)) translateY(var(--ry,0));
  animation:hvs-ray-sweep var(--rdur,8s) ease-in-out infinite;
  animation-delay:var(--rdel,0s);
  border-radius:1px
}
@keyframes hvs-ray-sweep{
  0%,100%{opacity:0;transform:rotate(var(--rdeg,8deg)) translateY(-20%) scaleY(.6)}
  30%{opacity:1;transform:rotate(var(--rdeg,8deg)) translateY(0) scaleY(1)}
  70%{opacity:1}
  100%{opacity:0;transform:rotate(var(--rdeg,8deg)) translateY(20%) scaleY(.6)}
}

/* ── Card image info overlay ── */
.hvs-card-info{
  position:absolute;
  bottom:12px;left:12px;
  display:flex;gap:6px;align-items:center;
  z-index:4;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)
}
.hvs-card:hover .hvs-card-info{
  opacity:1;
  transform:translateY(0)
}
.hvs-card-tag{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:color-mix(in oklch,var(--fg) 55%,transparent);
  backdrop-filter:blur(4px);
  padding:4px 10px;
  border-radius:100px;
  font-weight:500;
  transition:background .3s;
  white-space:nowrap
}
.hvs-card-label{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:color-mix(in oklch,var(--accent) 55%,transparent);
  backdrop-filter:blur(4px);
  padding:4px 10px;
  border-radius:100px;
  font-weight:500;
  white-space:nowrap
}

/* ── Card nav dots ── */
.hvs-card-nav{
  position:absolute;
  bottom:12px;right:12px;
  display:flex;gap:6px;
  z-index:4
}
.hvs-card-nav-btn{
  width:8px;height:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:all .25s var(--ease-out);
  position:relative
}
.hvs-card-nav-btn:hover{
  border-color:#fff;
  transform:scale(1.3)
}
.hvs-card-nav-btn.active{
  background:#fff;
  border-color:#fff;
  transform:scale(1.3);
  box-shadow:0 0 8px rgba(255,255,255,.4)
}
.hvs-card-nav-btn::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%
}

/* ── Floating image label ── */
.hvs-float-label{
  position:absolute;
  bottom:6px;left:6px;
  font-family:var(--font-mono);
  font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;
  background:color-mix(in oklch,var(--fg) 45%,transparent);
  backdrop-filter:blur(4px);
  padding:2px 6px;
  border-radius:4px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
  pointer-events:none;
  white-space:nowrap
}
.hvs-float-item:hover .hvs-float-label{
  opacity:1;
  transform:translateY(0)
}

/* ── Floating secondary images ── */
.hvs-float-wrap{
  position:absolute;
  left:var(--fx);top:var(--fy);
  z-index:4;
  animation:hvs-float 6s ease-in-out infinite;
  animation-delay:var(--fd);
  transition:transform .15s ease-out;
  will-change:transform
}
.hvs-float-item{
  width:clamp(90px,12vw,160px);
  aspect-ratio:4/3;
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:0 4px 20px color-mix(in oklch,var(--fg) 8%,transparent),
             0 0 0 1px var(--border);
  transition:transform .1s ease-out,box-shadow .3s;
  will-change:transform
}
.hvs-float-img-inner{
  position:absolute;inset:-6px;
  overflow:hidden;
  border-radius:var(--radius-sm)
}
.hvs-float-img-inner img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.2);
  transition:filter .4s;
  will-change:transform
}
.hvs-float-item:hover{
  box-shadow:0 8px 30px color-mix(in oklch,var(--accent) 10%,transparent);
  z-index:6
}
.hvs-float-item:hover img{
  filter:grayscale(0)
}
@keyframes hvs-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

/* ── Floating badges ── */
.hvs-badge{
  position:absolute;
  left:var(--bx);top:var(--by);
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
  padding:5px 12px;
  background:color-mix(in oklch,var(--surface) 80%,transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:100px;
  z-index:4;pointer-events:none;
  animation:hvs-badge-float 4s ease-in-out infinite;
  animation-delay:var(--bd);
  transition:color .4s,border-color .4s,background .4s;
  white-space:nowrap
}
.hvs-badge-dot{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--dot-bg,var(--accent));
  display:block;
  animation:hvs-badge-pulse 2s ease-in-out infinite
}
@keyframes hvs-badge-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.6)}
}
@keyframes hvs-badge-float{
  0%,100%{transform:translateY(0) translateX(0)}
  25%{transform:translateY(-8px) translateX(2px)}
  75%{transform:translateY(4px) translateX(-2px)}
}

/* ── Glow corner accents ── */
.hvs-corner{
  position:absolute;
  width:60px;height:60px;
  z-index:6;pointer-events:none;
  opacity:0;
  transition:opacity .6s
}
.hvs-corner-tl{top:-10px;left:-10px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);border-radius:4px 0 0 0}
.hvs-corner-br{bottom:-10px;right:-10px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);border-radius:0 0 4px 0}
.hero-visual-stage:hover .hvs-corner{opacity:.8}
.hvs-corner::after{
  content:'';position:absolute;
  width:30px;height:30px;
  background:radial-gradient(circle,color-mix(in oklch,var(--accent) 20%,transparent) 0%,transparent 70%);
  animation:hvs-corner-glow 3s ease-in-out infinite
}
.hvs-corner-tl::after{top:-5px;left:-5px}
.hvs-corner-br::after{bottom:-5px;right:-5px;animation-delay:-1.5s}
@keyframes hvs-corner-glow{
  0%,100%{opacity:.3;transform:scale(1)}
  50%{opacity:.8;transform:scale(1.5)}
}

/* ── Hero particle canvas ── */
.hvs-particles{
  position:absolute;
  left:-30px;top:-30px;right:-30px;bottom:-30px;
  z-index:4;
  pointer-events:none;
  overflow:visible
}

/* ── Responsive ── */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{
    max-width:500px;margin:32px auto 0;
    order:-1
  }
  .hero-visual-stage{aspect-ratio:4/5;max-height:420px}
}
@media(max-width:600px){
  .hero-visual-stage{aspect-ratio:4/5;max-height:400px}
  .hvs-card{width:62%;left:3%;top:3%;height:68%}
  .hvs-float-item{width:clamp(70px,18vw,110px)}
  .hvs-badge{font-size:8px;padding:3px 8px}
  .hvs-corner{width:40px;height:40px}
  .hvs-float-wrap:nth-child(n+10){display:none}
  .hvs-card-info{opacity:1;transform:translateY(0)}
  .hvs-card-nav-btn{width:6px;height:6px}
}
@media(max-width:480px){
  .hero-visual-stage{aspect-ratio:3/4;max-height:320px}
  .hvs-card{width:65%;left:2%;top:2%;height:65%}
  .hvs-meta{gap:16px}
  .hvs-float-wrap:nth-child(n+8){display:none}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .hvs-blob,.hvs-grid-3d,.hvs-orbit,.hvs-crystal,.hvs-card-border,
  .hvs-scanline,.hvs-float-wrap,.hvs-badge,.hvs-corner::after,
  .hvs-ray,.hvs-particles{animation:none!important}
  .hero-visual-stage{transform:none!important}
  .hvs-card{transform:none!important}
  .hvs-card-border{opacity:.3}
  .hvs-scanline{display:none}
  .hvs-particles{display:none}
  .hvs-lightrays{display:none}
  .hvs-crystal::before{animation:none;transform:rotate(45deg) scale(.7)}
}
.hero-visual-item{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  background:var(--border);
  transition:transform .4s var(--ease-out)
}
.hero-visual-item:hover{transform:scale(1.02)}
.hero-visual-item:first-child{
  grid-column:1/3;grid-row:1/3
}
.hero-visual-item:nth-child(2){grid-column:1/2;grid-row:3/4}
.hero-visual-item:nth-child(3){grid-column:2/3;grid-row:3/4}
.hero-visual-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hero-visual-item:hover img{transform:scale(1.08)}
.hero-visual-item .vis-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-light),var(--gold-light));
  color:var(--muted);font-size:clamp(28px,4vw,48px)
}
.hero-visual-item:nth-child(2) .vis-placeholder,
.hero-visual-item:nth-child(3) .vis-placeholder{
  background:linear-gradient(225deg,var(--gold-light),var(--accent-light))
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{
    max-width:500px;margin:32px auto 0;
    grid-template-rows:180px 180px;
    order:-1
  }
  .hc-name-firstname .hc-char{padding-left:0}
  .hero-visual-item:first-child{grid-row:1/3}
 }
 @media(max-width:600px){
  .hc-name-surname .hc-char{font-size:clamp(22px,7vw,32px)}
  .hc-name-firstname .hc-char{font-size:clamp(26px,8vw,38px);padding-left:0}
  .hc-role-word{font-size:14px}
  }
  @media(max-width:480px){
  .hero-visual{grid-template-rows:140px 140px}
  .hero-meta{gap:16px}
  .hc-name-surname .hc-char{font-size:clamp(18px,6vw,28px);letter-spacing:.08em}
  .hc-name-firstname .hc-char{font-size:clamp(22px,7vw,32px);padding-left:0;letter-spacing:-.01em}
 }

/* ─── SERVICES GRID ─── */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(12px,2vw,24px)
}
.service-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:clamp(20px,3vw,32px);
  transition:all .3s var(--ease-out);
  position:relative;overflow:hidden;
  cursor:default
}
.service-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-light),transparent 60%);
  opacity:0;
  transition:opacity .3s
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.service-card:hover::before{opacity:1}
.service-card > *{position:relative;z-index:1}
.service-icon{
  width:48px;height:48px;
  border-radius:var(--radius-sm);
  background:var(--accent-light);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  color:var(--accent);
  font-size:22px;
  transition:all .3s
}
.service-card:hover .service-icon{
  background:var(--accent);
  color:#fff;
  transform:scale(1.05)
}
.service-card h3{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;
  margin-bottom:8px;
  line-height:1.3
}
.service-card p{
  font-size:14px;color:var(--muted);
  line-height:1.55;margin-bottom:16px
}

/* ─── PORTFOLIO ─── */
.tabs{
  display:flex;gap:4px;margin-bottom:32px;flex-wrap:wrap
}
.tab-btn{
  padding:8px 20px;
  border-radius:100px;
  border:1px solid var(--border);
  background:transparent;
  font-size:13px;cursor:pointer;color:var(--muted);
  font-family:var(--font-body);
  transition:all .2s;
  font-weight:450
}
.tab-btn:hover{border-color:var(--accent);color:var(--fg)}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(12px,2vw,24px)
}
.portfolio-item{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  transition:all .3s var(--ease-out);
  cursor:pointer;
  position:relative
}
.portfolio-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.portfolio-thumb{
  aspect-ratio:16/11;
  background:var(--border);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:zoom-in
}
.portfolio-thumb img,.filter-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1);cursor:pointer}
.portfolio-item:hover .portfolio-thumb img{transform:scale(1.1)}
.portfolio-thumb .pt-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-light),var(--gold-light));
  opacity:.6;
  transition:opacity .3s;
  pointer-events:none
}
.portfolio-item:hover .pt-bg{opacity:.8}
.portfolio-thumb .pt-label{
  position:relative;z-index:1;
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,36px);
  color:var(--accent);
  font-weight:600;
  opacity:.7
}
.portfolio-thumb .pt-number{
  position:absolute;bottom:12px;right:16px;
  font-family:var(--font-mono);
  font-size:11px;color:var(--muted);
  letter-spacing:.05em
}
.portfolio-body{padding:16px 20px 20px}
.portfolio-body .pt-tag{
  display:inline-block;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;font-weight:600
}
.portfolio-body h4{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;
  margin-bottom:4px
}
.portfolio-body p{
  font-size:13px;color:var(--muted);line-height:1.45;
  margin-bottom:12px
}

/* ─── PROCESS ─── */
.process{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(16px,3vw,32px);
  position:relative
}
.process-step{
  position:relative;padding:clamp(20px,3vw,32px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:all .3s var(--ease-out)
}
.process-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.process-step .step-num{
  font-family:var(--font-mono);
  font-size:32px;font-weight:600;
  color:var(--accent);
  opacity:.3;
  line-height:1;
  margin-bottom:12px
}
.process-step h4{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;
  margin-bottom:6px
}
.process-step p{
  font-size:13px;color:var(--muted);line-height:1.5;
  margin-bottom:12px
}
.process-step .step-icon{
  font-size:24px;margin-bottom:8px
}

/* ─── ADVANTAGES ─── */
.advantages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(12px,2vw,24px)
}
.advantage-card{
  padding:clamp(20px,3vw,32px);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  transition:all .3s var(--ease-out);
  position:relative;overflow:hidden
}
.advantage-card::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease-out)
}
.advantage-card:hover::after{transform:scaleX(1)}
.advantage-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.advantage-card .adv-icon{
  font-size:28px;margin-bottom:12px;display:block
}
.advantage-card h4{
  font-family:var(--font-display);
  font-size:17px;font-weight:600;
  margin-bottom:6px
}
.advantage-card p{
  font-size:14px;color:var(--muted);line-height:1.5
}

/* ─── CALCULATOR / FORM ─── */
.form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,48px);
  max-width:720px;margin:0 auto
}
.form-group{margin-bottom:20px}
.form-group label{
  display:block;
  font-size:13px;font-weight:500;
  margin-bottom:6px;
  color:var(--fg-secondary)
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;
  padding:12px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--fg);
  font-size:14px;
  font-family:var(--font-body);
  transition:border-color .2s
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow)
}
.form-group textarea{min-height:100px;resize:vertical}
.form-hint{
  font-size:12px;color:var(--muted);
  margin-top:4px
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.form-card .btn{width:100%;margin-top:8px}
.form-disclaimer{
  font-size:12px;color:var(--muted);
  text-align:center;margin-top:16px
}

/* ─── REVIEWS ─── */
.reviews-track{
  display:flex;gap:clamp(16px,3vw,32px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:16px;
  scrollbar-width:none
}
.reviews-track::-webkit-scrollbar{display:none}
.review-card{
  min-width:clamp(280px,40vw,400px);
  scroll-snap-align:start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:clamp(20px,3vw,32px);
  flex-shrink:0
}
.review-card .rc-header{
  display:flex;align-items:center;gap:12px;margin-bottom:12px
}
.review-card .rc-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent-light),var(--gold-light));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;font-size:16px;
  color:var(--accent);flex-shrink:0
}
.review-card .rc-name{font-weight:500;font-size:14px}
.review-card .rc-role{font-size:12px;color:var(--muted)}
.review-card .rc-stars{color:var(--gold);font-size:14px;margin-bottom:8px}
.review-card p{font-size:14px;color:var(--fg-secondary);line-height:1.55}
.reviews-controls{
  display:flex;gap:8px;justify-content:center;margin-top:24px
}
.reviews-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);border:none;cursor:pointer;
  transition:all .2s
}
.reviews-dot.active{background:var(--accent);width:24px;border-radius:4px}

/* ─── FAQ ─── */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{
  border-bottom:1px solid var(--border);
  padding:0
}
.faq-question{
  width:100%;text-align:left;
  padding:20px 0;
  background:none;border:none;
  font-family:var(--font-body);
  font-size:15px;font-weight:500;
  color:var(--fg);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  cursor:pointer
}
.faq-question .faq-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .3s;
  color:var(--muted)
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .3s var(--ease-out),padding .3s var(--ease-out)
}
.faq-item.open .faq-answer{
  max-height:300px;
  padding-bottom:20px
}
.faq-answer p{
  font-size:14px;color:var(--muted);line-height:1.6;
  padding-right:40px
}

/* ─── FINAL CTA ─── */
.final-cta{
  background:linear-gradient(135deg,var(--accent-light),var(--gold-light));
  border-radius:var(--radius-lg);
  padding:clamp(40px,6vw,80px) clamp(24px,4vw,48px);
  text-align:center;
  position:relative;overflow:hidden
}
.final-cta::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%,var(--accent-glow),transparent 70%);
  opacity:.5
}
.final-cta > *{position:relative;z-index:1}
.final-cta h2{
  font-family:var(--font-display);
  font-size:clamp(24px,4vw,40px);
  font-weight:600;
  margin-bottom:12px
}
.final-cta p{
  font-size:clamp(14px,1.1vw,16px);
  color:var(--fg-secondary);
  margin-bottom:24px;
  max-width:560px;margin-left:auto;margin-right:auto
}
.final-cta .btn-primary{
  background:var(--accent);color:#fff;
  font-size:clamp(14px,1.1vw,16px);
  padding:16px 40px
}

/* ─── CONTACT INFO ─── */
.contact-links{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px
}
.contact-links a{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  font-size:14px;
  transition:all .2s
}
.contact-links a:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px)
}

/* ─── FOOTER ─── */
.footer{
  border-top:1px solid var(--border);
  padding:clamp(32px,5vw,60px) 0 clamp(24px,3vw,40px)
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px);
  margin-bottom:clamp(24px,3vw,40px)
}
.footer-brand p{
  font-size:14px;color:var(--muted);
  margin-top:12px;max-width:300px;line-height:1.5
}
.footer-col h5{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;font-weight:600
}
.footer-col a{
  display:block;padding:4px 0;
  font-size:14px;color:var(--fg-secondary);
  transition:color .2s
}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--border);
  font-size:13px;color:var(--muted)
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}

/* ─── PAGE HEADER ─── */
.page-header{
  padding:calc(var(--nav-h) + 60px) 0 60px;
  text-align:center;
  position:relative
}
.page-header h1{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,52px);
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:12px
}
.page-header p{
  color:var(--muted);
  font-size:clamp(15px,1.2vw,18px);
  max-width:600px;margin:0 auto
}
.page-header .breadcrumbs{
  font-size:12px;color:var(--muted);
  margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;gap:6px
}
.page-header .breadcrumbs a{color:var(--accent)}
.page-header .breadcrumbs a:hover{text-decoration:underline}

/* ─── FILTER GALLERY ─── */
.filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(12px,2vw,24px)
}
#portfolioGrid.filter-grid,#worksGrid.photos-view{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){#portfolioGrid.filter-grid,#worksGrid.photos-view{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#portfolioGrid.filter-grid,#worksGrid.photos-view{grid-template-columns:repeat(1,1fr)}}
.filter-item{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  transition:all .3s var(--ease-out)
}
.filter-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.filter-item .fi-thumb{
  aspect-ratio:4/3;
  background:var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  cursor:zoom-in
}
.filter-item .fi-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.filter-item:hover .fi-thumb img{transform:scale(1.08)}
.filter-item .fi-thumb .fi-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-light),var(--gold-light));
  opacity:.5;
  transition:opacity .3s;
  pointer-events:none
}
.filter-item:hover .fi-bg{opacity:.7}
.filter-item .fi-thumb .fi-icon{
  position:relative;z-index:1;
  font-size:clamp(36px,5vw,56px);
  opacity:.6
}
.filter-item .fi-body{padding:16px 20px 20px}
.filter-item .fi-body h3{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;
  margin-bottom:4px
}
.filter-item .fi-body p{
  font-size:13px;color:var(--muted);line-height:1.45
}
.filter-item .fi-body .fi-tag{
  display:inline-block;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;font-weight:600
}
.filter-item.hidden{display:none}

/* ─── GALLERY ITEMS (from storage) ─── */
.gl-item{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.gl-item:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.1)}

/* ─── WORK DETAIL ─── */
.work-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,60px);
  align-items:start
}
.work-detail-grid.reverse{direction:rtl}
.work-detail-grid.reverse > *{direction:ltr}
.work-detail-visual{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--border);
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  position:relative
}
.work-detail-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:0}
.work-detail-visual:hover img{transform:scale(1.05)}
.work-detail-visual .wd-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-light),var(--gold-light));
  opacity:.5
}
.work-detail-visual .wd-icon{font-size:64px;position:relative;z-index:1;opacity:.5}
.work-detail-info h2{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,34px);
  font-weight:600;
  margin-bottom:12px
}
.work-detail-info .wd-desc{
  color:var(--fg-secondary);
  line-height:1.6;
  margin-bottom:16px
}
.work-detail-info .wd-meta{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px
}
.work-detail-info .wd-meta span{
  font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:6px
}
@media(max-width:768px){
  .work-detail-grid{grid-template-columns:1fr}
  .work-detail-grid.reverse{direction:ltr}
}

/* ─── BACK LINK ─── */
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);
  margin-bottom:24px;
  transition:color .2s
}
.back-link:hover{color:var(--accent)}
.back-link svg{width:16px;height:16px}

/* ─── MISC UTILITIES ─── */
.text-center{text-align:center}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}
.mb-8{margin-bottom:8px}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}
.gap-8{gap:8px}
.gap-16{gap:16px}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:600px){.grid-2{grid-template-columns:1fr}}

/* ─── NEWS ─── */
.news-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,2vw,24px);max-width:1120px;margin:0 auto}
.news-preview-grid .nc-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--border)}
.news-preview-grid .nc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}
.news-preview-grid .news-card:hover .nc-img img{transform:scale(1.05)}
.news-card-link{display:block;color:inherit;text-decoration:none}
.news-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all .3s var(--ease-out)}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.news-card-inner{padding:clamp(20px,3vw,28px)}
.news-card .nc-date{font-size:11px;font-family:var(--font-mono);color:var(--muted);letter-spacing:.04em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.news-card .nc-date .nc-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block;flex-shrink:0}
.news-card .nc-cat{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600;margin-bottom:6px}
.news-card h2{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:6px;line-height:1.3}
.news-card p{font-size:13px;color:var(--fg-secondary);line-height:1.55;margin-bottom:12px}
.news-card .nc-more{font-size:12px;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:4px;cursor:pointer;background:none;border:none;font-family:var(--font-body);transition:gap .2s;padding:0}
.news-card .nc-more:hover{gap:8px}
.nc-img{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--border)}
.nc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease-out)}
.news-card:hover .nc-img img{transform:scale(1.05)}
.nc-body-full{overflow:hidden;max-height:0;padding:0;margin:0;border:none;transition:all .35s var(--ease-out)}
.nc-body-full p{font-size:13px;color:var(--fg-secondary);line-height:1.6}

/* ─── CONTACT FORM ─── */
.cform{display:flex;flex-direction:column;gap:16px}
.cform .fg{position:relative}
.cform .fg.floating label{position:absolute;left:14px;top:14px;font-size:13px;color:var(--muted);pointer-events:none;transition:all .2s;background:transparent;padding:0 4px}
.cform .fg.floating.focused label,.cform .fg.floating.filled label{top:-9px;font-size:10px;color:var(--accent);background:var(--surface)}
.cform .fg.floating input,.cform .fg.floating textarea,.cform .fg.floating select{width:100%;padding:16px 14px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg);font-size:14px;font-family:var(--font-body);transition:border-color .25s,box-shadow .25s;outline:none}
.cform .fg.floating textarea{min-height:100px;resize:vertical;padding-top:20px}
.cform .fg.floating input:focus,.cform .fg.floating textarea:focus,.cform .fg.floating select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.cform .fg.floating select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.cform .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.cform .fg-row{grid-template-columns:1fr}}
.form-note{font-size:11px;color:var(--muted);text-align:center}
.success-message{display:none;flex-direction:column;align-items:center;gap:12px;padding:32px;text-align:center;border-radius:16px;background:color-mix(in oklch,var(--success) 8%,transparent);border:1px solid color-mix(in oklch,var(--success) 30%,transparent)}
.success-message.show{display:flex;animation:fadeUp .5s forwards}
.success-message .sm-icon{width:56px;height:56px;border-radius:50%;background:color-mix(in oklch,var(--success) 15%,transparent);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--success)}
.success-message h4{font-family:var(--font-display);font-size:18px;font-weight:600}
.success-message p{font-size:13px;color:var(--muted)}

/* ─── ANIM-UP REVEAL ─── */
.anim-up{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.anim-up.visible{opacity:1;transform:translateY(0)}
.anim-up:nth-child(2){transition-delay:.1s}
.anim-up:nth-child(3){transition-delay:.2s}
.anim-up:nth-child(4){transition-delay:.3s}
.anim-up:nth-child(5){transition-delay:.4s}
.anim-up:nth-child(6){transition-delay:.5s}

/* ─── KINETIC HEADING ─── */
.kinetic-heading{opacity:0;transform:translateY(20px);animation:kineticReveal .8s var(--ease-out) forwards}
.kinetic-heading:nth-child(2){animation-delay:.15s}
.kinetic-heading:nth-child(3){animation-delay:.3s}
@keyframes kineticReveal{to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════════════════════════════
   COLD BACKGROUND EFFECTS — Grid, Noise, Floating Geometry
   ════════════════════════════════════════════════════════════════ */

/* ─── ANIMATED GRID OVERLAY ─── */
#gridOverlay{
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.02;
  animation:grid-drift 30s linear infinite
}
@keyframes grid-drift{
  0%{transform:translate(0,0)}
  100%{transform:translate(60px,60px)}
}

/* ─── NOISE TEXTURE OVERLAY ─── */
#noiseOverlay{
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  opacity:.012;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px 256px;
  animation:noise-shift .8s steps(4) infinite
}
@keyframes noise-shift{
  0%{background-position:0 0}
  25%{background-position:2px -3px}
  50%{background-position:-1px 2px}
  75%{background-position:3px 1px}
}

/* ─── FLOATING SHAPES CONTAINER ─── */
#floatShapes{
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  overflow:hidden
}
.float-shape{
  position:absolute;
  border:1px solid var(--accent);
  opacity:.06;
  animation:shape-float linear infinite
}
.float-shape.circle{border-radius:50%}
.float-shape.tri{
  border:none;
  width:0!important;height:0!important;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:14px solid var(--accent);
  background:transparent!important
}
.float-shape.diamond{
  transform:rotate(45deg);
  border-radius:2px
}
@keyframes shape-float{
  0%{transform:translateY(110vh) rotate(0deg);opacity:0}
  5%{opacity:.06}
  90%{opacity:.06}
  100%{transform:translateY(-10vh) rotate(360deg);opacity:0}
}

/* ─── ICE SPARKLE ─── */
.ice-sparkle{
  position:fixed;width:3px;height:3px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:0;
  opacity:0;box-shadow:0 0 6px var(--accent-glow);
  animation:sparkle-fade 4s ease-in-out infinite
}
.ice-sparkle:nth-child(2n){width:2px;height:2px;animation-duration:3.5s;animation-delay:-1s}
.ice-sparkle:nth-child(3n){width:4px;height:4px;animation-duration:5s;animation-delay:-2s}
@keyframes sparkle-fade{
  0%,100%{opacity:0;transform:scale(0)}
  20%{opacity:.3;transform:scale(1)}
  80%{opacity:.1;transform:scale(.6)}
}

/* ─── HERO — ICE WAVE ─── */
.ice-wave{
  position:absolute;bottom:0;left:0;width:200%;height:80px;
  background:linear-gradient(180deg,transparent,color-mix(in oklch,var(--accent) 6%,transparent));
  animation:wave-sway 6s ease-in-out infinite alternate;
  pointer-events:none
}
@keyframes wave-sway{
  0%{transform:translateX(0)}
  100%{transform:translateX(-25%)}
}

/* ─── REDUCED MOTION ─── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  html{scroll-behavior:auto}
}

/* ════════════════════════════════════════════════════════════════
   SPECTACULAR ANIMATIONS — ENHANCED LAYER
   ════════════════════════════════════════════════════════════════ */

/* ─── @property for animated gradients ─── */
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --gradient-pos-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --gradient-pos-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
@property --scan-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ─── SCROLL PROGRESS BAR ─── */
#scrollProgress{
  position:fixed;top:0;left:0;width:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width 50ms linear;
  pointer-events:none
}

/* ─── CURSOR FOLLOWER ─── */
.cursor-dot{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:var(--accent);z-index:99999;
  pointer-events:none;transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s,opacity .2s;
  opacity:0;mix-blend-mode:difference
}
.cursor-ring{
  position:fixed;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--accent);z-index:99998;
  pointer-events:none;transform:translate(-50%,-50%);
  transition:width .3s,height .3s,border-color .3s,opacity .3s;
  opacity:0;mix-blend-mode:difference
}
.cursor-dot.visible,.cursor-ring.visible{opacity:1}
.cursor-dot.hover{width:14px;height:14px;background:var(--gold)}
.cursor-ring.hover{width:56px;height:56px;border-color:var(--gold);border-width:2px}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ─── 3D PERSPECTIVE TILT ─── */
.tilt-3d{
  perspective:1200px
}
.tilt-3d > *{
  transform-style:preserve-3d;
  transition:transform .15s cubic-bezier(.23,1,.32,1)
}
.tilt-3d .tilt-content{
  will-change:transform;
  backface-visibility:hidden
}

/* ─── MAGNETIC BUTTON WRAP ─── */
.magnetic-wrap{
  display:inline-flex;
  position:relative
}
.magnetic-inner{
  transition:transform .15s cubic-bezier(.23,1,.32,1);
  will-change:transform
}

/* ─── TEXT SPLIT REVEAL ─── */
.char-reveal{display:inline-block;opacity:0;transform:translateY(30px) rotateX(15deg);transition:opacity .4s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1)}
.char-reveal.visible{opacity:1;transform:translateY(0) rotateX(0)}
.word-reveal{display:inline-block;overflow:hidden;vertical-align:bottom}
.word-reveal-inner{display:block;transform:translateY(105%);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.word-reveal.visible .word-reveal-inner{transform:translateY(0)}

/* ─── DIRECTIONAL REVEALS ─── */
.reveal-left{opacity:0;transform:translateX(-50px);transition:all .7s cubic-bezier(.23,1,.32,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(50px);transition:all .7s cubic-bezier(.23,1,.32,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.85);transition:all .7s cubic-bezier(.23,1,.32,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-blur{opacity:0;filter:blur(12px);transform:translateY(20px);transition:all .8s cubic-bezier(.23,1,.32,1)}
.reveal-blur.visible{opacity:1;filter:blur(0);transform:translateY(0)}
.reveal-clip{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:clip-path .8s cubic-bezier(.23,1,.32,1)}
.reveal-clip.visible{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* ─── STAGGER CHILDREN ─── */
.stagger-children > *{opacity:0;transform:translateY(24px);transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1)}
.stagger-children.visible > *{opacity:1;transform:translateY(0)}
.stagger-children.visible > *:nth-child(1){transition-delay:.05s}
.stagger-children.visible > *:nth-child(2){transition-delay:.1s}
.stagger-children.visible > *:nth-child(3){transition-delay:.15s}
.stagger-children.visible > *:nth-child(4){transition-delay:.2s}
.stagger-children.visible > *:nth-child(5){transition-delay:.25s}
.stagger-children.visible > *:nth-child(6){transition-delay:.3s}
.stagger-children.visible > *:nth-child(7){transition-delay:.35s}
.stagger-children.visible > *:nth-child(8){transition-delay:.4s}

/* ─── KEN BURNS ─── */
.ken-burns{overflow:hidden}
.ken-burns img{transition:transform 8s cubic-bezier(.4,0,.2,1),opacity .6s;will-change:transform}
.ken-burns.visible img{transform:scale(1.08)}

/* ─── COUNTER ANIMATION ─── */
.counter-num{font-variant-numeric:tabular-nums}

/* ─── FLOATING PARTICLES ─── */
#particleCanvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
  opacity:.4
}

/* ─── ANIMATED GRADIENT MESH (section bg) ─── */
.gradient-mesh{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0
}
.gradient-mesh .gm-blob{
  position:absolute;border-radius:50%;filter:blur(80px);
  animation:morph-blob 16s ease-in-out infinite;
  opacity:.25
}
.gradient-mesh .gm-blob:nth-child(1){
  width:50vw;height:50vw;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%);
  top:-20%;left:-10%;
  animation-delay:-4s
}
.gradient-mesh .gm-blob:nth-child(2){
  width:40vw;height:40vw;
  background:radial-gradient(circle,var(--gold-light),transparent 70%);
  bottom:-15%;right:-5%;
  animation-delay:-8s;
  animation-duration:20s
}
.gradient-mesh .gm-blob:nth-child(3){
  width:30vw;height:30vw;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%);
  top:40%;right:10%;
  animation-delay:-2s;
  animation-duration:14s;
  opacity:.15
}

/* ─── SPOTLIGHT FOLLOW ─── */
.spotlight{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;z-index:-1;
  background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),var(--accent-glow),transparent 50%);
  opacity:.3;transition:background .1s
}

/* ─── IMAGE PARALLAX DEPTH ─── */
.parallax-depth{
  position:relative;overflow:hidden
}
.parallax-depth img,.parallax-depth .parallax-inner{
  will-change:transform;
  transition:transform .1s linear
}

/* ─── GLITCH TEXT ─── */
.glitch-wrap{position:relative;display:inline-block}
.glitch-wrap::before,.glitch-wrap::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none
}
.glitch-wrap::before{
  color:var(--accent);
  animation:glitch-shift .3s cubic-bezier(.25,.46,.45,.94) both infinite;
  clip-path:polygon(0 30%,100% 30%,100% 45%,0 45%);
  opacity:.6
}
.glitch-wrap::after{
  color:var(--gold);
  animation:glitch-shift .3s cubic-bezier(.25,.46,.45,.94) reverse both infinite;
  clip-path:polygon(0 60%,100% 60%,100% 75%,0 75%);
  opacity:.6
}
@keyframes glitch-shift{
  0%{transform:translate(0)}
  20%{transform:translate(-2px,2px)}
  40%{transform:translate(-2px,-2px)}
  60%{transform:translate(2px,2px)}
  80%{transform:translate(2px,-2px)}
  100%{transform:translate(0)}
}

/* ─── SCROLL-TRIGGERED PARALLAX TITLE ─── */
.parallax-title{will-change:transform}

/* ─── FLOATING BADGE ─── */
.float-badge{animation:float-badge 4s ease-in-out infinite}
@keyframes float-badge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ─── SPARKLE DIVIDER ─── */
.sparkle-divider{
  display:flex;align-items:center;gap:12px;
  justify-content:center;margin:24px 0;
  color:var(--muted);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;font-family:var(--font-mono)
}
.sparkle-divider::before,.sparkle-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent)
}
.sparkle-divider .sd-icon{animation:sparkle-pulse 2s ease-in-out infinite}
@keyframes sparkle-pulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
}

/* ─── SMOOTH SCROLLBAR (webkit) ─── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ─── ENHANCED HERO BADGE — Cold holographic scan ─── */
.hero-badge.pulse-edge::after{
  content:'';position:absolute;inset:-1px;
  border-radius:inherit;
  background:conic-gradient(from var(--gradient-angle,0deg),
    color-mix(in oklch,var(--accent) 50%,transparent),
    color-mix(in oklch,var(--accent) 15%,#fff 30%,transparent),
    color-mix(in oklch,var(--accent) 35%,transparent),
    color-mix(in oklch,var(--accent) 60%,transparent),
    color-mix(in oklch,var(--accent) 15%,#fff 30%,transparent),
    color-mix(in oklch,var(--accent) 50%,transparent));
  z-index:-1;opacity:.5;
  filter:blur(3px);
  animation:spin-border 4s linear infinite
}
@keyframes spin-border{
  to{--gradient-angle:360deg}
}

/* ═══ PREMIUM HERO HEADLINE — luxury animations ═══ */

/* ══════════════════════════════════════════════════════════════
   HERO HEADLINE — Kinetic Frame
   Frame corners, floating geometry, compact split-weight name,
   kinetic role words, pill tags
   ══════════════════════════════════════════════════════════════ */

/* ── Hero content base ── */
.hero-content{position:relative;z-index:1}

/* ── Animated frame corners — draw in from edges ── */
.hc-frame{position:absolute;inset:0;pointer-events:none;z-index:0}
.hc-frame div{
  position:absolute;opacity:0;
  animation:hc-frame-in 1.6s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .4s cubic-bezier(.16,1,.3,1)
}
.hc-frame-tl{top:8px;left:8px;width:28px;height:28px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);transform-origin:top left;animation-delay:.1s}
.hc-frame-tr{top:8px;right:8px;width:28px;height:28px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform-origin:top right;animation-delay:.1s}
.hc-frame-bl{bottom:8px;left:8px;width:28px;height:28px;border-bottom:2px solid var(--accent);border-left:2px solid var(--accent);transform-origin:bottom left;animation-delay:.1s}
.hc-frame-br{bottom:8px;right:8px;width:28px;height:28px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);transform-origin:bottom right;animation-delay:.1s}
@keyframes hc-frame-in{
  0%{opacity:0;transform:scale(0);}
  60%{opacity:1;transform:scale(1.08)}
  100%{opacity:.35;transform:scale(1)}
}

/* ── Floating geometric shapes ── */
.hc-geo{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hc-geo-shape{
  position:absolute;left:var(--gx);top:var(--gy);
  width:var(--gs);height:var(--gs);
  opacity:0;animation:hc-geo-float 18s ease-in-out var(--gd) infinite;
  transition:transform .4s ease-out
}
.hc-geo-circle{border-radius:50%;border:1.5px solid color-mix(in oklch,var(--accent) 25%,transparent)}
.hc-geo-diamond{transform:rotate(45deg) scale(.85);border:1.5px solid color-mix(in oklch,var(--accent) 20%,transparent)}
.hc-geo-tri{clip-path:polygon(50% 0%,0% 100%,100% 100%);background:color-mix(in oklch,var(--accent) 8%,transparent);border:none;opacity:.6}
@keyframes hc-geo-float{
  0%,100%{transform:translate(0,0);opacity:0}
  5%,95%{opacity:1}
  25%{transform:translate(20px,-18px)}
  50%{transform:translate(-12px,14px) scale(1.05)}
  75%{transform:translate(16px,10px)}
}
.hc-geo-circle{animation-name:hc-geo-float;animation-duration:22s}
.hc-geo-diamond{animation-name:hc-geo-float;animation-duration:16s}
.hc-geo-tri{animation-name:hc-geo-float;animation-duration:20s}

/* Enhanced hero badge shimmer + ember particles */
.hero-badge.pulse-edge{
  position:relative;
  overflow:visible
}
.hero-badge.pulse-edge::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 0%,transparent calc(var(--scan-pos,0) - 1px),
    color-mix(in oklch,var(--accent) 30%,#fff 20%,transparent) var(--scan-pos,0),
    transparent calc(var(--scan-pos,0) + 1px),transparent 100%);
  animation:scan-line 3s ease-in-out infinite;
  pointer-events:none;border-radius:inherit;
  mix-blend-mode:screen
}
@keyframes scan-line{
  0%{--scan-pos:0%}
  50%{--scan-pos:100%}
  100%{--scan-pos:0%}
}
.ember-particle{
  position:absolute;width:2px;height:2px;
  border-radius:50%;
  pointer-events:none;opacity:0;
  animation:ember-float 4s ease-out infinite
}
.ember-particle:nth-child(1){
  background:color-mix(in oklch,var(--accent) 70%,#fff);
  left:15%;top:40%;
  box-shadow:0 0 4px color-mix(in oklch,var(--accent) 40%,transparent);
  animation-delay:.0s;animation-duration:3.6s
}
.ember-particle:nth-child(2){
  background:color-mix(in oklch,var(--accent) 50%,#fff);
  left:40%;top:25%;
  box-shadow:0 0 4px color-mix(in oklch,var(--accent) 30%,transparent);
  animation-delay:.9s;animation-duration:4.2s
}
.ember-particle:nth-child(3){
  background:color-mix(in oklch,var(--accent) 60%,#aaccff);
  left:65%;top:55%;
  box-shadow:0 0 4px color-mix(in oklch,var(--accent) 35%,transparent);
  animation-delay:1.8s;animation-duration:3.4s
}
.ember-particle:nth-child(4){
  background:color-mix(in oklch,var(--accent) 55%,#88bbff);
  left:85%;top:30%;
  box-shadow:0 0 4px color-mix(in oklch,var(--accent) 35%,transparent);
  animation-delay:2.7s;animation-duration:3.8s
}
@keyframes ember-float{
  0%{opacity:.8;transform:translate(0,0) scale(1)}
  25%{opacity:1;transform:translate(8px,-12px) scale(1.2)}
  50%{opacity:.5;transform:translate(-6px,-22px) scale(.7)}
  100%{opacity:0;transform:translate(2px,-35px) scale(.2)}
}

.hero-badge span{
  box-shadow:0 0 8px var(--accent),0 0 20px color-mix(in oklch,var(--accent) 50%,transparent);
  animation:pulse-dot 2s ease-in-out infinite,pulse-glow-badge 2s ease-in-out infinite
}
@keyframes pulse-glow-badge{
  0%,100%{box-shadow:0 0 8px var(--accent),0 0 20px color-mix(in oklch,var(--accent) 50%,transparent)}
  50%{box-shadow:0 0 14px var(--accent),0 0 32px color-mix(in oklch,var(--accent) 60%,transparent),0 0 50px color-mix(in oklch,var(--accent) 25%,transparent)}
}

/* Premium word reveal for subtitle */
.hero-sub .word-reveal-inner{
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s ease
}

/* Button premium glow */
.btn-primary:hover{
  box-shadow:0 0 24px var(--accent-glow),0 0 60px var(--accent-glow);
  transform:translateY(-2px)
}

/* ── Name line — compact single row, split weight, 3D tilt ── */
.hc-name-line{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  position:relative;z-index:1;margin-bottom:2px;
  transform-style:preserve-3d;
  perspective:800px
}

/* Surname — thin weight, wide tracking, full-width row */
.hc-name-surname{
  display:flex;width:100%;line-height:.9
}
.hc-name-surname .hc-char{
  font-family:var(--font-display);
  font-size:clamp(36px,6.5vw,72px);
  font-weight:300;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);
  background:linear-gradient(135deg,var(--fg) 40%,color-mix(in oklch,var(--accent) 60%,var(--fg)) 55%,var(--fg) 70%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:hc-char-in .9s cubic-bezier(.34,1.56,.64,1) forwards,
             hc-shimmer-sweep 6s ease-in-out 2s infinite
}

/* Vertical separator bar — hidden (two rows now) */
.hc-name-sep{display:none}

/* Firstname — bold weight, tighter tracking, full-width second row */
.hc-name-firstname{
  display:flex;width:100%;margin-left:0;line-height:.85;margin-top:-2px
}
.hc-name-firstname .hc-char{
  font-family:var(--font-display);
  font-size:clamp(42px,7.5vw,86px);
  font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--fg) 30%,var(--accent) 50%,color-mix(in oklch,var(--accent) 70%,#fff) 65%,var(--fg) 85%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-top:.02em;
  animation:hc-char-in .9s cubic-bezier(.34,1.56,.64,1) forwards,
             hc-shimmer-sweep 5s ease-in-out 1.5s infinite
}

/* Character reveal — spring entrance + glow buildup */
.hc-char{
  display:inline-block;
  opacity:0;transform:translateY(60px) rotateX(-20deg) scale(.8);
  filter:blur(4px);
  animation:hc-char-in .9s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(.07s * var(--ci))
}
.hc-name-firstname .hc-char{animation-delay:calc(.7s + .07s * (var(--ci) - 9))}
@keyframes hc-char-in{
  0%{opacity:0;transform:translateY(60px) rotateX(-20deg) scale(.8);filter:blur(4px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}
}
@keyframes hc-name-sep-in{to{opacity:1}}
@keyframes hc-sep-pulse{
  0%,100%{opacity:1}
  50%{opacity:.2;transform:scaleY(.6)}
}

/* Shimmer sweep for gradient text */
@keyframes hc-shimmer-sweep{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  to{background-position:0% 50%}
}

/* Underline bar — expands from center beneath name */
.hc-name-line::after{
  content:'';position:absolute;
  bottom:-3px;left:50%;width:0;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),color-mix(in oklch,var(--accent) 50%,transparent),transparent);
  transform:translateX(-50%);
  animation:hc-underline-grow 1s cubic-bezier(.16,1,.3,1) 1.4s forwards;
  opacity:.6
}
@keyframes hc-underline-grow{
  to{width:min(80%,320px)}
}

/* 3D depth accent on hover — name tilts toward cursor */
.hc-name-line:hover .hc-char{
  text-shadow:0 0 20px color-mix(in oklch,var(--accent) 20%,transparent)
}

/* ── Kinetic role block ── */
.hc-role-block{
  display:flex;align-items:center;gap:6px;
  margin-bottom:4px;position:relative;z-index:1;
  flex-wrap:wrap
}

/* Decorative bar */
.hc-role-bar{
  width:24px;height:1px;flex-shrink:0;
  background:var(--accent);opacity:0;
  animation:hc-role-bar-in .6s cubic-bezier(.16,1,.3,1) 1.4s forwards
}
@keyframes hc-role-bar-in{to{opacity:.6}}

/* Kinetic word — continuous wave motion */
.hc-role-word{
  font-family:var(--font-display);
  font-size:clamp(14px,1.2vw,18px);
  font-weight:400;font-style:italic;
  color:var(--muted);letter-spacing:.02em;text-transform:lowercase;
  position:relative;display:inline-block;
  opacity:0;animation:
    hc-role-in .6s ease calc(1.6s + .12s * var(--ri)) forwards,
    hc-role-wave 3.5s ease-in-out calc(2s + .4s * var(--ri)) infinite
}
@keyframes hc-role-in{to{opacity:1;transform:translateY(0)}}
@keyframes hc-role-wave{
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(-3px)}
  50%{transform:translateY(1px)}
  75%{transform:translateY(-2px)}
}

/* ── Specialty tags — pill style ── */
.hc-tags{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:5px;margin-bottom:6px;position:relative;z-index:1
}
.hc-tag{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
  padding:4px 12px;border:1px solid var(--border);
  border-radius:100px;
  opacity:0;
  animation:hc-tag-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:border-color .3s ease,color .3s ease,box-shadow .3s ease;
  cursor:default
}
.hc-tag:nth-child(1){animation-delay:1.7s}
.hc-tag:nth-child(2){animation-delay:1.85s}
.hc-tag:nth-child(3){animation-delay:2s}
.hc-tag:hover{
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 12px color-mix(in oklch,var(--accent) 20%,transparent)
}
@keyframes hc-tag-in{
  from{opacity:0;transform:translateY(10px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Hero content parallax children — smooth movement */
.hero-content .hero-badge,
.hero-content .hero-sub,
.hero-content .hero-actions{
  will-change:transform;
  transition:transform .15s ease-out
}

/* ════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — ALL BREAKPOINTS
   ════════════════════════════════════════════════════════════════ */

/* ─── Desktop 1200–1366px ─── */
@media(max-width:1200px){
  .hero-grid{gap:clamp(24px,4vw,48px)}
}

/* ─── Desktop 1024–1200px ─── */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:1.1fr .85fr}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(16px,3vw,32px)}
}

/* ─── Tablet landscape 900–1024px ─── */
@media(max-width:1024px){
  .nav-links a{font-size:13px;padding:4px 2px;letter-spacing:0}
  .nav-phone{font-size:12px}
  .nav-links a.nav-cta{padding:5px 12px;font-size:11px}
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero h1{font-size:clamp(28px,3.8vw,44px)}
  .hero-sub{font-size:clamp(15px,1.1vw,17px)}
  .hero-meta-item .hm-number{font-size:16px}
  .about-grid{gap:clamp(24px,4vw,48px)}
  .process{grid-template-columns:repeat(2,1fr)}
  .advantages-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─── Tablet portrait 768–900px ─── */
@media(max-width:900px){
  .about-grid{gap:32px}
  .process{grid-template-columns:1fr 1fr}
}

@media(max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-image{max-width:500px;margin:0 auto}
  .advantages-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─── Small tablet 640–768px ─── */
@media(max-width:768px){
  .hero-grid{gap:24px}
  .hero-visual-stage{max-height:380px}
  .hero-meta{flex-direction:column;gap:10px}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%;justify-content:center}
  .section-title{font-size:clamp(24px,5vw,36px)}
  .section-subtitle{font-size:clamp(14px,2vw,16px)}
  .advantages-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto}
  .process{grid-template-columns:1fr;max-width:500px;margin:0 auto}
  .products-grid-main{max-width:500px;margin:0 auto}
  .cert-grid{max-width:500px;margin:0 auto}
  .support-grid-main{max-width:500px;margin:0 auto}
  .about-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .licensing-grid{grid-template-columns:1fr 1fr}
  .partners-grid{grid-template-columns:1fr 1fr}
  .plugins-grid{grid-template-columns:1fr 1fr}
  .training-list{grid-template-columns:1fr 1fr}
  .news-list{grid-template-columns:repeat(2,1fr)}
  .clients-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .support-grid{grid-template-columns:1fr 1fr}
  .page-hero{padding:calc(var(--nav-h) + 40px) 0 24px}
  .page-hero h1{font-size:clamp(26px,5vw,36px)}
  section.section{padding:clamp(40px,6vw,80px) 0}
  .faq-question{font-size:14px;padding:16px 0}
  .contact-links{flex-direction:column;align-items:center}
  .step-item{flex-direction:column;align-items:flex-start;gap:12px}
  .final-cta{padding:clamp(28px,5vw,48px) clamp(20px,4vw,32px)}
  .news-preview-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .work-detail-grid{grid-template-columns:1fr}
  .filter-grid{grid-template-columns:repeat(2,1fr)}
  
  .nav-phone{display:none}
}

/* ─── Large phone 480–640px ─── */
@media(max-width:640px){
  .hero-visual-stage{max-height:340px}
  .hc-name-surname .hc-char{font-size:clamp(26px,7vw,40px);letter-spacing:.08em}
  .hc-name-firstname .hc-char{font-size:clamp(30px,8vw,46px)}
  .hc-tag{font-size:9px;padding:3px 10px}
  .hero-footnote{font-size:11px}
  .values-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .team-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .licensing-grid{grid-template-columns:1fr}
  .partners-grid{grid-template-columns:1fr}
  .plugins-grid{grid-template-columns:1fr}
  .training-list{grid-template-columns:1fr}
  .news-list{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .filter-grid{grid-template-columns:1fr}
  .about-text .about-stat{grid-template-columns:repeat(2,1fr)}
  .support-grid{grid-template-columns:1fr}
  .news-preview-grid{grid-template-columns:1fr}
  .hc-role-word{font-size:13px}
  .hc-name-line::after{width:min(60%,200px)}
}

/* ─── Phone 360–480px ─── */
@media(max-width:480px){
  .hero{min-height:auto;padding:calc(var(--nav-h) + 40px) 0 48px}
  .hero-visual{display:none}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(22px,7vw,30px)}
  .hero-sub{font-size:14px}
  .hero-badge{font-size:10px;padding:4px 12px}
  .hero-meta{flex-direction:column;gap:8px}
  .hero-meta-item .hm-number{font-size:15px}
  .hero-meta-item .hm-label{font-size:10px}
  .hero-actions .btn{padding:12px 20px;font-size:13px;width:100%;justify-content:center}
  .hero-footnote{font-size:10px;text-align:center}
  .section-title{font-size:clamp(22px,6vw,28px)}
  .section-subtitle{font-size:13px;margin-bottom:24px}
  .section{padding:clamp(32px,8vw,60px) 0}
  .label-tag{font-size:10px}
  
  /* Hide most hero effects on small screens */
  .hc-frame{display:none}
  .hc-geo{display:none}
  .hero-bg-blob{display:none}
  .hero-badge.pulse-edge::before,.hero-badge.pulse-edge::after,.ember-particle{display:none}
  .hc-name-line::after{display:none}
  .hc-name-surname .hc-char{font-size:clamp(22px,7vw,30px);letter-spacing:.06em}
  .hc-name-firstname .hc-char{font-size:clamp(26px,8vw,36px)}
  .hc-role-block{margin-bottom:2px}
  .hc-tags{gap:4px}
  .hc-tag{font-size:8px;padding:2px 8px}
  
  /* Grids single column */
  .footer-grid{grid-template-columns:1fr}
  .products-grid-main{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr}
  .support-grid-main{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:1fr 1fr}
  .about-text .about-stat{grid-template-columns:1fr 1fr}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .news-preview-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .filter-grid{grid-template-columns:1fr}
  .plugins-grid{grid-template-columns:1fr}
  .support-grid{grid-template-columns:1fr}
  
  /* Forms */
  .form-row{grid-template-columns:1fr}
  .cform .fg-row{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  
  /* Footer */
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-brand p{max-width:100%}
  
  /* Containers */
  .container{padding:0 clamp(12px,3vw,16px)}
  
  /* Nav */
  .nav-links a,.nav-dropdown-trigger{padding:12px 20px;font-size:15px}

  
  /* Cards */
  .card,.product-card,.service-card,.advantage-card,.cert-card,
  .support-card,.news-card,.license-card,.plugin-card,.partner-card,
  .team-card,.value-card,.training-item{padding:16px}
  .product-card{padding:18px 16px}
  .news-card-inner{padding:16px}
  
  /* FAQ */
  .faq-question{font-size:13px;padding:14px 0}
  .faq-answer p{font-size:13px}
  
  /* Tables / steps */
  .ms-item{flex-direction:column;gap:8px}
  .ms-item .ms-year{width:auto}
  .license-card .lc-price{font-size:24px}
  .sc-links{flex-direction:column;align-items:center}
  
  /* Page sections */
  .page-hero{padding:calc(var(--nav-h) + 28px) 0 16px}
  
  /* Image cards */
  .hvs-card{width:70%;left:1%;top:1%;height:60%}
  .hvs-float-wrap:nth-child(n+6){display:none}
  .hvs-badge{font-size:7px;padding:2px 6px}
  .hvs-float-item{width:clamp(60px,16vw,80px)}
}

/* ─── iPhone standard (390px) ─── */
@media(max-width:390px){
  .nav-logo-text{font-size:12px}
  .nav-logo-text small{font-size:9px}
  .hero h1{font-size:clamp(18px,5.5vw,24px)}
  .hero-sub{font-size:12px}
  .section-title{font-size:clamp(18px,5.5vw,24px)}
  .container{padding:0 10px}
  .hc-name-surname .hc-char{font-size:clamp(20px,6.5vw,28px)}
  .hc-name-firstname .hc-char{font-size:clamp(24px,7.5vw,32px)}
  .products-grid,.support-grid,.plugins-grid,.training-list,
  .licensing-grid,.partners-grid,.news-list,.cert-grid,
  .advantages-grid,.services-grid,.portfolio-grid,
  .team-grid,.values-grid,.clients-grid{grid-template-columns:1fr}
  .page-hero{padding:calc(var(--nav-h) + 20px) 0 16px !important}
  .page-hero h1{font-size:clamp(20px,6vw,26px) !important}
  .footer-grid{grid-template-columns:1fr}
}

/* ─── Very compact phones 360px and under ─── */
@media(max-width:360px){
  .nav-logo-text{font-size:13px}
  .nav-logo-text small{font-size:10px}
  .hero h1{font-size:20px}
  .hero-sub{font-size:13px}
  .section-title{font-size:20px}
  .container{padding:0 10px}
  .hc-name-surname .hc-char{font-size:18px}
  .hc-name-firstname .hc-char{font-size:22px}
  .product-card h3{font-size:14px}
  .clients-grid{grid-template-columns:1fr 1fr;gap:8px}
  .client-item{padding:10px 14px;font-size:11px}
}

/* ─── Wide desktop 1400px+ ─── */
@media(min-width:1400px){
  .container{max-width:var(--max-w-wide)}
  .hero h1{font-size:clamp(48px,4vw,64px)}
  .hero-sub{font-size:clamp(18px,1.1vw,22px);max-width:620px}
  .hero-meta-item .hm-number{font-size:22px}
  .hero-meta-item .hm-label{font-size:12px}
}

/* ─── Ultra-wide 1920px+ ─── */
@media(min-width:1920px){
  .container,.nav-inner{max-width:1600px}
  .hero h1{font-size:clamp(56px,3.6vw,72px)}
  .hero-sub{font-size:clamp(20px,1.1vw,24px);max-width:700px}
  .hero-meta-item .hm-number{font-size:24px}
  .hero-meta-item .hm-label{font-size:13px}
  .hero-visual-stage{max-height:600px}
  .section-title{font-size:clamp(40px,2.8vw,56px)}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .advantages-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}

/* ─── iPhone Pro Max / large phones 390–430px ─── */
@media(max-width:430px){
  .hc-name-surname .hc-char{font-size:clamp(24px,7vw,32px);letter-spacing:.08em}
  .hc-name-firstname .hc-char{font-size:clamp(28px,8vw,38px)}
  .hc-role-word{font-size:12px}
  .hvs-card{width:68%;left:2%;top:2%;height:62%}
  .hvs-float-wrap:nth-child(n+7){display:none}
  .hvs-badge{font-size:7px;padding:2px 6px}
  .hvs-float-item{width:clamp(55px,15vw,75px)}
  .hero{margin-top:0}
  .nav-logo-text{font-size:13px}
  .nav-logo-text small{font-size:9px}
  .nav-burger{padding:6px}
  .nav-burger span{width:20px;height:1.5px}
  .nav-links a,.nav-dropdown-trigger{padding:10px 16px;font-size:14px}
  .hero h1{font-size:clamp(20px,6.5vw,28px)}
  .hero-sub{font-size:13px;max-width:100%}
  .hero-badge{font-size:9px;padding:4px 10px}
  .hero-meta-item .hm-number{font-size:14px}
  .hero-meta-item .hm-label{font-size:10px}
  .hero-actions .btn{padding:10px 18px;font-size:12px}
  .hero-footnote{font-size:10px}
  .section-title{font-size:clamp(20px,6vw,26px)}
  .section-subtitle{font-size:13px}
  .section{padding:clamp(28px,6vw,48px) 0}
  .container{padding:0 clamp(12px,3vw,16px)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px}
  .page-hero{padding:calc(var(--nav-h) + 24px) 0 20px !important}
  .page-hero h1{font-size:clamp(22px,6.5vw,30px) !important}
  .page-hero p{font-size:14px !important}
  .products-grid{grid-template-columns:1fr}
  .support-grid,.plugins-grid,.training-list,.licensing-grid,.partners-grid,.news-list{grid-template-columns:1fr}
  .cert-grid,.clients-grid{grid-template-columns:1fr 1fr;gap:8px}
  .contact-links{flex-direction:column;align-items:center}
  .contact-links a{width:100%;justify-content:center}
  .final-cta{padding:clamp(24px,5vw,36px) clamp(16px,4vw,24px)}
  .form-row{grid-template-columns:1fr}
  .cform .fg-row{grid-template-columns:1fr}
  .card,.product-card,.service-card,.advantage-card,.cert-card,.support-card,.news-card,.license-card,.plugin-card,.partner-card,.team-card,.value-card,.training-item{padding:14px}
  .product-card{padding:16px 14px}
  .news-card-inner{padding:14px}
  .step-item{flex-direction:column;gap:8px;padding:14px 0}
  .step-item .step-num{width:32px;height:32px;font-size:13px}
  .faq-question{font-size:13px;padding:12px 0}
  .sc-links{flex-direction:column;width:100%}
  .sc-links a{width:100%;justify-content:center}
  .forum-categories{grid-template-columns:1fr}
  .forum-topbar{flex-direction:column;gap:12px}
  .forum-topbar .ft-search{max-width:100%;width:100%}
  .ms-item{flex-direction:column;gap:6px}
  .ms-item .ms-year{width:auto}
  .tabs{gap:4px;margin-bottom:20px}
  .tab-btn{padding:6px 14px;font-size:11px}
  .portfolio-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .hero-visual-stage{max-height:280px}
  .hero-meta{flex-direction:column;gap:6px}
  .about-text .about-stat{grid-template-columns:1fr 1fr}
}