/* ===== WebCod.uz Styles v3 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;transition:background .3s,color .3s}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit}

/* === VARIABLES === */
:root{
  --primary:#1a5fb4;--primary-l:#3584e4;--primary-d:#0d3b7a;
  --accent:#62a0ea;--accent2:#29a0d8;
  --radius:10px;--radius-lg:16px;
  --shadow:0 4px 24px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --tr:.25s ease;
}
body.light{
  --bg:#f5f6fa;--bg-card:#fff;--bg-header:#fff;--bg-footer:#1a2340;
  --bg-section:#eef1f8;--text:#1a1a2e;--text-muted:#6b7280;
  --border:#e0e4ed;--nav-text:#1a1a2e;
}
body.dark{
  --bg:#0f1117;--bg-card:#1a1d27;--bg-header:#13161f;--bg-footer:#0a0c12;
  --bg-section:#161923;--text:#e8eaf0;--text-muted:#9ca3af;
  --border:#2a2d3a;--nav-text:#e8eaf0;
}
body{background:var(--bg);color:var(--text)}

/* === TYPOGRAPHY === */
h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.2}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.3}
h3{font-size:clamp(1.1rem,2vw,1.25rem);font-weight:600}
h4{font-size:1.05rem;font-weight:600}
p{color:var(--text-muted)}

/* === LAYOUT === */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-alt{background:var(--bg-section)}

.section-header{text-align:center;margin-bottom:52px}
.section-header .subtitle{display:inline-block;color:var(--primary-l);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.section-header h2{color:var(--text);margin-bottom:12px}
.section-header p{max-width:580px;margin:0 auto}

/* === SCROLL REVEAL ANIMATIONS === */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}
.reveal-scale{opacity:0;transform:translateY(20px) scale(.96);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:translateY(0) scale(1)}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius);font-size:.95rem;font-weight:600;transition:var(--tr);border:2px solid transparent;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-l);border-color:var(--primary-l);transform:translateY(-1px);box-shadow:0 6px 20px rgba(26,95,180,.35)}
.btn-outline{border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.btn-accent:hover{opacity:.9;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--primary);border-color:#fff}
.btn-white:hover{background:rgba(255,255,255,.9)}
.btn-sm{padding:8px 18px;font-size:.875rem}
.btn-lg{padding:15px 40px;font-size:1.05rem}

/* === HEADER === */
.header{background:var(--bg-header);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;transition:var(--tr)}
.header-inner{display:flex;align-items:center;height:70px;gap:16px}
.header-logo{display:flex;align-items:center;flex-shrink:0}
.header-logo img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:28px}
.nav-link{padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--nav-text);transition:var(--tr);white-space:nowrap}
.nav-link:hover,.nav-link.active{background:var(--primary);color:#fff}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.header-phone{font-size:.875rem;font-weight:700;color:var(--primary);white-space:nowrap}
.header-phone:hover{color:var(--primary-l)}

/* LANG DROPDOWN */
.lang-dropdown{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text);font-size:.85rem;font-weight:700;cursor:pointer;transition:var(--tr)}
.lang-btn:hover{border-color:var(--primary)}
.lang-btn svg{width:14px;height:14px;transition:transform .2s}
.lang-dropdown.open .lang-btn svg{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-width:130px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(-6px);transition:var(--tr);z-index:300;overflow:hidden}
.lang-dropdown.open .lang-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.lang-option{display:block;padding:10px 16px;font-size:.875rem;color:var(--text);cursor:pointer;transition:var(--tr)}
.lang-option:hover,.lang-option.active{background:var(--primary);color:#fff}

/* THEME TOGGLE */
.theme-toggle{width:38px;height:38px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text);display:flex;align-items:center;justify-content:center;transition:var(--tr);font-size:1rem}
.theme-toggle:hover{border-color:var(--primary);color:var(--primary)}

