/* ═══════════════════════════════════════════════════════════
   BOOPYCODE v3 — Dark Luxury Tech
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg: #0a0a0f;
    --bg2: #111118;
    --bg3: #181825;
    --surface: rgba(255,255,255,0.03);
    --surface-hover: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --text: #e8e8ed;
    --text2: #9898a8;
    --text3: #686878;
    --cyan: #06d6f0;
    --cyan2: #00b4d8;
    --emerald: #10f59b;
    --gold: #ffd166;
    --rose: #ff6b8a;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body {
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    overflow-x:hidden;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATED BACKGROUND
   ═══════════════════════════════════════════════════════════ */
.bg-mesh {
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-orb {
    position:absolute; border-radius:50%; filter:blur(120px); opacity:0.15;
    animation:orbFloat 20s ease-in-out infinite;
}
.bg-orb-1 { width:600px; height:600px; background:var(--cyan); top:-200px; left:-200px; animation-delay:0s; }
.bg-orb-2 { width:500px; height:500px; background:var(--emerald); bottom:-200px; right:-150px; animation-delay:-7s; }
.bg-orb-3 { width:400px; height:400px; background:var(--rose); top:50%; left:50%; animation-delay:-14s; }
@keyframes orbFloat {
    0%,100% { transform:translate(0,0) scale(1); }
    25% { transform:translate(80px,-40px) scale(1.1); }
    50% { transform:translate(-40px,-80px) scale(0.9); }
    75% { transform:translate(-60px,40px) scale(1.05); }
}

/* Particle canvas */
#particles-canvas {
    position:fixed; inset:0; z-index:0; pointer-events:none;
}
.bg-grid {
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.03;
    background-image:linear-gradient(rgba(255,255,255,0.5) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   LOADER
   ═══════════════════════════════════════════════════════════ */
.loader {
    position:fixed; inset:0; z-index:9999; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0.8s ease, visibility 0.8s ease;
}
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; }
.loader-logo { 
    font-family:var(--font-mono); font-size:3.5rem; font-weight:700; 
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:1.5rem; animation:loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%,100%{opacity:0.6;transform:scale(1)}
    50%{opacity:1;transform:scale(1.05)}
}
.loader-bar { width:180px; height:3px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; margin:0 auto; }
.loader-bar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--emerald),var(--cyan)); background-size:200% 100%; animation:loaderFill 1.6s ease forwards; }
@keyframes loaderFill { 0%{width:0} 50%{width:60%} 100%{width:100%} }
.loader-tagline { font-size:0.8rem; color:var(--text3); margin-top:1rem; letter-spacing:0.15em; text-transform:uppercase; }
.loader-dots { display:flex; gap:6px; justify-content:center; margin-top:0.75rem; }
.loader-dots span {
    width:6px; height:6px; border-radius:50%; background:var(--cyan);
    animation:dotBounce 1.4s ease-in-out infinite;
}
.loader-dots span:nth-child(2){animation-delay:0.2s;background:var(--emerald)}
.loader-dots span:nth-child(3){animation-delay:0.4s;background:var(--cyan)}
@keyframes dotBounce { 0%,80%,100%{transform:scale(0);opacity:0} 40%{transform:scale(1);opacity:1} }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION — clean top bar
   ═══════════════════════════════════════════════════════════ */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:16px 28px;
    display:flex; align-items:center; justify-content:space-between;
    transition:background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
    background:rgba(10,10,15,0.96);
    border-bottom:1px solid rgba(255,255,255,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.22);
}
.nav-logo {
    font-family:var(--font-mono); font-size:1.45rem; font-weight:700; color:var(--text); text-decoration:none;
    display:flex; align-items:center; gap:8px;
}
.nav-logo span { color:var(--cyan); font-size:1.4rem; }
.nav-right { display:flex; align-items:center; gap:16px; }

/* Language shortcuts */
.lang-shortcuts { display:flex; gap:2px; }
.lang-shortcuts button {
    background:none; border:none; color:var(--text3); font-size:0.72rem; font-weight:600; 
    padding:4px 6px; cursor:pointer; border-radius:4px; font-family:var(--font);
    letter-spacing:0.5px; transition:all 0.2s;
}
.lang-shortcuts button:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.lang-shortcuts button.active { color:var(--cyan); }

/* Language dropdown */
.lang-switch { position:relative; }
.lang-current {
    background:none; border:none; color:var(--text3); font-size:0.78rem; font-weight:700;
    padding:8px; cursor:pointer; border-radius:6px; font-family:var(--font);
    letter-spacing:0.5px; transition:all 0.2s; display:flex; align-items:center; gap:5px;
}
.lang-current:hover { color:var(--text); background:rgba(255,255,255,0.06); }
.lang-current svg { width:10px; height:7px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform 0.2s; }
.lang-current[aria-expanded="true"] svg { transform:rotate(180deg); }
.lang-dropdown {
    position:absolute; top:100%; right:0; margin-top:6px;
    background:rgba(18,18,24,0.97); backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:10px;
    padding:4px; min-width:60px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:all 0.2s;
}
.lang-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }
.lang-option {
    display:block; padding:8px 0; border-radius:6px; cursor:pointer;
    font-size:0.85rem; font-weight:600; color:var(--text2); text-align:center;
    transition:all 0.15s;
    background:none; border:none; width:100%; font-family:var(--font); letter-spacing:0.5px;
}
.lang-option:hover { background:rgba(255,255,255,0.06); color:var(--text); }
.lang-option.active { color:var(--cyan); background:rgba(6,214,240,0.06); }

/* Links — fullscreen overlay */
.nav-links {
    display:none; 
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:998;
    background:rgba(10,10,15,0.97); backdrop-filter:blur(30px);
    flex-direction:column; align-items:center; justify-content:center; gap:24px;
    list-style:none; margin:0; padding:0;
}
.nav-links.active { display:flex; }
.nav-links a {
    color:var(--text2); text-decoration:none; font-size:1.4rem; font-weight:500;
    transition:color 0.2s;
}
.nav-links a:hover,.nav-links a.active { color:var(--cyan); }
body.menu-open { overflow:hidden; }

/* Hamburger — always visible */
.nav-toggle {
    display:flex; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer;
    width:52px; height:52px; padding:0; position:relative; z-index:1001;
    align-items:center; justify-content:center;
}
.nav-toggle span {
    display:block; width:30px; height:2.5px; background:var(--text);
    border-radius:2px; transition:all 0.3s;
}
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(6px,6px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }

