/*
============================================================
 SUPPORT24.AZ — ƏSAS DİZAYN QEYDLƏRİ
============================================================

Bu CSS faylı saytın əsas görünüşünü idarə edir.

Gələcəkdə dizayn dəyişmək üçün əsas bölmələr:

1) RƏNGLƏR
   Faylın əvvəlindəki :root bölməsində saytın əsas rəngləri saxlanılır.
   Məsələn:
   --bg       = saytın əsas tünd arxa fon rəngi
   --surface  = kart və blokların tünd fon rəngi
   --text     = əsas yazı rəngi
   --muted    = ikinci dərəcəli boz/açıq yazı rəngi
   --cyan     = mavi-neon vurğu rəngi
   --green    = yaşıl-neon vurğu rəngi

2) HEADER / MENYU
   .site-header, .header-inner, .main-nav və .brand img hissələri
   yuxarı menyunun görünüşünü idarə edir.
   Logo ölçüsünü dəyişmək üçün əsas hissə:
   .brand img { height: ...; max-width: ...; }

3) BANNER / HERO
   .hero-section, .hero-layout, .hero-copy, .hero-visual hissələri
   saytın ilk böyük banner sahəsini idarə edir.
   Banner animasiyaları faylın aşağı hissəsində ayrıca qeyd olunub.

4) XİDMƏTLƏR
   .service-grid və .service-card hissələri xidmət kartlarının düzülüşünü
   və görünüşünü idarə edir.

5) PAKETLƏR
   .package-grid və .package-card hissələri aylıq support paketlərini
   idarə edir.

6) BLOG
   .blog-grid, .blog-card, .single-blog-card və .single-content hissələri
   blog siyahısını və blog yazısının daxili görünüşünü idarə edir.

7) RESPONSİV DİZAYN
   Faylın sonundakı @media bölmələri mobil və planşet ölçüləri üçündür.
   Mobil görünüşdə problem yaranarsa, əvvəlcə @media(max-width:640px)
   hissəsinə baxmaq lazımdır.

Qeyd:
Bu faylda sonrakı bölmələrdə “DƏYİŞİKLİK QEYDİ” yazılmış hissələr
xüsusi olaraq sonradan əlavə edilmiş düzəlişlərdir.
============================================================
*/


/* RƏNGLƏR: Saytın əsas rəng dəyişənləri */
:root{
    --bg:#050914;
    --surface:#081226;
    --surface-2:#0d1a33;
    --card:rgba(255,255,255,.075);
    --card-strong:rgba(255,255,255,.105);
    --text:#f3f7ff;
    --muted:#a7b7cc;
    --line:rgba(255,255,255,.13);
    --cyan:#36e9ff;
    --blue:#5a7cff;
    --violet:#8b5cff;
    --green:#36ffc1;
    --red:#ff5d7d;
    --shadow:0 22px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:'Roboto Slab', Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 12% 6%, rgba(54,233,255,.16), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(139,92,255,.17), transparent 25%),
        linear-gradient(135deg,var(--bg),#071630 55%,#060a16);
    color:var(--text);
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,#000,transparent 88%);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 36px));margin-inline:auto}
/* HEADER: Yuxarı menyu və logo sahəsi */
.site-header{
    position:fixed;
    top:16px;
    left:0;
    right:0;
    z-index:80;
}
.header-inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:24px;
    background:rgba(5,9,20,.76);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
}
.brand img{height:44px;display:block;max-width:230px}
.main-nav{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:14px}
.main-nav>a:hover{color:var(--text)}
.lang-switch{display:flex;gap:6px}
.lang-switch a{
    min-width:34px;
    text-align:center;
    padding:7px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:12px;
}
.lang-switch a.active{color:#07111f;background:linear-gradient(135deg,var(--cyan),var(--green));border-color:transparent}
.nav-toggle{display:none;border:0;background:transparent;color:var(--text);font-size:23px}

/* BANNER: Saytın ilk böyük giriş bölməsi */
.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:130px 0 70px;
}
#hero3d{position:absolute;inset:0;width:100%;height:100%;opacity:.52}
.hero-layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:58px;
    align-items:center;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 13px;
    border:1px solid rgba(54,233,255,.24);
    border-radius:999px;
    color:var(--cyan);
    background:rgba(54,233,255,.08);
    font-size:13px;
    margin-bottom:16px;
}
h1,h2,h3,p{overflow-wrap:anywhere}
h1{
    margin:0;
    max-width:820px;
    font-size:clamp(32px,4.5vw,56px);
    line-height:1.08;
    letter-spacing:-1.8px;
}
h2{
    margin:0 0 14px;
    font-size:clamp(25px,3vw,38px);
    line-height:1.16;
    letter-spacing:-1px;
}
h3{margin:0 0 12px;font-size:20px;line-height:1.25}
.hero-copy p,.section-head p,.text-block p{
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:13px 18px;
    border-radius:15px;
    border:1px solid transparent;
    font-weight:800;
    cursor:pointer;
}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--green));color:#06111f;box-shadow:0 0 34px rgba(54,233,255,.22)}
.btn-secondary{border-color:var(--line);background:rgba(255,255,255,.06);color:var(--text)}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px}
.stat-row div{
    padding:15px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--card);
    backdrop-filter:blur(14px);
}
.stat-row strong{display:block;font-size:23px}
.stat-row span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.hero-visual{
    position:relative;
    min-height:470px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:34px;
    background:
        radial-gradient(circle at center, rgba(54,233,255,.12), transparent 48%),
        linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    box-shadow:var(--shadow);
    overflow:hidden;
}
.hero-visual:before{
    content:"";
    position:absolute;
    inset:42px;
    border:1px dashed rgba(54,233,255,.28);
    border-radius:50%;
    animation:spin 24s linear infinite;
}
.orbit-card{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:230px;
    min-height:170px;
    display:grid;
    place-items:center;
    text-align:center;
    padding:24px;
    border:1px solid rgba(54,233,255,.28);
    border-radius:28px;
    background:rgba(5,9,20,.72);
    backdrop-filter:blur(18px);
    box-shadow:0 0 60px rgba(54,233,255,.16);
}
.pulse-core{
    width:58px;
    height:58px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--violet));
    box-shadow:0 0 42px rgba(54,233,255,.45);
    margin-bottom:10px;
}
.orbit-card span{color:var(--muted);font-size:13px}
.floating-chip{
    position:absolute;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.08);
    color:var(--muted);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 34px rgba(0,0,0,.24);
    animation:float 5s ease-in-out infinite;
}
.floating-chip i{color:var(--cyan);margin-right:7px}
.chip-1{left:34px;top:58px}
.chip-2{right:44px;top:76px;animation-delay:.3s}
.chip-3{left:50px;bottom:76px;animation-delay:.6s}
.chip-4{right:58px;bottom:64px;animation-delay:.9s}