/* BURGER */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card)}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:var(--tr)}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0;transform:translateX(-8px)}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* MOBILE NAV */
.mobile-nav{display:none;background:var(--bg-header);border-top:1px solid var(--border)}
.mobile-nav.open{display:block}
.mobile-nav .container{padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.mobile-nav .nav-link{display:block;padding:12px 10px;border-bottom:1px solid var(--border);border-radius:0}
.mobile-nav .nav-link:last-of-type{border-bottom:none}
.mobile-nav-extras{padding:14px 10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Mobile lang switcher row */
.mobile-lang-row{padding:10px 10px 0;display:flex;align-items:center;gap:8px}
.mobile-lang-row .lang-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}
.mobile-lang-btn{padding:6px 12px;border-radius:6px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text);font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--tr)}
.mobile-lang-btn.active,.mobile-lang-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* === HERO === */
.hero{background:linear-gradient(135deg,var(--primary-d) 0%,var(--primary) 50%,var(--primary-l) 100%);color:#fff;padding:96px 0 80px;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);padding:6px 16px;border-radius:50px;font-size:.8rem;font-weight:600;margin-bottom:22px}
.hero h1{color:#fff;margin-bottom:20px}
.hero>div>p,.hero p.hero-p{color:rgba(255,255,255,.9);font-size:1.1rem;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:0}

/* HERO STATS */
.hero-stats{display:flex;gap:36px;margin-top:48px;flex-wrap:wrap;background:rgba(0,0,0,.15);border-radius:14px;padding:20px 28px}
.hero-stat-item{display:flex;flex-direction:column}
.hero-stat-item strong,.stat-num{display:block;font-size:2rem;font-weight:800;color:#fff;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero-stat-item span,.stat-label{font-size:.85rem;color:rgba(255,255,255,.85);font-weight:500;margin-top:4px}

/* HERO VISUAL CARD */
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-card{background:rgba(255,255,255,.12);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:28px;max-width:340px;width:100%}
.hero-card-title{font-size:.95rem;font-weight:700;margin-bottom:16px;color:#fff;opacity:.9;letter-spacing:.5px}
.hero-service-list{display:flex;flex-direction:column;gap:10px}
.hero-service-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;transition:.25s}
.hero-service-item:hover{background:rgba(255,255,255,.18)}
.hero-service-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.hero-service-icon img,.hero-service-icon svg{width:22px;height:22px;filter:brightness(0) invert(1)}
.hero-service-name{font-size:.875rem;font-weight:600;color:#fff}
.hero-service-price{font-size:.775rem;color:rgba(255,255,255,.75)}

/* === ADVANTAGES === */
.advantages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.advantage-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:var(--tr)}
.advantage-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.advantage-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.advantage-icon img,.advantage-icon svg{width:26px;height:26px;filter:brightness(0) invert(1)}
.advantage-card h3{margin-bottom:8px}

/* === SERVICES === */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.services-full-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--tr);display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.service-card-img{height:160px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.service-card-img svg{width:64px;height:64px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.service-card-body{padding:22px;flex:1}
.service-card-body h3{margin-bottom:8px}
.service-card-body p{font-size:.88rem;margin-bottom:14px}
.service-price{color:var(--primary-l);font-weight:700;font-size:.95rem}
.service-card-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px}
.services-cats{display:flex;gap:10px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}

/* === TARIFFS === */
.tariffs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:start}
.tariff-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);padding:26px;transition:var(--tr);position:relative;display:flex;flex-direction:column;overflow:visible}
.tariff-card.popular{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,95,180,.12)}
.tariff-badge{display:inline-block;background:var(--primary);color:#fff;font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:50px;white-space:nowrap;margin-bottom:12px;letter-spacing:.5px}
.tariff-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tariff-name{font-size:1.25rem;font-weight:700;margin-bottom:8px;color:var(--text)}
.tariff-price{font-size:clamp(1.1rem,2.5vw,1.6rem);font-weight:800;color:var(--primary-l);margin-bottom:4px;line-height:1.2;overflow-wrap:break-word;word-break:break-word}
.tariff-price span{font-size:.82rem;font-weight:400;color:var(--text-muted)}
.tariff-desc{font-size:.875rem;color:var(--text-muted);margin-bottom:18px}
.tariff-features{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
.tariff-feature{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;padding-bottom:10px;border-bottom:1px solid var(--border)}
.tariff-feature:last-child{border-bottom:none}
.tariff-feature .tf-icon{color:var(--primary-l);font-weight:700;flex-shrink:0;width:16px}
.tariff-feature.disabled .tf-icon{color:#ef4444}
.tariff-feature.disabled span{color:var(--text-muted)}
/* Tariff card button row */
.tariff-btn-row{display:flex;gap:8px;margin-top:auto}
.tariff-btn-row .btn{flex:1;min-width:0;justify-content:center;padding:10px 12px;font-size:.875rem;overflow:hidden;text-overflow:ellipsis}
/* Legacy support — single full-width button */
.tariff-card>.btn{width:100%;margin-top:auto}

/* === PORTFOLIO === */
.portfolio-filter{display:flex;gap:10px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.filter-btn{padding:8px 22px;border-radius:50px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text);font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--tr)}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.portfolio-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .25s}
.portfolio-item:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(26,95,180,.18);border-color:var(--primary)}
.portfolio-img{height:210px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.portfolio-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.portfolio-item:hover .portfolio-img img{transform:scale(1.07)}
.portfolio-img .port-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.port-mockup{position:relative;z-index:1;width:80%;max-width:240px;background:rgba(255,255,255,.12);border-radius:8px;padding:10px;border:1px solid rgba(255,255,255,.2)}
.port-mockup-bar{height:8px;background:rgba(255,255,255,.3);border-radius:4px;margin-bottom:8px;width:60%}
.port-mockup-content{display:flex;flex-direction:column;gap:5px}
.port-mockup-line{height:6px;background:rgba(255,255,255,.2);border-radius:3px}
.port-mockup-line.w60{width:60%}
.port-mockup-line.w80{width:80%}
.port-mockup-line.w40{width:40%}
.portfolio-overlay{position:absolute;inset:0;background:rgba(13,59,122,.88);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease;z-index:10}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-body,.portfolio-info{padding:20px}
.portfolio-info .portfolio-link{display:inline-block;color:var(--primary-l);font-weight:600;font-size:.875rem;margin-top:8px;transition:var(--tr)}
.portfolio-item:hover .portfolio-link{color:var(--primary);transform:translateX(4px)}
.portfolio-cat{font-size:.72rem;color:var(--primary-l);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px}
.portfolio-body h3{margin-bottom:4px}
.portfolio-body p{font-size:.83rem}
.portfolio-item{cursor:pointer}

/* === WHY US === */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.why-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center;transition:var(--tr)}
.why-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow)}
.why-icon{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent2));display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.why-icon svg,.why-icon img{width:28px;height:28px;filter:brightness(0) invert(1)}
.why-card h3{margin-bottom:8px}

