/* =================================================================
   NikaDigital — Premium Dark Tech Portfolio
   assets/css/style.css
   ================================================================= */

/* ---------- ცვლადები ---------- */
:root{
    --bg:        #0a0e16;
    --bg-2:      #0d1320;
    --surface:   #121a29;
    --surface-2: #182234;
    --border:    rgba(255,255,255,.07);
    --border-2:  rgba(255,255,255,.12);

    --text:      #e8edf5;
    --muted:     #93a1b5;
    --muted-2:   #6b7888;

    --primary:   #4f8cff;
    --primary-2: #2563eb;
    --primary-glow: rgba(79,140,255,.35);

    --accent:    #ff7a1a;
    --accent-2:  #f9590a;
    --accent-glow: rgba(255,122,26,.30);

    --ok:        #34d399;
    --err:       #f87171;

    --radius:    16px;
    --radius-sm: 11px;
    --radius-lg: 24px;

    --shadow:    0 18px 40px -18px rgba(0,0,0,.7);
    --shadow-sm: 0 8px 22px -12px rgba(0,0,0,.6);
    --shadow-glow: 0 20px 60px -20px var(--primary-glow);

    /* ფონტები — avejebi.ge-ის BPG ქართული ნაკრები (web-fonts.ge) */
    --ff:         'BPG Nino Medium Condenced', 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-display: 'BPG Le Studio 02 Caps', 'Noto Sans Georgian', Georgia, serif;
    --ff-nav:     'BPG Arial Caps', 'Noto Sans Georgian', system-ui, sans-serif;
    --ff-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    --maxw: 1180px;
    --header-h: 72px;
}

/* ---------- რესეტი ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%; }
body{
    font-family:var(--ff);
    background:var(--bg);
    color:var(--text);
    line-height:1.65;
    font-size:16px;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
svg.ico{ width:24px; height:24px; flex-shrink:0; }
svg.ico-sm{ width:17px; height:17px; flex-shrink:0; vertical-align:-3px; }

::selection{ background:var(--primary); color:#fff; }

.skip-link{
    position:absolute; left:-999px; top:0; z-index:200;
    background:var(--primary); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- ლეიაუტი ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.section{ padding:90px 0; position:relative; }
.section-sm{ padding:60px 0; }

.bg-soft{ background:var(--bg-2); }

/* ---------- ტიპოგრაფია ---------- */
h1,h2,h3,h4{ font-family:var(--ff-display); line-height:1.2; font-weight:700; letter-spacing:-.005em; overflow-wrap:break-word; word-break:break-word; }
h1{ font-size:clamp(2.1rem, 5vw, 3.6rem); font-weight:800; }
h2{ font-size:clamp(1.7rem, 3.5vw, 2.5rem); }
h3{ font-size:1.25rem; }
p{ color:var(--muted); overflow-wrap:break-word; }

.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--ff-nav); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--primary); background:rgba(79,140,255,.08);
    border:1px solid rgba(79,140,255,.25); padding:6px 13px; border-radius:999px;
}
.eyebrow.accent{ color:var(--accent); background:rgba(255,122,26,.08); border-color:rgba(255,122,26,.25); }

.section-head{ max-width:680px; margin-bottom:46px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin:16px 0 12px; }
.section-head p{ font-size:1.05rem; }

.text-grad{
    background:linear-gradient(100deg,var(--primary) 0%, #7db1ff 40%, var(--accent) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- ღილაკები ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--ff-nav); letter-spacing:.02em;
    padding:13px 24px; border-radius:12px; font-weight:600; font-size:.97rem;
    line-height:1; transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    white-space:nowrap; border:1px solid transparent;
}
.btn svg{ width:19px; height:19px; }
.btn-sm{ padding:10px 17px; font-size:.9rem; }
.btn-lg{ padding:16px 30px; font-size:1.05rem; }

.btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff; box-shadow:0 12px 30px -12px var(--primary-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px var(--primary-glow); }

.btn-accent{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff; box-shadow:0 12px 30px -12px var(--accent-glow);
}
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px var(--accent-glow); }

.btn-outline{
    background:transparent; color:var(--text); border-color:var(--border-2);
}
.btn-outline:hover{ border-color:var(--primary); color:#fff; background:rgba(79,140,255,.08); transform:translateY(-2px); }

.btn-ghost{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--border-2); transform:translateY(-2px); }

.btn-block{ width:100%; }