.section{padding:86px 0}
.section-head{max-width:760px;margin:0 auto 38px;text-align:center}
/* XİDMƏTLƏR: Xidmət kartlarının grid düzülüşü */
.service-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.service-card,.package-card,.blog-card,.contact-form,.terminal-card,.upgrade-card,.single-blog-card{
    border:1px solid var(--line);
    border-radius:24px;
    background:var(--card);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow);
}
.service-card{
    min-height:250px;
    padding:22px;
    position:relative;
    overflow:hidden;
}
.service-card:before,.blog-card:before{
    content:"";
    position:absolute;
    right:-58px;
    bottom:-70px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(54,233,255,.18),transparent 70%);
}
.service-card > *, .blog-card > *{position:relative}
.card-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:17px;
    background:rgba(54,233,255,.1);
    color:var(--cyan);
    font-size:23px;
    margin-bottom:18px;
}
.service-card p,.package-card p,.blog-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.62;
}

.split-layout{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:54px;
    align-items:center;
}
.split-layout.reverse{direction:rtl}
.split-layout.reverse > *{direction:ltr}
.tech-panel{
    min-height:420px;
    position:relative;
    border-radius:34px;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
    border:1px solid var(--line);
    overflow:hidden;
}
.ring{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px dashed rgba(54,233,255,.35);
}
.ring-one{width:300px;height:300px;animation:spin 24s linear infinite}
.ring-two{width:210px;height:210px;animation:spin 18s linear reverse infinite;border-color:rgba(139,92,255,.35)}
.terminal-card{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(260px,calc(100% - 50px));
    padding:18px;
    display:grid;
    gap:10px;
}
.terminal-card span{
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.07);
    color:var(--muted);
    font-size:13px;
}
.check-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.check-list li{color:var(--muted);line-height:1.5}
.check-list i{color:var(--green);margin-right:10px}

.upgrade-card{
    min-height:420px;
    padding:30px;
    position:relative;
    overflow:hidden;
    display:grid;
    align-content:center;
    gap:34px;
}
.upgrade-card:before{
    content:"";
    position:absolute;
    inset:36px;
    border:1px dashed rgba(54,233,255,.28);
    border-radius:50%;
    animation:spin 28s linear infinite;
}
.upgrade-core{
    position:relative;
    z-index:1;
    min-height:96px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-radius:24px;
    background:rgba(5,9,20,.7);
    border:1px solid rgba(54,233,255,.24);
    font-weight:900;
}
.upgrade-core i{color:var(--green)}
.upgrade-tags{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.upgrade-tags span{
    text-align:center;
    padding:14px;
    border-radius:15px;
    background:rgba(255,255,255,.07);
    border:1px solid var(--line);
    color:var(--cyan);
    font-weight:800;
}

/* PAKETLƏR: Aylıq support paketlərinin grid düzülüşü */
.package-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.package-card{
    min-height:360px;
    padding:22px;
    position:relative;
}
.badge{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    color:white;
    font-size:12px;
    font-weight:800;
    margin-bottom:14px;
}
.package-card strong{
    display:block;
    margin:8px 0 12px;
    color:var(--cyan);
    font-size:20px;
}
.package-card ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px}
.package-card li{color:var(--muted);font-size:13px;line-height:1.45}
.package-card li i{color:var(--green);margin-right:8px}

/* BLOG SİYAHISI: Ana səhifədə blog kartlarının düzülüşü */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.blog-card{
    min-height:310px;
    padding:22px;
    position:relative;
    overflow:hidden;
    transition:.2s ease;
}
.blog-card:hover{transform:translateY(-6px);background:var(--card-strong)}
.blog-card time{display:block;color:var(--cyan);font-size:13px;margin-bottom:12px}
.read-more{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:800;margin-top:12px;font-size:14px}

.contact-layout{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
    gap:44px;
    align-items:start;
}
.contact-lines{display:grid;gap:13px;margin-top:22px;color:var(--muted)}
.contact-lines i{color:var(--cyan);margin-right:10px}
.contact-form{
    padding:24px;
    display:grid;
    gap:14px;
}
.contact-form label{display:grid;gap:8px;color:var(--muted);font-size:14px}
input,select,textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:var(--text);
    padding:13px 14px;
    outline:none;
    font-family:inherit;
}
select option{background:#0d1a33;color:#fff}
input:focus,select:focus,textarea:focus{
    border-color:rgba(54,233,255,.6);
    box-shadow:0 0 0 4px rgba(54,233,255,.08);
}
.company-field{display:none}
.alert{padding:13px 14px;border-radius:14px;border:1px solid var(--line)}
.alert.success{background:rgba(54,255,193,.1);color:var(--green)}
.alert.error{background:rgba(255,93,125,.1);color:#ffc8d2}
.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:70;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#25d366;
    color:white;
    font-size:28px;
    box-shadow:var(--shadow);
}

.site-footer{padding:0 0 28px}
.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:24px;
    background:rgba(255,255,255,.06);
}
.footer-inner p{color:var(--muted);margin-bottom:0}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted)}

/* BLOG DAXİLİ SƏHİFƏ: Blog yazısının full page görünüşü */
.single-blog-section{padding-top:140px}
.single-blog-card{max-width:920px;margin:0 auto;padding:38px}
.single-blog-card time{display:block;color:var(--cyan);margin:28px 0 12px}
.single-blog-card h1{font-size:clamp(30px,4vw,48px)}
.single-excerpt{color:var(--muted);font-size:18px;line-height:1.7}
.single-content{margin-top:28px;line-height:1.9;color:var(--text)}

@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes float{50%{transform:translateY(-12px)}}