/* ═══════════════════════════════════════════════════════════
   AI SOLUTIONS SECTION
   ═══════════════════════════════════════════════════════════ */
.ai-showcase {
    display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:2rem;
}
@media(max-width:768px){ .ai-showcase{grid-template-columns:1fr} }

.ai-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:36px; position:relative; overflow:hidden;
    opacity:0; transform:translateX(80px);
    transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.ai-card.revealed {
    opacity:1; transform:translateX(0);
}
.ai-card:hover { border-color:var(--cyan); }
.ai-card::before {
    content:''; position:absolute; top:0; right:0; width:120px; height:120px;
    background:radial-gradient(circle,var(--cyan),transparent 70%);
    opacity:0; transition:opacity 0.4s; border-radius:50%; transform:translate(40px,-40px);
}
.ai-card:hover::before { opacity:0.06; }
.ai-card-icon {
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius); background:rgba(6,214,240,0.1); margin-bottom:1rem;
    color:var(--cyan);
}
.ai-card-icon svg { width:24px; height:24px; }
.ai-card h3 { font-size:1.2rem; font-weight:600; margin-bottom:0.6rem; }
.ai-card p { font-size:0.9rem; color:var(--text2); line-height:1.6; margin-bottom:1rem; }
.ai-features { display:flex; flex-wrap:wrap; gap:6px; }
.ai-feat {
    padding:4px 12px; border-radius:var(--radius-xl); font-size:0.75rem;
    background:rgba(6,214,240,0.08); color:var(--cyan); border:1px solid rgba(6,214,240,0.15);
}

/* Stack section (vertical cards) */
.stack-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:2rem;
}
@media(max-width:900px){ .stack-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:500px){ .stack-grid{grid-template-columns:1fr} }

.stack-item {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px; text-align:center; transition:all 0.3s;
}
.stack-item:hover { border-color:var(--cyan); transform:translateY(-4px); }
.stack-item .stack-icon { width:32px; height:32px; margin:0 auto 0.5rem; display:flex; align-items:center; justify-content:center; color:var(--cyan); }
.stack-item .stack-icon svg { width:100%; height:100%; }
.stack-item .stack-name { font-size:0.85rem; font-weight:600; }
.stack-item .stack-desc { font-size:0.75rem; color:var(--text3); margin-top:4px; }

/* Mobile */
@media(max-width:768px){
    .nav{ width:100%; max-width:none; padding:12px 16px; }
    .nav-logo{ font-size:1.25rem; }
    .nav-logo span{ font-size:1.25rem; }
    .nav-right{ gap:6px; }
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
    position:relative; z-index:1;
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:120px 24px 80px;
}
.hero-inner { max-width:900px; text-align:center; }
.hero-tag {
    display:inline-block; padding:6px 16px; border:1px solid var(--border);
    border-radius:var(--radius-xl); font-size:0.8rem; color:var(--text2); margin-bottom:2rem;
    letter-spacing:0.1em; text-transform:uppercase;
}
.hero h1 {
    font-size:clamp(3rem,8vw,6.5rem); font-weight:800; line-height:0.95; letter-spacing:-0.03em;
    margin-bottom:1.5rem;
}
.hero h1 .gradient {
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero p {
    font-size:1.2rem; color:var(--text2); max-width:600px; margin:0 auto 2.5rem; line-height:1.7;
}
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn {
    display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
    border-radius:var(--radius-xl); font-weight:600; font-size:0.95rem;
    text-decoration:none; cursor:pointer; border:none; transition:all 0.3s;
    font-family:var(--font);
}
.btn-primary {
    background:linear-gradient(135deg,var(--cyan),var(--emerald)); color:#000;
    box-shadow:0 4px 24px rgba(6,214,240,0.25);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(6,214,240,0.4); }
.btn-ghost {
    background:transparent; color:var(--text); border:1px solid var(--border);
}
.btn-ghost:hover { border-color:var(--text2); background:var(--surface); }

/* Hero scroll indicator */
.hero-scroll {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--text3); font-size:0.75rem; letter-spacing:0.1em;
}
.hero-scroll-line {
    width:1px; height:40px; background:linear-gradient(transparent,var(--text3));
    animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { opacity:0.3; transform:scaleY(1); }
    50% { opacity:1; transform:scaleY(1.4); }
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS COMMON
   ═══════════════════════════════════════════════════════════ */
.section-tag {
    display:inline-block; padding:4px 14px; border:1px solid var(--border);
    border-radius:var(--radius-xl); font-size:0.75rem; color:var(--cyan);
    letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1rem;
}
.section h2 {
    font-size:clamp(2rem,5vw,3.5rem); font-weight:700; letter-spacing:-0.02em;
    margin-bottom:0.75rem;
}
.section .subtitle {
    font-size:1.1rem; color:var(--text2); max-width:600px; margin-bottom:3rem;
}
.container { max-width:1200px; margin:0 auto; }

/* ═══════════════════════════════════════════════════════════
   SERVICES — Bento Grid
   ═══════════════════════════════════════════════════════════ */
.bento { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .bento{grid-template-columns:1fr} }

.bento-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:32px; transition:all 0.4s; cursor:pointer; position:relative; overflow:hidden;
}
.bento-card:hover {
    background:var(--surface-hover); border-color:var(--border-hover);
    transform:translateY(-4px);
}
.bento-card:hover .bento-glow {
    opacity:1;
}
.bento-glow {
    position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle at center,var(--cyan),transparent 70%);
    opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.bento-icon {
    width:48px; height:48px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
    background:rgba(6,214,240,0.1); margin-bottom:1.25rem; position:relative; z-index:1;
}
.bento-icon svg { width:24px; height:24px; stroke:var(--cyan); }
.bento-card h3 { font-size:1.15rem; font-weight:600; margin-bottom:0.5rem; position:relative; z-index:1; }
.bento-card p { font-size:0.9rem; color:var(--text2); line-height:1.6; position:relative; z-index:1; }
.bento-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:1rem; position:relative; z-index:1; }
.bento-tag {
    padding:3px 10px; border-radius:var(--radius-xl); font-size:0.72rem;
    background:rgba(255,255,255,0.04); color:var(--text2);
}

