/* 
   Easypost.kz - Fixed Ultra-Premium Configuration + New Components
*/

:root {
  --text-main: #000000; /* Maximum contrast */
  --text-muted: #27272a; /* Darker muted text for better readability */
  --surface: #ffffff;
  --bg-color: #fcfcfd;
  --brand-orange: #f97316;
  --brand-red: #ef4444;
  --brand-gradient: linear-gradient(135deg, #f97316, #ef4444);
  --border: #e4e4e7;
  --shadow-lux: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --bezier-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --font-lux: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; background-color: #fafafa; }
body { 
  font-family: var(--font-lux); color: var(--text-main); font-weight: 500; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; 
  background-color: transparent;
}

/* --- Premium Iridescent Grid Background --- */
.tech-grid-bg {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -100; pointer-events: none; overflow: hidden;
  background-color: #fafafa;
}

/* Base glowing orbs for ambient light behind the grid */
.grid-glow-1, .grid-glow-2, .grid-glow-3 {
  position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.05;
  animation: floatOrb 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.grid-glow-1 { width: 60vw; height: 60vw; top: -10vh; left: -10vw; background: rgba(139, 92, 246, 0.6); } /* Purple */
.grid-glow-2 { width: 70vw; height: 70vw; bottom: -20vh; right: -10vw; background: rgba(14, 165, 233, 0.6); animation-delay: -5s; } /* Blue */
.grid-glow-3 { width: 50vw; height: 50vw; top: 30vh; left: 30vw; background: rgba(249, 115, 22, 0.6); animation-delay: -10s; } /* Orange */

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5vw, 10vh) scale(1.1); }
}

/* A mask container to fade the grid out gracefully towards all edges */
.grid-fade {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  mask-image: radial-gradient(ellipse at center 40%, black 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center 40%, black 5%, transparent 70%);
}

/* The grid itself, masked to only show the lines, filled with a fluid gradient */
.grid-lines {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  opacity: 0.15; /* Made grid lines much more gentle */
  
  /* The fluid gradient inside the lines */
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(168, 85, 247, 0.3), rgba(14, 165, 233, 0.3), rgba(236, 72, 153, 0.3));
  background-size: 300% 300%;
  
  transform: perspective(1000px) rotateX(60deg) translateY(0);
  transform-origin: center top;
  
  /* Animate both the grid moving forward and the gradient shifting */
  animation: gridScroll 15s linear infinite, gradPan 15s ease infinite alternate;
  
  /* Using the grid pattern as a mask to carve out the lines */
  mask-image: 
    linear-gradient(to bottom, black 1.5px, transparent 1.5px),
    linear-gradient(to right, black 1.5px, transparent 1.5px);
  mask-size: 80px 80px;
  -webkit-mask-image: 
    linear-gradient(to bottom, black 1.5px, transparent 1.5px),
    linear-gradient(to right, black 1.5px, transparent 1.5px);
  -webkit-mask-size: 80px 80px;
}

@keyframes gridScroll {
  0% { transform: perspective(1000px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(1000px) rotateX(60deg) translateY(80px); }
}

@keyframes gradPan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Floating magic dust */
.light-dust {
  position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 12px 2px rgba(255,255,255,0.4);
  animation: dustFloat 15s linear infinite;
  opacity: 0; z-index: 3;
}
.dust-1 { left: 20%; bottom: -10%; animation-delay: 0s; animation-duration: 18s; }
.dust-2 { left: 50%; bottom: -10%; animation-delay: 5s; animation-duration: 22s; box-shadow: 0 0 12px 3px rgba(168, 85, 247, 0.4); }
.dust-3 { left: 80%; bottom: -10%; animation-delay: 2s; animation-duration: 20s; box-shadow: 0 0 12px 3px rgba(14, 165, 233, 0.4); }
.dust-4 { left: 35%; bottom: -10%; animation-delay: 10s; animation-duration: 16s; }
.dust-5 { left: 70%; bottom: -10%; animation-delay: 7s; animation-duration: 25s; box-shadow: 0 0 12px 3px rgba(249, 115, 22, 0.4); }

@keyframes dustFloat {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 0.3; transform: translateY(-20vh) scale(1.5); }
  80% { opacity: 0.3; transform: translateY(-80vh) scale(1); }
  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

/* Typography Hierarchy */
.title-massive { font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 24px; color: var(--text-main); }
.subtitle-clean { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--text-muted); font-weight: 600; letter-spacing: 0; line-height: 1.6; max-width: 700px; }
.text-luxury { background: linear-gradient(120deg, var(--brand-orange), var(--brand-red)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding-bottom: 5px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-lux); font-weight: 600; cursor: pointer; transition: all 0.4s var(--bezier-lux); text-decoration: none; border: none; border-radius: 100px; }
.btn .arrow { margin-left: 8px; transition: transform 0.3s var(--bezier-lux); }
.btn:hover .arrow { transform: translateX(6px); }
.btn-black { background: var(--text-main); color: #fff; padding: 12px 28px; font-size: 1rem; }
.btn-black:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-primary { background: var(--brand-gradient); color: #fff; padding: 14px 28px; border-radius: 100px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4); }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text-main); padding: 14px 28px; border-radius: 100px; font-weight: 600; transition: background 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-secondary:hover { background: #f3f4f6; }
.btn-full { width: 100%; }
.btn-large { padding: 18px 40px; font-size: 1.15rem; }

/* Navigation */
.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 24px 0; transition: all 0.4s var(--bezier-lux); }
.nav.scrolled { padding: 16px 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.brand a { text-decoration: none; display: flex; align-items: baseline; }
.logo-text { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; color: var(--text-main); text-transform: uppercase; transition: transform 0.3s var(--bezier-lux); }
.logo-text:hover { transform: scale(1.02); }
.logo-accent { font-weight: 600; color: #71717a; } /* Slate gray */
.logo-dot { color: var(--brand-orange); text-shadow: 0 0 12px var(--brand-orange); font-size: 1.1em; margin: 0 1px; }

.nav-links { display: flex; gap: 32px; }
.anim-link { position: relative; color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.3s; }
.anim-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: var(--brand-orange); transition: width 0.3s; }
.anim-link:hover::after { width: 100%; }
.anim-link:hover { color: var(--brand-orange); }

/* Structural Container */
.main-content { padding-top: 120px; }
.view-section { max-width: 1200px; margin: 0 auto; padding: 60px 24px; }
.section-title { 
    margin: 0 auto 60px auto; 
    position: relative; 
    padding: 0 20px; 
    z-index: 1;
    width: fit-content;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Glowing target square at the start of the tech label */
.section-title .tech-label::before {
    content: ''; display: inline-block; width: 7px; height: 7px; background: var(--brand-red); margin-right: 10px; margin-bottom: 2px;
    box-shadow: 0 0 8px var(--brand-red); animation: targetBlink 2s infinite steps(2);
}
@keyframes targetBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Static tech marker line under the tech label */
.section-title .tech-label::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: rgba(249, 115, 22, 0.6);
}

.section-title h2, .section-title p {
    position: relative; z-index: 2;
}
.tech-label { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-orange); font-weight: 800; margin-bottom: 20px; text-align: center; position: relative; }

.depth-card { 
  background: rgba(255, 255, 255, 0.85); 
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8); 
  border-radius: 24px; 
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.5); 
  transform: translateZ(0);
}