@media(max-width:1120px){
    .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
    .main-nav{
        display:none;
        position:absolute;
        left:18px;
        right:18px;
        top:82px;
        flex-direction:column;
        align-items:flex-start;
        padding:18px;
        border:1px solid var(--line);
        border-radius:20px;
        background:rgba(5,9,20,.96);
        backdrop-filter:blur(18px);
    }
    .main-nav.open{display:flex}
    .nav-toggle{display:block}
    .hero-layout,.split-layout,.contact-layout{grid-template-columns:1fr}
    .hero-visual{min-height:390px}
    .service-grid,.package-grid,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
    .container{width:min(100% - 24px,1180px)}
    .site-header{top:10px}
    .header-inner{border-radius:18px}
    .brand img{height:38px}
    .hero-section{padding:112px 0 54px}
    .section{padding:62px 0}
    h1{font-size:clamp(30px,10vw,42px);letter-spacing:-1px}
    h2{font-size:clamp(24px,8vw,32px)}
    .stat-row,.service-grid,.package-grid,.blog-grid{grid-template-columns:1fr}
    .hero-visual{min-height:340px}
    .floating-chip{font-size:12px;padding:10px 11px}
    .chip-1{left:18px;top:32px}.chip-2{right:18px;top:52px}.chip-3{left:18px;bottom:56px}.chip-4{right:18px;bottom:38px}
    .section-head{text-align:left}
    .footer-inner{flex-direction:column}
    .single-blog-card{padding:24px}
}


/* Modern 3D visual upgrade */
.hero-3d-stage{
    perspective:1200px;
    transform-style:preserve-3d;
    isolation:isolate;
}
.hero-3d-stage:before{
    content:"";
    position:absolute;
    inset:-80px;
    background:
        radial-gradient(circle at 45% 42%, rgba(54,233,255,.20), transparent 26%),
        radial-gradient(circle at 60% 55%, rgba(139,92,255,.18), transparent 28%);
    filter:blur(12px);
    z-index:0;
}
.hologram-grid{
    position:absolute;
    left:50%;
    bottom:34px;
    width:78%;
    height:42%;
    transform:translateX(-50%) rotateX(64deg);
    transform-origin:center bottom;
    background-image:
        linear-gradient(rgba(54,233,255,.20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,233,255,.20) 1px, transparent 1px);
    background-size:28px 28px;
    border-radius:50%;
    mask-image:radial-gradient(circle,#000 28%,transparent 72%);
    animation:gridDrift 8s linear infinite;
    z-index:1;
}
.neon-ring{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.42);
    transform-style:preserve-3d;
    z-index:2;
}
.ring-a{
    width:310px;height:310px;
    transform:translate(-50%,-50%) rotateX(68deg);
    animation:ringSpinA 13s linear infinite;
}
.ring-b{
    width:245px;height:245px;
    border-color:rgba(139,92,255,.46);
    transform:translate(-50%,-50%) rotateY(66deg);
    animation:ringSpinB 11s linear infinite reverse;
}
.ring-c{
    width:375px;height:375px;
    border-color:rgba(54,255,193,.30);
    transform:translate(-50%,-50%) rotateX(52deg) rotateY(20deg);
    animation:ringSpinC 18s linear infinite;
}
.core-sphere{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) translateZ(70px);
    width:190px;
    height:190px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    border-radius:50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.88), rgba(54,233,255,.34) 16%, rgba(139,92,255,.22) 46%, rgba(5,9,20,.78) 72%);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
        0 0 70px rgba(54,233,255,.35),
        inset 0 0 40px rgba(255,255,255,.12);
    z-index:5;
    text-align:center;
    animation:coreFloat 5.5s ease-in-out infinite;
}
.core-sphere strong{font-size:20px}
.core-sphere small{font-size:12px;color:var(--muted);max-width:130px}
.sphere-glow{
    position:absolute;
    inset:-20px;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.18);
    animation:pulseHalo 2.8s ease-in-out infinite;
}
.data-stream{
    position:absolute;
    left:50%;
    top:50%;
    width:2px;
    height:210px;
    transform-origin:top center;
    background:linear-gradient(to bottom, transparent, rgba(54,233,255,.9), transparent);
    z-index:3;
    opacity:.8;
}
.stream-1{transform:translate(-50%,-50%) rotate(35deg);animation:streamPulse 2.4s linear infinite}
.stream-2{transform:translate(-50%,-50%) rotate(145deg);animation:streamPulse 2.8s linear infinite .4s}
.stream-3{transform:translate(-50%,-50%) rotate(270deg);animation:streamPulse 3.2s linear infinite .8s}
.hero-3d-stage .floating-chip{
    z-index:7;
    transform-style:preserve-3d;
    border-color:rgba(54,233,255,.22);
}
.chip-5{left:50%;top:28px;transform:translateX(-50%);animation-delay:1.2s}
.chip-6{left:50%;bottom:28px;transform:translateX(-50%);animation-delay:1.5s}

/* Automation modern 3D panel */
.automation-3d{
    perspective:1100px;
    transform-style:preserve-3d;
    min-height:450px;
}
.automation-3d .ring{display:none}
.factory-base{
    position:absolute;
    left:50%;
    bottom:32px;
    width:76%;
    height:34%;
    transform:translateX(-50%) rotateX(66deg);
    transform-origin:center bottom;
    border-radius:50%;
    background:
        linear-gradient(rgba(54,233,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,233,255,.16) 1px, transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(circle,#000 28%,transparent 74%);
    animation:gridDrift 9s linear infinite reverse;
}
.automation-orbit{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.34);
}
.orbit-one{width:330px;height:330px;transform:translate(-50%,-50%) rotateX(64deg);animation:ringSpinA 17s linear infinite}
.orbit-two{width:250px;height:250px;border-color:rgba(139,92,255,.40);transform:translate(-50%,-50%) rotateY(64deg);animation:ringSpinB 13s linear infinite}
.orbit-three{width:390px;height:390px;border-color:rgba(54,255,193,.25);transform:translate(-50%,-50%) rotateX(50deg) rotateY(28deg);animation:ringSpinC 21s linear infinite reverse}
.automation-core{
    position:absolute;
    left:50%;
    top:50%;
    width:160px;
    height:160px;
    transform:translate(-50%,-50%);
    border-radius:34px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    background:rgba(5,9,20,.78);
    border:1px solid rgba(54,233,255,.30);
    box-shadow:0 0 60px rgba(54,233,255,.18);
    z-index:5;
    text-align:center;
    animation:coreFloat 5.8s ease-in-out infinite;
}
.automation-core i{font-size:34px;color:var(--cyan)}
.automation-core strong{font-size:18px}
.automation-core small{font-size:12px;color:var(--muted)}
.auto-node{
    position:absolute;
    z-index:6;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:112px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.13);
    color:var(--muted);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 34px rgba(0,0,0,.25);
    animation:nodeFloat 5s ease-in-out infinite;
}
.auto-node i{color:var(--cyan)}
.node-a{left:42px;top:62px}
.node-b{right:44px;top:72px;animation-delay:.35s}
.node-c{left:46px;bottom:76px;animation-delay:.7s}
.node-d{right:48px;bottom:84px;animation-delay:1.05s}
.node-e{left:50%;top:28px;transform:translateX(-50%);animation-delay:1.4s}