/* === STEPS === */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;position:relative}
.step-item{text-align:center;padding:28px 20px;position:relative}
.step-item:not(:last-child)::after{content:'→';position:absolute;right:-10px;top:40px;font-size:1.4rem;color:var(--primary-l)}
.step-number{width:52px;height:52px;background:linear-gradient(135deg,var(--primary),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;font-weight:800;margin:0 auto 16px;box-shadow:0 4px 16px rgba(26,95,180,.35)}
.step-item h3{font-size:1rem;margin-bottom:6px}
.step-item p{font-size:.85rem}

/* === REVIEWS === */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:var(--tr)}
.review-card:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.review-stars{color:#f59e0b;font-size:1.1rem;margin-bottom:12px}
.review-text{font-size:.9rem;color:var(--text-muted);margin-bottom:20px;font-style:italic;line-height:1.7}
.review-author{display:flex;align-items:center;gap:12px}
.review-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;flex-shrink:0}
.review-name{font-weight:700;font-size:.9rem}
.review-company{font-size:.8rem;color:var(--text-muted)}

/* === FAQ === */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--tr)}
.faq-item.open{border-color:var(--primary)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;text-align:left;font-size:.95rem;font-weight:600;color:var(--text);cursor:pointer}
.faq-icon{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--tr);flex-shrink:0;color:var(--primary-l)}
.faq-item.open .faq-icon{background:var(--primary);border-color:var(--primary);color:#fff;transform:rotate(45deg)}
.faq-answer{padding:0 22px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .2s}
.faq-item.open .faq-answer{max-height:500px;padding:0 22px 18px}
.faq-answer p{font-size:.9rem}

/* === CONTACT === */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.contacts-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px}
.contact-info-list{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}
.contact-info-item{display:flex;gap:16px;align-items:flex-start}
.contact-info-icon{width:46px;height:46px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-icon svg{width:22px;height:22px;filter:brightness(0) invert(1)}
.contact-info-item h4{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:2px}
.contact-info-item a,.contact-info-item p{font-weight:600;color:var(--text);font-size:.95rem}
.contact-info-item a:hover{color:var(--primary)}
.contact-social{display:flex;gap:10px;margin-top:20px;margin-bottom:20px}
.social-link{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.85rem;transition:var(--tr)}
.social-link:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.social-link svg{width:18px;height:18px}
.map-box,.contacts-map{height:220px;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;margin-top:20px}
.map-box iframe,.contacts-map iframe{width:100%;height:100%;border:none}
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px}