/* ---------- Header / Nav ---------- */
.site-header{
    position:sticky; top:0; z-index:100;
    background:rgba(10,14,22,.72); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    transition:background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{ background:rgba(10,14,22,.92); box-shadow:0 6px 24px -16px #000; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }

.brand{ display:inline-flex; align-items:center; gap:12px; font-weight:800; font-size:1.5rem; }
.brand-mark{
    display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;
    box-shadow:0 10px 26px -8px var(--primary-glow), inset 0 0 0 1px rgba(255,255,255,.10);
}
.brand-mark svg{ width:24px; height:24px; }
.brand-logo{ height:44px; width:auto; border-radius:11px; }
.brand-name{ font-family:var(--ff-display); letter-spacing:-.01em; line-height:1; }
.brand-accent{
    background:linear-gradient(120deg, var(--primary) 0%, #7db1ff 45%, var(--accent) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:560px){ .brand{ font-size:1.25rem; } .brand-mark{ width:40px; height:40px; } }

.main-nav ul{ display:flex; align-items:center; gap:6px; }
.main-nav a{
    padding:9px 14px; border-radius:9px; color:var(--muted); font-weight:500; font-size:.95rem;
    font-family:var(--ff-nav); letter-spacing:.02em;
    transition:color .2s ease, background .2s ease;
}
.main-nav a:hover{ color:var(--text); background:var(--surface); }
.main-nav a.active{ color:var(--text); background:var(--surface-2); }
.nav-cta{ margin-left:8px; }
.nav-cta a{ color:#fff !important; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; align-items:center; justify-content:center; border-radius:11px; border:1px solid var(--border-2); background:var(--surface-2); flex-shrink:0; cursor:pointer; }
.nav-toggle:active{ background:var(--surface); }
.nav-toggle span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:96px 0 84px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.hero-bg .blob-1{ width:520px; height:520px; background:radial-gradient(circle,var(--primary),transparent 65%); top:-180px; right:-120px; }
.hero-bg .blob-2{ width:430px; height:430px; background:radial-gradient(circle,var(--accent),transparent 65%); bottom:-200px; left:-140px; opacity:.4; }
.hero-bg .grid-overlay{
    position:absolute; inset:0;
    background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
    opacity:.5;
}
.hero-inner{ position:relative; z-index:1; max-width:820px; }
.hero h1{ margin:22px 0 20px; }
.hero .lead{ font-size:1.22rem; max-width:620px; color:#c2ccda; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:22px; margin-top:38px; }
.hero-meta .hm{ display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.92rem; }
.hero-meta .hm svg{ width:18px; height:18px; color:var(--ok); }

/* ---------- Stats ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 22px; text-align:center; box-shadow:var(--shadow-sm);
    transition:transform .25s ease, border-color .25s ease;
}
.stat-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.stat-num{ font-family:var(--ff-display); font-size:2.4rem; font-weight:800; background:linear-gradient(120deg,var(--primary),#8ab4ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label{ color:var(--muted); font-size:.92rem; margin-top:4px; }

/* ---------- Cards grids ---------- */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Project card ---------- */
.project-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow:var(--shadow-sm); transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.project-card:hover{ transform:translateY(-6px); border-color:rgba(79,140,255,.4); box-shadow:var(--shadow-glow); }
.pc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
.pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover .pc-media img{ transform:scale(1.06); }
.pc-cat{
    position:absolute; top:12px; left:12px; z-index:2;
    font-family:var(--ff-nav); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    background:rgba(10,14,22,.78); backdrop-filter:blur(6px); border:1px solid var(--border-2);
    color:var(--text); padding:5px 11px; border-radius:999px;
}
.pc-featured{
    position:absolute; top:12px; right:12px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
    font-size:.72rem; font-weight:600; padding:5px 10px; border-radius:999px;
}
.pc-featured svg{ width:13px; height:13px; }
.pc-body{ padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pc-body h3{ font-size:1.16rem; }
.pc-body p{ font-size:.93rem; line-height:1.55; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{ font-family:var(--ff-mono); font-size:.74rem; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); padding:4px 10px; border-radius:7px; }
.pc-actions{ display:flex; gap:10px; margin-top:auto; padding-top:6px; }
.pc-actions .btn{ flex:1; }

/* ---------- Service card ---------- */
.service-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:28px 24px; display:flex; flex-direction:column; gap:14px;
    box-shadow:var(--shadow-sm); transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    position:relative; overflow:hidden;
}
.service-card::after{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:0; transition:opacity .3s ease;
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--border-2); box-shadow:var(--shadow); }
.service-card:hover::after{ opacity:1; }
.svc-icon{
    width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
    background:linear-gradient(135deg,rgba(79,140,255,.16),rgba(255,122,26,.12));
    border:1px solid var(--border-2); color:var(--primary);
}
.svc-icon svg{ width:26px; height:26px; }
.service-card h3{ font-size:1.18rem; }
.service-card p{ font-size:.94rem; flex:1; }

/* ---------- Feature (Why choose) ---------- */
.feature-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; display:flex; gap:16px; align-items:flex-start;
    transition:transform .25s ease, border-color .25s ease;
}
.feature-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.feature-card .fc-ico{
    width:46px; height:46px; flex-shrink:0; border-radius:12px; display:grid; place-items:center;
    background:rgba(79,140,255,.12); border:1px solid rgba(79,140,255,.22); color:var(--primary);
}
.feature-card .fc-ico svg{ width:23px; height:23px; }
.feature-card h3{ font-size:1.08rem; margin-bottom:5px; }
.feature-card p{ font-size:.92rem; }

/* ---------- Work process ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.process-step{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 22px; position:relative; transition:transform .25s ease, border-color .25s ease;
}
.process-step:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.ps-num{
    font-family:var(--ff-mono); font-size:2.1rem; font-weight:700; line-height:1;
    color:transparent; -webkit-text-stroke:1.5px var(--primary); margin-bottom:14px; display:block;
}
.process-step h3{ font-size:1.1rem; margin-bottom:6px; }
.process-step p{ font-size:.92rem; }

/* ---------- Filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filter-btn{
    padding:9px 17px; border-radius:999px; border:1px solid var(--border);
    background:var(--surface); color:var(--muted); font-size:.88rem; font-weight:500;
    font-family:var(--ff-nav); letter-spacing:.02em;
    transition:all .2s ease;
}
.filter-btn:hover{ color:var(--text); border-color:var(--border-2); }
.filter-btn.active{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color:transparent; }

/* ---------- CTA band ---------- */
.cta-band{
    position:relative; overflow:hidden; border-radius:var(--radius-lg);
    background:linear-gradient(120deg,#101a30,#0d1320); border:1px solid var(--border-2);
    padding:58px 48px; text-align:center;
}
.cta-band::before{
    content:""; position:absolute; width:420px; height:420px; top:-200px; left:50%; transform:translateX(-50%);
    background:radial-gradient(circle,var(--primary-glow),transparent 70%); filter:blur(40px);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ margin-bottom:14px; }
.cta-band p{ max-width:560px; margin:0 auto 28px; font-size:1.08rem; }

/* ---------- Detail (project) ---------- */
.detail-hero{ padding-top:48px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.86rem; color:var(--muted); margin-bottom:22px; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--primary); }
.breadcrumb span{ color:var(--muted-2); }

.detail-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
.detail-main-img{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.detail-main-img img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.detail-side .info-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:sticky; top:90px;
}
.detail-side h1{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:12px; }
.info-row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:.92rem; }
.info-row:last-of-type{ border-bottom:none; }
.info-row .k{ color:var(--muted); }
.info-row .v{ color:var(--text); font-weight:500; text-align:right; }

.content-block{ margin-top:46px; }
.content-block h2{ font-size:1.4rem; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.content-block h2 svg{ width:22px; height:22px; color:var(--primary); }
.content-block p{ color:#bcc7d6; }
.feature-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.feature-list li{ display:flex; gap:10px; align-items:flex-start; color:#bcc7d6; font-size:.95rem; }
.feature-list li svg{ width:20px; height:20px; color:var(--ok); flex-shrink:0; margin-top:2px; }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-grid a{ border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-grid a:hover img{ transform:scale(1.07); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; background:rgba(5,8,13,.92); backdrop-filter:blur(4px); padding:30px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:var(--shadow); }
.lightbox .lb-close{ position:absolute; top:22px; right:26px; font-size:2.2rem; color:#fff; line-height:1; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.about-visual{ position:relative; }
.about-visual .av-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:34px; box-shadow:var(--shadow);
}
.about-visual .av-card .av-ico{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; margin-bottom:20px; box-shadow:var(--shadow-glow); }
.about-visual .av-card .av-ico svg{ width:32px; height:32px; }
.tech-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.tech-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 15px; font-size:.92rem; font-weight:500; }
.tech-chip svg{ width:18px; height:18px; color:var(--primary); }

.timeline{ display:flex; flex-direction:column; gap:0; }
.timeline-item{ position:relative; padding:0 0 28px 30px; border-left:2px solid var(--border); }
.timeline-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(79,140,255,.18); }
.timeline-item h3{ font-size:1.08rem; margin-bottom:5px; }
.timeline-item p{ font-size:.93rem; }

/* ---------- Forms ---------- */
.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.9rem; font-weight:500; color:var(--text); }
.field label .req{ color:var(--accent); }
.field input,.field textarea,.field select{
    background:var(--bg-2); border:1px solid var(--border); border-radius:11px;
    padding:13px 15px; color:var(--text); width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
    outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,140,255,.16);
}
.field textarea{ resize:vertical; min-height:130px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a1b5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; }
.field .err-text{ color:var(--err); font-size:.82rem; }
.field input.invalid,.field textarea.invalid,.field select.invalid{ border-color:var(--err); }

.contact-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:34px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:14px; }
.contact-info .ci-item{ display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; transition:border-color .2s ease, transform .2s ease; }
.contact-info .ci-item:hover{ border-color:var(--border-2); transform:translateX(3px); }
.contact-info .ci-ico{ width:44px; height:44px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; background:rgba(79,140,255,.12); color:var(--primary); border:1px solid rgba(79,140,255,.2); }
.contact-info .ci-ico svg{ width:21px; height:21px; }
.contact-info .ci-item .ci-label{ font-size:.8rem; color:var(--muted); }
.contact-info .ci-item .ci-val{ font-weight:600; }
.contact-info .ci-item.fb .ci-ico{ color:#4f8cff; }
.contact-info .ci-item.ig .ci-ico{ color:#e1306c; background:rgba(225,48,108,.12); border-color:rgba(225,48,108,.2); }
.contact-info .ci-item.wa .ci-ico{ color:#25d366; background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.2); }
.contact-info .ci-item.tg .ci-ico{ color:#2aabee; background:rgba(42,171,238,.12); border-color:rgba(42,171,238,.2); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--border); margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; padding:56px 22px 40px; }
.footer-col h4{ font-size:1rem; margin-bottom:16px; }
.footer-text{ margin-top:14px; font-size:.93rem; max-width:330px; }
.footer-links{ display:flex; flex-direction:column; gap:11px; }
.footer-links a{ color:var(--muted); font-size:.93rem; display:inline-flex; align-items:center; gap:8px; transition:color .2s ease; }
.footer-links a:hover{ color:var(--primary); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-link{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--muted); transition:all .2s ease; }
.social-link:hover{ color:#fff; border-color:var(--primary); background:rgba(79,140,255,.12); transform:translateY(-3px); }
.social-link svg{ width:20px; height:20px; }
.footer-bottom{ border-top:1px solid var(--border); padding:18px 0; }
.footer-bottom p{ font-size:.86rem; color:var(--muted-2); text-align:center; }

/* ---------- To top ---------- */
.to-top{ position:fixed; right:24px; bottom:94px; z-index:90; width:46px; height:46px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-2); color:var(--text); display:grid; place-items:center; opacity:0; pointer-events:none; transform:translateY(12px) rotate(-90deg); transition:opacity .3s ease, transform .3s ease; }
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0) rotate(-90deg); }
.to-top:hover{ border-color:var(--primary); color:var(--primary); }
.to-top svg{ width:22px; height:22px; }

/* ---------- Toast ---------- */
.toast-stack{ position:fixed; right:20px; top:84px; z-index:400; display:flex; flex-direction:column; gap:11px; max-width:340px; }
.toast{
    display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--border-2); box-shadow:var(--shadow);
    color:var(--text); font-size:.92rem; transform:translateX(120%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.toast.show{ transform:translateX(0); }
.toast.success{ border-left:4px solid var(--ok); }
.toast.error{ border-left:4px solid var(--err); }
.toast.info{ border-left:4px solid var(--primary); }
.toast .t-ico{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.toast.success .t-ico{ color:var(--ok); }
.toast.error .t-ico{ color:var(--err); }
.toast.info .t-ico{ color:var(--primary); }

/* ---------- Empty / messages ---------- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state svg{ width:54px; height:54px; color:var(--muted-2); margin-bottom:14px; }

.alert{ padding:13px 16px; border-radius:11px; font-size:.92rem; margin-bottom:18px; border:1px solid transparent; }
.alert-error{ background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.3); color:#fca5a5; }
.alert-success{ background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.3); color:#6ee7b7; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width:1024px){
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
    .grid-4{ grid-template-columns:repeat(2,1fr); }
    .detail-grid{ grid-template-columns:1fr; }
    .detail-side .info-card{ position:static; }
}

@media (max-width:860px){
    .grid-3,.grid-2,.process-grid{ grid-template-columns:1fr; }
    .about-grid,.contact-layout{ grid-template-columns:1fr; gap:30px; }
    .form-grid{ grid-template-columns:1fr; }
    .feature-list{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr; gap:30px; }

    /* Mobile nav */
    .nav-toggle{ display:flex; }
    .main-nav{
        position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
        background:rgba(10,14,22,.98); backdrop-filter:blur(16px);
        border-bottom:1px solid var(--border);
        transform:translateY(-120%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
        max-height:calc(100vh - var(--header-h)); overflow-y:auto;
    }
    .main-nav.open{ transform:translateY(0); }
    .main-nav ul{ flex-direction:column; align-items:stretch; gap:4px; padding:18px 22px 26px; }
    .main-nav a{ padding:13px 14px; font-size:1.02rem; }
    .nav-cta{ margin:8px 0 0; }
    .nav-cta a{ width:100%; }
}

@media (max-width:560px){
    .section{ padding:64px 0; }
    .stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .stat-card{ padding:20px 14px; }
    .stat-num{ font-size:1.9rem; }
    .gallery-grid{ grid-template-columns:1fr; }
    .cta-band{ padding:40px 24px; }
    .hero{ padding:64px 0 60px; }
    h1{ font-size:1.7rem; }
    .hero .lead{ font-size:1rem; }
    .container{ padding-inline:16px; }
    .hero-meta{ gap:14px; }
    .hero-meta .hm{ font-size:.85rem; }
    .hero-actions .btn{ flex:1; }
    .pc-actions{ flex-direction:column; }
    .toast-stack{ left:16px; right:16px; max-width:none; }
}

/* =================================================================
   Live Chat Widget
   ================================================================= */
.chat-widget{ position:fixed; right:24px; bottom:24px; z-index:120; }
.chat-fab{
    position:relative; width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;
    display:grid; place-items:center; box-shadow:0 14px 34px -10px var(--primary-glow), 0 4px 12px rgba(0,0,0,.4);
    transition:transform .25s ease, box-shadow .25s ease;
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.04); }
.chat-fab svg{ width:27px; height:27px; position:absolute; transition:opacity .2s ease, transform .3s ease; }
.chat-fab .chat-ico-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.chat-fab.active .chat-ico-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.chat-fab.active .chat-ico-close{ opacity:1; transform:rotate(0) scale(1); }
.chat-badge{
    position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
    border-radius:999px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:700;
    display:grid; place-items:center; border:2px solid var(--bg); font-family:var(--ff-nav);
}

.chat-panel{
    position:absolute; right:0; bottom:74px; width:370px; max-width:calc(100vw - 32px);
    height:540px; max-height:calc(100vh - 130px); display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--border-2); border-radius:18px; overflow:hidden;
    box-shadow:0 30px 70px -25px #000; transform:translateY(18px) scale(.97); opacity:0;
    transform-origin:bottom right; transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.chat-panel.open{ transform:translateY(0) scale(1); opacity:1; }

.chat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px;
    background:linear-gradient(135deg,#16203400,#1a2640); border-bottom:1px solid var(--border); background:var(--surface-2); }
.chat-head-info{ display:flex; align-items:center; gap:11px; }
.chat-avatar{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; flex-shrink:0; }
.chat-avatar svg{ width:21px; height:21px; }
.chat-head-info strong{ display:block; font-size:.98rem; font-family:var(--ff-display); }
.chat-status{ font-size:.74rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.chat-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:chatPulse 2s infinite; }
@keyframes chatPulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5); } 70%{ box-shadow:0 0 0 7px rgba(52,211,153,0); } 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } }
.chat-close{ width:34px; height:34px; border-radius:9px; color:var(--muted); display:grid; place-items:center; transition:background .2s, color .2s; }
.chat-close:hover{ background:var(--surface); color:var(--text); }
.chat-close svg{ width:18px; height:18px; }

.chat-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px;
    background:radial-gradient(120% 60% at 50% 0%, rgba(79,140,255,.05), transparent 70%), var(--bg); }
.chat-body::-webkit-scrollbar{ width:7px; }
.chat-body::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:6px; }