/* Upgrade modern 3D card */
.upgrade-3d-card{
    min-height:450px;
    perspective:1200px;
    transform-style:preserve-3d;
    display:block;
}
.upgrade-3d-card:before{display:none}
.upgrade-grid-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 48%, rgba(54,233,255,.13), transparent 34%),
        linear-gradient(rgba(54,233,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,233,255,.08) 1px, transparent 1px);
    background-size:auto, 32px 32px, 32px 32px;
    mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
.upgrade-machine{
    position:absolute;
    top:110px;
    width:150px;
    min-height:170px;
    padding:18px;
    border-radius:26px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    text-align:center;
    background:rgba(5,9,20,.78);
    border:1px solid rgba(54,233,255,.24);
    box-shadow:0 18px 52px rgba(0,0,0,.32), inset 0 0 40px rgba(54,233,255,.05);
    z-index:4;
}
.upgrade-machine i{font-size:34px;color:var(--cyan)}
.upgrade-machine small{color:var(--muted);font-size:12px}
.old-system{
    left:44px;
    transform:rotateY(-14deg) rotateX(5deg);
    animation:machineLeft 5.5s ease-in-out infinite;
}
.new-system{
    right:44px;
    transform:rotateY(14deg) rotateX(5deg);
    border-color:rgba(54,255,193,.32);
    animation:machineRight 5.5s ease-in-out infinite;
}
.new-system i{color:var(--green)}
.migration-tunnel{
    position:absolute;
    left:50%;
    top:190px;
    width:185px;
    height:86px;
    transform:translateX(-50%);
    display:grid;
    place-items:center;
    z-index:3;
}
.migration-tunnel span{
    position:absolute;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(54,233,255,.88),transparent);
    animation:tunnelMove 1.8s linear infinite;
}
.migration-tunnel span:nth-child(2){top:28px;animation-delay:.35s}
.migration-tunnel span:nth-child(3){bottom:22px;animation-delay:.7s}
.migration-tunnel i{
    position:relative;
    z-index:2;
    color:var(--green);
    font-size:28px;
    filter:drop-shadow(0 0 14px rgba(54,255,193,.6));
}
.upgrade-3d-card .upgrade-tags{
    position:absolute;
    left:28px;
    right:28px;
    bottom:28px;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    z-index:5;
}
.upgrade-3d-card .upgrade-tags span{
    padding:11px 8px;
    font-size:12px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    color:var(--cyan);
    text-align:center;
}

@keyframes gridDrift{to{background-position:0 56px,56px 0}}
@keyframes ringSpinA{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}}
@keyframes ringSpinB{to{transform:translate(-50%,-50%) rotateY(66deg) rotateZ(360deg)}}
@keyframes ringSpinC{to{transform:translate(-50%,-50%) rotateX(52deg) rotateY(20deg) rotateZ(360deg)}}
@keyframes coreFloat{50%{margin-top:-12px;filter:brightness(1.14)}}
@keyframes pulseHalo{50%{inset:-34px;opacity:.35}}
@keyframes streamPulse{50%{opacity:.2;height:170px}}
@keyframes nodeFloat{50%{margin-top:-10px}}
@keyframes machineLeft{50%{transform:rotateY(-8deg) rotateX(9deg) translateY(-10px)}}
@keyframes machineRight{50%{transform:rotateY(8deg) rotateX(9deg) translateY(-10px)}}
@keyframes tunnelMove{0%{opacity:.1;transform:translateX(-24px)}50%{opacity:1}100%{opacity:.1;transform:translateX(24px)}}

@media(max-width:960px){
    .chip-5{top:18px}
    .chip-6{bottom:18px}
    .upgrade-3d-card .upgrade-tags{grid-template-columns:repeat(3,minmax(0,1fr))}
    .upgrade-machine{top:94px}
}
@media(max-width:640px){
    .core-sphere{width:150px;height:150px}
    .ring-a{width:250px;height:250px}
    .ring-b{width:205px;height:205px}
    .ring-c{width:305px;height:305px}
    .chip-5,.chip-6{display:none}
    .automation-core{width:132px;height:132px}
    .orbit-one{width:260px;height:260px}
    .orbit-two{width:210px;height:210px}
    .orbit-three{width:320px;height:320px}
    .auto-node{min-width:auto;font-size:12px;padding:10px}
    .node-a{left:14px;top:50px}.node-b{right:14px;top:64px}.node-c{left:14px;bottom:72px}.node-d{right:14px;bottom:82px}.node-e{top:18px}
    .upgrade-machine{width:126px;min-height:142px;top:98px}
    .old-system{left:16px}.new-system{right:16px}
    .migration-tunnel{width:120px;top:178px}
}


/* Refined upgrade based on stable FINAL MODERN 3D version */

/* About section */
.about-layout{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:34px;
    align-items:center;
}
.about-main{
    padding:26px;
    border:1px solid var(--line);
    border-radius:28px;
    background:var(--card);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow);
}
.about-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.about-card{
    min-height:245px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:24px;
    background:var(--card);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.about-card:after{
    content:"";
    position:absolute;
    right:-60px;
    bottom:-70px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(54,233,255,.16),transparent 70%);
}
.about-card>*{position:relative}
.about-card p{color:var(--muted);font-size:14px;line-height:1.62}