/* === FORMS === */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:6px}
.form-control{width:100%;padding:11px 16px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:.9rem;transition:var(--tr)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,95,180,.12)}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* === MODAL === */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-backdrop.open{opacity:1;pointer-events:all}
.modal{background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:translateY(-20px) scale(.96);transition:var(--tr);max-height:90vh;overflow-y:auto}
.modal-backdrop.open .modal{transform:translateY(0) scale(1)}
.modal-header{padding:24px 28px 0;display:flex;align-items:flex-start;justify-content:space-between}
.modal-title{font-size:1.2rem;font-weight:700;color:var(--text)}
.modal-close{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:var(--tr);flex-shrink:0}
.modal-close:hover{background:#ef4444;color:#fff;border-color:#ef4444}
.modal-body{padding:20px 28px 28px}
.modal-subtitle{font-size:.875rem;color:var(--text-muted);margin-bottom:20px}

/* === CHAT WIDGET === */
.chat-widget{position:fixed;bottom:28px;right:28px;z-index:900}
.chat-trigger{width:58px;height:58px;background:linear-gradient(135deg,var(--primary),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:0 6px 24px rgba(26,95,180,.45);cursor:pointer;transition:var(--tr);position:relative;border:none}
.chat-trigger:hover{transform:scale(1.07)}
.chat-badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#ef4444;border-radius:50%;font-size:.7rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-card)}
.chat-box{position:absolute;bottom:70px;right:0;width:320px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,.2);display:none;flex-direction:column;overflow:hidden}
.chat-box.open{display:flex}
.chat-header{background:linear-gradient(135deg,var(--primary),var(--accent2));color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.chat-header-info h4{font-size:.9rem;font-weight:700}
.chat-status{font-size:.75rem;opacity:.85;display:flex;align-items:center;gap:5px}
.chat-status-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.chat-messages{padding:14px;height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:80%;font-size:.85rem;padding:10px 13px;border-radius:12px;line-height:1.5}
.chat-msg.bot{background:var(--bg-section);color:var(--text);align-self:flex-start;border-radius:0 12px 12px 12px}
.chat-msg.user{background:var(--primary);color:#fff;align-self:flex-end;border-radius:12px 0 12px 12px}
.chat-input-row{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px}
.chat-input{flex:1;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:.85rem;background:var(--bg);color:var(--text)}
.chat-input:focus{outline:none;border-color:var(--primary)}
.chat-send{padding:8px 14px;background:var(--primary);color:#fff;border-radius:8px;font-size:.85rem;font-weight:600;transition:var(--tr)}
.chat-send:hover{background:var(--primary-l)}

/* === FOOTER === */
.footer{background:var(--bg-footer);color:rgba(255,255,255,.85);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.footer-brand p{font-size:.875rem;color:rgba(255,255,255,.6);margin:12px 0 20px;line-height:1.7}
.footer-logo{height:40px;width:auto}
.footer-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.5);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.875rem;color:rgba(255,255,255,.7);transition:var(--tr)}
.footer-links a:hover{color:var(--accent)}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:rgba(255,255,255,.7);margin-bottom:10px}
.footer-contact-item svg{width:16px;height:16px;flex-shrink:0;margin-top:3px}
.footer-contact-item a{color:rgba(255,255,255,.7)}
.footer-contact-item a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center}
.footer-bottom p{font-size:.85rem;color:rgba(255,255,255,.5)}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:.85rem;transition:var(--tr)}
.footer-social a svg{width:16px;height:16px;filter:brightness(0) invert(1);opacity:.7}
.footer-social a:hover{background:var(--primary);color:#fff}
.footer-social a:hover svg{opacity:1}

/* === PAGE HEADER === */
.page-header{background:linear-gradient(135deg,var(--primary-d),var(--primary));color:#fff;padding:60px 0 50px;text-align:center}
.page-header h1{color:#fff;margin-bottom:12px}
.page-header p{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.7)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.4)}
.breadcrumb .current{color:rgba(255,255,255,.9)}

/* === ABOUT === */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-visual-wrap{border-radius:var(--radius-lg);overflow:hidden;position:relative}
.about-visual{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#1a3a6b,#2d5ca6);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.about-visual svg{width:60%;height:60%;opacity:.9;filter:drop-shadow(0 8px 32px rgba(0,0,0,.3))}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center}
.stat-card strong{display:block;font-size:2.2rem;font-weight:800;color:var(--primary-l)}
.stat-card span{font-size:.875rem;color:var(--text-muted)}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-align:center;transition:var(--tr)}
.team-card:hover{border-color:var(--primary);transform:translateY(-3px)}
.team-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:700}
.team-card h3{font-size:1rem;margin-bottom:4px}
.team-role{font-size:.8rem;color:var(--primary-l);font-weight:600}

