:root{
      --bg:#f9fafb;
      --section:#e5e7eb;
      --primary:#2563eb;
      --text:#111827;
      --white:#ffffff;
      --soft:#eef2ff;
    }
    *{
      box-sizing:border-box;
    }
    body{
      margin:0;
      font-family: Georgia, "Times New Roman", serif;
      background: var(--bg);
      color: var(--text);
      line-height:1.7;
    }
    a{
      text-decoration:none;
      color:inherit;
    }
    .navbar{
      background: rgba(249,250,251,0.92);
      backdrop-filter: blur(10px);
      padding: 1rem 0;
    }
    .navbar-brand{
      font-weight: 700;
      font-size: 1.35rem;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .nav-link{
      color: var(--text);
      font-size: 1rem;
      padding: .75rem 1rem !important;
    }
    .nav-link:hover{
      color: var(--primary);
    }
    .navbar-toggler{
      border: 1px solid var(--primary);
      border-radius: 999px;
      padding: .5rem .8rem;
    }
    .navbar-toggler:focus{
      box-shadow: none;
    }
    .hero{
      padding: 5rem 0 4rem;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top left, rgba(37,99,235,0.18), transparent 35%),
        radial-gradient(circle at bottom right, rgba(37,99,235,0.12), transparent 38%),
        linear-gradient(135deg, #f9fafb 0%, #eef2ff 45%, #f9fafb 100%);
    }
    .fade-in{
      animation: fadeInUp .9s ease both;
    }
    .fade-in-delay{
      animation: fadeInUp 1.15s ease both;
    }
    .fade-in-delay-2{
      animation: fadeInUp 1.35s ease both;
    }
    @keyframes fadeInUp{
      from{
        opacity:0;
        transform: translateY(24px);
      }
      to{
        opacity:1;
        transform: translateY(0);
      }
    }
    .hero-wrap{
      display:flex;
      flex-wrap:wrap;
      align-items:stretch;
      gap: 2rem;
    }
    .hero-main{
      flex: 1 1 58%;
      padding: 2rem 1rem 2rem 0;
    }
    .eyebrow{
      display:inline-block;
      color: var(--primary);
      border:1px solid var(--primary);
      border-radius:999px;
      padding: .35rem .9rem;
      font-size:.9rem;
      margin-bottom: 1.25rem;
      background: rgba(255,255,255,.65);
    }
    .hero h1{
      font-size: clamp(2.8rem, 6vw, 5rem);
      line-height: 1.02;
      font-weight: 700;
      letter-spacing: -0.04em;
      margin-bottom: 1.25rem;
    }
    .hero-lead{
      font-size: 1.15rem;
      max-width: 760px;
      margin-bottom: 2rem;
      color: #1f2937;
    }
    .btn-outline-primary-custom{
      border: 2px solid var(--primary);
      color: var(--primary);
      background: transparent;
      padding: .9rem 1.4rem;
      border-radius: 999px;
      font-weight: 600;
      transition: all .25s ease;
      display:inline-block;
    }
    .btn-outline-primary-custom:hover{
      background: var(--primary);
      color: #fff;
    }
    .hero-aside{
      flex: 1 1 34%;
      display:flex;
      align-items:flex-end;
    }
    .hero-card{
      width:100%;
      background: rgba(255,255,255,0.88);
      border:1px solid rgba(37,99,235,.14);
      border-radius: 2rem;
      padding: 2rem;
      box-shadow: 0 18px 50px rgba(17,24,39,.06);
    }
    .hero-card h2{
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .hero-metric{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding: .95rem 0;
      border-bottom: 1px solid rgba(17,24,39,.08);
    }
    .hero-metric:last-child{
      border-bottom:0;
      padding-bottom:0;
    }
    .metric-label{
      font-size:.98rem;
    }
    .metric-value{
      color: var(--primary);
      font-weight:700;
      font-size:1.05rem;
    }
    .section-block{
      padding: 2.5rem;
      background: var(--section);
      border-radius: 2rem;
      margin-bottom: 2rem;
    }
    .section-title{
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight:700;
      letter-spacing:-0.03em;
      margin-bottom: 1rem;
    }
    .section-subtitle{
      max-width: 760px;
      margin-bottom: 0;
      color:#1f2937;
    }
    .feature-shell{
      padding: 5rem 0 2rem;
    }
    .feature-stack{
      display:flex;
      flex-wrap:wrap;
      gap:1.5rem;
    }
    .feature-card{
      flex: 1 1 280px;
      background: var(--white);
      border-radius: 1.75rem;
      padding: 2rem;
      min-height: 100%;
      border:1px solid rgba(37,99,235,.1);
      transition: transform .25s ease, box-shadow .25s ease;
      box-shadow: 0 10px 30px rgba(17,24,39,.04);
    }
    .feature-card:hover{
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(17,24,39,.08);
    }
    .feature-number{
      width: 3rem;
      height: 3rem;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      border:2px solid var(--primary);
      color: var(--primary);
      font-weight:700;
      margin-bottom: 1.25rem;
      background: linear-gradient(135deg, #ffffff, #eef2ff);
    }
    .feature-card h3{
      font-size:1.3rem;
      font-weight:700;
      margin-bottom:.8rem;
    }
    .content-shell{
      padding: 2rem 0 5rem;
    }
    .editorial-band{
      display:flex;
      flex-wrap:wrap;
      gap:1.5rem;
      margin-bottom: 2rem;
    }
    .editorial-note{
      flex: 1 1 320px;
      background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(238,242,255,.95));
      border-radius: 1.75rem;
      padding: 2rem;
      border: 1px solid rgba(37,99,235,.12);
    }
    .editorial-note h3{
      font-size:1.5rem;
      font-weight:700;
      margin-bottom:1rem;
    }
    .editorial-highlight{
      flex: 1 1 520px;
      background: var(--white);
      border-radius: 1.75rem;
      padding: 2rem;
      border: 1px solid rgba(37,99,235,.12);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .editorial-highlight p{
      margin-bottom:0;
      font-size:1.06rem;
    }
    .posts-grid{
      display:flex;
      flex-wrap:wrap;
      gap:1.5rem;
    }
    .post-card{
      flex: 1 1 calc(50% - .75rem);
      display:flex;
      flex-direction:column;
      background: var(--white);
      border-radius: 1.75rem;
      overflow:hidden;
      border:1px solid rgba(37,99,235,.1);
      box-shadow: 0 12px 34px rgba(17,24,39,.05);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .post-card.large{
      flex: 1 1 100%;
      flex-direction:row;
    }
    .post-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 44px rgba(17,24,39,.08);
    }
    .post-image{
      width:100%;
      height:240px;
      object-fit:cover;
      display:block;
    }
    .post-card.large .post-image-wrap{
      flex: 1 1 46%;
    }
    .post-card.large .post-body{
      flex: 1 1 54%;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .post-body{
      padding: 1.75rem;
    }
    .post-kicker{
      color: var(--primary);
      font-size:.9rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:.75rem;
      font-weight:700;
    }
    .post-title{
      font-size:1.55rem;
      font-weight:700;
      line-height:1.2;
      margin-bottom:.9rem;
    }
    .post-card:not(.large) .post-title{
      font-size:1.35rem;
    }
    .post-excerpt{
      color:#1f2937;
      margin-bottom:1.25rem;
    }
    .read-link{
      color: var(--primary);
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
    }
    .read-link:hover{
      opacity:.85;
    }
    footer{
      background: linear-gradient(180deg, #eef2ff 0%, #f9fafb 100%);
      padding: 4rem 0 2rem;
      border-top: 1px solid rgba(37,99,235,.1);
    }
    .footer-brand{
      font-size:1.4rem;
      font-weight:700;
      margin-bottom:1rem;
    }
    .footer-title{
      font-size:1rem;
      font-weight:700;
      margin-bottom:1rem;
      color: var(--primary);
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .footer-link{
      display:block;
      margin-bottom:.7rem;
      color:#1f2937;
    }
    .footer-link:hover{
      color: var(--primary);
    }
    .footer-copy{
      margin-top: 2.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(17,24,39,.08);
      font-size:.95rem;
      color:#374151;
    }
    @media (max-width: 991.98px){
      .hero{
        padding-top: 4rem;
      }
      .hero-main{
        padding-right:0;
      }
      .post-card.large{
        flex-direction:column;
      }
    }
    @media (max-width: 767.98px){
      .section-block{
        padding: 1.6rem;
      }
      .hero-card{
        padding:1.5rem;
      }
      .post-card{
        flex:1 1 100%;
      }
      .post-image{
        height:220px;
      }
      .hero h1{
        font-size: clamp(2.4rem, 10vw, 3.5rem);
      }
    }