/* Hero techno cube animation */
.cube-hero-stage{
    perspective:1200px;
    transform-style:preserve-3d;
}
.cube-hero-stage:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 50%, rgba(54,233,255,.18), transparent 36%),
        radial-gradient(circle at 62% 44%, rgba(139,92,255,.14), transparent 30%);
    z-index:0;
}
.cube-grid-floor{
    position:absolute;
    left:50%;
    bottom:26px;
    width:78%;
    height:38%;
    transform:translateX(-50%) rotateX(66deg);
    transform-origin:center bottom;
    background-image:
        linear-gradient(rgba(54,233,255,.20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,233,255,.20) 1px, transparent 1px);
    background-size:26px 26px;
    border-radius:50%;
    mask-image:radial-gradient(circle,#000 30%,transparent 72%);
    animation:cubeGridMove 8s linear infinite;
    z-index:1;
}
.cube-orbit{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.34);
    z-index:2;
}
.cube-orbit-a{
    width:340px;height:340px;
    transform:translate(-50%,-50%) rotateX(66deg);
    animation:cubeOrbitA 15s linear infinite;
}
.cube-orbit-b{
    width:260px;height:260px;
    border-color:rgba(139,92,255,.42);
    transform:translate(-50%,-50%) rotateY(65deg);
    animation:cubeOrbitB 12s linear infinite reverse;
}
.tech-cube{
    position:absolute;
    left:50%;
    top:50%;
    width:150px;
    height:150px;
    transform-style:preserve-3d;
    transform:translate(-50%,-50%) rotateX(-20deg) rotateY(34deg);
    animation:techCubeSpin 12s linear infinite;
    z-index:5;
}
.cube-face{
    position:absolute;
    width:150px;
    height:150px;
    display:grid;
    place-items:center;
    border:1px solid rgba(54,233,255,.45);
    background:linear-gradient(145deg,rgba(54,233,255,.16),rgba(139,92,255,.10));
    color:var(--cyan);
    font-weight:900;
    font-size:24px;
    box-shadow:inset 0 0 38px rgba(54,233,255,.08),0 0 24px rgba(54,233,255,.12);
    backdrop-filter:blur(10px);
}
.cube-front{transform:translateZ(75px)}
.cube-back{transform:rotateY(180deg) translateZ(75px)}
.cube-right{transform:rotateY(90deg) translateZ(75px)}
.cube-left{transform:rotateY(-90deg) translateZ(75px)}
.cube-top{transform:rotateX(90deg) translateZ(75px)}
.cube-bottom{transform:rotateX(-90deg) translateZ(75px)}
.cube-satellite{
    position:absolute;
    z-index:6;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.085);
    color:var(--muted);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 34px rgba(0,0,0,.24);
    animation:cubeSatFloat 5s ease-in-out infinite;
}
.cube-satellite i{color:var(--cyan)}
.sat-1{left:34px;top:54px}
.sat-2{right:42px;top:72px;animation-delay:.25s}
.sat-3{left:42px;bottom:74px;animation-delay:.5s}
.sat-4{right:48px;bottom:64px;animation-delay:.75s}
.sat-5{left:50%;top:24px;transform:translateX(-50%);animation-delay:1s}

/* Make existing automation and upgrade animations more creative but preserve design */
.automation-3d .automation-core{
    animation:coreFloat 5.2s ease-in-out infinite, refinedPulse 3.8s ease-in-out infinite;
}
.automation-3d .auto-node{
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.automation-3d .auto-node:hover{
    transform:translateY(-8px) scale(1.04);
    background:rgba(255,255,255,.13);
    border-color:rgba(54,233,255,.32);
}
.upgrade-3d-card .upgrade-machine{
    transition:transform .25s ease, border-color .25s ease;
}
.upgrade-3d-card .upgrade-machine:hover{
    border-color:rgba(54,255,193,.38);
}
.upgrade-3d-card .migration-tunnel i{
    animation:arrowPulse 1.8s ease-in-out infinite;
}

/* Blog image support */
.blog-thumb{
    width:100%;
    height:150px;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:16px;
    border:1px solid var(--line);
}
.blog-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.single-blog-image{
    width:100%;
    max-height:420px;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--line);
    margin-bottom:24px;
}
.single-blog-image img{
    width:100%;
    height:100%;
    max-height:420px;
    object-fit:cover;
    display:block;
}
.rich-editor{
    min-height:260px;
    line-height:1.7;
}

@keyframes cubeGridMove{to{background-position:0 52px,52px 0}}
@keyframes cubeOrbitA{to{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(360deg)}}
@keyframes cubeOrbitB{to{transform:translate(-50%,-50%) rotateY(65deg) rotateZ(360deg)}}
@keyframes techCubeSpin{
    0%{transform:translate(-50%,-50%) rotateX(-20deg) rotateY(0deg) rotateZ(0deg)}
    100%{transform:translate(-50%,-50%) rotateX(340deg) rotateY(360deg) rotateZ(12deg)}
}
@keyframes cubeSatFloat{50%{margin-top:-12px;filter:brightness(1.12)}}
@keyframes refinedPulse{
    0%,100%{box-shadow:0 0 60px rgba(54,233,255,.18)}
    50%{box-shadow:0 0 80px rgba(139,92,255,.26)}
}
@keyframes arrowPulse{50%{transform:translateX(8px);filter:drop-shadow(0 0 18px rgba(54,255,193,.7))}}

@media(max-width:1050px){
    .about-layout{grid-template-columns:1fr}
}
@media(max-width:820px){
    .about-grid{grid-template-columns:1fr}
    .about-card{min-height:auto}
}
@media(max-width:640px){
    .tech-cube{width:116px;height:116px}
    .cube-face{width:116px;height:116px;font-size:18px}
    .cube-front{transform:translateZ(58px)}
    .cube-back{transform:rotateY(180deg) translateZ(58px)}
    .cube-right{transform:rotateY(90deg) translateZ(58px)}
    .cube-left{transform:rotateY(-90deg) translateZ(58px)}
    .cube-top{transform:rotateX(90deg) translateZ(58px)}
    .cube-bottom{transform:rotateX(-90deg) translateZ(58px)}
    .cube-orbit-a{width:270px;height:270px}
    .cube-orbit-b{width:210px;height:210px}
    .cube-satellite{font-size:12px;padding:10px}
    .sat-1{left:16px;top:44px}.sat-2{right:16px;top:62px}.sat-3{left:16px;bottom:72px}.sat-4{right:16px;bottom:60px}.sat-5{display:none}
}