/* Barcode Scanner Background (Hero) */
.hero-tech-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
}
.barcode-bg {
  position: absolute; width: 150%; height: 100%; top: 0; left: -25%;
  background-image: 
    repeating-linear-gradient(90deg, 
      rgba(239, 68, 68, 0.05) 0, rgba(239, 68, 68, 0.05) 4px, transparent 4px, transparent 12px,
      rgba(239, 68, 68, 0.06) 12px, rgba(239, 68, 68, 0.06) 20px, transparent 20px, transparent 24px,
      rgba(239, 68, 68, 0.04) 24px, rgba(239, 68, 68, 0.04) 28px, transparent 28px, transparent 44px,
      rgba(239, 68, 68, 0.03) 44px, rgba(239, 68, 68, 0.03) 56px, transparent 56px, transparent 64px
    );
}
.tech-scanner {
  position: absolute; width: 100%; height: 2px;
  display: flex; justify-content: center;
  animation: scanLaser 8s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  z-index: 10;
}
.tech-scanner::before {
  content: ''; width: 80%; height: 100%;
  border-radius: 10px;
  animation: scanColor 8s infinite;
}
@keyframes scanLaser {
  0% { top: -5%; opacity: 0; transform: scaleX(0.8); }
  5% { top: 5%; opacity: 1; transform: scaleX(1); }
  22% { top: 55%; opacity: 1; transform: scaleX(1); }
  23% { top: 58%; opacity: 1; transform: scaleX(1.02); } /* Expands slightly on flash */
  28% { top: 70%; opacity: 0; transform: scaleX(0.9); }
  100% { top: 100%; opacity: 0; }
}
@keyframes scanColor {
  0%, 22% { 
    background: var(--brand-red); 
    box-shadow: 0 0 12px var(--brand-red), 0 0 30px rgba(239, 68, 68, 0.6), 0 -50px 50px rgba(239, 68, 68, 0.08); 
  }
  23%, 25% { 
    background: var(--brand-orange); 
    box-shadow: 0 0 20px var(--brand-orange), 0 0 60px rgba(249, 115, 22, 0.8), 0 -80px 60px rgba(249, 115, 22, 0.2); 
  }
  28%, 100% { 
    background: var(--brand-orange); 
    box-shadow: 0 0 10px var(--brand-orange); 
  }
}

/* --- High-End SVG Micro-Animations --- */

/* Checkmark: Draw and pulse */
.icon-check-anim { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck 4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes drawCheck {
  0%, 20% { stroke-dashoffset: 40; opacity: 0; transform: scale(0.8); }
  40%, 80% { stroke-dashoffset: 0; opacity: 1; transform: scale(1.1); }
  100% { stroke-dashoffset: 0; opacity: 0; transform: scale(1); }
}

/* Swap Arrows: Flowing left to right */
.icon-swap-anim { animation: swapFlow 4s ease-in-out infinite; }
@keyframes swapFlow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px) scale(1.05); } }

/* Shield: Protective pulse */
.icon-shield-anim { transform-origin: center; animation: shieldGuard 4s ease-in-out infinite; }
@keyframes shieldGuard {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 rgba(139, 92, 246, 0)); }
  50% { transform: scale(1.05) translateY(-5px); filter: drop-shadow(0 10px 20px rgba(139, 92, 246, 0.4)); }
}