.chat-msg{ display:flex; max-width:84%; }
.chat-msg.in{ align-self:flex-start; }
.chat-msg.out{ align-self:flex-end; }
.chat-bubble{ position:relative; padding:10px 13px 18px; border-radius:14px; font-size:.92rem; line-height:1.5; word-break:break-word; }
.chat-msg.in .chat-bubble{ background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:5px; color:var(--text); }
.chat-msg.out .chat-bubble{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-bottom-right-radius:5px; }
.chat-time{ position:absolute; right:11px; bottom:5px; font-size:.64rem; opacity:.65; }

.chat-input{ border-top:1px solid var(--border); padding:11px 12px; background:var(--surface); }
.chat-name{ width:100%; background:var(--bg-2); border:1px solid var(--border); border-radius:9px; padding:8px 11px; color:var(--text); font-size:.85rem; margin-bottom:8px; }
.chat-name:focus{ outline:none; border-color:var(--primary); }
.chat-input-row{ display:flex; align-items:flex-end; gap:8px; }
.chat-input-row textarea{ flex:1; resize:none; background:var(--bg-2); border:1px solid var(--border); border-radius:12px;
    padding:11px 13px; color:var(--text); font-size:.92rem; line-height:1.4; max-height:110px; }
.chat-input-row textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,140,255,.14); }
.chat-send{ width:44px; height:44px; flex-shrink:0; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; transition:transform .15s ease, box-shadow .2s; }
.chat-send:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px var(--primary-glow); }
.chat-send svg{ width:20px; height:20px; }

