/* ============================================
   ILHOM v2 — boyroq, kengroq, jonliroq
   Joyi: blog/static/blog/css/style.css
   ============================================ */

   :root{
    --bg:#F5F1E8;             /* iliq krem (oq emas) */
    --sky-strong:#C9E3FA;     /* to'yingan osmon */
    --sky-mid:#E4F1FC;
    --surface:#FFFFFF;
    --ink:#1F2C4A;
    --text:#3A4358;
    --text-muted:#757D90;
    --primary:#3D56C0;
    --coral:#F26B4E;
    --gold:#F2B33D;
    --peach:#FBEEDF;          /* shaftoli - bo'lim fonlari uchun */
    --mint:#E4F3EC;
    --line:#E5E0D2;
    --cloud:#FFFFFF;
    --header-bg:rgba(245,241,232,0.75);
    --header-bg-solid:rgba(245,241,232,0.95);
    --radius:20px;
    --radius-sm:13px;
    --shadow-soft:0 6px 24px rgba(31,44,74,0.08);
    --shadow-lift:0 18px 44px rgba(31,44,74,0.14);
  }
  
  /* TUN REJIMI - alohida loyihalangan palitra */
  :root[data-theme="night"]{
    --bg:#111827;
    --sky-strong:#1B2A4D;
    --sky-mid:#151E36;
    --surface:#1B2338;
    --ink:#EEF1FA;
    --text:#C7CDDE;
    --text-muted:#8A93AC;
    --primary:#7A8FFF;
    --coral:#FF8A6B;
    --gold:#FFC95C;
    --peach:#212B45;
    --mint:#1C2B41;
    --line:#2B3552;
    --cloud:#2E3A58;
    --header-bg:rgba(17,24,39,0.75);
    --header-bg-solid:rgba(17,24,39,0.95);
    --shadow-soft:0 6px 24px rgba(0,0,0,0.35);
    --shadow-lift:0 18px 44px rgba(0,0,0,0.5);
  }
  
  /* Tema almashganda ranglar silliq o'tadi */
  body, .site-header, .nav-links, .article-card, .testimonial-card, .process-card,
  .stats-bar, .quote-box, .testimonials-inner, .featured-card, .search-bar,
  .comment-item, .comment-form input, .comment-form textarea, .tag-chip,
  .hero-badge, .btn-ghost, footer, .toast{
    transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px;
    line-height:1.65;
    overflow-x:hidden;
  }
  
  /* To'yingan osmon gradienti - sahifa tepasi */
  body::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:760px;
    background:linear-gradient(180deg, var(--sky-strong) 0%, var(--sky-mid) 42%, rgba(228,241,252,0) 100%);
    z-index:0;
    pointer-events:none;
  }
  
  h1,h2,h3{
    font-family:'Playfair Display',serif;
    margin:0;
    color:var(--ink);
    letter-spacing:-0.01em;
    line-height:1.2;
  }
  
  a{ color:inherit; }
  
  /* KENG KONTEYNER: ekranning ~92% qismi */
  .wrap{
    max-width:1440px;
    width:92%;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
    border-radius:6px;
  }
  
  .accent{ color:var(--coral); font-style:italic; }
  
  /* ============================================
     DOIMIY FON: qushlar + haqiqiy bulutlar
     ============================================ */
  .sky{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  
  /* --- Qushlar: oddiy, tabiiy qanot qoqish --- */
  .bird{
    position:absolute;
    color:var(--hill-front, #22304A);
    opacity:0.5;
    will-change:transform;
  }
  .bird svg{ width:100%; height:auto; display:block; overflow:visible; }
  .bird .wing-up{ animation:flap .55s steps(1) infinite; }
  .bird .wing-down{ animation:flap .55s steps(1) infinite reverse; }
  @keyframes flap{
    0%,49%{ opacity:1; }
    50%,100%{ opacity:0; }
  }
  .bird.b1{ width:36px; top:11%; animation:fly-1 32s linear infinite; }
  .bird.b2{ width:22px; top:17%; animation:fly-2 46s linear infinite; animation-delay:-12s; opacity:0.4; }
  .bird.b3{ width:29px; top:7%;  animation:fly-1 40s linear infinite; animation-delay:-25s; opacity:0.45; }
  .bird.b4{ width:18px; top:25%; animation:fly-2 55s linear infinite; animation-delay:-38s; opacity:0.3; }
  .bird.b5{ width:26px; top:33%; animation:fly-3 58s linear infinite; animation-delay:-8s;  opacity:0.32; }
  .bird.b6{ width:31px; top:14%; animation:fly-2 36s linear infinite; animation-delay:-20s; opacity:0.42; }
  .bird.b7{ width:20px; top:21%; animation:fly-1 50s linear infinite; animation-delay:-5s;  opacity:0.34; }
  .bird.b8{ width:24px; top:5%;  animation:fly-3 44s linear infinite; animation-delay:-30s; opacity:0.38; }
  .bird.b9{ width:16px; top:29%; animation:fly-1 62s linear infinite; animation-delay:-48s; opacity:0.28; }
  .bird.b10{ width:28px; top:19%; animation:fly-2 41s linear infinite; animation-delay:-16s; opacity:0.36; }
  
  @keyframes fly-1{
    from{ transform:translateX(-8vw)  translateY(0); }
    30% { transform:translateX(28vw)  translateY(-26px); }
    60% { transform:translateX(64vw)  translateY(10px); }
    to  { transform:translateX(108vw) translateY(-18px); }
  }
  @keyframes fly-2{
    from{ transform:translateX(108vw) translateY(0) scaleX(-1); }
    40% { transform:translateX(60vw)  translateY(-30px) scaleX(-1); }
    70% { transform:translateX(30vw)  translateY(14px) scaleX(-1); }
    to  { transform:translateX(-10vw) translateY(-8px) scaleX(-1); }
  }
  @keyframes fly-3{
    from{ transform:translateX(-8vw)  translateY(0); }
    50% { transform:translateX(50vw)  translateY(-44px); }
    to  { transform:translateX(108vw) translateY(6px); }
  }
  
  /* --- Haqiqiy do'mboq bulutlar (sahifa eng tepasida) --- */
  .puffy{
    position:absolute;
    background:var(--cloud);
    border-radius:999px;
    opacity:0.92;
    box-shadow:0 10px 24px rgba(31,44,74,0.06);
  }
  .puffy::before, .puffy::after{
    content:"";
    position:absolute;
    background:var(--cloud);
    border-radius:50%;
  }
  .puffy::before{
    width:55%; height:160%;
    left:14%; bottom:26%;
  }
  .puffy::after{
    width:38%; height:110%;
    right:12%; bottom:34%;
  }
  .puffy.p1{ width:200px; height:56px; top:4%;  animation:cloud-drift 85s  linear infinite; }
  .puffy.p2{ width:140px; height:42px; top:12%; animation:cloud-drift 115s linear infinite; animation-delay:-45s; opacity:0.8; }
  .puffy.p3{ width:260px; height:66px; top:1.5%; animation:cloud-drift 140s linear infinite; animation-delay:-95s; opacity:0.95; }
  .puffy.p4{ width:110px; height:34px; top:19%; animation:cloud-drift 100s linear infinite; animation-delay:-70s; opacity:0.65; }
  @keyframes cloud-drift{
    from{ transform:translateX(-26vw); }
    to  { transform:translateX(118vw); }
  }
  :root[data-theme="night"] .puffy{ opacity:0.55; box-shadow:none; }
  
  /* ============================================
     TUN REJIMI ELEMENTLARI: oy, yulduzlar, yonar qo'ng'izlar
     Kunduzi yashirin, tunda ko'rinadi
     ============================================ */
  .moon, .sky-star, .firefly{ display:none; }
  
  :root[data-theme="night"] .bird{ display:none; }
  :root[data-theme="night"] .moon,
  :root[data-theme="night"] .sky-star,
  :root[data-theme="night"] .firefly{ display:block; }
  
  /* --- OY: bulutlar orasida, yumshoq nur bilan --- */
  .moon{
    position:absolute;
    top:6%;
    right:9%;
    width:88px;
    height:88px;
    border-radius:50%;
    background:radial-gradient(circle at 34% 32%, #FFF8E1, #F4E3AC 58%, #E4CF8E);
    box-shadow:
      0 0 40px 12px rgba(255,236,170,0.35),
      0 0 110px 40px rgba(255,236,170,0.14),
      inset -12px -10px 26px rgba(180,150,80,0.35);
    animation:moon-bob 9s ease-in-out infinite;
  }
  /* Oy kraterlari */
  .moon::before, .moon::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(190,160,95,0.4);
  }
  .moon::before{ width:16px; height:16px; top:26%; left:22%; box-shadow:26px 30px 0 -3px rgba(190,160,95,0.32); }
  .moon::after{ width:10px; height:10px; bottom:24%; right:30%; }
  @keyframes moon-bob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }
  
  /* --- Osmon yulduzlari --- */
  .sky-star{
    position:absolute;
    width:3px;height:3px;
    border-radius:50%;
    background:#fff;
    animation:twinkle 3s ease-in-out infinite;
  }
  .sky-star.ss1{ top:7%;  left:12%; animation-delay:0s; }
  .sky-star.ss2{ top:14%; left:28%; animation-delay:.8s; width:2px;height:2px; }
  .sky-star.ss3{ top:5%;  left:46%; animation-delay:1.5s; }
  .sky-star.ss4{ top:18%; left:60%; animation-delay:.4s; width:2px;height:2px; }
  .sky-star.ss5{ top:10%; left:74%; animation-delay:2s; }
  .sky-star.ss6{ top:22%; left:88%; animation-delay:1.1s; width:2px;height:2px; }
  .sky-star.ss7{ top:28%; left:8%;  animation-delay:1.7s; width:2px;height:2px; }
  .sky-star.ss8{ top:3%;  left:82%; animation-delay:.6s; }
  @keyframes twinkle{
    0%,100%{ opacity:0.25; }
    50%{ opacity:1; }
  }
  
  /* --- YONAR QO'NG'IZLAR: nur sochib, erkin uchib yuradi --- */
  .firefly{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#FFE58A;
    box-shadow:0 0 8px 3px rgba(255,220,110,0.65), 0 0 20px 8px rgba(255,220,110,0.2);
  }
  .firefly i{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:inherit;
    animation:ff-flicker 2.2s ease-in-out infinite;
  }
  .firefly.f1{ top:30%; left:12%; animation:ff-path-a 16s ease-in-out infinite; }
  .firefly.f2{ top:52%; left:78%; animation:ff-path-b 20s ease-in-out infinite; animation-delay:-6s; }
  .firefly.f3{ top:64%; left:30%; animation:ff-path-c 18s ease-in-out infinite; animation-delay:-10s; }
  .firefly.f4{ top:40%; left:56%; animation:ff-path-a 22s ease-in-out infinite; animation-delay:-14s; }
  .firefly.f5{ top:74%; left:66%; animation:ff-path-b 17s ease-in-out infinite; animation-delay:-3s; }
  .firefly.f6{ top:22%; left:40%; animation:ff-path-c 24s ease-in-out infinite; animation-delay:-18s; }
  .firefly.f7{ top:58%; left:8%;  animation:ff-path-b 19s ease-in-out infinite; animation-delay:-9s; }
  .firefly .glow-delay-1{ animation-delay:.6s; }
  @keyframes ff-flicker{
    0%,100%{ opacity:1; }
    45%{ opacity:0.25; }
    60%{ opacity:0.9; }
  }
  @keyframes ff-path-a{
    0%,100%{ transform:translate(0,0); }
    25%{ transform:translate(90px,-70px); }
    50%{ transform:translate(30px,-140px); }
    75%{ transform:translate(-70px,-50px); }
  }
  @keyframes ff-path-b{
    0%,100%{ transform:translate(0,0); }
    30%{ transform:translate(-100px,60px); }
    60%{ transform:translate(60px,110px); }
  }
  @keyframes ff-path-c{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(70px,50px); }
    55%{ transform:translate(-50px,-90px); }
    80%{ transform:translate(-110px,30px); }
  }
  
  /* ============================================
     HEADER — ikki qavatli, aksent chiziqli
     ============================================ */
  .site-header{
    position:sticky;
    top:0;
    height: 77px;
    z-index:60;
    background:var(--header-bg);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:box-shadow .3s ease, background .3s ease;
  }
  /* Tepa aksent chizig'i - kamalak gradient */
  .site-header::before{
    content:"";
    display:block;
    height:6px;
    background:linear-gradient(90deg, var(--primary), var(--coral), var(--gold));
  }
  .site-header.scrolled{
    background:var(--header-bg-solid);
    box-shadow:0 8px 28px rgba(31,44,74,0.09);
  }
  
  /* Kun/tun almashtirgich */
  .theme-toggle{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1.5px solid var(--line);
    background:var(--surface);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    box-shadow:var(--shadow-soft);
    transition:transform .25s ease, border-color .25s ease;
    flex-shrink:0;
  }
  .theme-toggle:hover{ transform:rotate(20deg); border-color:var(--gold); }
  .theme-toggle svg{ width:20px; height:20px; }
  .theme-toggle .icon-moon{ display:none; }
  :root[data-theme="night"] .theme-toggle .icon-sun{ display:none; }
  :root[data-theme="night"] .theme-toggle .icon-moon{ display:block; }
  .nav-right{ display:flex; align-items:center; gap:14px; margin-top: -15px; }
  
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1440px;
    width:92%;
    margin:0 auto;
    padding:14px 0;
  }
  
  .logo{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:1.6rem;
    color:var(--ink);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
  }
  /* Logo rasmi (matnli logo keng bo'lgani uchun balandlik bo'yicha o'lchanadi) */
  .logo-img{
    height:76px;
    margin-top: -15px;
    width:auto;
    object-fit:contain;
    display:block;
    transition:transform .25s ease;
  }
  .logo:hover .logo-img{ transform:scale(1.04); }
  .footer-logo-img{ height:98px; }
  /* Tun rejimida oq fonli logo ko'rinishi uchun yumshoq nur beriladi */
  :root[data-theme="night"] .logo-img{
    filter:drop-shadow(0 0 10px rgba(255,255,255,0.12));
  }
  .logo .logo-bird{
    width:30px; height:22px;
    color:var(--coral);
    animation:logo-flap 3s ease-in-out infinite;
  }
  @keyframes logo-flap{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
  }
  
  /* Nav havolalari oq "pill" ichida */
  .nav-links{
    display:flex;
    align-items:center;
    gap:6px;
    list-style:none;
    margin:0;padding:6px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--shadow-soft);
  }
  .nav-links a{
    text-decoration:none;
    font-size:0.92rem;
    font-weight:500;
    color:var(--text);
    padding:9px 18px;
    border-radius:999px;
    transition:background .2s ease, color .2s ease;
  }
  .nav-links a:hover{ background:var(--peach); color:var(--ink); }
  .nav-links a.btn{ padding:10px 22px; }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 28px;
    border-radius:999px;
    font-weight:600;
    font-size:0.94rem;
    font-family:'Inter',sans-serif;
    text-decoration:none;
    cursor:pointer;
    border:none;
    transition:transform .2s ease, box-shadow .25s ease;
  }
  .btn-primary{ background:var(--primary); color:#fff; }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(61,86,192,0.4); }
  .btn-coral{ background:var(--coral); color:#fff; }
  .btn-coral:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(242,107,78,0.4); }
  .btn-ghost{
    background:var(--surface);
    border:1.5px solid var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
  
  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    cursor:pointer;
    padding:10px;
  }
  .nav-toggle span{
    width:22px;height:2px;
    background:var(--ink);
    border-radius:2px;
  }
  
  /* ============================================
     HERO — aylanuvchi so'z bilan
     ============================================ */
  .hero{
    padding:100px 0 90px;
    text-align:center;
    position:relative;
  }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 20px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    font-size:0.84rem;
    color:var(--text-muted);
    margin-bottom:36px;
  }
  .hero-badge .sun{
    width:9px;height:9px;
    border-radius:50%;
    background:var(--gold);
    animation:sun-glow 2.4s ease-in-out infinite;
  }
  @keyframes sun-glow{
    0%,100%{ box-shadow:0 0 0 0 rgba(242,179,61,0.55); }
    50%{ box-shadow:0 0 0 8px rgba(242,179,61,0); }
  }
  
  .hero h1{
    font-size:clamp(2.5rem,6vw,4.4rem);
    font-weight:700;
    max-width:900px;
    margin:0 auto;
  }
  
  /* AYLANUVCHI SO'Z: 3 ta so'z navbatma-navbat chiqadi */
  .word-rotate{
    display:inline-grid;
    vertical-align:top;
    overflow:hidden;
    height:1.22em;
    text-align:center;
  }
  .word-rotate span{
    grid-area:1/1;
    font-style:italic;
    background:linear-gradient(100deg, var(--coral), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    opacity:0;
    transform:translateY(105%);
    animation:word-cycle 9s infinite;
    white-space:nowrap;
  }
  .word-rotate span:nth-child(2){ animation-delay:3s; }
  .word-rotate span:nth-child(3){ animation-delay:6s; }
  @keyframes word-cycle{
    0%{ opacity:0; transform:translateY(105%); }
    5%,29%{ opacity:1; transform:translateY(0); }
    34%,100%{ opacity:0; transform:translateY(-105%); }
  }
  
  .hero-sub{
    margin:30px auto 0;
    max-width:580px;
    color:var(--text-muted);
    font-size:1.1rem;
  }
  .hero-actions{
    margin-top:42px;
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
  }
  
  /* ---------- QIDIRUV ---------- */
  .search-bar{
    margin:48px auto 0;
    max-width:560px;
    display:flex;
    gap:10px;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:999px;
    padding:7px 7px 7px 24px;
    box-shadow:var(--shadow-soft);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .search-bar:focus-within{
    border-color:var(--primary);
    box-shadow:0 10px 32px rgba(61,86,192,0.18);
  }
  .search-bar input{
    flex:1;
    border:none;
    background:none;
    font-family:'Inter',sans-serif;
    font-size:0.96rem;
    color:var(--ink);
    min-width:0;
  }
  .search-bar input:focus{ outline:none; }
  .search-bar input::placeholder{ color:var(--text-muted); }
  
  /* ---------- JONLI STATISTIKA (gorizontal panel) ---------- */
  .stats{ padding:64px 0; }
  .stats-bar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
  }
  .stat-cell{
    position:relative;
    padding:40px 24px;
    text-align:center;
  }
  /* Katakchalar orasidagi nozik ajratuvchi */
  .stat-cell:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0; top:22%;
    height:56%;
    width:1px;
    background:var(--line);
  }
  /* Yuqoridan pastga tushuvchi ingichka aksent chizig'i */
  .stat-cell::before{
    content:"";
    position:absolute;
    top:0; left:50%;
    width:40px; height:3px;
    transform:translateX(-50%) scaleX(0);
    border-radius:0 0 4px 4px;
    background:linear-gradient(90deg, var(--primary), var(--coral));
    transition:transform .5s ease;
  }
  .stats-bar.is-visible .stat-cell::before{ transform:translateX(-50%) scaleX(1); }
  .stat-num{
    font-family:'Playfair Display',serif;
    font-size:clamp(2rem,4vw,2.9rem);
    font-weight:700;
    line-height:1;
    background:linear-gradient(120deg, var(--ink), var(--primary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .stat-label{
    margin-top:10px;
    font-size:0.82rem;
    color:var(--text-muted);
    letter-spacing:0.02em;
  }
  
  /* ---------- SECTION SARLAVHALARI ---------- */
  .section-head{
    text-align:center;
    max-width:680px;
    margin:0 auto 56px;
  }
  .section-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--coral);
    margin-bottom:18px;
  }
  .section-label::before, .section-label::after{
    content:"";
    width:28px;
    height:1.5px;
    background:var(--coral);
    opacity:0.5;
  }
  .section-title{
    font-size:clamp(1.9rem,3.8vw,2.8rem);
    font-weight:700;
  }
  .section-head p{ color:var(--text-muted); margin:16px 0 0; }
  
  /* ---------- JARAYON ---------- */
  .process{ padding:80px 0; }
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }
  .process-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:34px 28px;
    box-shadow:var(--shadow-soft);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .process-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lift); }
  .process-num{
    width:46px;height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:1.1rem;
    color:#fff;
    margin-bottom:20px;
    transform:rotate(-4deg);
  }
  .process-card:nth-child(1) .process-num{ background:var(--primary); }
  .process-card:nth-child(2) .process-num{ background:var(--coral); }
  .process-card:nth-child(3) .process-num{ background:var(--gold); }
  .process-card:nth-child(4) .process-num{ background:var(--ink); }
  .process-title{
    font-family:'Playfair Display',serif;
    font-size:1.25rem;
    font-weight:700;
    color:var(--ink);
    margin-bottom:10px;
  }
  .process-text{ font-size:0.93rem; color:var(--text-muted); }
  
  /* ---------- KUN ILHOMI (aylanuvchi iqtiboslar) ---------- */
  .quote-section{
    padding:70px 0;
  }
  .quote-box{
    background:linear-gradient(135deg, var(--mint), var(--sky-mid));
    border-radius:28px;
    padding:64px 8%;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
  }
  .quote-mark{
    font-family:'Playfair Display',serif;
    font-size:5rem;
    line-height:0.5;
    color:var(--coral);
    opacity:0.5;
    display:block;
    margin-bottom:26px;
  }
  .quote-text{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:clamp(1.2rem,2.6vw,1.7rem);
    color:var(--ink);
    max-width:760px;
    margin:0 auto 18px;
    min-height:2.6em;
    transition:opacity .5s ease;
  }
  .quote-author{
    font-size:0.86rem;
    color:var(--text-muted);
    letter-spacing:0.06em;
    transition:opacity .5s ease;
  }
  .quote-text.fading, .quote-author.fading{ opacity:0; }
  
  /* ---------- MAQOLALAR ---------- */
  .articles{ padding:80px 0; }
  
  /* Teg filtrlari */
  .tag-filter{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:46px;
  }
  .tag-chip{
    font-size:0.83rem;
    font-weight:500;
    padding:9px 20px;
    border-radius:999px;
    background:var(--surface);
    border:1.5px solid var(--line);
    color:var(--text);
    text-decoration:none;
    transition:all .2s ease;
  }
  .tag-chip:hover{ border-color:var(--coral); color:var(--coral); }
  .tag-chip.active{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
  }
  
  /* Asosiy (featured) maqola - katta karta */
  .featured-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    margin-bottom:28px;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .featured-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
  .featured-visual{
    background:linear-gradient(135deg, var(--primary), #6B82E0);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:280px;
    position:relative;
    overflow:hidden;
  }
  .featured-visual .big-bird{
    width:120px;
    color:rgba(255,255,255,0.9);
    animation:logo-flap 3.4s ease-in-out infinite;
  }
  .featured-visual .fv-cloud{
    position:absolute;
    background:rgba(255,255,255,0.18);
    border-radius:999px;
  }
  .featured-visual .fv-cloud:nth-child(2){ width:130px; height:36px; top:20%; left:-30px; animation:cloud-drift 26s linear infinite; }
  .featured-visual .fv-cloud:nth-child(3){ width:90px;  height:26px; bottom:18%; left:-20px; animation:cloud-drift 34s linear infinite; animation-delay:-16s; }
  .featured-body{
    padding:44px 42px;
    display:flex;
    flex-direction:column;
  }
  .featured-label{
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
  }
  .featured-body .article-title{ font-size:1.65rem; }
  .featured-body .article-excerpt{ font-size:1rem; }
  
  .article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
  }
  .article-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:0 0 28px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .article-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lift); }
  .tag{
    align-self:flex-start;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(61,86,192,0.09);
    color:var(--primary);
    margin-bottom:18px;
  }
  .article-card .tag,
  .article-card .article-title,
  .article-card .article-excerpt,
  .article-card .article-meta{
    margin-left:28px;
    margin-right:28px;
  }
  .article-title{
    font-family:'Playfair Display',serif;
    font-size:1.25rem;
    font-weight:700;
    line-height:1.35;
    margin-bottom:12px;
  }
  .article-title a{ text-decoration:none; color:var(--ink); transition:color .2s ease; }
  .article-title a:hover{ color:var(--coral); }
  .article-excerpt{
    font-size:0.93rem;
    color:var(--text-muted);
    margin-bottom:22px;
    flex:1;
  }
  .article-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.79rem;
    color:var(--text-muted);
    border-top:1px solid var(--line);
    padding-top:16px;
  }
  .views-badge{ display:inline-flex; align-items:center; gap:5px; }
  
  .empty-state{
    text-align:center;
    color:var(--text-muted);
    padding:40px 20px;
    grid-column:1/-1;
  }
  
  /* ---------- FIKRLAR ---------- */
  .testimonials{
    padding:80px 0;
  }
  .testimonials-inner{
    background:var(--sky-mid);
    border-radius:28px;
    padding:64px 5%;
    box-shadow:var(--shadow-soft);
  }
  .testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .testimonial-card{
    background:var(--surface);
    border-radius:var(--radius);
    padding:32px 28px;
    box-shadow:var(--shadow-soft);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .testimonial-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
  .testimonial-stars{
    color:var(--gold);
    letter-spacing:3px;
    font-size:0.92rem;
    margin-bottom:18px;
  }
  .testimonial-text{
    font-size:0.95rem;
    color:var(--text);
    margin-bottom:24px;
  }
  .testimonial-author{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .testimonial-avatar{
    width:44px;height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:1rem;
    color:#fff;
    flex-shrink:0;
  }
  .testimonial-avatar.av1{ background:var(--primary); }
  .testimonial-avatar.av2{ background:var(--coral); }
  .testimonial-avatar.av3{ background:var(--gold); }
  .testimonial-name{ font-weight:600; font-size:0.9rem; color:var(--ink); }
  .testimonial-role{ font-size:0.78rem; color:var(--text-muted); }
  
  /* ---------- NEWSLETTER ---------- */
  .newsletter{ padding:70px 0 110px; }
  .newsletter-box{
    position:relative;
    border-radius:30px;
    padding:76px 6%;
    text-align:center;
    overflow:hidden;
    background:linear-gradient(160deg, #24335A, #1A2340);
    box-shadow:var(--shadow-lift);
  }
  .newsletter-box .bird-inner{
    position:absolute;
    width:28px;
    top:22%;
    color:rgba(255,255,255,0.55);
    animation:fly-1 22s linear infinite;
  }
  .newsletter-box .bird-inner{ color:rgba(255,255,255,0.6); }
  .newsletter-box .bird-inner .wing-up{ animation:flap .55s steps(1) infinite; }
  .newsletter-box .bird-inner .wing-down{ animation:flap .55s steps(1) infinite reverse; }
  .newsletter-box h2{
    color:#fff;
    font-size:clamp(1.8rem,3.6vw,2.5rem);
    margin-bottom:14px;
    position:relative;
  }
  .newsletter-box h2 .accent{ color:var(--gold); }
  .newsletter-box p{
    color:rgba(255,255,255,0.65);
    margin:0 0 36px;
    position:relative;
  }
  .newsletter-form{
    display:flex;
    gap:12px;
    max-width:480px;
    margin:0 auto;
    flex-wrap:wrap;
    justify-content:center;
    position:relative;
  }
  .newsletter-form input{
    flex:1;
    min-width:230px;
    padding:15px 22px;
    border-radius:999px;
    border:1.5px solid rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.08);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
  }
  .newsletter-form input::placeholder{ color:rgba(255,255,255,0.5); }
  .newsletter-note{
    margin-top:18px;
    font-size:0.78rem;
    color:rgba(255,255,255,0.5);
    position:relative;
  }
  
  /* ============================================
     TOAST XABARLAR — ixcham, 3 soniya, X bilan
     ============================================ */
  .toast-stack{
    position:fixed;
    top:86px;
    right:22px;
    z-index:200;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
  }
  .toast{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:12px;
    max-width:380px;
    min-width:240px;
    padding:13px 14px 13px 18px;
    border-radius:14px;
    background:var(--surface);
    border:1.5px solid var(--line);
    box-shadow:var(--shadow-lift);
    font-size:0.88rem;
    color:var(--text);
    position:relative;
    overflow:hidden;
    animation:toast-in .35s cubic-bezier(.4,0,.2,1);
  }
  @keyframes toast-in{
    from{ opacity:0; transform:translateX(40px); }
    to{ opacity:1; transform:translateX(0); }
  }
  .toast.hide{
    opacity:0;
    transform:translateX(50px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .toast-x{
    flex-shrink:0;
    width:26px;height:26px;
    border-radius:50%;
    border:none;
    background:transparent;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, color .2s ease;
  }
  .toast-x:hover{ background:rgba(125,125,125,0.12); color:var(--ink); }
  /* 3 soniyalik kamayuvchi vaqt chizig'i */
  .toast-timer{
    position:absolute;
    left:0;bottom:0;
    height:3px;
    width:100%;
    transform-origin:left;
    animation:toast-timer 3s linear forwards;
  }
  @keyframes toast-timer{
    from{ transform:scaleX(1); }
    to{ transform:scaleX(0); }
  }
  .toast.success{ border-color:#5CB88A; }
  .toast.success .toast-timer{ background:#5CB88A; }
  .toast.error{ border-color:var(--coral); }
  .toast.error .toast-timer{ background:var(--coral); }
  .toast.info{ border-color:var(--gold); }
  .toast.info .toast-timer{ background:var(--gold); }
  
  /* ---------- MAQOLA SAHIFASI ---------- */
  .progress-bar{
    position:fixed;
    top:0;left:0;
    height:4px;
    width:0%;
    background:linear-gradient(90deg, var(--primary), var(--coral), var(--gold));
    z-index:100;
  }
  .article-page{ padding:80px 0 60px; max-width:800px; }
  .article-page h1{
    font-size:clamp(2rem,4.2vw,3rem);
    margin:20px 0 24px;
  }
  .article-info{
    display:flex;
    gap:22px;
    font-size:0.83rem;
    color:var(--text-muted);
    margin-bottom:46px;
    flex-wrap:wrap;
  }
  .article-body{
    font-size:1.08rem;
    line-height:1.85;
    color:var(--text);
  }
  .article-body p{ margin:0 0 22px; }
  .article-body h2{
    font-size:1.7rem;
    margin:42px 0 16px;
    scroll-margin-top:110px;
  }
  .article-body h3{
    font-size:1.25rem;
    margin:30px 0 12px;
  }
  
  .related{ padding:50px 0 40px; }
  .related h2{ font-size:1.6rem; margin-bottom:30px; }
  
  .comments{ padding:40px 0 100px; max-width:800px; }
  .comments h2{ font-size:1.6rem; margin-bottom:30px; }
  .comment-item{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:22px 26px;
    margin-bottom:14px;
    box-shadow:var(--shadow-soft);
  }
  .comment-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
  }
  .comment-name{ font-weight:600; color:var(--ink); font-size:0.93rem; }
  .comment-date{ font-size:0.75rem; color:var(--text-muted); }
  .comment-text{ font-size:0.93rem; margin:0; }
  
  .comment-form{
    margin-top:34px;
    display:grid;
    gap:14px;
  }
  .comment-form input, .comment-form textarea{
    width:100%;
    padding:15px 20px;
    border-radius:var(--radius-sm);
    border:1.5px solid var(--line);
    background:var(--surface);
    font-family:'Inter',sans-serif;
    font-size:0.94rem;
    color:var(--ink);
    resize:vertical;
  }
  .comment-form input:focus, .comment-form textarea:focus{
    outline:none;
    border-color:var(--primary);
  }
  .comment-form button{ justify-self:start; }

  /* ---------- YANGI BLOG FUNKSIYALARI ---------- */
  .media-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-decoration:none;
    background:linear-gradient(135deg, var(--primary), var(--coral));
  }
  .media-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .cover-fallback{
    color:#fff;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-align:center;
    padding:24px;
  }
  .article-cover{ height:190px; margin-bottom:24px; }
  .featured-visual img{ position:absolute; inset:0; }
  .content-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:34px;
    align-items:start;
  }
  .sidebar{
    display:grid;
    gap:20px;
    position:sticky;
    top:104px;
  }
  .side-box,
  .toc-box,
  .info-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow-soft);
  }
  .side-box h3,
  .toc-box h2,
  .info-card h2{
    font-size:1.15rem;
    margin-bottom:16px;
  }
  .popular-item{
    display:grid;
    grid-template-columns:32px 1fr;
    gap:8px 12px;
    padding:14px 0;
    border-top:1px solid var(--line);
    text-decoration:none;
  }
  .popular-item:first-of-type{ border-top:0; }
  .popular-item span{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--peach);
    color:var(--coral);
    display:grid;
    place-items:center;
    font-weight:700;
  }
  .popular-item strong{ color:var(--ink); line-height:1.35; }
  .popular-item small{ grid-column:2; color:var(--text-muted); }
  .side-tags{ display:flex; flex-wrap:wrap; gap:10px; }
  .side-tags a{
    padding:8px 12px;
    border-radius:999px;
    background:var(--peach);
    text-decoration:none;
    font-size:0.84rem;
  }
  .pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:34px;
  }
  .page-link,
  .page-current{
    padding:10px 16px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--surface);
    text-decoration:none;
    font-weight:600;
  }
  .page-link:hover{ color:var(--primary); border-color:var(--primary); }
  .article-hero{
    height:min(460px, 56vw);
    border-radius:var(--radius);
    margin-bottom:34px;
    box-shadow:var(--shadow-soft);
  }
  .toc-box{ margin-bottom:28px; }
  .toc-box a{
    display:block;
    padding:9px 0;
    border-top:1px solid var(--line);
    text-decoration:none;
    color:var(--primary);
  }
  .share-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:34px;
  }
  .page-hero{
    padding:92px 0 34px;
    max-width:900px;
  }
  .page-hero h1{
    font-size:clamp(2.1rem,4vw,3.3rem);
    margin:12px 0 16px;
  }
  .page-hero p{
    font-size:1.08rem;
    color:var(--text-muted);
    max-width:760px;
  }
  .info-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    padding:24px 0 90px;
  }
  .contact-layout{
    display:grid;
    grid-template-columns:minmax(0, 760px) 320px;
    gap:28px;
    align-items:start;
    padding-bottom:100px;
  }
  
  /* ============================================
     FOOTER — jonli manzara: tepaliklar, odam, samolyot, qushlar
     ============================================ */
  :root{
    --hill-back:#B9D4EA;
    --hill-mid:#7E9CC9;
    --hill-front:#1F2C4A;
  }
  :root[data-theme="night"]{
    --hill-back:#25304F;
    --hill-mid:#1A2440;
    --hill-front:#0C1222;
  }
  
  footer{
    position:relative;
    z-index:2;
    background:linear-gradient(180deg, var(--bg) 0%, var(--sky-mid) 55%, var(--sky-strong) 100%);
    padding:120px 0 0;
    overflow:hidden;
    text-align:center;
  }
  
  .footer-inner{ position:relative; z-index:3; }
  .footer-inner .logo{
    justify-content:center;
    font-size:2rem;
    margin-bottom:14px;
  }
  .footer-tagline{
    color:var(--text-muted);
    font-size:0.95rem;
    max-width:44ch;
    margin:0 auto 28px;
  }
  .footer-social{
    display:flex;
    justify-content:center;
    gap:12px;
  }
  .footer-social a{
    width:42px;height:42px;
    border-radius:50%;
    border:1.5px solid var(--line);
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    text-decoration:none;
    transition:all .2s ease;
  }
  .footer-social a:hover{
    border-color:var(--coral);
    color:var(--coral);
    transform:translateY(-3px);
  }
  
  /* --- MANZARA SAHNASI --- */
  .footer-scene{
    position:relative;
    height:250px;
    margin-top:50px;
  }
  .hill{
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    pointer-events:none;
  }
  .hill svg{ display:block; width:100%; }
  .hill-back{ color:var(--hill-back); }
  .hill-back svg{ height:200px; }
  .hill-mid{ color:var(--hill-mid); }
  .hill-mid svg{ height:155px; }
  .hill-front{ color:var(--hill-front); }
  .hill-front svg{ height:120px; }
  /* Tepalik qirralaridagi yorug' chiziq: kunduzi sezilarli, tunda oy nuridek xira */
  .hill .ridge{ opacity:0.22; }
  :root[data-theme="night"] .hill .ridge{ opacity:0.07; }
  
  /* Odam silueti: tepalikda, samolyotga ishora qilmoqda (jonli) */
  :root{
    --fig-main:#22304A;
    --fig-accent:#5B6B8C;
    --fig-dark:#182238;
    --fig-skin:#E8C29B;
  }
  :root[data-theme="night"]{
    --fig-main:#0C1222;
    --fig-accent:#2C3855;
    --fig-dark:#060B16;
    --fig-skin:#C9A280;
  }
  .figure{
    position:absolute;
    left:11%;
    bottom:62px;
    width:78px;
    z-index:2;
    animation:figure-breathe 4.5s ease-in-out infinite;
  }
  @keyframes figure-breathe{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-3px); }
  }
  .figure svg{ display:block; width:100%; overflow:visible; }
  .figure .fg-main{ fill:var(--fig-main); }
  .figure .fg-accent{ fill:var(--fig-accent); }
  .figure .fg-dark{ fill:var(--fig-dark); }
  .figure .fg-skin{ fill:var(--fig-skin); }
  
  /* Daraxtlar: organik shox-shabba, shabadada tebranadi */
  .ftree{
    position:absolute;
    pointer-events:none;
    transform-box:border-box;
    transform-origin:50% 100%;
    animation:tree-sway 7s ease-in-out infinite;
  }
  @keyframes tree-sway{
    0%,100%{ transform:rotate(-1.2deg); }
    50%{ transform:rotate(1.2deg); }
  }
  .ftree svg{ display:block; width:100%; overflow:visible; }
  .ftree.t1{ right:13%; bottom:52px; width:66px; color:var(--hill-front); }
  .ftree.t2{ left:28%;  bottom:96px; width:42px; color:var(--hill-mid); animation-delay:-3s; }
  
  /* O't-o'lan tuplari: yengil chayqaladi */
  .grass{
    position:absolute;
    width:22px;
    color:var(--hill-front);
    transform-box:border-box;
    transform-origin:50% 100%;
    animation:grass-sway 4s ease-in-out infinite;
    z-index:2;
  }
  @keyframes grass-sway{
    0%,100%{ transform:skewX(-4deg); }
    50%{ transform:skewX(5deg); }
  }
  .grass svg{ display:block; width:100%; }
  .grass.g1{ left:6.5%;  bottom:48px; }
  .grass.g2{ left:22%;   bottom:42px; width:18px; animation-delay:-1.4s; }
  .grass.g3{ right:6%;   bottom:50px; width:19px; animation-delay:-2.6s; }
  
    25% { transform:translate(24vw, 10px) rotate(-4deg); }
    50% { transform:translate(52vw, 42px) rotate(6deg); }
    75% { transform:translate(80vw, 6px)  rotate(-5deg); }
    100%{ transform:translate(108vw, 36px) rotate(8deg); }
  }
  
  /* Footer qushlari (faqat kunduzi) */
  .fbird{
    position:absolute;
    color:var(--hill-front);
    opacity:0.6;
  }
  .fbird svg{ display:block; width:100%; overflow:visible; }
  .fbird .wing-up{ animation:flap .55s steps(1) infinite; }
  .fbird .wing-down{ animation:flap .55s steps(1) infinite reverse; }
  .fbird.fb1{ width:26px; top:12%; animation:footer-fly 20s linear infinite; }
  .fbird.fb2{ width:18px; top:26%; animation:footer-fly 27s linear infinite; animation-delay:-11s; opacity:0.45; }
  .fbird.fb3{ width:22px; top:34%; animation:footer-fly 24s linear infinite; animation-delay:-6s; opacity:0.5; }
  .fbird.fb4{ width:15px; top:20%; animation:footer-fly 31s linear infinite; animation-delay:-18s; opacity:0.4; }
  @keyframes footer-fly{
    from{ transform:translateX(-6vw) translateY(0); }
    50% { transform:translateX(52vw) translateY(-18px); }
    to  { transform:translateX(108vw) translateY(4px); }
  }
  :root[data-theme="night"] .fbird{ display:none; }
  
  /* Tunda sahnada: yulduzlar va yonar qo'ng'izlar */
  .fstar, .ffly{ display:none; }
  :root[data-theme="night"] .fstar,
  :root[data-theme="night"] .ffly{ display:block; }
  .fstar{
    position:absolute;
    width:3px;height:3px;
    border-radius:50%;
    background:#fff;
    animation:twinkle 3s ease-in-out infinite;
  }
  .fstar.fs1{ top:8%;  left:18%; }
  .fstar.fs2{ top:20%; left:48%; animation-delay:.9s; width:2px;height:2px; }
  .fstar.fs3{ top:12%; left:76%; animation-delay:1.6s; }
  .fstar.fs4{ top:30%; left:88%; animation-delay:.5s; width:2px;height:2px; }
  .ffly{
    position:absolute;
    width:5px;height:5px;
    border-radius:50%;
    background:#FFE58A;
    box-shadow:0 0 8px 3px rgba(255,220,110,0.6), 0 0 18px 7px rgba(255,220,110,0.18);
  }
  .ffly i{
    position:absolute; inset:0;
    border-radius:50%;
    background:inherit;
    animation:ff-flicker 2.2s ease-in-out infinite;
  }
  .ffly.ff1{ bottom:90px;  left:24%; animation:ff-path-a 15s ease-in-out infinite; }
  .ffly.ff2{ bottom:110px; left:62%; animation:ff-path-b 19s ease-in-out infinite; animation-delay:-7s; }
  .ffly.ff3{ bottom:80px;  left:80%; animation:ff-path-c 17s ease-in-out infinite; animation-delay:-4s; }
  
  /* Pastki panel: old tepalik rangiga qo'shilib ketadi */
  .footer-base{
    position:relative;
    z-index:3;
    background:var(--hill-front);
    padding:18px 0 24px;
  }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.78rem;
    color:rgba(255,255,255,0.7);
    text-align:left;
  }
  
  /* ---------- TEPAGA QAYTISH TUGMASI (qush uchib chiqadi) ---------- */
  .to-top{
    position:fixed;
    bottom:28px;
    right:28px;
    width:52px;height:52px;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lift);
    z-index:80;
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, background .2s ease;
  }
  .to-top.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .to-top:hover{ background:var(--coral); }
  .to-top svg{ width:20px; }
  
  /* ---------- TUN REJIMI: mayda moslashuvlar ---------- */
  :root[data-theme="night"] .tag{
    background:rgba(122,143,255,0.16);
    color:#A9B7FF;
  }
  :root[data-theme="night"] .to-top{ background:#2E3A58; }
  :root[data-theme="night"] .to-top:hover{ background:var(--coral); }
  :root[data-theme="night"] .newsletter-form input{
    background:rgba(255,255,255,0.06);
  }
  :root[data-theme="night"] .nav-links a:hover{ background:#242E4A; }
  :root[data-theme="night"] .featured-visual{
    background:linear-gradient(135deg, #2B3A6B, #1E2B52);
  }
  :root[data-theme="night"] .search-bar:focus-within{
    box-shadow:0 10px 32px rgba(122,143,255,0.25);
  }
  
  /* ---------- SCROLL REVEAL ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible{ opacity:1; transform:none; }
  
  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    .stats-bar, .process-grid{ grid-template-columns:repeat(2,1fr); }
    /* 2 ustunli bo'lganda o'ng chekka ajratuvchini olib tashlash */
    .stat-cell:nth-child(2n)::after{ display:none; }
    .article-grid, .testimonial-grid{ grid-template-columns:1fr 1fr; }
    .featured-card{ grid-template-columns:1fr; }
    .featured-visual{ min-height:180px; }
    .content-layout,
    .contact-layout,
    .info-grid{
      grid-template-columns:1fr;
    }
    .sidebar{ position:static; }
  }
  @media (max-width:640px){
    .wrap{ width:100%; padding:0 20px; }
    .nav{ width:100%; padding:14px 20px; }
    .nav-links{
      position:fixed;
      inset:70px 0 0 0;
      background:var(--header-bg-solid);
      backdrop-filter:blur(20px);
      flex-direction:column;
      align-items:flex-start;
      padding:34px 28px;
      gap:16px;
      border-radius:0;
      border:none;
      box-shadow:none;
      transform:translateX(100%);
      transition:transform .3s ease;
      z-index:50;
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-toggle{ display:flex; }
    .theme-toggle{ width:42px; height:42px; }
    .process-grid, .article-grid, .testimonial-grid{ grid-template-columns:1fr; }
    .hero{ padding:64px 0 60px; }
    .stats, .process, .articles, .testimonials, .newsletter, .quote-section{ padding:48px 0; }
    .article-cover{ height:170px; }
    .article-card .tag,
    .article-card .article-title,
    .article-card .article-excerpt,
    .article-card .article-meta{
      margin-left:22px;
      margin-right:22px;
    }
    .article-hero{ height:240px; }
    .share-row .btn{ width:100%; justify-content:center; }
    .newsletter-box{ padding:52px 24px; }
    .featured-body{ padding:30px 26px; }
    .bird.b4, .bird.b5, .puffy.p4, .firefly.f6, .firefly.f7{ display:none; }
    .moon{ width:64px; height:64px; right:6%; }
    .to-top{ bottom:20px; right:20px; }
    .toast-stack{ top:auto; bottom:20px; right:14px; left:14px; align-items:flex-end; }
    .toast{ max-width:100%; }
    .footer-bottom{ justify-content:center; text-align:center; }
    .footer-scene{ height:190px; }
    .hill-back svg{ height:150px; }
    .hill-mid svg{ height:115px; }
    .hill-front svg{ height:88px; }
    .figure{ width:56px; bottom:44px; left:8%; }
    .ftree.t1{ width:46px; bottom:38px; right:9%; }
    .ftree.t2, .grass.g2{ display:none; }
    .grass.g1{ bottom:34px; }
    .grass.g3{ bottom:36px; }
  }
  
  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; }
    .word-rotate span:first-child{ opacity:1; transform:none; }
    .bird, .puffy, .firefly{ display:none; }
    .toast-timer{ display:none; }
  }