/* Box: Gentle floating */
.icon-box-anim { animation: boxFloat 3s ease-in-out infinite; }
@keyframes boxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Warehouse: Structure build pulse */
.icon-house-anim { transform-origin: bottom; animation: houseBuild 4s ease-in-out infinite; }
@keyframes houseBuild { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }

/* Lightning: Energy flash */
.icon-bolt-anim { transform-origin: center; animation: boltFlash 3s infinite; }
@keyframes boltFlash {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  10%, 30% { transform: scale(1.2) rotate(5deg); opacity: 0.8; filter: drop-shadow(0 0 10px var(--brand-orange)); }
  20% { transform: scale(1) rotate(-5deg); opacity: 1; }
}

/* Truck: Driving bump */
.icon-truck-anim { animation: truckDrive 3s linear infinite; }
@keyframes truckDrive {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-2px) translateX(2px); }
  50% { transform: translateY(0) translateX(4px); }
  75% { transform: translateY(-2px) translateX(2px); }
}

/* 1. Hero Expansion */
.hero { min-height: 80vh; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-wrapper { 
  max-width: 680px; 
  flex-shrink: 0; 
  position: relative;
}

.hero-badge-ticker {
    display: inline-flex; align-items: center; width: 360px; max-width: 100%; height: 38px;
    background: rgba(14, 165, 233, 0.04);
    border-radius: 100px; border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.15), inset 0 0 8px rgba(14, 165, 233, 0.05);
    margin-bottom: 24px; overflow: hidden; position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}
.ticker-track { display: flex; white-space: nowrap; width: max-content; animation: scrollTicker 12s linear infinite; }
.ticker-item {
    font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
    color: #0ea5e9; text-shadow: 0 0 8px rgba(14, 165, 233, 0.6); padding-right: 12px;
}
@keyframes scrollTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

.hero-title { margin-bottom: 24px; }
.hero-subtitle { margin-bottom: 48px; }
.hero-actions { display: flex; align-items: center; gap: 32px; }
.hero-stats { display: flex; flex-direction: column; gap: 6px; }
.mini-stat { font-size: 0.9rem; color: var(--text-muted); }
.mini-stat b { color: var(--text-main); font-weight: 800; margin-right: 4px; }

/* --- Hero Visuals Container --- */
.hero-visuals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px; /* Отступ между аккордеоном и анимацией */
    margin-top: -60px; /* Сдвиг всего блока вверх для выравнивания */
}

/* --- Hero Truck Animation (Premium) --- */
.hero-truck-animation {
    width: 380px;
    height: 120px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 1;
}
.tech-accordion {
    display: flex;
    gap: 6px; /* Tighter gap */
    width: 380px; /* Super compact width */
    height: 240px; /* Немного уменьшена высота аккордеона */
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Аккордеон поверх анимации, если они пересекаются */
}

.accordion-panel {
    position: relative;
    flex: 0 0 40px; /* Very thin tabs */
    width: 40px;
    min-width: 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    cursor: pointer;
}

/* Active state via JS class to prevent hover glitches */
.accordion-panel.active {
    flex: 0 0 242px; /* 380 - (3*40) - (3*6) = 242px */
    width: 242px;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.9);
}

.accordion-panel.fbs-panel.active {
    box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.12), 0 4px 12px rgba(0,0,0,0.04);
}

.accordion-panel.fbo-panel.active {
    box-shadow: 0 20px 40px -10px rgba(168, 85, 247, 0.12), 0 4px 12px rgba(0,0,0,0.04);
}

.accordion-panel.cab-panel.active {
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.12), 0 4px 12px rgba(0,0,0,0.04);
}

.accordion-panel.mgr-panel.active {
    box-shadow: 0 20px 40px -10px rgba(249, 115, 22, 0.12), 0 4px 12px rgba(0,0,0,0.04);
}

/* Decorative Tech Grid */
.accordion-panel::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 12px 12px;
    z-index: 0; pointer-events: none;
}

/* Vertical Tab */
.panel-tab {
    width: 40px;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 0;
    border-right: 1px solid rgba(0, 0, 0, 0.03);
    background: rgba(255, 255, 255, 0.4);
    z-index: 2;
    transition: background 0.4s ease;
}

.tab-number {
    font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: auto;
    transition: color 0.4s ease;
}

.tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