/* SINGLE SERVICE/TARIFF */
.service-detail-grid,.tariff-detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
.service-detail-sidebar{position:sticky;top:90px}
.service-sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin-bottom:20px}
.service-sidebar-card h3{margin-bottom:16px}
.tariff-full-features{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.tariff-full-feature{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.tariff-full-feature-icon{color:var(--primary-l);flex-shrink:0}

/* === UTILITY === */
.text-center{text-align:center}
.badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.75rem;font-weight:600}
.badge-primary{background:rgba(26,95,180,.12);color:var(--primary-l)}

/* === SERVICE DETAIL PAGE === */
.svc-hero{background:linear-gradient(135deg,var(--primary-d),var(--primary));padding:50px 0;color:#fff}
.svc-hero-inner{display:flex;align-items:center;gap:32px}
.svc-hero-icon{width:90px;height:90px;background:rgba(255,255,255,.15);border-radius:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-hero-icon img{width:54px;height:54px;filter:brightness(0) invert(1)}
.svc-hero-text h1{color:#fff;margin-bottom:8px}
.svc-hero-text p{color:rgba(255,255,255,.85);font-size:1rem}
.svc-price-big{font-size:2rem;font-weight:800;color:#fff;margin-top:10px}
.svc-price-big span{font-size:1rem;font-weight:400;opacity:.7}
.sub-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px}
.sub-service-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px;transition:var(--tr)}
.sub-service-item:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)}
.sub-service-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:12px;display:flex;align-items:center;justify-content:center}
.sub-service-icon img{width:24px;height:24px;filter:brightness(0) invert(1)}
.sub-service-item h4{font-size:.95rem;margin-bottom:2px}
.sub-service-item p{font-size:.82rem}
.sub-service-price{font-size:.875rem;font-weight:700;color:var(--primary-l);margin-top:auto}
.chars-table{width:100%;border-collapse:collapse;margin-top:16px}
.chars-table tr{border-bottom:1px solid var(--border)}
.chars-table tr:last-child{border-bottom:none}
.chars-table td{padding:12px 16px;font-size:.9rem}
.chars-table td:first-child{font-weight:600;color:var(--text);width:45%;background:var(--bg-section)}
.chars-table td:last-child{color:var(--text-muted)}
.svc-features-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.svc-feature-item{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--tr)}
.svc-feature-item:hover{border-color:var(--primary)}
.svc-feat-icon{color:var(--primary-l);font-weight:800;font-size:1.1rem;flex-shrink:0;margin-top:1px}
.svc-feature-item h4{font-size:.9rem;margin-bottom:3px}
.svc-feature-item p{font-size:.82rem}