@media (max-width:480px){
    .chat-widget{ right:16px; bottom:16px; }
    .chat-panel{ width:calc(100vw - 24px); height:calc(100vh - 110px); right:-4px; }
    .to-top{ bottom:86px; right:18px; }
}

/* =================================================================
   Site Rental page — pricing, compare, FAQ
   ================================================================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price-card{
    position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:30px 26px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-sm);
    transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.price-card:hover{ transform:translateY(-6px); border-color:var(--border-2); box-shadow:var(--shadow); }
.price-card.popular{ border-color:rgba(79,140,255,.5); box-shadow:var(--shadow-glow); background:linear-gradient(180deg,rgba(79,140,255,.07),var(--surface) 40%); }
.price-pop{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;
    font-family:var(--ff-nav); font-size:.74rem; letter-spacing:.04em; padding:5px 14px; border-radius:999px;
    box-shadow:0 8px 20px -8px var(--primary-glow);
}
.price-pop svg{ width:13px; height:13px; }
.price-tag{ font-family:var(--ff-nav); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.price-name{ font-size:1.5rem; }
.price-value{ font-size:2.8rem; font-weight:800; font-family:var(--ff-display); line-height:1; display:flex; align-items:flex-start; gap:3px; }
.price-value .cur{ font-size:1.4rem; margin-top:6px; color:var(--primary); }
.price-value .per{ font-size:.9rem; font-weight:500; color:var(--muted); align-self:flex-end; margin-bottom:7px; font-family:var(--ff); }
.price-desc{ font-size:.92rem; }
.price-features{ display:flex; flex-direction:column; gap:11px; margin:6px 0 18px; flex:1; }
.price-features li{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem; color:#c2ccda; }
.price-features li svg{ color:var(--ok); flex-shrink:0; margin-top:3px; }
.price-features.muted-list li svg{ color:var(--muted-2); }

/* compare */
.compare-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; }
.compare-card.highlight{ border-color:rgba(79,140,255,.4); box-shadow:var(--shadow-glow); background:linear-gradient(180deg,rgba(79,140,255,.06),var(--surface) 45%); }
.compare-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.compare-head h3{ font-size:1.3rem; }

/* FAQ */
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s ease; }
.faq-item[open]{ border-color:var(--border-2); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; color:var(--text); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-mark{ flex-shrink:0; color:var(--primary); transition:transform .25s ease; display:grid; place-items:center; }
.faq-mark svg{ width:20px; height:20px; transform:rotate(90deg); }
.faq-item[open] .faq-mark{ transform:rotate(90deg); }
.faq-item[open] .faq-mark svg{ transform:rotate(-90deg); }
.faq-body{ padding:0 22px 20px; }
.faq-body p{ color:#bcc7d6; line-height:1.7; }

@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }