:root{
      --bg:#f9fafb;
      --section:#0f172a;
      --primary:#22c55e;
      --text:#0284c7;
      --white:#ffffff;
      --soft:#e0f2fe;
      --muted:#64748b;
      --card:#ffffff;
      --border:rgba(2,132,199,.12);
      --shadow:0 20px 60px rgba(2,132,199,.10);
      --radius:28px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Inter',sans-serif;
      background:
        radial-gradient(circle at top left, rgba(34,197,94,.12), transparent 30%),
        radial-gradient(circle at top right, rgba(2,132,199,.10), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
      color:var(--text);
      overflow-x:hidden;
    }

    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .fade-up{
      animation:fadeUp .9s ease both;
    }
    @keyframes fadeUp{
      from{opacity:0;transform:translateY(24px)}
      to{opacity:1;transform:translateY(0)}
    }

    .navbar{
      padding:1rem 0;
      background:rgba(249,250,251,.82);
      backdrop-filter:blur(14px);
    }

    .brand-badge{
      width:44px;
      height:44px;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(2,132,199,.78));
      box-shadow:var(--shadow);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:800;
    }

    .navbar .nav-link{
      color:var(--text);
      font-weight:600;
      margin-left:.5rem;
      margin-right:.5rem;
    }

    .navbar-toggler{
      border:none;
      background:#fff;
      border-radius:999px;
      padding:.65rem .85rem;
      box-shadow:var(--shadow);
    }

    .gradient-text{
      background:linear-gradient(90deg, var(--primary), var(--text));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .pill-btn{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.9rem 1.4rem;
      border-radius:999px;
      font-weight:700;
      transition:.3s ease;
      border:1px solid transparent;
    }

    .pill-btn-primary{
      background:linear-gradient(90deg, var(--primary), #4ade80);
      color:#fff;
      box-shadow:0 14px 30px rgba(34,197,94,.25);
    }

    .pill-btn-primary:hover{
      transform:translateY(-2px);
      color:#fff;
    }

    .pill-btn-outline{
      background:#fff;
      color:var(--text);
      border-color:rgba(2,132,199,.18);
      box-shadow:var(--shadow);
    }

    .pill-btn-outline:hover{
      transform:translateY(-2px);
      color:var(--text);
    }

    .hero-wrap{
      padding:2rem 0 5rem;
    }

    .hero-shell{
      position:relative;
      border-radius:36px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(224,242,254,.85)),
        linear-gradient(90deg, rgba(34,197,94,.08), rgba(2,132,199,.08));
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.8);
    }

    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 15% 20%, rgba(34,197,94,.16), transparent 22%),
        radial-gradient(circle at 85% 30%, rgba(2,132,199,.12), transparent 24%);
      pointer-events:none;
    }

    .carousel-item{
      min-height:620px;
    }

    .hero-left{
      padding:4rem 3rem 4rem 3.2rem;
      position:relative;
      z-index:2;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.55rem .9rem;
      border-radius:999px;
      background:rgba(255,255,255,.8);
      color:var(--text);
      font-weight:700;
      font-size:.92rem;
      box-shadow:var(--shadow);
    }

    .hero-title{
      font-size:clamp(2.4rem,5vw,4.9rem);
      line-height:1.02;
      font-weight:800;
      margin:1.3rem 0 1rem;
      letter-spacing:-.04em;
    }

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

    .hero-metrics{
      margin-top:2rem;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:1rem;
      max-width:660px;
    }

    .metric-card{
      background:rgba(255,255,255,.88);
      border-radius:22px;
      padding:1.2rem;
      box-shadow:var(--shadow);
      border:1px solid var(--border);
    }

    .metric-card strong{
      display:block;
      font-size:1.45rem;
      color:var(--text);
    }

    .metric-card span{
      color:var(--muted);
      font-size:.95rem;
    }

    .hero-right{
      position:relative;
      padding:2rem 2rem 2rem 0;
      z-index:2;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .floating-board{
      width:min(100%, 470px);
      background:#fff;
      border-radius:30px;
      box-shadow:var(--shadow);
      overflow:hidden;
      transform:rotate(-3deg);
      border:1px solid rgba(2,132,199,.12);
    }

    .floating-board img{
      width:100%;
      height:520px;
      object-fit:cover;
    }

    .board-caption{
      padding:1.2rem 1.3rem 1.4rem;
      color:var(--muted);
      font-size:.98rem;
    }

    .section-space{
      padding:5.5rem 0;
    }

    .section-title{
      font-size:clamp(2rem,4vw,3.3rem);
      font-weight:800;
      line-height:1.1;
      margin-bottom:1rem;
    }

    .section-subtitle{
      color:var(--muted);
      font-size:1.04rem;
      max-width:760px;
      line-height:1.8;
    }

    .feature-panel{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,249,255,.96));
      border-radius:32px;
      padding:1.2rem;
      box-shadow:var(--shadow);
      border:1px solid var(--border);
      height:100%;
    }

    .feature-card{
      background:#fff;
      border-radius:26px;
      padding:1.7rem;
      height:100%;
      border:1px solid rgba(2,132,199,.10);
      transition:.3s ease;
    }

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

    .feature-icon{
      width:58px;
      height:58px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(2,132,199,.12));
      color:var(--primary);
      margin-bottom:1rem;
    }

    .feature-card h3{
      font-size:1.2rem;
      font-weight:800;
      margin-bottom:.7rem;
    }

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

    .soft-section{
      background:
        linear-gradient(140deg, rgba(255,255,255,.95), rgba(224,242,254,.72)),
        var(--section);
      border-radius:40px;
      padding:4rem 1.2rem;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.7);
    }

    .post-carousel-wrap{
      margin-top:2.5rem;
      position:relative;
    }

    .post-card{
      background:#fff;
      border-radius:28px;
      overflow:hidden;
      border:1px solid rgba(2,132,199,.10);
      box-shadow:var(--shadow);
      height:100%;
    }

    .post-card img{
      width:100%;
      height:240px;
      object-fit:cover;
    }

    .post-body{
      padding:1.5rem;
    }

    .post-tag{
      display:inline-block;
      padding:.4rem .8rem;
      border-radius:999px;
      background:rgba(34,197,94,.12);
      color:var(--primary);
      font-weight:700;
      font-size:.8rem;
      margin-bottom:.85rem;
    }

    .post-card h4{
      font-size:1.22rem;
      font-weight:800;
      line-height:1.35;
      margin-bottom:.8rem;
    }

    .post-card p{
      color:var(--muted);
      line-height:1.75;
      margin-bottom:1.2rem;
    }

    .read-link{
      font-weight:800;
      color:var(--text);
    }

    .carousel-control-prev,
    .carousel-control-next{
      width:52px;
      height:52px;
      top:-5.5rem;
      background:#fff;
      border-radius:50%;
      opacity:1;
      box-shadow:var(--shadow);
      border:1px solid rgba(2,132,199,.12);
    }

    .carousel-control-prev{left:auto;right:4.2rem}
    .carousel-control-next{right:0}
    .carousel-control-prev-icon,
    .carousel-control-next-icon{
      filter:invert(42%) sepia(91%) saturate(1088%) hue-rotate(175deg) brightness(94%) contrast(101%);
      width:1.1rem;
      height:1.1rem;
    }

    .highlight-strip{
      margin-top:2.3rem;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1.2rem;
    }

    .mini-panel,
    .quote-panel{
      background:#fff;
      border-radius:26px;
      padding:1.5rem;
      box-shadow:var(--shadow);
      border:1px solid rgba(2,132,199,.10);
      height:100%;
    }

    .mini-panel h5,
    .quote-panel h5{
      font-weight:800;
      margin-bottom:.8rem;
    }

    .mini-panel p,
    .quote-panel p{
      color:var(--muted);
      margin:0;
      line-height:1.8;
    }

    footer{
      padding:2.4rem 0 3rem;
    }

    .footer-box{
      background:rgba(255,255,255,.85);
      border-radius:28px;
      border:1px solid rgba(2,132,199,.10);
      box-shadow:var(--shadow);
      padding:1.4rem 1.6rem;
    }

    .footer-link{
      color:var(--text);
      font-weight:600;
      margin-left:1rem;
    }

    @media (max-width: 1199px){
      .hero-right{padding:0 2rem 2rem}
      .carousel-item{min-height:auto}
      .floating-board img{height:430px}
    }

    @media (max-width: 991px){
      .hero-left{padding:3rem 2rem 2rem}
      .hero-metrics{grid-template-columns:1fr}
      .highlight-strip{grid-template-columns:1fr}
      .carousel-control-prev,
      .carousel-control-next{
        top:auto;
        bottom:-4.6rem;
      }
      .carousel-control-prev{right:4.4rem}
      .post-carousel-wrap{padding-bottom:4.5rem}
    }

    @media (max-width: 767px){
      .hero-shell{border-radius:28px}
      .hero-left{padding:2.2rem 1.3rem 1.5rem}
      .hero-right{padding:0 1rem 1.4rem}
      .floating-board{transform:none}
      .floating-board img{height:320px}
      .section-space{padding:4rem 0}
      .soft-section{border-radius:28px;padding:2.4rem .8rem}
      .feature-panel{padding:.8rem}
      .post-card img{height:220px}
      .footer-box{
        text-align:center;
      }
      .footer-link{
        margin:0 .5rem;
        display:inline-block;
        margin-top:.7rem;
      }
    }