/* === PORTFOLIO DETAIL PAGE === */
.port-detail-img{height:360px;border-radius:var(--radius-lg);overflow:hidden;position:relative;margin-bottom:32px}
.port-detail-info-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
.port-info-sidebar{position:sticky;top:90px}
.port-info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin-bottom:20px}
.port-info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.port-info-row:last-child{border-bottom:none}
.port-info-row span:first-child{font-weight:600;color:var(--text)}
.port-info-row span:last-child{color:var(--text-muted)}
.port-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.port-feature{background:var(--bg-section);border-radius:var(--radius);padding:14px 16px;font-size:.875rem;display:flex;align-items:flex-start;gap:10px}
.port-feat-check{color:var(--primary-l);font-weight:700;flex-shrink:0}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .contact-grid{grid-template-columns:1fr}
  .contacts-grid{grid-template-columns:1fr}
  .service-detail-grid,.tariff-detail-grid{grid-template-columns:1fr}
  .service-detail-sidebar{position:static}
  .about-grid{grid-template-columns:1fr}
  .port-detail-info-grid{grid-template-columns:1fr}
  .port-info-sidebar{position:static}
}
@media(max-width:900px){
  .tariffs-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:768px){
  .section{padding:50px 0}
  .nav,.header-phone,.lang-dropdown{display:none}
  .burger{display:flex}
  .hero{padding:60px 0 50px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{gap:20px;padding:16px 20px}
  .hero-stat-item strong,.stat-num{font-size:1.6rem}
  .services-grid{grid-template-columns:1fr}
  .services-full-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr 1fr}
  .step-item:not(:last-child)::after{display:none}
  .footer-grid{grid-template-columns:1fr}
  .chat-box{width:290px}
  .form-card{padding:24px}
  .svc-hero-inner{flex-direction:column;text-align:center}
  .port-detail-img{height:240px}
  .port-features-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tariffs-grid{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .container{padding:0 16px}
  h1{font-size:1.65rem}
  h2{font-size:1.3rem}
  .hero-stats{flex-direction:column;gap:14px}
  .why-grid{grid-template-columns:1fr}
  .advantages-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .tariff-card{padding:20px}
  .tariff-btn-row{flex-direction:column}
  .tariff-btn-row .btn{width:100%}
  .service-card-footer{flex-direction:column;gap:8px}
  .service-card-footer .btn{width:100%;justify-content:center}
  .sub-services{grid-template-columns:1fr}
}



/* ========================================== */
/* СКРЫВАЕМ NULL В ВЫПАДАЮЩЕМ СПИСКЕ ЯЗЫКОВ */
/* ========================================== */

/* Скрываем пустые элементы */
.lang-option:empty {
    display: none !important;
}

/* Скрываем элементы с текстом NULL */
.lang-menu a:empty {
    display: none !important;
}

/* Скрываем любые ссылки без текста в меню языка */
.lang-menu a:not([href]):empty {
    display: none !important;
}

/* Скрываем элементы, которые содержат только NULL */
.lang-option[data-null="true"] {
    display: none !important;
}