/* Tab Active States */
.accordion-panel.fbs-panel.active .tab-label { color: #0284c7; }

.accordion-panel.fbo-panel.active .tab-label { color: #7e22ce; }

.accordion-panel.cab-panel.active .tab-label { color: #047857; }

.accordion-panel.mgr-panel.active .tab-label { color: #c2410c; }

.accordion-panel.active .tab-number { color: #18181b; }

.accordion-panel.active .panel-tab { background: transparent; border-right-color: transparent; }

/* Panel Content */
.panel-content {
    position: absolute;
    left: 40px; /* Matches panel-tab width */
    top: 0;
    bottom: 0;
    width: 202px; /* 242 - 40 = 202px */
    padding: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.accordion-panel.active .panel-content {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
    pointer-events: auto;
}

/* Removed Interactive Glare */

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-visuals {
        align-items: center;
        margin-top: 20px;
        transform: scale(0.9);
        transform-origin: center top;
    }
}

@media (max-width: 768px) {
    .hero-visuals {
        transform: scale(0.85);
    }
}

@media (max-width: 480px) {
    .hero-visuals {
        transform: scale(0.75); /* Масштабируем, чтобы 380px влезло в экраны мобильных */
    }
}

/* Elegant Card Redesign */
.ec-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 24px 20px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.ec-bg-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    bottom: -100px;
    right: -100px;
    filter: blur(50px);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
    pointer-events: none;
}
.accordion-panel.active .ec-bg-glow {
    opacity: 0.15;
    animation: pulseGlow 4s infinite alternate ease-in-out;
}
.fbs-panel .ec-bg-glow { background: #0ea5e9; }
.fbo-panel .ec-bg-glow { background: #a855f7; }
.cab-panel .ec-bg-glow { background: #10b981; }
.mgr-panel .ec-bg-glow { background: #f97316; }

@keyframes pulseGlow {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); }
}

.ec-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.ec-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.02);
    margin-bottom: auto;
}
.fbs-panel .ec-icon { color: #0284c7; }
.fbo-panel .ec-icon { color: #7e22ce; }
.cab-panel .ec-icon { color: #047857; }
.mgr-panel .ec-icon { color: #c2410c; }

.ec-data {
    display: flex; flex-direction: column; gap: 4px;
}

.ec-value {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #18181b;
    display: flex;
    align-items: baseline;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-panel.active .ec-value {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
}

.ec-unit {
    font-size: 1.25rem;
    font-weight: 500;
    color: #71717a;
    margin-left: 2px;
    letter-spacing: normal;
}

.ec-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-panel.active .ec-label {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
}

/* --- Hero Truck Animation (Premium) --- */
.hero-truck-animation {
    width: 380px;
    height: 120px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 1;
    margin-top: 40px; /* Отступ от кнопки Начать работу */
}

.truck-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.truck-group {
    animation: driveTruck 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.wheel {
    animation: spinWheels 6s infinite linear;
    transform-origin: 0 0;
}

.dbox {
    opacity: 0;
}

.db1 { animation: dropBox1 6s infinite cubic-bezier(0.16, 1, 0.3, 1); }
.db2 { animation: dropBox2 6s infinite cubic-bezier(0.16, 1, 0.3, 1); }
.db3 { animation: dropBox3 6s infinite cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes driveTruck {
    0% { transform: translate(10px, 60px); }
    15%, 45% { transform: translate(230px, 60px); } /* Drive to WB */
    55% { transform: translate(230px, 60px); opacity: 1; }
    65% { transform: translate(400px, 60px); opacity: 1; } /* Drive off-screen right */
    66% { transform: translate(400px, 60px); opacity: 0; }
    70% { transform: translate(-100px, 60px); opacity: 0; } /* Reset behind left */
    75% { transform: translate(-100px, 60px); opacity: 1; }
    95%, 100% { transform: translate(10px, 60px); opacity: 1; } /* Back to start */
}

@keyframes spinWheels {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(360deg); }
    15.1%, 45% { transform: rotate(360deg); }
    55%, 65% { transform: rotate(720deg); }
    66%, 75% { transform: rotate(720deg); }
    75.1%, 95% { transform: rotate(1080deg); }
    100% { transform: rotate(1080deg); }
}

@keyframes dropBox1 {
    0%, 19% { opacity: 0; transform: translate(25px, 10px) scale(0.5); }
    20% { opacity: 1; transform: translate(25px, 10px) scale(1); }
    25% { opacity: 1; transform: translate(60px, -20px) scale(1.2) rotate(45deg); }
    30% { opacity: 1; transform: translate(90px, 15px) scale(0.8) rotate(90deg); }
    31%, 100% { opacity: 0; transform: translate(90px, 15px) scale(0.8); }
}

@keyframes dropBox2 {
    0%, 24% { opacity: 0; transform: translate(15px, 15px) scale(0.5); }
    25% { opacity: 1; transform: translate(15px, 15px) scale(1); }
    30% { opacity: 1; transform: translate(65px, -25px) scale(1.2) rotate(-45deg); }
    35% { opacity: 1; transform: translate(100px, 18px) scale(0.8) rotate(-90deg); }
    36%, 100% { opacity: 0; transform: translate(100px, 18px) scale(0.8); }
}

@keyframes dropBox3 {
    0%, 29% { opacity: 0; transform: translate(35px, 12px) scale(0.5); }
    30% { opacity: 1; transform: translate(35px, 12px) scale(1); }
    35% { opacity: 1; transform: translate(75px, -15px) scale(1.2) rotate(60deg); }
    40% { opacity: 1; transform: translate(85px, 12px) scale(0.8) rotate(120deg); }
    41%, 100% { opacity: 0; transform: translate(85px, 12px) scale(0.8); }
}

/* === Revert End === */

/* Mini Logistics / Truck Animation */
.mini-logistics-scene {
    width: 60px; height: 44px; flex-shrink: 0;
    background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px;
    position: relative; overflow: hidden;
}
.mini-warehouse {
    position: absolute; left: 6px; bottom: 6px; width: 14px; height: 18px;
    border: 2px solid var(--text-muted); border-bottom: none; border-radius: 2px 2px 0 0;
}
.mini-box {
    position: absolute; left: 9px; bottom: 16px; width: 8px; height: 8px;
    background: var(--brand-orange); border-radius: 1px; z-index: 2;
    animation: loadBox 3.5s infinite;
}
.mini-truck-wrap {
    position: absolute; left: 20px; bottom: 3px; z-index: 3;
    color: var(--brand-red);
    animation: truckDriveAway 3.5s infinite;
}
@keyframes loadBox {
    0%, 15% { transform: translateY(-15px); opacity: 0; }
    20% { transform: translateY(-15px); opacity: 1; }
    35% { transform: translateY(0px); opacity: 1; }
    45%, 100% { transform: translateY(0px); opacity: 0; }
}
@keyframes truckDriveAway {
    0%, 40% { transform: translateX(0); opacity: 1; }
    60% { transform: translateX(60px); opacity: 1; }
    65%, 85% { transform: translateX(60px); opacity: 0; }
    86% { transform: translateX(-40px); opacity: 0; }
    95%, 100% { transform: translateX(0); opacity: 1; }
}

.bento-title { font-weight: 700; font-size: 1.05rem; }
.dynamic-value .metric { font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace; font-size: 3.5rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; background: linear-gradient(135deg, var(--text-main), #52525b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dynamic-value .unit { font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace; font-size: 1.2rem; color: var(--brand-orange); font-weight: 700; margin-left: 8px; }
.bento-desc { margin-top: 16px; font-size: 1rem; color: var(--text-main); font-weight: 500; line-height: 1.6; }

.route-tracker { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; }
.route-tracker .dot { font-weight: 700; font-size: 0.9rem; }
.route-tracker .line { flex-grow: 1; height: 4px; background: rgba(0,0,0,0.05); border-radius: 2px; position: relative; overflow: hidden;}
.route-tracker .progress { width: 50%; height: 100%; background: var(--brand-red); border-radius: 2px; }

/* FIXED Grid for Capabilities */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bento-item {
  padding: 40px; 
  display: flex; 
  flex-direction: column; 
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--bezier-lux);
  min-height: 380px; /* guarantees nice square blocks */
}
.bento-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; } 

.bento-content { position: relative; z-index: 2; flex-grow: 1; }
.span-2 .bento-content { max-width: 55%; }
.bento-content h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.bento-content p { font-size: 1.1rem; color: var(--text-main); font-weight: 500; line-height: 1.6; max-width: 100%; }

/* Bento Specific Visual Mocks */
.bento-visual { position: absolute; right: 0; bottom: 0; background: linear-gradient(to top left, #f1f5f9, transparent); border-radius: 0 0 24px 0; }
/* API Sync Animation Widget */
.api-anim-container { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center; transform: scale(1.1); transform-origin: bottom right; }
.api-sync-anim { display: flex; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.9); padding: 16px 24px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(255,255,255,0.8); backdrop-filter: blur(10px); }
.server-node { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.server-node svg { width: 32px; height: 32px; }
.easypost-node svg { color: var(--brand-orange); filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.4)); animation: nodePulse 2s infinite alternate; }
.mp-node svg { color: var(--brand-red); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4)); animation: nodePulse 2s infinite alternate-reverse; }
.server-node span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-main); }

.sync-connection { position: relative; width: 60px; height: 3px; display: flex; align-items: center; }
.sync-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2)); border-radius: 3px; overflow: hidden; }
.sync-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.8), transparent); animation: syncFlow 2s linear infinite; }
.data-packet { position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; }
.packet-fwd { background: var(--brand-orange); box-shadow: 0 0 12px 2px var(--brand-orange); animation: packetMoveFwd 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.packet-bwd { background: #10b981; box-shadow: 0 0 12px 2px #10b981; animation: packetMoveBwd 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 1s; }

@keyframes nodePulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes syncFlow { 100% { left: 100%; } }
@keyframes packetMoveFwd { 
    0% { left: 0; opacity: 0; transform: translateY(-50%) scale(0.5); } 
    20% { opacity: 1; transform: translateY(-50%) scale(1); } 
    80% { opacity: 1; transform: translateY(-50%) scale(1); } 
    100% { left: 52px; opacity: 0; transform: translateY(-50%) scale(0.5); } 
}
@keyframes packetMoveBwd { 
    0% { left: 52px; opacity: 0; transform: translateY(-50%) scale(0.5); } 
    20% { opacity: 1; transform: translateY(-50%) scale(1); } 
    80% { opacity: 1; transform: translateY(-50%) scale(1); } 
    100% { left: 0; opacity: 0; transform: translateY(-50%) scale(0.5); } 
}

.secure-visual { display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px; background: radial-gradient(circle at bottom right, rgba(239, 68, 68, 0.05), transparent 60%); }

/* Cyber Shield Widget (Finance Guarantee) */
.cyber-shield-widget { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; transform: scale(1.1); transform-origin: bottom right; margin: 10px; }
.cs-ring { position: absolute; border-radius: 50%; opacity: 0.6; }
.cs-ring-outer { width: 100%; height: 100%; border: 2px dashed rgba(249, 115, 22, 0.4); animation: csSpin 20s linear infinite; }
.cs-ring-inner { width: 66%; height: 66%; border: 2px solid transparent; border-top-color: var(--brand-red); border-bottom-color: var(--brand-red); animation: csSpin 8s linear infinite reverse; }
.cs-core { position: relative; z-index: 2; color: var(--brand-orange); background: #fff; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(249, 115, 22, 0.3); animation: csPulse 2s ease-in-out infinite alternate; }
@keyframes csSpin { 100% { transform: rotate(360deg); } }
@keyframes csPulse { 100% { box-shadow: 0 0 35px rgba(239, 68, 68, 0.6); transform: scale(1.05); } }

/* Relocation Conveyor Widget (Free Relocation) */
.relocation-visual { display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px; background: radial-gradient(circle at bottom right, rgba(239, 68, 68, 0.03), transparent 60%); }
.relocation-widget { position: relative; width: 100px; height: 60px; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 8px; transform: scale(1.15) translateX(-5px); transform-origin: bottom right; opacity: 0.9; }
.rw-conveyor { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: repeating-linear-gradient(90deg, var(--text-muted) 0, var(--text-muted) 6px, transparent 6px, transparent 10px); animation: conveyorRoll 2s linear infinite; border-radius: 2px; }
.rw-box { position: absolute; bottom: 4px; width: 24px; height: 24px; background: rgba(239, 68, 68, 0.15); border: 2px solid var(--brand-red); border-radius: 4px; animation: boxMove 4s linear infinite; }
.rw-box-1 { left: -30px; }
.rw-box-2 { left: -30px; animation-delay: 2s; background: rgba(249, 115, 22, 0.15); border-color: var(--brand-orange); border-radius: 2px; width: 28px; height: 18px; }
.rw-drone { position: absolute; top: 10px; right: 20px; width: 30px; height: 6px; background: var(--text-main); border-radius: 3px; animation: droneHover 3s ease-in-out infinite alternate; z-index: 5; }
.rw-drone::after { content: ''; position: absolute; top: 100%; left: 13px; width: 4px; height: 40px; background: rgba(0,0,0,0.05); z-index: -1; }

@keyframes conveyorRoll { 100% { background-position: 16px 0; } } 
@keyframes boxMove {
    0% { transform: translateX(0); opacity: 0; }
    5% { opacity: 1; }
    30% { transform: translateX(80px) translateY(0); opacity: 1; }
    35% { transform: translateX(80px) translateY(-10px); opacity: 1; } /* Drone pickup */
    45% { transform: translateX(110px) translateY(-20px); opacity: 0; } /* Flies away */
    100% { transform: translateX(110px); opacity: 0; }
}
@keyframes droneHover { 100% { transform: translateY(-5px) translateX(2px) rotate(1deg); } }

.video-visual { display: flex; align-items: flex-end; justify-content: flex-start; padding: 30px; background: linear-gradient(to top, rgba(0,0,0,0.02), transparent); }
.video-ui { display: flex; align-items: center; background: var(--surface); padding: 8px 16px; border-radius: 100px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--border); }
.rec-dot { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 8px #ef4444; animation: blink 2s infinite; margin-right: 10px;}
.time-code { font-family: monospace; font-size: 1.1rem; font-weight: bold; color: var(--text-main); }

.horizontal-flex { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.horizontal-flex .part-text p { max-width: 700px; }

/* Detailed Process Steps */
.detailed-process { display: flex; flex-direction: column; gap: 32px; }
.process-step-full { display: flex; gap: 32px; padding: 40px; align-items: flex-start; transition: transform 0.4s; position: relative; overflow: hidden; }
.process-step-full::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 0; background: var(--brand-gradient); transition: height 0.4s ease-out; }
.process-step-full:hover::before { height: 100%; }
.process-step-full:hover { transform: translateY(-4px); border-color: rgba(255,255,255,1); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
.step-icon { min-width: 60px; height: 60px; background: #f1f5f9; border-radius: 16px; font-size: 1.5rem; font-weight: 800; color: var(--text-main); display: flex; align-items: center; justify-content: center; }
.step-text h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; }
.step-text p { font-size: 1.1rem; color: var(--text-main); font-weight: 500; line-height: 1.6; margin: 0; }
.step-text b { color: var(--text-main); }

/* Detailed Pricing Table (Replaces cards) */
.detailed-pricing-table { padding: 0; overflow: hidden; border-radius: 24px; }
.table-header { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--text-main); color: #fff; padding: 24px 32px; font-weight: 600; font-size: 1.1rem; text-align: center; }
.table-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 24px 32px; border-bottom: 1px solid var(--border); align-items: center; font-size: 1.05rem; transition: background 0.3s; }
.table-row:hover:not(.head-row) { background: #fafafa; }
.table-row:last-child { border-bottom: none; }
.head-row { background: transparent; padding: 0; border-bottom: none; grid-column: span 3; }
.head-row div { grid-column: span 3; }

/* Torn Tape Marquee Styles */
.tape-marquee-wrapper {
    position: relative; display: flex; overflow: hidden; width: 100%; margin: 8px 0;
    background: rgba(249, 115, 22, 0.05); border-top: 1px solid rgba(249, 115, 22, 0.2); border-bottom: 1px solid rgba(249, 115, 22, 0.2);
    box-shadow: inset 0 0 20px rgba(249, 115, 22, 0.05); padding: 16px 0;
    clip-path: polygon(
        0% 0%, 100% 0%, 
        99% 10%, 100% 20%, 98% 30%, 100% 40%, 99% 50%, 100% 60%, 98% 70%, 100% 80%, 99% 90%, 100% 100%,
        0% 100%, 
        1% 90%, 0% 80%, 2% 70%, 0% 60%, 1% 50%, 0% 40%, 2% 30%, 0% 20%, 1% 10%
    );
    mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}
.tape-marquee-track { display: flex; white-space: nowrap; width: max-content; animation: scrollTableMarquee 15s linear infinite; align-items: center; }
.tape-marquee-text { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-main); padding: 0 32px; }
.tape-marquee-dot { color: var(--brand-orange); font-size: 1.5rem; opacity: 0.5; }
@keyframes scrollTableMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.table-row div:nth-child(2) { color: var(--brand-orange); }

/* FAQ Accordion */
.faq-accordion { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lux); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s; }
.faq-item:hover { border-color: var(--brand-red); }
.faq-question { padding: 24px 32px; font-size: 1.15rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.faq-question:hover { color: var(--brand-red); background: rgba(239, 68, 68, 0.02); }
.faq-icon { font-size: 1.5rem; color: var(--text-muted); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.active .faq-icon { transform: rotate(45deg); color: var(--brand-orange); }
.faq-answer { padding: 0 32px; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.5s cubic-bezier(0.16, 1, 0.3, 1); color: var(--text-main); font-weight: 500; font-size: 1.1rem; line-height: 1.6; }
.faq-item.active .faq-answer { padding-bottom: 24px; max-height: 500px; }

/* Center Contact Section */
.contact-cta { display: flex; justify-content: center; }
.cta-box { width: 100%; max-width: 1000px; background: var(--text-main); color: #fff; padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-radius: 32px; }
.cta-content p { color: #d4d4d8; font-size: 1.15rem; font-weight: 500; line-height: 1.6; }
.lux-input { position: relative; margin-bottom: 32px; }
.lux-input input { width: 100%; background: transparent; border: none; padding: 16px 0; font-size: 1.25rem; font-family: inherit; color: #fff; outline: none; }
.lux-input input::placeholder { color: #52525b; font-weight: 500; }
.input-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3f3f46; transition: background 0.3s; }
.lux-input input:focus ~ .input-line { background: var(--brand-orange); }
.cta-form .btn-black { background: #fff; color: var(--text-main); font-size: 1.1rem; margin-top: 16px; }
.cta-form .btn-black:hover { background: #f4f4f5; transform: translateY(-2px); }
.privacy { margin-top: 16px; font-size: 0.85rem; color: #52525b; text-align: center; }

/* Modal / Light Theme Inputs overrides */
.modal-content .lux-input input,
.modal-content .lux-input textarea {
    color: var(--text-main);
    font-size: 1.15rem;
}
.modal-content .lux-input input::placeholder,
.modal-content .lux-input textarea::placeholder {
    color: #a1a1aa;
    font-weight: 500;
}
.modal-content .input-line {
    background: #e4e4e7;
}

/* Custom Quiz Form Elements */
.form-group { margin-bottom: 24px; text-align: left; }
.form-group label { display: block; margin-bottom: 12px; color: var(--text-main); font-size: 1.1rem; font-weight: 700; }
.checkbox-group, .radio-group { display: flex; flex-direction: column; gap: 10px; }
.custom-checkbox, .custom-radio { display: flex; align-items: center; cursor: pointer; color: var(--text-muted); font-size: 1.05rem; font-weight: 500; transition: color 0.3s; }
.custom-checkbox:hover, .custom-radio:hover { color: var(--text-main); }
.custom-checkbox input, .custom-radio input { margin-right: 12px; width: 18px; height: 18px; accent-color: var(--brand-orange); cursor: pointer; }
.quiz-form .lux-input { margin-bottom: 20px; }

/* Floating Action Button (FAB) */
.fab-wrapper { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fab-menu { display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.fab-wrapper.active .fab-menu { pointer-events: auto; opacity: 1; transform: translateY(0); }

.fab-item { width: 220px; justify-content: space-between; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-hover); border-radius: 100px; padding: 8px 8px 8px 24px; text-decoration: none; color: var(--text-main); font-weight: 600; font-size: 1rem; transition: transform 0.2s, background 0.2s; }
.fab-item:hover { transform: scale(1.03); }
.fab-item.tg:hover { background: #e0f2fe; color: #0284c7; }
.fab-item.wa:hover { background: #dcfce7; color: #16a34a; }
.fab-item.em:hover { background: #f3f4f6; color: #18181b; }
.icon-c { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; }
.tg .icon-c { background: #0ea5e9; }
.wa .icon-c { background: #22c55e; }
.em .icon-c { background: #18181b; }

.fab-toggle { padding: 14px 32px; background: linear-gradient(135deg, rgba(249, 115, 22, 0.7), rgba(220, 38, 38, 0.8)); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100px; color: #fff; font-size: 1.15rem; font-weight: 700; box-shadow: 0 15px 35px rgba(239, 68, 68, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.2); cursor: pointer; transition: all 0.4s var(--bezier-lux); display: flex; align-items: center; gap: 12px; outline: none; animation: fabAttention 60s infinite; }
.fab-toggle:hover { transform: scale(1.05); box-shadow: 0 20px 40px rgba(249, 115, 22, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.4); background: linear-gradient(135deg, rgba(249, 115, 22, 0.85), rgba(220, 38, 38, 0.95)); animation: none; border-color: rgba(255, 255, 255, 0.4); }
.fab-icon, .fab-text, .fab-close { position: relative; transition: opacity 0.3s, transform 0.4s var(--bezier-lux); }
.fab-icon { display: flex; align-items: center; justify-content: center; }
.fab-text { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: radarPulse 2s infinite; }
@keyframes radarPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.fab-close { position: absolute; right: 24px; opacity: 0; transform: rotate(-90deg) scale(0.5); font-size: 1.8rem; }
.fab-wrapper.active .fab-toggle { background: rgba(239, 68, 68, 0.85); transform: scale(0.95); }
.fab-wrapper.active .fab-icon { opacity: 0; transform: scale(0.5); }
.fab-wrapper.active .fab-text { opacity: 0; transform: translateX(-10px); }
.fab-wrapper.active .fab-close { opacity: 1; transform: rotate(0) scale(1); right: 50%; margin-right: -10px; }

@keyframes fabAttention {
  0%, 97% { transform: scale(1); box-shadow: 0 10px 25px rgba(239, 68, 68, 0.25); }
  98% { transform: scale(1.08); box-shadow: 0 0 40px var(--brand-orange), 0 15px 35px rgba(249, 115, 22, 0.5); background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(239, 68, 68, 0.95)); }
  99% { transform: scale(0.96); }
  100% { transform: scale(1); box-shadow: 0 10px 25px rgba(239, 68, 68, 0.25); }
}

/* Minimalist Footer */
.footer-min { border-top: 1px solid var(--border); margin-top: 80px; padding: 40px 24px 120px; background: #fff; }
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.legal { font-size: 0.9rem; color: var(--text-muted); text-align: center; line-height: 1.5; }
.footer-social { display: flex; align-items: center; justify-content: flex-end; }
.footer-social a { color: var(--text-muted); font-weight: 600; text-decoration: none; margin-left: 24px; transition: color 0.3s; }
.footer-social a:hover { color: var(--text-main); }

/* Interactive & Observer States */
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--bezier-lux), transform 0.8s var(--bezier-lux); will-change: opacity, transform; }
.reveal-up.active { opacity: 1; transform: translateY(0) translateZ(0); }

/* Media Queries */
@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .span-3 { grid-column: span 2; }
  .hero { flex-direction: column; text-align: center; justify-content: center; min-height: auto; padding-top: 40px; gap: 40px; }
  .hero-wrapper { max-width: 800px; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .table-header, .table-row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .table-header { display: none; } /* Hide headers on mobile */
  .table-row { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; }
  .table-row div:nth-child(1) { font-weight: bold; }
  .table-row div:nth-child(2) { font-size: 1.2rem; }
  .table-row div:nth-child(3) { color: var(--text-main); font-weight: 500; font-size: 0.95rem; }
}

@media (max-width: 768px) {
  .main-content { padding-top: 100px; }
  .view-section { padding: 40px 24px; }
  .title-massive { font-size: 2.5rem; }
  .hero { padding-top: 20px; }
  .bento-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
  .span-2 .bento-content { max-width: 100%; }
  .bento-item { min-height: 280px; padding: 32px; }
  .bento-visual { opacity: 0.15; pointer-events: none; }
  .api-anim-container { right: 0; bottom: 0; padding: 10px; transform: scale(0.9); transform-origin: bottom right; }
  .process-step-full { flex-direction: column; padding: 32px; gap: 20px; text-align: left; }
  .cta-box { grid-template-columns: 1fr; padding: 40px 24px; }
  .footer-content { flex-direction: column; gap: 24px !important; text-align: center; align-items: center !important; }
  .legal { text-align: center !important; max-width: 100% !important; }
  .footer-social { display: flex !important; flex-direction: row !important; gap: 16px !important; align-items: center !important; justify-content: center !important; width: 100%; }
  .footer-social a { margin: 0 !important; }
  .nav-links { display: none; }
  
  .tape-marquee-wrapper { mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); }
  .tape-marquee-text { font-size: 0.95rem; padding: 0 16px; }
  
  .fab-wrapper { bottom: 20px; left: 50%; right: auto; transform: translateX(-50%); }
  .fab-toggle { padding: 14px 32px; font-size: 1.05rem; }

  /* Mobile Performance Optimizations */
  .grid-glow-1, .grid-glow-2, .grid-glow-3 { filter: none !important; animation: none !important; opacity: 0.02 !important; }
  .grid-lines, .grid-fade, .grid-pattern { animation: none !important; transform: none !important; }
  .light-dust { display: none !important; }
  .depth-card, .nav.scrolled, .fab-toggle, .api-sync-anim, .accordion-panel { 
      backdrop-filter: none !important; 
      -webkit-backdrop-filter: none !important; 
  }
  .nav.scrolled { background: rgba(255,255,255,0.98) !important; }
  .depth-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.05) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; }
}

/* --- Modal Overlay & Form --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--bezier-lux), visibility 0.4s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 40px;
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.5s var(--bezier-lux), opacity 0.5s var(--bezier-lux);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.6);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.05);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--brand-red);
}

@media (max-width: 768px) {
    .modal-container {
        padding: 32px 24px;
    }
}