:root{
      --bg:#f9fafb;
      --section:#e5e7eb;
      --primary:#10b981;
      --text:#111827;
      --white:#ffffff;
      --muted:#6b7280;
      --border:rgba(17,24,39,.14);
      --shadow:0 18px 40px rgba(17,24,39,.08);
      --radius:22px;
      --radius-sm:16px;
    }
    html{
      scroll-behavior:smooth;
      background:var(--bg);
    }
    body{
      font-family:'Outfit',sans-serif;
      background-color:var(--bg);
      color:var(--text);
      background-image:
        radial-gradient(rgba(17,24,39,.03) 0.7px, transparent 0.7px),
        radial-gradient(rgba(17,24,39,.02) 0.7px, transparent 0.7px);
      background-position: 0 0, 12px 12px;
      background-size: 24px 24px;
    }
    .navbar{
      background:rgba(249,250,251,.88);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(17,24,39,.08);
    }
    .navbar-menu{
      justify-content:center;
    }
    .navbar-start,.navbar-end{
      flex-grow:0;
      flex-shrink:1;
    }
    .navbar-item,.navbar-link{
      color:var(--text);
      font-weight:600;
      position:relative;
    }
    .navbar-item:hover,.navbar-link:hover{
      background:transparent !important;
      color:var(--primary) !important;
    }
    .navbar-item::after{
      content:"";
      position:absolute;
      left:1rem;
      right:1rem;
      bottom:.65rem;
      height:2px;
      background:var(--primary);
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .25s ease;
    }
    .navbar-item:hover::after{
      transform:scaleX(1);
    }
    .brand-badge{
      border:1.5px solid var(--primary);
      color:var(--primary);
      padding:.5rem .9rem;
      border-radius:999px;
      font-weight:800;
      letter-spacing:.05em;
      text-transform:uppercase;
      font-size:.78rem;
      background:rgba(16,185,129,.05);
    }
    .section-block{
      background:var(--section);
      border-radius:32px;
      padding:2rem;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
    }
    .hero-shell{
      padding-top:2.5rem;
      padding-bottom:1.5rem;
    }
    .hero-grid{
      display:flex;
      gap:1.5rem;
      align-items:stretch;
      flex-wrap:wrap;
    }
    .hero-main{
      flex:1 1 62%;
      background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
      border-radius:34px;
      padding:2.4rem;
      border:1px solid rgba(17,24,39,.08);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero-main::before{
      content:"";
      position:absolute;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(16,185,129,.18), rgba(16,185,129,0));
      right:-40px;
      top:-40px;
    }
    .hero-side{
      flex:1 1 33%;
      display:flex;
      flex-direction:column;
      gap:1rem;
    }
    .mini-panel{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(17,24,39,.08);
      border-radius:26px;
      padding:1.35rem;
      box-shadow:var(--shadow);
      height:100%;
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .mini-panel:hover,
    .post-card:hover,
    .feature-card:hover,
    .sidebar-card:hover,
    .hero-media:hover{
      transform:translateY(-6px);
      box-shadow:0 22px 42px rgba(17,24,39,.12);
    }
    .eyebrow{
      color:var(--primary);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.09em;
      font-size:.78rem;
      margin-bottom:1rem;
      display:inline-block;
    }
    .outlined-title{
      color:transparent;
      -webkit-text-stroke:1.4px var(--text);
      text-stroke:1.4px var(--text);
      line-height:.95;
      letter-spacing:-.03em;
    }
    .hero-title{
      font-size:clamp(2.7rem, 7vw, 5.7rem);
      margin-bottom:1rem;
      max-width:11ch;
    }
    .hero-subtitle{
      color:var(--muted);
      font-size:1.08rem;
      max-width:50ch;
      margin-bottom:1.5rem;
    }
    .ghost-btn{
      background:transparent;
      border:1.5px solid var(--primary);
      color:var(--primary);
      border-radius:999px;
      padding:.9rem 1.3rem;
      font-weight:700;
      transition:all .25s ease;
    }
    .ghost-btn:hover{
      background:var(--primary);
      color:#fff;
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.5rem;
    }
    .hero-points span{
      background:rgba(16,185,129,.08);
      color:var(--text);
      border:1px solid rgba(16,185,129,.18);
      border-radius:999px;
      padding:.55rem .9rem;
      font-size:.92rem;
      font-weight:600;
    }
    .hero-media{
      margin-top:1.8rem;
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .hero-media img,
    .post-card img,
    .feature-card img{
      width:100%;
      display:block;
      object-fit:cover;
      box-shadow:var(--shadow);
    }
    .hero-media img{
      height:320px;
    }
    .feature-row{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
    }
    .feature-card{
      flex:1 1 220px;
      background:rgba(255,255,255,.82);
      border-radius:24px;
      padding:1.2rem;
      border:1px solid rgba(17,24,39,.08);
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease;
      min-height:100%;
    }
    .feature-icon{
      width:48px;
      height:48px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(16,185,129,.12);
      color:var(--primary);
      font-weight:800;
      font-size:1.15rem;
      margin-bottom:1rem;
    }
    .section-heading{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
      margin-bottom:1.5rem;
      flex-wrap:wrap;
    }
    .section-heading .title{
      margin:0;
      font-size:clamp(2rem,4vw,3.2rem);
    }
    .section-heading p{
      color:var(--muted);
      max-width:42ch;
      margin:0;
    }
    .content-wrap{
      display:flex;
      gap:1.5rem;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .main-column{
      flex:1 1 68%;
      min-width:0;
    }
    .sidebar{
      flex:1 1 28%;
      min-width:280px;
      position:sticky;
      top:90px;
    }
    .masonry{
      column-count:2;
      column-gap:1.25rem;
    }
    .post-card{
      break-inside:avoid;
      display:inline-block;
      width:100%;
      margin:0 0 1.25rem;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(17,24,39,.08);
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .post-card img{
      height:220px;
    }
    .post-card .card-body{
      padding:1.2rem;
    }
    .post-card .post-tag{
      display:inline-block;
      color:var(--primary);
      font-weight:800;
      font-size:.77rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:.7rem;
    }
    .post-card h3{
      font-size:1.35rem;
      line-height:1.15;
      margin-bottom:.75rem;
      color:var(--text);
    }
    .post-card p{
      color:var(--muted);
      margin-bottom:1rem;
    }
    .read-more{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      color:var(--primary);
      font-weight:700;
    }
    .sidebar-card{
      background:rgba(255,255,255,.84);
      border:1px solid rgba(17,24,39,.08);
      border-radius:24px;
      padding:1.35rem;
      box-shadow:var(--shadow);
      margin-bottom:1rem;
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .sidebar-title{
      font-size:1.25rem;
      margin-bottom:1rem;
      color:var(--text);
    }
    .topic-list a,
    .simple-links a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:.8rem 0;
      color:var(--text);
      border-bottom:1px solid rgba(17,24,39,.08);
      font-weight:600;
      transition:color .25s ease, transform .25s ease;
    }
    .topic-list a:last-child,
    .simple-links a:last-child{
      border-bottom:none;
    }
    .topic-list a:hover,
    .simple-links a:hover{
      color:var(--primary);
      transform:translateX(4px);
    }
    .stat-grid{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
    }
    .stat-box{
      flex:1 1 110px;
      background:rgba(16,185,129,.08);
      border:1px solid rgba(16,185,129,.16);
      border-radius:18px;
      padding:1rem;
    }
    .stat-box strong{
      display:block;
      font-size:1.5rem;
      color:var(--text);
    }
    .stat-box span{
      color:var(--muted);
      font-size:.92rem;
    }
    .footer{
      padding:2rem 1.5rem 3rem;
      background:transparent;
    }
    .footer-box{
      background:var(--section);
      border-radius:26px;
      padding:1.5rem;
      border:1px solid rgba(255,255,255,.4);
    }
    .footer a{
      color:var(--text);
      font-weight:600;
      margin:0 .75rem;
    }
    .footer a:hover{
      color:var(--primary);
    }
    @media screen and (max-width: 1023px){
      .navbar-menu{
        justify-content:flex-start;
      }
      .sidebar{
        position:static;
      }
    }
    @media screen and (max-width: 868px){
      .masonry{
        column-count:1;
      }
      .hero-main,.hero-side,.main-column,.sidebar{
        flex:1 1 100%;
      }
    }
    @media screen and (max-width: 768px){
      .hero-main{
        padding:1.5rem;
      }
      .section-block{
        padding:1.25rem;
        border-radius:24px;
      }
      .hero-media img{
        height:240px;
      }
      .post-card img{
        height:200px;
      }
    }