:root{
      --bg:#ffffff;
      --section:#f9fafb;
      --primary:#3b82f6;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --shadow1: 10px 10px 22px rgba(17,24,39,0.08);
      --shadow2: -10px -10px 22px rgba(255,255,255,0.95);
      --inset: inset 6px 6px 12px rgba(17,24,39,0.06), inset -6px -6px 12px rgba(255,255,255,0.95);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
    }

    body{
      background:
        radial-gradient(rgba(17,24,39,0.02) 0.7px, transparent 0.7px),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,251,0.95)),
        var(--bg);
      background-size: 12px 12px, auto, auto;
      color: var(--text);
      font-family: 'Inter', sans-serif;
      line-height: 1.7;
    }

    h1,h2,h3,h4,h5{
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .site-wrap{
      overflow-x: hidden;
    }

    .soft{
      background: var(--section);
      box-shadow: var(--shadow1), var(--shadow2);
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,0.7);
    }

    .soft-sm{
      background: var(--section);
      box-shadow: 8px 8px 18px rgba(17,24,39,0.07), -8px -8px 18px rgba(255,255,255,0.95);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,0.75);
    }

    .soft-inset{
      background: var(--section);
      box-shadow: var(--inset);
      border-radius: var(--radius-lg);
    }

    .navbar-wrap{
      margin-top: 24px;
      padding: 14px 18px;
    }

    .brand-mark{
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: linear-gradient(145deg, #eaf2ff, #ffffff);
      box-shadow: var(--shadow1), var(--shadow2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 1.4rem;
      font-weight: 700;
    }

    .navbar-brand{
      color: var(--text);
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
    }

    .nav-link{
      color: var(--text);
      font-weight: 500;
    }

    .navbar-toggler{
      border: none;
      padding: 10px 12px;
      border-radius: 16px;
      background: var(--section);
      box-shadow: var(--shadow1), var(--shadow2);
    }

    .hero{
      padding: 42px;
      background:
        linear-gradient(135deg, rgba(59,130,246,0.16), rgba(255,255,255,0.92) 42%, rgba(249,250,251,0.96) 100%);
      position: relative;
      min-height: 640px;
    }

    .hero h1{
      font-size: clamp(3rem, 5vw, 5.2rem);
      line-height: 0.95;
      margin-bottom: 22px;
    }

    .hero-lead{
      font-size: 1.08rem;
      color: var(--muted);
      max-width: 620px;
    }

    .hero-badges{
      gap: 14px;
    }

    .pill{
      padding: 10px 16px;
      border-radius: 999px;
      background: var(--section);
      box-shadow: var(--shadow1), var(--shadow2);
      color: var(--text);
      font-size: 0.95rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
    }

    .btn-outline-primary{
      color: var(--primary);
      border-color: var(--primary);
      border-width: 2px;
      border-radius: 999px;
      padding: 12px 24px;
      font-weight: 600;
      background: transparent;
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus{
      color: var(--primary);
      background: rgba(59,130,246,0.04);
      border-color: var(--primary);
      box-shadow: none;
    }

    .hero-aside{
      height: 100%;
      padding: 22px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .floating-card{
      padding: 22px;
    }

    .floating-card img{
      width: 100%;
      height: 210px;
      object-fit: cover;
      border-radius: 22px;
      box-shadow: var(--shadow1), var(--shadow2);
    }

    .stats-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .stat-box{
      padding: 20px;
      min-height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .stat-box strong{
      font-size: 2rem;
      font-family: 'Cormorant Garamond', serif;
      color: var(--primary);
      line-height: 1;
    }

    .section-pad{
      padding: 72px 0;
    }

    .section-shell{
      padding: 34px;
    }

    .section-title{
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      line-height: 1;
      margin-bottom: 12px;
    }

    .section-subtitle{
      color: var(--muted);
      max-width: 760px;
    }

    .feature-card{
      padding: 28px;
      height: 100%;
      position: relative;
    }

    .feature-icon{
      width: 62px;
      height: 62px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #eef5ff, #ffffff);
      box-shadow: var(--shadow1), var(--shadow2);
      color: var(--primary);
      font-size: 1.35rem;
      margin-bottom: 18px;
    }

    .content-zone{
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
      gap: 28px;
      align-items: start;
    }

    .carousel-shell{
      padding: 24px;
    }

    .carousel-item{
      padding: 10px 0 30px;
    }

    .post-card{
      overflow: hidden;
      border-radius: var(--radius-xl);
      background: var(--section);
      box-shadow: var(--shadow1), var(--shadow2);
      padding: 18px;
      height: 100%;
    }

    .post-image{
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 24px;
      margin-bottom: 18px;
      box-shadow: 8px 8px 18px rgba(17,24,39,0.08), -8px -8px 18px rgba(255,255,255,0.95);
    }

    .post-tag{
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      color: var(--primary);
      background: rgba(59,130,246,0.08);
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .post-title{
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 12px;
    }

    .post-excerpt{
      color: var(--muted);
      margin-bottom: 18px;
    }

    .sidebar-box{
      padding: 24px;
      margin-bottom: 24px;
    }

    .sidebar-title{
      font-size: 1.9rem;
      margin-bottom: 16px;
    }

    .topic-list a{
      text-decoration: none;
      color: var(--text);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 18px;
      margin-bottom: 12px;
      background: var(--section);
      box-shadow: 6px 6px 14px rgba(17,24,39,0.06), -6px -6px 14px rgba(255,255,255,0.95);
    }

    .topic-list span{
      color: var(--muted);
      font-size: 0.92rem;
    }

    .mini-post{
      display: flex;
      gap: 14px;
      align-items: center;
      text-decoration: none;
      color: var(--text);
      padding: 12px;
      border-radius: 18px;
      background: var(--section);
      box-shadow: 6px 6px 14px rgba(17,24,39,0.06), -6px -6px 14px rgba(255,255,255,0.95);
      margin-bottom: 14px;
    }

    .mini-post img{
      width: 84px;
      height: 84px;
      object-fit: cover;
      border-radius: 18px;
      flex-shrink: 0;
    }

    .mini-post strong{
      display: block;
      font-size: 1rem;
      line-height: 1.3;
      font-weight: 600;
    }

    .mini-post small{
      color: var(--muted);
      display: block;
      margin-top: 4px;
    }

    .carousel-control-prev,
    .carousel-control-next{
      width: 52px;
      height: 52px;
      top: auto;
      bottom: 8px;
      opacity: 1;
      background: var(--section);
      box-shadow: var(--shadow1), var(--shadow2);
      border-radius: 50%;
    }

    .carousel-control-prev{
      left: auto;
      right: 72px;
    }

    .carousel-control-next{
      right: 8px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon{
      filter: invert(40%) sepia(92%) saturate(1827%) hue-rotate(203deg) brightness(100%) contrast(93%);
      width: 1.2rem;
      height: 1.2rem;
    }

    .footer-minimal{
      padding: 26px 34px;
      margin-bottom: 32px;
    }

    .footer-link{
      color: var(--muted);
      text-decoration: none;
      margin-left: 18px;
    }

    .text-muted-custom{
      color: var(--muted);
    }

    @media (max-width: 1199.98px){
      .content-zone{
        grid-template-columns: 1fr;
      }
      .hero{
        min-height: auto;
      }
    }

    @media (max-width: 991.98px){
      .hero{
        padding: 28px;
      }
      .section-shell{
        padding: 24px;
      }
      .post-image{
        height: 240px;
      }
    }

    @media (max-width: 767.98px){
      .navbar-brand{
        font-size: 1.7rem;
      }
      .hero h1{
        line-height: 1;
      }
      .stats-grid{
        grid-template-columns: 1fr;
      }
      .footer-minimal{
        text-align: center;
      }
      .footer-link{
        margin: 0 10px;
      }
    }