/* Hero console + globe replacement */
.tech-cube{display:none}
.code-console-orbit{
    position:absolute;
    left:50%;
    top:50%;
    width:390px;
    height:260px;
    transform:translate(-50%,-50%) translateZ(-30px);
    z-index:3;
    pointer-events:none;
}
.console-window{
    position:absolute;
    left:50%;
    top:50%;
    width:330px;
    height:190px;
    transform:translate(-50%,-50%) rotateX(8deg) rotateY(-12deg);
    border-radius:18px;
    border:1px solid rgba(54,233,255,.26);
    background:rgba(3,8,18,.72);
    box-shadow:
        0 0 44px rgba(54,233,255,.16),
        inset 0 0 34px rgba(54,233,255,.06);
    overflow:hidden;
    backdrop-filter:blur(12px);
    animation:consoleFloat 6s ease-in-out infinite;
}
.console-top{
    height:34px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 13px;
    border-bottom:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.045);
}
.console-top span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(54,233,255,.72);
}
.console-top span:nth-child(2){background:rgba(54,255,193,.72)}
.console-top span:nth-child(3){background:rgba(139,92,255,.72)}
.console-lines{
    position:relative;
    height:156px;
    padding:13px 16px;
    display:grid;
    gap:8px;
    font-family:Consolas, "Courier New", monospace;
    font-size:12px;
    color:rgba(54,255,193,.9);
}
.console-lines:after{
    content:"";
    display:inline-block;
    width:8px;
    height:15px;
    background:rgba(54,255,193,.95);
    animation:cursorBlink .8s steps(2,end) infinite;
    position:absolute;
    left:164px;
    bottom:12px;
}
.console-lines span{
    display:block;
    width:0;
    white-space:nowrap;
    overflow:hidden;
    text-shadow:0 0 12px rgba(54,255,193,.25);
    animation:typingLine 9s steps(28,end) infinite;
}
.console-lines span:nth-child(1){animation-delay:0s}
.console-lines span:nth-child(2){animation-delay:.9s}
.console-lines span:nth-child(3){animation-delay:1.8s}
.console-lines span:nth-child(4){animation-delay:2.7s}
.console-lines span:nth-child(5){animation-delay:3.6s}
.console-lines span:nth-child(6){animation-delay:4.5s;color:rgba(54,233,255,.95)}

.tech-globe{
    position:absolute;
    left:50%;
    top:50%;
    width:172px;
    height:172px;
    transform:translate(-50%,-50%);
    transform-style:preserve-3d;
    border-radius:50%;
    z-index:6;
    animation:globeFloat 5.4s ease-in-out infinite;
}
.globe-shell{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(54,233,255,.32) 16%, rgba(139,92,255,.18) 46%, rgba(5,9,20,.78) 74%);
    border:1px solid rgba(54,233,255,.42);
    box-shadow:
        0 0 75px rgba(54,233,255,.34),
        inset 0 0 34px rgba(255,255,255,.10);
}
.globe-ring,.globe-lat{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.44);
    transform-style:preserve-3d;
}
.globe-ring-a{
    width:210px;
    height:210px;
    transform:translate(-50%,-50%) rotateX(68deg);
    animation:globeRingA 11s linear infinite;
}
.globe-ring-b{
    width:196px;
    height:196px;
    border-color:rgba(139,92,255,.48);
    transform:translate(-50%,-50%) rotateY(68deg);
    animation:globeRingB 13s linear infinite reverse;
}
.globe-ring-c{
    width:224px;
    height:224px;
    border-color:rgba(54,255,193,.32);
    transform:translate(-50%,-50%) rotateX(54deg) rotateY(28deg);
    animation:globeRingC 16s linear infinite;
}
.globe-lat{
    width:150px;
    height:150px;
    border-color:rgba(255,255,255,.18);
}
.lat-1{transform:translate(-50%,-50%) rotateX(78deg) scale(.95)}
.lat-2{transform:translate(-50%,-50%) rotateX(58deg) scale(.78)}
.lat-3{transform:translate(-50%,-50%) rotateX(34deg) scale(.55)}
.globe-core{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) translateZ(40px);
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(5,9,20,.68);
    border:1px solid rgba(54,255,193,.32);
    color:var(--green);
    font-weight:900;
    box-shadow:0 0 34px rgba(54,255,193,.25);
}
.cube-satellite{
    z-index:8;
}

@keyframes consoleFloat{
    0%,100%{margin-top:8px;opacity:.82}
    50%{margin-top:-8px;opacity:1}
}
@keyframes typingLine{
    0%{width:0}
    12%{width:100%}
    72%{width:100%}
    84%{width:0}
    100%{width:0}
}
@keyframes cursorBlink{
    50%{opacity:0}
}
@keyframes globeFloat{
    0%,100%{margin-top:0;filter:brightness(1)}
    50%{margin-top:-12px;filter:brightness(1.16)}
}
@keyframes globeRingA{
    to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}
}
@keyframes globeRingB{
    to{transform:translate(-50%,-50%) rotateY(68deg) rotateZ(360deg)}
}
@keyframes globeRingC{
    to{transform:translate(-50%,-50%) rotateX(54deg) rotateY(28deg) rotateZ(360deg)}
}

@media(max-width:640px){
    .code-console-orbit{width:290px;height:220px}
    .console-window{width:260px;height:164px}
    .console-lines{font-size:10px;gap:6px}
    .tech-globe{width:132px;height:132px}
    .globe-ring-a{width:166px;height:166px}
    .globe-ring-b{width:152px;height:152px}
    .globe-ring-c{width:178px;height:178px}
    .globe-lat{width:116px;height:116px}
    .globe-core{width:46px;height:46px}
}


/* Final rebuilt banner */
.banner-rebuilt-stage{
    position:relative;
    min-height:470px;
    overflow:hidden;
    perspective:1200px;
    transform-style:preserve-3d;
    border:1px solid rgba(255,255,255,.1);
    border-radius:34px;
    background:
        radial-gradient(circle at 50% 50%, rgba(54,233,255,.08), transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    box-shadow:var(--shadow);
}
.banner-rebuilt-stage:before,
.banner-rebuilt-stage:after,
.banner-rebuilt-stage .cube-grid-floor,
.banner-rebuilt-stage .cube-orbit,
.banner-rebuilt-stage .cube-satellite,
.banner-rebuilt-stage .tech-cube,
.banner-rebuilt-stage .code-console-orbit,
.banner-rebuilt-stage .tech-globe{
    display:none !important;
}

.console-bg-panel{
    position:absolute;
    inset:26px;
    border-radius:28px;
    border:1px solid rgba(54,233,255,.16);
    background:rgba(3,8,18,.58);
    overflow:hidden;
    box-shadow:inset 0 0 50px rgba(54,233,255,.04);
    z-index:1;
}
.console-bg-top{
    height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
}
.console-bg-top span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(54,233,255,.74);
}
.console-bg-top span:nth-child(2){background:rgba(54,255,193,.74)}
.console-bg-top span:nth-child(3){background:rgba(139,92,255,.74)}

