/* ═══════════════════════════════════════════════════════════
   SONATAB CORE v3 — 20% compact · light-only · mobile-first
   ═══════════════════════════════════════════════════════════ */
html { font-size: 12.8px; }
:root { --copper: #c86b3c; --brass: #d4af37; --nickel: #b8c0cc; --bronze: #8b6f47; }
body { background: #e2e8f0; color: #0f172a; overflow-x: hidden; }
@media (pointer: fine) { body.cursor-ready { cursor: none; } }
.noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; transform: translate(-50%,-50%); border-radius: 50%; z-index: 10000; pointer-events: none; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }
.cursor-dot { width: 4px; height: 4px; background: #0f172a; transition: transform 0.15s, background 0.2s; }
.cursor-ring { width: 32px; height: 32px; border: 1.5px solid rgba(15,23,42,0.12); transition: width 0.35s cubic-bezier(.16,1,.3,1), height 0.35s cubic-bezier(.16,1,.3,1), border-color 0.3s, background 0.3s; }
body.cursor-hover .cursor-ring { width: 54px; height: 54px; background: rgba(200,107,60,0.06); border-color: rgba(200,107,60,0.25); }
body.cursor-hover .cursor-dot { transform: translate(-50%,-50%) scale(2.5); background: var(--copper); }
#preloader { transition: opacity 1.2s cubic-bezier(.16,1,.3,1), visibility 1.2s; }
.glass { background: rgba(255,255,255,0.42); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 20px 40px -10px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.6); }
.glass:hover { box-shadow: 0 20px 40px -10px rgba(15,23,42,0.1), inset 0 1px 0 rgba(255,255,255,0.8); }
.glass-nav { background: rgba(255,255,255,0.05); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.15); transition: all 0.4s; }
.glass-nav.scrolled { background: rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.25); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.text-gradient-metal { background: linear-gradient(135deg, var(--copper), var(--brass), #1e293b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,107,60,0.18), rgba(212,175,55,0.12), transparent); }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl !important; }
.material-btn.active { border-color: var(--copper) !important; box-shadow: 0 0 32px rgba(200,107,60,0.18) !important; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.product-card { transition: all 0.5s cubic-bezier(.16,1,.3,1); }
.product-card:hover { transform: translateY(-5px); }
.product-card:hover .product-icon { transform: scale(1.06); }
.product-icon { transition: transform 0.5s cubic-bezier(.16,1,.3,1); }
#loader-counter { font-variant-numeric: tabular-nums; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer-text { background: linear-gradient(90deg, #0f172a 40%, var(--copper) 50%, #0f172a 60%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s ease-in-out infinite; }
.profile-card { transition: all 0.4s cubic-bezier(.16,1,.3,1); }
.profile-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px -8px rgba(200,107,60,0.15); }
.spec-tag { font-size: 7px; padding: 2px 6px; border-radius: 5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.service-card { position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--copper), var(--brass)); transform: scaleX(0); transition: transform 0.5s cubic-bezier(.16,1,.3,1); transform-origin: left; }
.service-card:hover::before { transform: scaleX(1); }
#main-nav { z-index: 9990 !important; }
#scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; background:linear-gradient(90deg,var(--copper),var(--brass)); z-index:99999; pointer-events:none; transform-origin:left; transform:scaleX(0); transition:transform 0.12s linear; will-change:transform; }
#section-dots { position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:9980; display:flex; flex-direction:column; gap:8px; }
.s-dot { width:6px; height:6px; border-radius:50%; border:1.5px solid rgba(15,23,42,0.25); background:transparent; cursor:pointer; transition:all 0.35s; }
.s-dot.active { background:var(--copper); border-color:var(--copper); transform:scale(1.4); }
@media(max-width:768px){ #section-dots { display:none; } }
#fab-cluster { position:fixed; bottom:18px; right:18px; z-index:9970; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.fab-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s cubic-bezier(.16,1,.3,1); box-shadow:0 4px 16px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.7); backdrop-filter:blur(12px); color:#0f172a; }
.fab-btn:hover { transform:scale(1.12) translateY(-2px); }
#fab-wa { background:#25D366; color:#fff; width:44px; height:44px; }
#fab-top { opacity:0; pointer-events:none; transition:opacity 0.3s, transform 0.3s; }
#fab-top.show { opacity:1; pointer-events:auto; }
#fab-dark { display: none !important; }
#render-lab { position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:9975; width:210px; background:rgba(255,255,255,0.82); backdrop-filter:blur(32px); border:1px solid rgba(255,255,255,0.7); border-radius:0 16px 16px 0; box-shadow:4px 0 32px rgba(15,23,42,0.1); padding:12px; transition:transform 0.5s cubic-bezier(.16,1,.3,1); }
#render-lab.hidden-lab { transform:translateY(-50%) translateX(-100%); }
.lab-section { margin-bottom:11px; }
.lab-label { font-size:7px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:#64748b; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center; }
.lab-slider { -webkit-appearance:none; width:100%; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--copper),var(--brass)); outline:none; cursor:pointer; }
.lab-slider::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:#0f172a; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.2); }
.lab-val { font-size:7px; font-weight:700; color:var(--copper); min-width:22px; text-align:right; }
.env-btn { padding:3px 7px; border-radius:16px; font-size:6px; font-weight:700; letter-spacing:0.05em; border:1px solid rgba(15,23,42,0.12); background:rgba(255,255,255,0.5); cursor:pointer; transition:all 0.2s; }
.env-btn.active { background:var(--copper); color:#fff; border-color:var(--copper); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.toggle-label { font-size:7px; font-weight:600; color:#0f172a; }
.toggle-switch { position:relative; width:26px; height:14px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; border-radius:7px; background:#cbd5e1; cursor:pointer; transition:0.3s; }
.toggle-switch input:checked + .toggle-track { background:var(--copper); }
.toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:0.3s; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(12px); }
#lab-tab { position:absolute; right:-24px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.82); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.7); border-radius:0 8px 8px 0; width:24px; height:48px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:4px 0 16px rgba(15,23,42,0.1); font-size:8px; color:#64748b; writing-mode:vertical-rl; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; }
#snap-flash { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:999998; transition:opacity 0.08s; }
#kb-panel { position:fixed; inset:0; z-index:999990; background:rgba(15,23,42,0.7); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
#kb-panel.show { display:flex; opacity:1; pointer-events:auto; }
.kb-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; }
.kb-row { display:flex; align-items:center; gap:8px; }
.kb-key { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:5px; padding:2px 6px; font-size:7px; font-weight:800; color:#fff; letter-spacing:0.1em; min-width:22px; text-align:center; }
.kb-desc { font-size:9px; color:rgba(255,255,255,0.7); }
*:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .cursor-dot, .cursor-ring { display: none !important; } }
@media print { .noise-overlay, .cursor-dot, .cursor-ring, #fab-cluster, #section-dots, #scroll-progress, #webgl-canvas, .anti-piracy-watermark, #host-lock, #devtools-guard, #kb-panel, #calc-modal, #lab-pin-overlay, #render-lab, #preloader { display: none !important; } body { background: #fff !important; color: #000 !important; } }
video { will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); backface-visibility: hidden; }
body.menu-open { overflow: hidden; }
@media (max-width: 767px) {
    html { font-size: 11.5px; }
    #main-nav .max-w-screen-2xl { padding-top: 0.6rem; padding-bottom: 0.6rem; }
    #main-nav .lang-btn { min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.8rem; }
    #mobile-menu-btn { width: 44px !important; height: 44px !important; }
    #fab-cluster { right: 12px; bottom: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); gap: 8px; }
    #fab-calc, #fab-vcard, #section-dots { display: none !important; }
    #fab-top, #fab-wa { width: 50px; height: 50px; border-radius: 999px; }
    #fab-wa i { font-size: 1.35rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    html { font-size: 12px; }
    html.sn-foldable-viewport { font-size: 12.2px; }
    #fab-calc, #fab-vcard { display: none !important; }
    #fab-wa, #fab-top { width: 48px; height: 48px; }
}