/* Big feature card */
.bento-card.featured {
    grid-column:span 2; display:flex; gap:40px; align-items:center;
    background:linear-gradient(135deg,rgba(6,214,240,0.05),rgba(16,245,155,0.05));
    border-color:rgba(6,214,240,0.15);
}
@media(max-width:900px){ .bento-card.featured{grid-column:span 1; flex-direction:column; gap:20px;} }
.bento-card.featured .bento-visual {
    flex-shrink:0; width:200px; height:140px;
    border-radius:var(--radius); background:rgba(0,0,0,0.3);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:2.5rem; color:var(--cyan);
}

/* ═══════════════════════════════════════════════════════════
   REFERENCES — Grid + Flip Animation
   ═══════════════════════════════════════════════════════════ */
.refs-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.ref-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; cursor:pointer; transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.ref-card:hover { border-color:var(--cyan); transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.3); }

/* Scroll-reveal — karty priletia sprava postupne */
.ref-flip { opacity:0; transform:translateX(100px) scale(0.85); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.ref-flip.flipped { opacity:1; transform:translateX(0) scale(1); }

/* Mockup preview */
.ref-preview { height:180px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.ref-preview::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4)); }
.ref-mockup { width:85%; max-width:260px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px; }
.ref-mockup-bar { display:flex; gap:4px; margin-bottom:8px; }
.ref-mockup-bar span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); }
.ref-mockup-bar span:nth-child(1) { background:#ff5f57; }
.ref-mockup-bar span:nth-child(2) { background:#ffbd2e; }
.ref-mockup-bar span:nth-child(3) { background:#27ca40; }

.ref-mockup-hero { height:36px; border-radius:4px; margin-bottom:6px; }
.ref-mockup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.ref-mockup-card { height:40px; border-radius:4px; }

.ref-mockup-calendar { }
.ref-mockup-cal-header { height:20px; background:rgba(255,255,255,0.08); border-radius:4px; margin-bottom:6px; }
.ref-mockup-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.ref-mockup-cal-day { height:18px; background:rgba(255,255,255,0.05); border-radius:3px; }
.ref-mockup-cal-day.active { background:var(--cyan); opacity:0.3; }

.ref-mockup-food { display:flex; gap:10px; align-items:center; }
.ref-mockup-food-img { width:50px; height:50px; background:rgba(255,255,255,0.06); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.ref-mockup-food-circle { width:28px; height:28px; border-radius:50%; border:2px solid #ffd166; opacity:0.6; }
.ref-mockup-food-info { flex:1; }
.ref-mockup-food-line { height:6px; background:rgba(255,255,255,0.2); border-radius:3px; margin-bottom:5px; width:100%; }
.ref-mockup-food-line.short { width:60%; }
.ref-mockup-food-price { height:14px; width:40px; background:#ffd166; opacity:0.4; border-radius:3px; margin-top:4px; }

.ref-mockup-shop { }
.ref-mockup-shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ref-mockup-product { background:rgba(255,255,255,0.04); border-radius:6px; padding:6px; }
.ref-mockup-prod-img { height:30px; background:rgba(255,255,255,0.08); border-radius:3px; margin-bottom:4px; }
.ref-mockup-prod-name { height:4px; background:rgba(255,255,255,0.15); border-radius:2px; margin-bottom:3px; width:70%; }
.ref-mockup-prod-price { height:6px; width:30px; background:var(--emerald); opacity:0.45; border-radius:3px; }

.ref-card-body { padding:18px 20px; }
.ref-card-body h3 { font-size:1.05rem; font-weight:600; margin-bottom:2px; }
.ref-card-body .url { font-size:0.78rem; color:var(--cyan); margin-bottom:8px; }
.ref-card-body p { font-size:0.82rem; color:var(--text2); line-height:1.5; }
.ref-tags { margin-top:10px; display:flex; flex-wrap:wrap; gap:4px; }

.ref-badge {
    display:inline-block; padding:3px 10px; border-radius:var(--radius-xl);
    font-size:0.68rem; background:rgba(6,214,240,0.1); color:var(--cyan);
}

/* ── Reference Detail Modal ── */
.ref-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.9); backdrop-filter:blur(16px); z-index:99999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.ref-modal-overlay.active { opacity:1; pointer-events:auto; }

.ref-modal { 
    background:var(--surface); border:1px solid var(--border); border-radius:20px; 
    width:90%; max-width:680px; max-height:85vh; overflow-y:auto; position:relative;
    animation:refModalIn 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
    box-shadow:0 0 80px rgba(6,214,240,0.08);
}
@keyframes refModalIn {
    from { opacity:0; transform:scale(0.85) translateY(50px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}

.ref-modal-close { position:absolute; top:14px; right:14px; z-index:2; background:rgba(0,0,0,0.6); border:none; color:#fff; cursor:pointer; padding:6px; border-radius:50%; transition:all 0.2s; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.ref-modal-close:hover { background:rgba(255,255,255,0.2); transform:scale(1.1); }
.ref-detail-hero { padding:40px 24px 30px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.ref-detail-hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.3), transparent); }
.ref-detail-mockup { width:85%; max-width:400px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px; position:relative; z-index:1; }
.ref-detail-browser { text-align:center; padding:20px 0; }
.ref-detail-pulse { width:64px; height:64px; border-radius:50%; border:2px solid; margin:0 auto 16px; animation:refPulse 2s ease infinite; }
@keyframes refPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.1); opacity:0.6; } }
.ref-detail-text { font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:4px; }
.ref-detail-url { font-size:0.85rem; color:var(--cyan); }
.ref-detail-body { padding:28px 32px; }
.ref-detail-body h2 { font-size:1.4rem; margin-bottom:4px; }
.ref-detail-link { font-size:0.85rem; color:var(--cyan); text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-bottom:16px; }
.ref-detail-link:hover { text-decoration:underline; }
.ref-detail-desc { font-size:0.9rem; color:var(--text2); line-height:1.7; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.ref-detail-section { margin-bottom:16px; }
.ref-detail-section h4 { font-size:0.9rem; font-weight:600; color:var(--cyan); margin-bottom:4px; }
.ref-detail-section p { font-size:0.85rem; color:var(--text2); line-height:1.6; }
.ref-detail-tech { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.ref-detail-tech span { padding:4px 12px; background:rgba(6,214,240,0.08); border:1px solid rgba(6,214,240,0.2); border-radius:20px; font-size:0.72rem; color:var(--cyan); }

@media(max-width:1100px){ .refs-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .refs-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   PROCESS — Timeline
   ═══════════════════════════════════════════════════════════ */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .process-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:500px){ .process-grid{grid-template-columns:1fr} }

.process-card {
    text-align:center; padding:32px 20px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    transition:all 0.4s; position:relative;
}
.process-card:hover { border-color:var(--cyan); }
.process-num {
    font-family:var(--font-mono); font-size:3rem; font-weight:800;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:0.5rem;
}
.process-card h4 { font-size:1rem; font-weight:600; margin-bottom:0.5rem; }
.process-card p { font-size:0.85rem; color:var(--text2); line-height:1.5; }

/* ═══════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════ */
.about-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
@media(max-width:768px){ .about-grid{grid-template-columns:1fr; gap:40px;} }

.about-text p {
    color:var(--text2); font-size:1.05rem; line-height:1.8; margin-bottom:1.5rem;
}
.about-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.stat-box {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; text-align:center; transition:all 0.3s;
}
.stat-box:hover { border-color:var(--cyan); }
.stat-num {
    font-size:2.5rem; font-weight:800;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:0.85rem; color:var(--text2); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */
.contact-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:40px;
}
@media(max-width:768px){ .contact-grid{grid-template-columns:1fr} }

.contact-info { display:flex; flex-direction:column; gap:16px; }
.contact-item {
    display:flex; align-items:center; gap:16px; padding:18px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    text-decoration:none; color:inherit; transition:all 0.3s;
}
.contact-item:hover { border-color:var(--cyan); }
.contact-item-icon {
    width:44px; height:44px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
    background:rgba(6,214,240,0.1); flex-shrink:0;
    color:var(--cyan);
}
.contact-item-icon svg { display:block; }
.contact-item h4 { font-size:0.9rem; font-weight:600; }
.contact-item span { font-size:0.85rem; color:var(--text2); }

.form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:500px){ .form-row{grid-template-columns:1fr} }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.8rem; color:var(--text2); font-weight:500; }
.form-group input,.form-group textarea,.form-group select {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:12px 16px; color:var(--text); font-family:var(--font); font-size:0.9rem;
    transition:all 0.3s; outline:none;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
    border-color:var(--cyan); box-shadow:0 0 0 3px rgba(6,214,240,0.1);
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239898a8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

.btn-submit {
    width:100%; padding:16px; background:linear-gradient(135deg,var(--cyan),var(--emerald));
    color:#000; border:none; border-radius:var(--radius); font-size:1rem; font-weight:600;
    cursor:pointer; transition:all 0.3s; font-family:var(--font);
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(6,214,240,0.4); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
    position:relative; z-index:1; border-top:1px solid var(--border);
    padding:48px 24px 32px;
}
.footer-inner {
    max-width:1200px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
}
.footer-brand {
    font-family:var(--font-mono); font-size:1.1rem; font-weight:700;
    display:flex; align-items:center; gap:6px;
}
.footer-brand span:first-child { color:var(--cyan); }
.footer-links { display:flex; gap:24px; }
.footer-links a { color:var(--text2); text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
.footer-links a:hover { color:var(--text); }
.footer-copy { font-size:0.8rem; color:var(--text3); }

/* ═══════════════════════════════════════════════════════════
   UTILITY ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.reveal {
    opacity:0; transform:translateY(30px);
    transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Cursor glow */
.cursor-glow {
    position:fixed; width:400px; height:400px; border-radius:50%; pointer-events:none; z-index:0;
    background:radial-gradient(circle,rgba(6,214,240,0.06),transparent 70%);
    transform:translate(-50%,-50%); transition:left 0.3s ease-out, top 0.3s ease-out;
}

/* ═══════════════════════════════════════════════════════════
   HERO TYPEWRITER
   ═══════════════════════════════════════════════════════════ */
.typewriter-cursor::after {
    content:'|'; animation:blink 0.8s step-end infinite; color:var(--cyan); font-weight:300;
}
@keyframes blink { 50%{opacity:0} }

/* Rotating words */
.rotating-words {
    display:inline-block; position:relative; vertical-align:text-bottom; height:1.15em;
    overflow:hidden; text-align:left;
}
.rotating-words span {
    display:block; line-height:1.15em; white-space:nowrap;
    animation:rotateWord 8s ease-in-out infinite;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    font-weight:800;
}
@keyframes rotateWord {
    0%,15%{transform:translateY(0)}
    20%,35%{transform:translateY(-1.15em)}
    40%,55%{transform:translateY(-2.3em)}
    60%,75%{transform:translateY(-3.45em)}
    80%,95%{transform:translateY(-4.6em)}
    100%{transform:translateY(0)}
}

/* Hero stats */
.hero-stats {
    display:flex; gap:32px; justify-content:center; margin-top:2rem;
    padding-top:1.5rem; border-top:1px solid var(--border);
}
.hero-stat { text-align:center; }
.hero-stat-num { font-size:1.5rem; font-weight:800; color:var(--text); }
.hero-stat-label { font-size:0.75rem; color:var(--text3); margin-top:2px; }

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════ */
.newsletter {
    display:flex; gap:8px; max-width:380px;
}
.newsletter input {
    flex:1; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 14px; color:var(--text);
    font-family:var(--font); font-size:0.85rem; outline:none; transition:all 0.3s;
}
.newsletter input:focus { border-color:var(--cyan); }
.newsletter button {
    padding:10px 20px; background:linear-gradient(135deg,var(--cyan),var(--emerald));
    color:#000; border:none; border-radius:var(--radius-sm); font-weight:600;
    cursor:pointer; font-family:var(--font); font-size:0.85rem; transition:all 0.3s;
    white-space:nowrap;
}
.newsletter button:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(6,214,240,0.3); }

/* Section transitions */
.section { 
    position:relative; z-index:1; padding:120px 24px;
    opacity:0; transform:translateY(40px);
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.section.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════════════
   3D TILT EFFECT
   ═══════════════════════════════════════════════════════════ */
.tilt {
    transform-style:preserve-3d; perspective:1000px;
    transition:transform 0.1s ease-out;
}
.tilt:hover { z-index:10; }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonials-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:900px){ .testimonials-grid{grid-template-columns:1fr} }

.testimonial-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px; transition:all 0.4s; position:relative;
}
.testimonial-card:hover { border-color:var(--cyan); transform:translateY(-4px); }
.testimonial-card::before {
    content:'"'; position:absolute; top:12px; left:20px; font-size:4rem; line-height:1;
    font-family:Georgia,serif; color:var(--cyan); opacity:0.15;
}
.testimonial-card p {
    font-size:0.95rem; color:var(--text2); line-height:1.7; font-style:italic; position:relative; z-index:1;
}
.testimonial-author {
    display:flex; align-items:center; gap:12px; margin-top:1.25rem; position:relative; z-index:1;
}
.testimonial-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.9rem; color:#000;
}
.testimonial-author strong { display:block; font-size:0.9rem; }
.testimonial-author span { font-size:0.8rem; color:var(--text3); }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════ */
.back-to-top {
    position:fixed; bottom:32px; left:32px; z-index:999;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface); border:1px solid var(--border);
    color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(20px);
    transition:all 0.3s; font-size:1.2rem;
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { border-color:var(--cyan); background:var(--surface-hover); }

/* ═══════════════════════════════════════════════════════════
   SPARKLE TRAIL
   ═══════════════════════════════════════════════════════════ */
.spark {
    position:fixed; pointer-events:none; z-index:9999;
    width:6px; height:6px; border-radius:50%;
    background:var(--cyan);
    animation:sparkFade 0.8s ease-out forwards;
}
@keyframes sparkFade {
    0%{opacity:1; transform:scale(1) translate(0,0)}
    100%{opacity:0; transform:scale(0) translate(var(--dx),var(--dy))}
}

/* ═══════════════════════════════════════════════════════════
   FORM SUCCESS STATE
   ═══════════════════════════════════════════════════════════ */
.form-success {
    display:none; text-align:center; padding:40px 20px;
    animation:scaleBounce 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
.form-success.visible { display:block; }
.form-success .check-icon {
    width:72px; height:72px; border-radius:50%; margin:0 auto 20px;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    display:flex; align-items:center; justify-content:center; font-size:2rem;
}
@keyframes scaleBounce {
    0%{transform:scale(0)} 60%{transform:scale(1.15)} 80%{transform:scale(0.95)} 100%{transform:scale(1)}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
    .hero { padding:100px 16px 60px; min-height:90vh; width:100%; overflow:hidden; }
    .hero-inner { width:100%; max-width:100%; overflow:hidden; }
    .hero h1 { font-size:2.4rem; max-width:100%; word-break:break-word; }
    .hero p { font-size:1rem; max-width:100%; white-space:normal; }
    .hero-tag { max-width:100%; white-space:normal; }
    .hero-btns { flex-direction:column; align-items:stretch; width:100%; }
    .hero-btns .btn { justify-content:center; white-space:nowrap; }
    .hero-scroll { display:none; }
    .hero-stats { gap:16px; flex-wrap:wrap; }
    .hero-stat-num { font-size:1.2rem; }

    .section { padding:72px 16px; width:100%; overflow:hidden; }
    .section h2 { font-size:2rem; }

    .bento { grid-template-columns:1fr; }
    .bento-card.featured { grid-column:span 1; flex-direction:column; gap:20px; }
    .bento-card.featured .bento-visual { width:100%; height:120px; }

    .about-grid { grid-template-columns:1fr; gap:32px; }
    .about-stats { grid-template-columns:repeat(2,1fr); }

    .contact-grid { grid-template-columns:1fr; }

    .footer-inner { flex-direction:column; text-align:center; }
    .footer-links { flex-wrap:wrap; justify-content:center; }

    .cursor-glow { display:none; }
    .bg-orb { opacity:0.08; }
    .bg-orb-2, .bg-orb-3 { right:auto; left:auto; }
}

@media(max-width:400px){
    .hero h1 { font-size:2rem; }
    .about-stats { grid-template-columns:1fr; }
    .ref-card { min-width:280px; max-width:300px; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */
.scroll-progress {
    position:fixed; top:0; left:0; height:2px; z-index:9999;
    background:linear-gradient(90deg,var(--cyan),var(--emerald));
    transition:width 0.1s linear;
}

/* ═══════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
    border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px;
    overflow:hidden; transition:all 0.3s;
}
.faq-item:hover { border-color:var(--border-hover); }
.faq-q {
    width:100%; padding:20px 24px; background:var(--surface); border:none;
    color:var(--text); font-family:var(--font); font-size:1rem; font-weight:600;
    text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    transition:all 0.3s;
}
.faq-q:hover { color:var(--cyan); }
.faq-q::after {
    content:'+'; font-size:1.3rem; font-weight:300; color:var(--text2);
    transition:transform 0.3s; flex-shrink:0; margin-left:16px;
}
.faq-item.open .faq-q::after { transform:rotate(45deg); color:var(--cyan); }
.faq-a {
    max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.4s ease;
    padding:0 24px; color:var(--text2); font-size:0.9rem; line-height:1.7;
}
.faq-item.open .faq-a { max-height:300px; padding:0 24px 20px; }

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */
.skip-link {
    position:absolute;top:8px;left:8px;z-index:10000;
    background:var(--cyan);color:#000;padding:8px 20px;border-radius:8px;
    font-weight:600;text-decoration:none;font-size:0.9rem;
    transform:translateY(-120%);transition:transform 0.2s;
}
.skip-link:focus{transform:translateY(0)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
*:focus:not(:focus-visible){outline:none}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* ═══════════════════════════════════════════════════════════
   COOKIE BANNER
   ═══════════════════════════════════════════════════════════ */
.cookie-banner {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9998;
    background:rgba(18,18,24,0.97); backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:20px 28px; max-width:500px; width:calc(100% - 48px);
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    opacity:0; visibility:hidden; transform:translateX(-50%) translateY(20px);
    transition:all 0.4s;
}
.cookie-banner.visible { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.cookie-banner p { font-size:0.85rem; color:var(--text2); flex:1; min-width:200px; line-height:1.5; }
.cookie-btns { display:flex; gap:8px; flex-shrink:0; }
.cookie-btn {
    padding:8px 18px; border-radius:var(--radius-sm); font-size:0.8rem; font-weight:600;
    cursor:pointer; border:none; font-family:var(--font); transition:all 0.2s;
}
.cookie-btn.accept { background:linear-gradient(135deg,var(--cyan),var(--emerald)); color:#000; }
.cookie-btn.accept:hover { transform:translateY(-1px); }
.cookie-btn.settings { background:transparent; border:1px solid var(--border); color:var(--text2); }
.cookie-btn.settings:hover { border-color:var(--cyan); color:var(--text); }

/* Cookie settings modal */
.cookie-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(6px); z-index:99999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.cookie-modal-overlay.active { opacity:1; pointer-events:auto; }
.cookie-modal { background:rgba(18,18,24,0.98); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 30px; max-width:460px; width:calc(100% - 40px); box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.cookie-modal h3 { font-size:1.2rem; margin-bottom:4px; }
.cookie-option { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.cookie-option-info strong { display:block; font-size:0.9rem; margin-bottom:2px; }
.cookie-option-info span { font-size:0.75rem; color:var(--text3); line-height:1.4; display:block; }
.cookie-toggle { position:relative; width:44px; height:24px; flex-shrink:0; cursor:pointer; }
.cookie-toggle input { display:none; }
.cookie-toggle span { position:absolute; inset:0; background:rgba(255,255,255,0.15); border-radius:12px; transition:background 0.3s; }
.cookie-toggle span::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform 0.3s; }
.cookie-toggle input:checked + span { background:linear-gradient(135deg,var(--cyan),var(--emerald)); }
.cookie-toggle input:checked + span::after { transform:translateX(20px); }
.cookie-toggle.disabled { opacity:0.5; cursor:default; }
.cookie-modal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

/* ═══════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON
   ═══════════════════════════════════════════════════════════ */
.fab {
    position:fixed; bottom:28px; right:28px; z-index:998;
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    color:#000; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 24px rgba(6,214,240,0.3);
    transition:all 0.3s; animation:fabPulse 2s ease-in-out infinite;
    text-decoration:none;
}
.fab:hover { transform:scale(1.1); box-shadow:0 8px 32px rgba(6,214,240,0.5); animation:none; }
@keyframes fabPulse {
    0%,100%{box-shadow:0 4px 24px rgba(6,214,240,0.3)}
    50%{box-shadow:0 4px 36px rgba(6,214,240,0.6)}
}
.fab svg { width:24px; height:24px; stroke:#000; }
.fab-tooltip {
    position:absolute; right:70px; top:50%; transform:translateY(-50%);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:8px 14px; font-size:0.8rem; color:var(--text); white-space:nowrap;
    opacity:0; visibility:hidden; transition:all 0.3s; pointer-events:none;
}
.fab:hover .fab-tooltip { opacity:1; visibility:visible; }

/* ═══════════════════════════════════════════════════════════
   AI CHAT WIDGET
   ═══════════════════════════════════════════════════════════ */
.chat-widget {
    position:fixed; bottom:28px; right:28px; z-index:997;
}
.chat-toggle {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    color:#000; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 24px rgba(6,214,240,0.3);
    transition:all 0.3s; animation:fabPulse 2s ease-in-out infinite;
    position:relative; z-index:1;
}
.chat-toggle:hover { transform:scale(1.1); box-shadow:0 8px 32px rgba(6,214,240,0.5); animation:none; }
.chat-toggle svg { width:24px; height:24px; stroke:#000; }
.chat-toggle .close-icon { display:none; }
.chat-widget.open .chat-toggle .chat-icon { display:none; }
.chat-widget.open .chat-toggle .close-icon { display:block; }
.chat-widget.open .chat-toggle { animation:none; }

.chat-panel {
    position:absolute; bottom:72px; right:0; width:380px; max-height:520px;
    background:rgba(18,18,24,0.98); backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transform:translateY(20px) scale(0.95);
    transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.chat-widget.open .chat-panel { opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.chat-header {
    padding:16px 20px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px;
}
.chat-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:0.8rem; color:#000;
}
.chat-header h4 { font-size:0.95rem; margin:0; }
.chat-header span { font-size:0.72rem; color:var(--emerald); display:flex; align-items:center; gap:4px; }
.chat-header span::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--emerald); display:inline-block; }

.chat-body {
    flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;
    max-height:340px; scroll-behavior:smooth;
}
.chat-body::-webkit-scrollbar { width:4px; }
.chat-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.chat-bubble {
    padding:10px 14px; border-radius:14px; font-size:0.85rem; line-height:1.5; max-width:85%;
    animation:chatIn 0.3s ease;
}
@keyframes chatIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chat-bubble.ai { background:var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-bubble.user { background:rgba(6,214,240,0.1); border:1px solid rgba(6,214,240,0.15); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-typing { padding:8px 14px; align-self:flex-start; display:none; }
.chat-typing.active { display:flex; gap:4px; }
.chat-typing span { width:6px; height:6px; border-radius:50%; background:var(--text2); animation:dotBounce 1.4s ease-in-out infinite; }
.chat-typing span:nth-child(2){animation-delay:0.2s} .chat-typing span:nth-child(3){animation-delay:0.4s}

.chat-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; }
.chat-footer input {
    flex:1; background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:10px 16px; color:var(--text); font-family:var(--font); font-size:16px; outline:none;
    transition:all 0.3s;
}
.chat-footer input:focus { border-color:var(--cyan); }
.chat-footer button {
    width:38px; height:38px; border-radius:50%; border:none;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    color:#000; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; flex-shrink:0;
}
.chat-footer button:hover { transform:scale(1.05); }
.chat-footer button:disabled { opacity:0.5; cursor:default; }

@media(max-width:480px){
    .chat-panel { width:calc(100vw - 32px); right:-16px; max-height:60vh; }
    .chat-body { max-height:40vh; }
}

/* ═══════════════════════════════════════════════════════════
   FORM VALIDATION
   ═══════════════════════════════════════════════════════════ */
.form-group.error input,.form-group.error textarea,.form-group.error select {
    border-color:var(--rose); box-shadow:0 0 0 3px rgba(255,107,138,0.1);
}
.form-group.success input,.form-group.success textarea,.form-group.success select {
    border-color:var(--emerald); box-shadow:0 0 0 3px rgba(16,245,155,0.1);
}
.form-error-msg {
    font-size:0.72rem; color:var(--rose); margin-top:4px; display:none;
}
.form-group.error .form-error-msg { display:block; }

/* ═══════════════════════════════════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════════════════════ */
.page-404 {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    text-align:center; position:relative; z-index:1; padding:24px;
}
.page-404 h1 {
    font-size:clamp(6rem,15vw,12rem); font-weight:800; line-height:1;
    background:linear-gradient(135deg,var(--cyan),var(--emerald));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-404 p { font-size:1.2rem; color:var(--text2); margin:1rem 0 2rem; }

/* ═══════════════════════════════════════════════════════════
   PRICE CALCULATOR (HOMEPAGE)
   ═══════════════════════════════════════════════════════════ */
.calc-grid { display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start; }
.calc-main { display:flex; flex-direction:column; gap:28px; }
.calc-q h4 { font-size:0.95rem; font-weight:600; margin-bottom:4px; color:var(--text); }
.calc-q .calc-q-desc { font-size:0.78rem; color:var(--text3); margin-bottom:14px; }

.calc-types { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.calc-type-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 14px; text-align:center; cursor:pointer; transition:all 0.25s;
}
.calc-type-card:hover { background:var(--surface-hover); border-color:var(--border-hover); transform:translateY(-2px); }
.calc-type-card.active { border-color:var(--cyan); background:rgba(6,214,240,0.06); box-shadow:0 0 20px rgba(6,214,240,0.1); }
.calc-type-card .calc-icon { width:36px; height:36px; margin:0 auto 8px; color:var(--cyan); display:flex; align-items:center; justify-content:center; }
.calc-type-card .calc-icon svg { display:block; }
.calc-type-card h5 { font-size:0.82rem; font-weight:600; margin-bottom:2px; }
.calc-type-card .calc-price { font-size:0.72rem; color:var(--emerald); font-weight:500; }

.calc-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.calc-opt {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:12px 16px; cursor:pointer; transition:all 0.2s; font-size:0.85rem; color:var(--text2);
    display:flex; align-items:center; gap:10px;
}
.calc-opt:hover { background:var(--surface-hover); border-color:var(--border-hover); }
.calc-opt.active { border-color:var(--cyan); color:var(--text); background:rgba(6,214,240,0.05); }
.calc-opt-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; }
.calc-opt.active .calc-opt-radio { border-color:var(--cyan); }
.calc-opt.active .calc-opt-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--cyan); }

.calc-features { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-feat {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; cursor:pointer; transition:all 0.2s; font-size:0.78rem; color:var(--text2);
    display:flex; align-items:center; gap:8px; user-select:none;
}
.calc-feat:hover { background:var(--surface-hover); }
.calc-feat.active { border-color:var(--cyan); color:var(--text); background:rgba(6,214,240,0.05); }
.calc-feat .calc-check {
    width:16px; height:16px; border-radius:4px; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s;
}
.calc-feat.active .calc-check { border-color:var(--cyan); background:var(--cyan); }
.calc-feat.active .calc-check::after { content:'✓'; font-size:10px; color:#000; font-weight:700; }

.calc-timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.calc-tl {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px; text-align:center; cursor:pointer; transition:all 0.25s;
}
.calc-tl:hover { background:var(--surface-hover); transform:translateY(-2px); }
.calc-tl.active { border-color:var(--cyan); background:rgba(6,214,240,0.06); }
.calc-tl h5 { font-size:0.85rem; font-weight:600; margin-bottom:4px; }
.calc-tl p { font-size:0.72rem; color:var(--text3); margin-bottom:4px; }
.calc-tl .calc-surcharge { font-size:0.72rem; font-weight:600; }
.calc-tl .calc-surcharge.extra { color:var(--rose); }
.calc-tl .calc-surcharge.saving { color:var(--emerald); }

.calc-sidebar {
    background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px 24px; position:sticky; top:100px;
}
.calc-sidebar h3 { font-size:1.1rem; font-weight:700; margin-bottom:20px; }
.calc-summary-item {
    display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border);
    font-size:0.85rem; color:var(--text2);
}
.calc-summary-item:last-child { border-bottom:none; }
.calc-total { 
    margin-top:16px; padding-top:16px; border-top:2px solid var(--border);
    display:flex; justify-content:space-between; align-items:baseline;
}
.calc-total-label { font-size:0.9rem; font-weight:600; }
.calc-total-price { font-size:1.8rem; font-weight:800; color:var(--emerald); font-family:var(--font-mono); }
.calc-total-price span { font-size:0.9rem; font-weight:400; color:var(--text3); }
.calc-sidebar .btn { width:100%; margin-top:16px; }
.calc-note { font-size:0.7rem; color:var(--text3); text-align:center; margin-top:10px; }
.calc-empty { text-align:center; color:var(--text3); padding:20px 0; font-size:0.85rem; }

/* Quote form kontaktne polia */
.calc-contact-fields { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.calc-label { font-size:0.75rem; font-weight:500; color:var(--text2); margin-bottom:-6px; }
.calc-input { width:100%; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.85rem; font-family:var(--font); transition:border-color 0.2s; box-sizing:border-box; }
.calc-input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(6,214,240,0.1); }
.calc-input::placeholder { color:var(--text3); }
.calc-textarea { min-height:80px; resize:vertical; }
.calc-summary-compact { background:var(--surface); border-radius:10px; padding:12px; margin-bottom:12px; font-size:0.78rem; }
.calc-summary-compact .calc-summary-item { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.calc-summary-compact .calc-summary-item:last-child { border-bottom:none; }
.calc-summary-compact .calc-summary-item span:first-child { color:var(--text3); }
.calc-summary-compact .calc-summary-item span:last-child { color:var(--text); font-weight:500; }
.calc-summary-tag { display:inline-block; background:rgba(6,214,240,0.1); color:var(--cyan); padding:2px 7px; border-radius:4px; font-size:0.7rem; }

/* Thank You Modal */
.quote-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:10000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.quote-modal-overlay.active { opacity:1; pointer-events:auto; }
.quote-modal { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px 36px; max-width:500px; width:90%; text-align:center; position:relative; animation:fadeInUp 0.4s ease; }
.quote-modal-close { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--text3); cursor:pointer; padding:4px; border-radius:6px; transition:all 0.2s; }
.quote-modal-close:hover { color:var(--text); background:var(--surface-hover); }
.quote-modal-icon { width:72px; height:72px; margin:0 auto 20px; background:rgba(16,245,155,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--emerald); }
.quote-modal h3 { font-size:1.4rem; font-weight:700; margin-bottom:12px; color:var(--text); }
.quote-modal > p { font-size:0.9rem; color:var(--text2); line-height:1.6; margin-bottom:24px; }
.quote-modal-steps { display:flex; flex-direction:column; gap:10px; text-align:left; margin-bottom:8px; }
.qm-step { display:flex; align-items:center; gap:12px; font-size:0.85rem; color:var(--text2); }
.qm-step-num { width:28px; height:28px; border-radius:50%; background:rgba(6,214,240,0.12); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; flex-shrink:0; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ── Project Wizard Modal ── */
.wizard-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(10px); z-index:10001; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.wizard-overlay.active { opacity:1; pointer-events:auto; }
.wizard { background:var(--surface); border:1px solid var(--border); border-radius:20px; width:90%; max-width:600px; max-height:85vh; display:flex; flex-direction:column; position:relative; animation:fadeInUp 0.35s ease; overflow:hidden; }
.wizard-close { position:absolute; top:14px; right:14px; z-index:2; background:none; border:none; color:var(--text3); cursor:pointer; padding:4px; border-radius:6px; transition:all 0.2s; }
.wizard-close:hover { color:var(--text); background:var(--surface-hover); }
.wizard-progress { height:3px; background:var(--border); flex-shrink:0; }
.wizard-progress-bar { height:100%; background:linear-gradient(90deg,var(--cyan),var(--emerald)); transition:width 0.4s ease; width:0%; }
.wizard-body { padding:32px 28px 16px; flex:1; overflow-y:auto; min-height:200px; }
.wizard-body h3 { font-size:1.2rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.wizard-body .wiz-sub { font-size:0.82rem; color:var(--text3); margin-bottom:20px; }

/* Wizard - Type cards */
.wiz-types { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wiz-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all 0.2s; background:var(--bg); text-align:center; }
.wiz-card:hover { border-color:var(--border-hover); background:var(--surface-hover); transform:translateY(-2px); }
.wiz-card.active { border-color:var(--cyan); background:rgba(6,214,240,0.06); box-shadow:0 0 16px rgba(6,214,240,0.1); }
.wiz-card.ai-highlight { border-color:rgba(16,245,155,0.3); background:rgba(16,245,155,0.04); }
.wiz-card.ai-highlight:hover { border-color:rgba(16,245,155,0.5); background:rgba(16,245,155,0.08); }
.wiz-card.ai-highlight.active { border-color:var(--emerald); background:rgba(16,245,155,0.1); box-shadow:0 0 20px rgba(16,245,155,0.15); }
.wiz-card.ai-highlight .wiz-card-icon { color:var(--emerald); }
.wiz-card.ai-highlight span { color:var(--emerald); font-weight:600; }
.wiz-feat.ai-feat.active { border-color:#ffd166; background:rgba(255,209,102,0.1); color:#ffd166; }
.wiz-card-icon { width:44px; height:44px; color:var(--cyan); display:flex; align-items:center; justify-content:center; }
.wiz-card span { font-size:0.8rem; font-weight:500; color:var(--text2); }
.wiz-card.active span { color:var(--text); }

/* Wizard - Radio options */
.wiz-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.wiz-opt { padding:14px 16px; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:0.85rem; color:var(--text2); transition:all 0.2s; background:var(--bg); }
.wiz-opt:hover { border-color:var(--border-hover); background:var(--surface-hover); }
.wiz-opt.active { border-color:var(--cyan); color:var(--text); background:rgba(6,214,240,0.05); }

/* Wizard - Features */
.wiz-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.wiz-feat { padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:0.75rem; color:var(--text2); text-align:center; transition:all 0.2s; }
.wiz-feat:hover { border-color:var(--border-hover); }
.wiz-feat.active { border-color:var(--emerald); background:rgba(16,245,155,0.08); color:var(--emerald); }

/* Wizard - Timeline */
.wiz-timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wiz-tl { padding:20px 14px; border:1px solid var(--border); border-radius:12px; cursor:pointer; text-align:center; transition:all 0.2s; background:var(--bg); }
.wiz-tl:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.wiz-tl.active { border-color:var(--cyan); background:rgba(6,214,240,0.05); }
.wiz-tl h4 { font-size:0.85rem; font-weight:600; color:var(--text); margin-bottom:4px; }
.wiz-tl p { font-size:0.75rem; color:var(--text3); margin-bottom:6px; }
.wiz-tl span { font-size:0.7rem; color:var(--text2); }
.wiz-tl.active span { color:var(--cyan); }

/* Wizard - Contact */
.wiz-contact { display:flex; flex-direction:column; gap:10px; }
.wiz-input { width:100%; padding:12px 14px; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:0.9rem; font-family:var(--font); transition:border-color 0.2s; box-sizing:border-box; }
.wiz-input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(6,214,240,0.1); }
.wiz-input::placeholder { color:var(--text3); }
.wiz-textarea { min-height:80px; resize:vertical; }

/* Wizard - Footer */
.wizard-footer { display:flex; justify-content:flex-end; padding:16px 28px 24px; gap:12px; flex-shrink:0; border-top:1px solid rgba(255,255,255,0.05); }
.wizard-footer .wizard-btn-back { margin-right:auto; }
.wizard-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:10px; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:none; }
.wizard-btn-back { background:var(--bg); color:var(--text2); }
.wizard-btn-back:hover { color:var(--text); background:var(--surface-hover); }
.wizard-btn-next { background:var(--cyan); color:#000; }
.wizard-btn-next:hover { filter:brightness(1.15); transform:translateY(-1px); }
.wizard-btn-next:disabled { opacity:0.4; cursor:not-allowed; filter:none; transform:none; }

/* Wizard trigger button on homepage */
.wizard-trigger { box-shadow:0 0 32px rgba(6,214,240,0.2); transition:all 0.3s; }
.wizard-trigger:hover { box-shadow:0 0 48px rgba(6,214,240,0.35); transform:translateY(-3px); }

@media(max-width:600px){
    .wiz-types,.wiz-feats,.wiz-timeline { grid-template-columns:repeat(2,1fr); }
    .wiz-opts { grid-template-columns:1fr; }
    .wizard { max-width:95%; }
}

@media(max-width:900px){
    .calc-grid { grid-template-columns:1fr; }
    .calc-sidebar { position:static; }
    .calc-types { grid-template-columns:repeat(2,1fr); }
    .calc-features { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:500px){
    .calc-types,.calc-opts,.calc-timeline { grid-template-columns:1fr; }
    .calc-features { grid-template-columns:1fr; }
}