.console-bg-lines{
    height:calc(100% - 36px);
    padding:18px 22px;
    display:grid;
    align-content:start;
    gap:8px;
    font-family:Consolas, "Courier New", monospace;
    font-size:13px;
    color:rgba(54,255,193,.92);
}
.console-bg-lines span{
    display:block;
    width:0;
    overflow:hidden;
    white-space:nowrap;
    opacity:.95;
    text-shadow:0 0 10px rgba(54,255,193,.16);
    animation:consoleType 16s steps(46,end) infinite;
}
.console-bg-lines span:nth-child(1){animation-delay:0s}
.console-bg-lines span:nth-child(2){animation-delay:1.4s}
.console-bg-lines span:nth-child(3){animation-delay:2.8s}
.console-bg-lines span:nth-child(4){animation-delay:4.2s}
.console-bg-lines span:nth-child(5){animation-delay:5.6s}
.console-bg-lines span:nth-child(6){animation-delay:7s}
.console-bg-lines span:nth-child(7){animation-delay:8.4s}
.console-bg-lines span:nth-child(8){animation-delay:9.8s;color:rgba(54,233,255,.96)}

.globe-stage{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}
.globe-halo{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.18);
}
.halo-a{
    width:290px;
    height:290px;
    transform:translate(-50%,-50%);
    animation:haloPulseA 5s ease-in-out infinite;
}
.halo-b{
    width:360px;
    height:360px;
    transform:translate(-50%,-50%);
    border-color:rgba(139,92,255,.16);
    animation:haloPulseB 5.8s ease-in-out infinite;
}

.info-globe{
    position:absolute;
    left:50%;
    top:50%;
    width:190px;
    height:190px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    transform-style:preserve-3d;
    animation:globeLift 5.4s ease-in-out infinite;
}
.info-globe-shell{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.90), rgba(54,233,255,.34) 16%, rgba(139,92,255,.14) 44%, rgba(5,9,20,.76) 74%);
    border:1px solid rgba(54,233,255,.38);
    box-shadow:
        0 0 70px rgba(54,233,255,.28),
        inset 0 0 28px rgba(255,255,255,.08);
}
.info-globe-meridian,
.info-globe-lat{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(54,233,255,.34);
}
.meridian-a{
    width:224px;height:224px;
    transform:translate(-50%,-50%) rotateX(68deg);
    animation:ringTurnA 10s linear infinite;
}
.meridian-b{
    width:210px;height:210px;
    border-color:rgba(139,92,255,.40);
    transform:translate(-50%,-50%) rotateY(68deg);
    animation:ringTurnB 13s linear infinite reverse;
}
.meridian-c{
    width:240px;height:240px;
    border-color:rgba(54,255,193,.26);
    transform:translate(-50%,-50%) rotateX(54deg) rotateY(24deg);
    animation:ringTurnC 16s linear infinite;
}
.info-globe-lat{
    border-color:rgba(255,255,255,.16);
}
.lat-a{width:168px;height:168px;transform:translate(-50%,-50%) rotateX(78deg) scale(.96)}
.lat-b{width:132px;height:132px;transform:translate(-50%,-50%) rotateX(58deg) scale(.82)}
.lat-c{width:92px;height:92px;transform:translate(-50%,-50%) rotateX(34deg) scale(.7)}

.info-globe-core{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    align-content:center;
    z-index:4;
    text-align:center;
}
.info-globe-core strong{
    display:block;
    line-height:1.08;
    font-size:21px;
    color:#eef7ff;
    text-shadow:0 0 20px rgba(54,233,255,.16);
}

.keyword-pill{
    position:absolute;
    padding:11px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.09);
    color:var(--text);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 28px rgba(0,0,0,.22);
    font-size:13px;
    font-weight:700;
    animation:pillFloat 5.5s ease-in-out infinite;
}
.pill-1{left:72px;top:68px}
.pill-2{right:80px;top:82px;animation-delay:.3s}
.pill-3{left:56px;top:50%;transform:translateY(-50%);animation-delay:.6s}
.pill-4{right:56px;top:50%;transform:translateY(-50%);animation-delay:.9s}
.pill-5{left:96px;bottom:84px;animation-delay:1.2s}
.pill-6{right:100px;bottom:96px;animation-delay:1.5s}
.pill-7{left:50%;bottom:42px;transform:translateX(-50%);animation-delay:1.8s}

@keyframes consoleType{
    0%{width:0}
    10%{width:100%}
    55%{width:100%}
    68%{width:0}
    100%{width:0}
}
@keyframes haloPulseA{
    0%,100%{transform:translate(-50%,-50%) scale(.95);opacity:.45}
    50%{transform:translate(-50%,-50%) scale(1.05);opacity:.9}
}
@keyframes haloPulseB{
    0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.32}
    50%{transform:translate(-50%,-50%) scale(1.08);opacity:.72}
}
@keyframes globeLift{
    0%,100%{margin-top:0;filter:brightness(1)}
    50%{margin-top:-10px;filter:brightness(1.12)}
}
@keyframes ringTurnA{
    to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}
}
@keyframes ringTurnB{
    to{transform:translate(-50%,-50%) rotateY(68deg) rotateZ(360deg)}
}
@keyframes ringTurnC{
    to{transform:translate(-50%,-50%) rotateX(54deg) rotateY(24deg) rotateZ(360deg)}
}
@keyframes pillFloat{
    0%,100%{margin-top:0}
    50%{margin-top:-10px}
}

@media(max-width:640px){
    .banner-rebuilt-stage{min-height:380px}
    .console-bg-panel{inset:14px}
    .console-bg-lines{padding:14px 14px;font-size:10px;gap:6px}
    .info-globe{width:150px;height:150px}
    .meridian-a{width:176px;height:176px}
    .meridian-b{width:164px;height:164px}
    .meridian-c{width:188px;height:188px}
    .lat-a{width:132px;height:132px}
    .lat-b{width:100px;height:100px}
    .lat-c{width:68px;height:68px}
    .info-globe-core strong{font-size:16px}
    .keyword-pill{font-size:11px;padding:8px 11px}
    .pill-1{left:18px;top:42px}
    .pill-2{right:18px;top:56px}
    .pill-3{left:10px}
    .pill-4{right:10px}
    .pill-5{left:26px;bottom:86px}
    .pill-6{right:26px;bottom:96px}
    .pill-7{bottom:24px}
}


