:root{
      --bg:#ffffff;
      --section:#f9fafb;
      --primary:#22c55e;
      --text:#0f172a;
      --muted:#475569;
      --border:#e5e7eb;
      --primary-soft:#dcfce7;
      --shadow:0 14px 40px rgba(15,23,42,0.08);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:16px;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:'Inter',sans-serif;
      background:var(--bg);
      color:var(--text);
    }

    .page-shell{
      position:relative;
      overflow:hidden;
    }

    .blur-orb{
      position:absolute;
      border-radius:999px;
      filter:blur(70px);
      opacity:.45;
      z-index:0;
      pointer-events:none;
    }

    .orb-a{
      width:280px;
      height:280px;
      background:#bbf7d0;
      top:20px;
      left:-70px;
    }

    .orb-b{
      width:340px;
      height:340px;
      background:#dcfce7;
      top:240px;
      right:-100px;
    }

    .orb-c{
      width:240px;
      height:240px;
      background:#f0fdf4;
      bottom:140px;
      left:10%;
    }

    .site-header,
    .hero-section,
    .features-section,
    .content-section,
    .site-footer{
      position:relative;
      z-index:1;
    }

    .site-header{
      padding:1.25rem 1rem 0;
    }

    .nav-wrap{
      max-width:1200px;
      margin:0 auto;
      background:rgba(249,250,251,0.86);
      backdrop-filter:blur(14px);
      border:1px solid rgba(229,231,235,0.9);
      box-shadow:var(--shadow);
      border-radius:999px;
      padding:.8rem 1.25rem;
    }

    .brand-mark{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),#86efac);
      color:#ffffff;
      font-weight:800;
      box-shadow:0 8px 24px rgba(34,197,94,0.25);
    }

    .brand-name{
      font-weight:800;
      color:var(--text);
      letter-spacing:-0.02em;
      font-size:1.05rem;
    }

    .navbar{
      background:transparent;
      min-height:auto;
    }

    .navbar-menu{
      box-shadow:none;
    }

    .navbar-center{
      flex:1;
      justify-content:center;
      display:flex;
    }

    .navbar-item{
      color:var(--text);
      font-weight:600;
      border-radius:999px;
      transition:all .25s ease;
    }

    .navbar-item:hover{
      background:var(--primary-soft);
      color:var(--text);
      transform:translateY(-1px);
    }

    .button.is-primary.custom-btn{
      background:var(--primary);
      color:#ffffff;
      border:none;
      border-radius:999px;
      font-weight:700;
      padding-left:1.25rem;
      padding-right:1.25rem;
      transition:all .25s ease;
      box-shadow:0 12px 24px rgba(34,197,94,0.22);
    }

    .button.is-primary.custom-btn:hover{
      background:#16a34a;
      transform:translateY(-2px);
      color:#ffffff;
    }

    .hero-section{
      padding:2rem 1rem 1.5rem;
    }

    .hero-panel{
      max-width:1200px;
      margin:0 auto;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 35%, transparent 60%),
        linear-gradient(135deg, #f0fdf4 0%, #dcfce7 48%, #f9fafb 100%);
      border:1px solid var(--border);
      border-radius:36px;
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .hero-grid{
      display:flex;
      flex-wrap:wrap;
      align-items:stretch;
    }

    .hero-copy{
      flex:1 1 58%;
      padding:4rem 3rem;
    }

    .hero-side{
      flex:1 1 42%;
      padding:2rem;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .85rem;
      background:rgba(255,255,255,0.8);
      border:1px solid rgba(229,231,235,0.9);
      border-radius:999px;
      font-size:.9rem;
      color:var(--muted);
      font-weight:600;
      margin-bottom:1.2rem;
    }

    .eyebrow .dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 6px rgba(34,197,94,0.12);
    }

    .hero-title{
      font-size:clamp(2.6rem, 5vw, 4.6rem);
      line-height:1.02;
      font-weight:800;
      letter-spacing:-0.04em;
      color:var(--text);
      margin-bottom:1.15rem;
      max-width:10ch;
    }

    .hero-subtitle{
      font-size:1.08rem;
      color:var(--muted);
      line-height:1.8;
      max-width:60ch;
      margin-bottom:1.8rem;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.9rem;
      margin-bottom:2rem;
    }

    .button.is-light.custom-secondary{
      background:#ffffff;
      color:var(--text);
      border:1px solid var(--border);
      border-radius:999px;
      font-weight:700;
      transition:all .25s ease;
    }

    .button.is-light.custom-secondary:hover{
      transform:translateY(-2px);
      background:var(--section);
      color:var(--text);
    }

    .hero-stats{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
    }

    .stat-card{
      background:rgba(255,255,255,0.82);
      border:1px solid rgba(229,231,235,0.95);
      border-radius:20px;
      padding:1rem 1.1rem;
      min-width:145px;
      backdrop-filter:blur(10px);
      transition:transform .25s ease, box-shadow .25s ease;
    }

    .stat-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }

    .stat-value{
      font-size:1.35rem;
      font-weight:800;
      color:var(--text);
    }

    .stat-label{
      font-size:.92rem;
      color:var(--muted);
      margin-top:.2rem;
    }

    .dashboard-card{
      width:100%;
      max-width:430px;
      background:rgba(255,255,255,0.88);
      backdrop-filter:blur(12px);
      border:1px solid rgba(229,231,235,0.95);
      border-radius:28px;
      padding:1.2rem;
      box-shadow:var(--shadow);
      transform:rotate(-2deg);
      transition:transform .25s ease;
    }

    .dashboard-card:hover{
      transform:rotate(0deg) translateY(-6px);
    }

    .dashboard-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:1rem;
    }

    .dashboard-pill{
      background:var(--primary-soft);
      color:#166534;
      padding:.45rem .8rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
    }

    .dashboard-balance{
      background:var(--section);
      border:1px solid var(--border);
      border-radius:22px;
      padding:1.2rem;
      margin-bottom:1rem;
    }

    .dashboard-balance small{
      color:var(--muted);
      display:block;
      margin-bottom:.35rem;
    }

    .dashboard-balance strong{
      font-size:2rem;
      color:var(--text);
      letter-spacing:-0.03em;
    }

    .bars{
      display:flex;
      gap:.8rem;
      align-items:flex-end;
      height:120px;
      margin-top:1rem;
    }

    .bar{
      flex:1;
      border-radius:16px 16px 10px 10px;
      background:linear-gradient(180deg, #86efac 0%, var(--primary) 100%);
      transition:transform .25s ease, opacity .25s ease;
      opacity:.9;
    }

    .bar:hover{
      transform:translateY(-4px);
      opacity:1;
    }

    .mini-grid{
      display:flex;
      gap:.8rem;
      margin-top:1rem;
    }

    .mini-card{
      flex:1;
      background:#ffffff;
      border:1px solid var(--border);
      border-radius:18px;
      padding:.9rem;
    }

    .mini-card span{
      display:block;
      color:var(--muted);
      font-size:.86rem;
      margin-bottom:.25rem;
    }

    .mini-card strong{
      color:var(--text);
      font-size:1rem;
    }

    .features-section,
    .content-section{
      padding:1.5rem 1rem 2rem;
    }

    .section-box{
      max-width:1200px;
      margin:0 auto;
      background:var(--section);
      border:1px solid var(--border);
      border-radius:32px;
      padding:2.25rem;
    }

    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
      margin-bottom:1.8rem;
      flex-wrap:wrap;
    }

    .section-kicker{
      color:var(--primary);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.78rem;
      margin-bottom:.5rem;
    }

    .section-title{
      font-size:clamp(1.8rem, 3vw, 3rem);
      line-height:1.1;
      font-weight:800;
      letter-spacing:-0.03em;
      color:var(--text);
    }

    .section-text{
      color:var(--muted);
      max-width:58ch;
      line-height:1.8;
    }

    .feature-weave{
      display:flex;
      flex-wrap:wrap;
      gap:1.15rem;
      align-items:stretch;
    }

    .feature-card{
      background:#ffffff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:1.35rem;
      box-shadow:0 10px 28px rgba(15,23,42,0.04);
      transition:transform .25s ease, box-shadow .25s ease;
    }

    .feature-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow);
    }

    .feature-card.primary-card{
      flex:2 1 340px;
      background:linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    }

    .feature-stack{
      flex:1 1 260px;
      display:flex;
      flex-direction:column;
      gap:1.15rem;
    }

    .feature-icon{
      width:52px;
      height:52px;
      border-radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--primary-soft);
      color:#166534;
      font-size:1.25rem;
      font-weight:800;
      margin-bottom:.9rem;
    }

    .feature-card h3{
      font-size:1.15rem;
      font-weight:800;
      margin-bottom:.55rem;
      color:var(--text);
    }

    .feature-card p{
      color:var(--muted);
      line-height:1.75;
    }

    .content-layout{
      display:flex;
      gap:1.5rem;
      align-items:flex-start;
    }

    .posts-area{
      flex:1 1 auto;
      min-width:0;
    }

    .sidebar-area{
      width:310px;
      flex:0 0 310px;
      position:sticky;
      top:1.2rem;
    }

    .masonry{
      column-count:2;
      column-gap:1.15rem;
    }

    .post-card{
      display:inline-block;
      width:100%;
      margin:0 0 1.15rem;
      background:#ffffff;
      border:1px solid var(--border);
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(15,23,42,0.04);
      transition:transform .25s ease, box-shadow .25s ease;
      break-inside:avoid;
    }

    .post-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow);
    }

    .post-image-wrap{
      padding:.8rem .8rem 0;
    }

    .post-image{
      width:100%;
      height:auto;
      display:block;
      border:1px solid var(--border);
      border-radius:18px;
      background:#ffffff;
    }

    .post-body{
      padding:1rem 1rem 1.2rem;
    }

    .post-tag{
      display:inline-flex;
      background:var(--primary-soft);
      color:#166534;
      font-size:.78rem;
      font-weight:800;
      border-radius:999px;
      padding:.42rem .72rem;
      margin-bottom:.8rem;
    }

    .post-title{
      font-size:1.2rem;
      line-height:1.35;
      font-weight:800;
      color:var(--text);
      margin-bottom:.75rem;
    }

    .post-excerpt{
      color:var(--muted);
      line-height:1.75;
      margin-bottom:1rem;
    }

    .post-link{
      color:var(--primary);
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      transition:gap .25s ease, color .25s ease;
    }

    .post-link:hover{
      color:#16a34a;
      gap:.7rem;
    }

    .sidebar-card{
      background:#ffffff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:1.2rem;
      margin-bottom:1rem;
      box-shadow:0 8px 24px rgba(15,23,42,0.04);
    }

    .sidebar-card h3{
      font-size:1.05rem;
      font-weight:800;
      color:var(--text);
      margin-bottom:.85rem;
    }

    .sidebar-card p,
    .sidebar-card li,
    .sidebar-card a{
      color:var(--muted);
      line-height:1.7;
    }

    .topic-list li{
      padding:.6rem 0;
      border-bottom:1px solid var(--border);
    }

    .topic-list li:last-child{
      border-bottom:none;
      padding-bottom:0;
    }

    .topic-list a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      transition:all .25s ease;
    }

    .topic-list a:hover{
      color:var(--primary);
      transform:translateX(4px);
    }

    .newsletter-box{
      background:linear-gradient(180deg,#ffffff 0%,#f0fdf4 100%);
    }

    .input.custom-input{
      border-radius:16px;
      border:1px solid var(--border);
      box-shadow:none;
      color:var(--text);
      background:#ffffff;
    }

    .input.custom-input:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 0.125em rgba(34,197,94,0.16);
    }

    .site-footer{
      padding:0 1rem 2rem;
    }

    .footer-box{
      max-width:1200px;
      margin:0 auto;
      background:var(--section);
      border:1px solid var(--border);
      border-radius:28px;
      padding:1.5rem 1.6rem;
    }

    .footer-content{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      flex-wrap:wrap;
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:.8rem;
    }

    .footer-text{
      color:var(--muted);
      font-size:.95rem;
    }

    .footer-links{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
    }

    .footer-links a{
      color:var(--text);
      font-weight:600;
      transition:color .25s ease;
    }

    .footer-links a:hover{
      color:var(--primary);
    }

    @media screen and (max-width: 1023px){
      .navbar-menu{
        background:transparent;
      }

      .navbar-center{
        display:block;
      }

      .hero-copy,
      .hero-side{
        flex:1 1 100%;
      }

      .content-layout{
        flex-direction:column;
      }

      .sidebar-area{
        width:100%;
        flex:1 1 auto;
        position:static;
      }
    }

    @media screen and (max-width: 768px){
      .hero-copy{
        padding:2.4rem 1.4rem 1.4rem;
      }

      .hero-side{
        padding:1rem 1.2rem 2rem;
      }

      .section-box{
        padding:1.4rem;
        border-radius:24px;
      }

      .masonry{
        column-count:1;
      }

      .hero-stats{
        flex-direction:column;
      }

      .dashboard-card{
        transform:none;
      }

      .nav-wrap{
        border-radius:26px;
      }
    }