/* Final removal of old snake/pipe Three.js animation */
#hero3d{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}
.banner-rebuilt-stage .console-bg-panel{
    inset:20px;
    z-index:1;
    opacity:1;
}
.banner-rebuilt-stage .globe-stage{
    z-index:3;
}


/* Safe HTML content rendering */
.html-content{
    color:var(--muted);
    line-height:1.7;
}
.html-content p{margin:0 0 12px}
.html-content h1,.html-content h2,.html-content h3,.html-content h4{
    color:var(--text);
    margin:18px 0 10px;
    line-height:1.25;
}
.html-content ul,.html-content ol{
    margin:14px 0;
    padding-left:22px;
}
.html-content li{margin:7px 0}
.html-content a{color:var(--cyan);text-decoration:underline}
.html-content table{
    width:100%;
    border-collapse:collapse;
    margin:16px 0;
}
.html-content th,.html-content td{
    border:1px solid var(--line);
    padding:10px;
}
.package-description{
    font-size:14px;
}
.package-html-features{
    margin-top:18px;
}
.package-html-features ul{
    list-style:disc;
}
.package-card > .html-content ul li i{
    display:none;
}


/*
============================================================
 DƏYİŞİKLİK QEYDİ — BLOG DAXİLİ BAŞLIQLAR 20% KİÇİLDİLDİ
============================================================

Bu hissə yalnız blog yazısının içində görünən başlıqlara təsir edir.

Əhatə etdiyi sahələr:
- Blog full page başlığı: .single-blog-card h1
- Blog mətninin içindəki H2/H3/H4 başlıqları: .single-content h2, h3, h4
- HTML ilə yazılmış blog mətnlərindəki başlıqlar: .html-content h1, h2, h3, h4

Gələcəkdə başlıqları böyütmək və ya kiçiltmək üçün aşağıdakı
font-size dəyərlərini dəyişmək kifayətdir.
============================================================
*/

.single-blog-card h1{
    font-size:clamp(24px,3.2vw,38px) !important; /* Əvvəlki ölçüdən təxminən 20% kiçik */
    line-height:1.18;
}

.single-content h2,
.html-content h2{
    font-size:clamp(22px,2.45vw,30px) !important; /* Blog daxilində əsas alt başlıq */
    line-height:1.25;
}

.single-content h3,
.html-content h3{
    font-size:clamp(19px,2.05vw,24px) !important; /* Blog daxilində bölmə başlığı */
    line-height:1.3;
}

.single-content h4,
.html-content h4{
    font-size:clamp(17px,1.8vw,21px) !important; /* Kiçik alt başlıq */
    line-height:1.35;
}

/*
============================================================
 DƏYİŞİKLİK QEYDİ — BLOG MƏTNİ OXUNAQLILIQ
============================================================

Bu hissə blog mətninin oxunaqlı qalması üçündür.
Mətn çox sıx görünərsə line-height dəyərini artırmaq olar.
Mətn çox böyük görünərsə font-size dəyərini azaltmaq olar.
============================================================
*/

.single-content,
.single-content p,
.html-content,
.html-content p{
    font-size:16px;
    line-height:1.75;
}

@media(max-width:640px){
    /*
    MOBİL GÖRÜNÜŞ:
    Kiçik ekranlarda blog başlıqları əlavə olaraq bir az da yığcam göstərilir.
    */
    .single-blog-card h1{
        font-size:clamp(23px,7vw,32px) !important;
    }

    .single-content h2,
    .html-content h2{
        font-size:clamp(21px,6vw,28px) !important;
    }

    .single-content h3,
    .html-content h3{
        font-size:clamp(18px,5vw,23px) !important;
    }
}

/*
============================================================
 MOBİL SCROLL DÜZƏLİŞİ — 30.06.2026
============================================================
Bu blok yalnız mobil ekranlarda işləyir.
Məqsəd: Android Chrome-da scroll zamanı ağ ekran/gecikmə yaradan ağır
blur, mask, fixed fon və animasiya effektlərini mobil üçün söndürmək.
Desktop görünüşə təsir etmir.
============================================================
*/
@media (max-width: 768px){
    html,
    body{
        min-height:100%;
        background:#050914 !important;
        background-image:linear-gradient(135deg,#050914 0%,#071630 58%,#060a16 100%) !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
    }

    body:before,
    body:after{
        display:none !important;
        content:none !important;
    }

    .site-header{
        position:sticky !important;
        top:10px !important;
        z-index:100;
        transform:none !important;
        will-change:auto !important;
    }

    .header-inner,
    .main-nav,
    .service-card,
    .package-card,
    .blog-card,
    .contact-form,
    .terminal-card,
    .upgrade-card,
    .single-blog-card,
    .console-window,
    .floating-chip,
    .cube-face,
    .cube-satellite,
    .node,
    .about-card,
    .feature-card{
        -webkit-backdrop-filter:none !important;
        backdrop-filter:none !important;
    }

    .header-inner{
        background:#071022 !important;
        box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
    }

    .main-nav{
        background:#071022 !important;
    }

    .hero-section,
    .section,
    .site-footer,
    .single-blog-section{
        background:transparent !important;
        contain:paint;
    }

    .service-card,
    .package-card,
    .blog-card,
    .contact-form,
    .terminal-card,
    .upgrade-card,
    .single-blog-card,
    .tech-panel,
    .about-card,
    .feature-card{
        background:#0d1a33 !important;
        box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
        transform:none !important;
        will-change:auto !important;
        contain:paint;
    }

    .hero-visual,
    .tech-panel,
    .upgrade-card{
        overflow:hidden;
    }

    .hero-visual *,
    .tech-panel *,
    .upgrade-card *,
    .automation-visual *,
    .upgrade-visual *{
        animation:none !important;
        transition:none !important;
    }

    .ring,
    .ring-one,
    .ring-two,
    .cube-orbit-a,
    .cube-orbit-b,
    .cube-orbit-c,
    .globe-ring,
    .globe-grid,
    .upgrade-card:before,
    .service-card:before,
    .blog-card:before{
        display:none !important;
    }

    .whatsapp{
        position:fixed !important;
        right:18px !important;
        bottom:18px !important;
        transform:none !important;
        will-change:auto !important;
        box-shadow:0 10px 26px rgba(0,0,0,.24) !important;
    }
}

@media (max-width: 480px){
    .hero-section{padding-top:108px !important;}
    .section{padding-top:54px !important;padding-bottom:54px !important;}
    .package-card{min-height:auto !important;}
}