:root{
      --bg:#f9fafb;
      --section:#e5e7eb;
      --primary:#2563eb;
      --text:#111827;
      --muted:#4b5563;
      --white:#ffffff;
      --border:rgba(17,24,39,.08);
      --shadow:0 14px 40px rgba(37,99,235,.08);
      --radius:1.25rem;
      --radius-sm:.4rem;
      --transition:all .35s ease;
    }
    html{scroll-behavior:smooth;}
    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.035), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(37,99,235,.04), transparent 24%),
        linear-gradient(var(--bg), var(--bg));
      position:relative;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23111827' fill-opacity='1'%3E%3Ccircle cx='12' cy='10' r='1'/%3E%3Ccircle cx='44' cy='52' r='1'/%3E%3Ccircle cx='90' cy='34' r='1'/%3E%3Ccircle cx='126' cy='90' r='1'/%3E%3Ccircle cx='68' cy='112' r='1'/%3E%3Ccircle cx='22' cy='96' r='1'/%3E%3C/g%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }
    a{color:var(--primary);text-decoration:none;}
    a:hover{color:#1d4ed8;}
    .fade-in{
      animation:fadeIn .8s ease both;
    }
    .fade-in-delay{
      animation:fadeIn 1.1s ease both;
    }
    @keyframes fadeIn{
      from{opacity:0;transform:translateY(18px);}
      to{opacity:1;transform:translateY(0);}
    }
    .navbar{
      background:rgba(249,250,251,.82);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border);
    }
    .navbar-brand{
      font-weight:800;
      letter-spacing:-.03em;
      color:var(--text);
    }
    .nav-link{
      color:var(--text);
      font-weight:600;
      padding:.75rem 1rem !important;
      border-radius:0;
      transition:var(--transition);
    }
    .nav-link:hover,.nav-link:focus{
      color:var(--primary);
      background:rgba(37,99,235,.06);
    }
    .btn-primary-custom{
      background:var(--primary);
      color:#fff;
      border:none;
      border-radius:0;
      padding:.9rem 1.2rem;
      font-weight:700;
      box-shadow:var(--shadow);
      transition:var(--transition);
    }
    .btn-primary-custom:hover{
      background:#1d4ed8;
      color:#fff;
      transform:translateY(-2px);
    }
    .btn-outline-custom{
      background:transparent;
      color:var(--text);
      border:1px solid rgba(17,24,39,.16);
      border-radius:0;
      padding:.9rem 1.2rem;
      font-weight:700;
      transition:var(--transition);
    }
    .btn-outline-custom:hover{
      border-color:var(--primary);
      color:var(--primary);
      background:rgba(37,99,235,.05);
    }
    .hero-wrap{
      padding-top:7rem;
      padding-bottom:4rem;
    }
    .hero-panel{
      background:linear-gradient(135deg, rgba(229,231,235,.88), rgba(255,255,255,.86));
      border:1px solid var(--border);
      border-radius:2rem;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      font-size:.85rem;
      font-weight:700;
      color:var(--primary);
      text-transform:uppercase;
      letter-spacing:.08em;
      background:rgba(37,99,235,.08);
      padding:.5rem .8rem;
      border-radius:999px;
    }
    .hero-title{
      font-size:clamp(2.5rem,6vw,5rem);
      line-height:.95;
      font-weight:800;
      letter-spacing:-.05em;
      margin:1rem 0 1rem;
    }
    .hero-text{
      font-size:1.08rem;
      color:var(--muted);
      max-width:42rem;
    }
    .hero-visual{
      position:relative;
      min-height:100%;
      padding:1rem;
    }
    .hero-visual img{
      width:100%;
      height:100%;
      min-height:420px;
      object-fit:cover;
      border-radius:1.5rem;
      box-shadow:0 20px 50px rgba(17,24,39,.12);
    }
    .floating-card{
      position:absolute;
      background:rgba(255,255,255,.9);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      border-radius:1.1rem;
      padding:1rem;
      max-width:220px;
    }
    .floating-card.top{
      top:1.8rem;
      left:1.8rem;
    }
    .floating-card.bottom{
      right:1.8rem;
      bottom:1.8rem;
    }
    .metric{
      font-size:1.6rem;
      font-weight:800;
      color:var(--text);
      line-height:1;
    }
    .section-shell{
      background:var(--section);
      border-radius:2rem;
      padding:2rem;
      border:1px solid rgba(17,24,39,.06);
    }
    .section-title{
      font-size:clamp(1.8rem,3.6vw,3rem);
      font-weight:800;
      letter-spacing:-.04em;
      margin-bottom:.6rem;
    }
    .section-subtitle{
      color:var(--muted);
      max-width:48rem;
    }
    .feature-card{
      height:100%;
      background:rgba(255,255,255,.74);
      border:1px solid var(--border);
      border-radius:1.5rem;
      padding:1.4rem;
      transition:var(--transition);
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
      border-color:rgba(37,99,235,.18);
    }
    .feature-icon{
      width:3rem;
      height:3rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(37,99,235,.1);
      color:var(--primary);
      border-radius:1rem;
      margin-bottom:1rem;
    }
    .feature-card h3{
      font-size:1.1rem;
      font-weight:700;
      margin-bottom:.6rem;
    }
    .feature-card p{
      color:var(--muted);
      margin-bottom:0;
    }
    .content-stack .post-card{
      background:rgba(255,255,255,.82);
      border:1px solid var(--border);
      border-radius:1.4rem;
      overflow:hidden;
      transition:var(--transition);
      height:100%;
    }
    .content-stack .post-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }
    .post-thumb{
      width:100%;
      height:100%;
      min-height:220px;
      object-fit:cover;
      border-radius:1.1rem;
    }
    .post-body{
      padding:1.35rem;
    }
    .post-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2.3rem;
      height:2.3rem;
      font-weight:800;
      color:var(--primary);
      background:rgba(37,99,235,.08);
      border-radius:.75rem;
      margin-bottom:.8rem;
    }
    .post-title{
      font-size:1.25rem;
      font-weight:800;
      line-height:1.2;
      margin-bottom:.8rem;
    }
    .post-excerpt{
      color:var(--muted);
      margin-bottom:1rem;
    }
    .read-link{
      font-weight:700;
      color:var(--primary);
    }
    .sidebar-card{
      background:rgba(255,255,255,.82);
      border:1px solid var(--border);
      border-radius:1.5rem;
      padding:1.4rem;
      margin-bottom:1.4rem;
    }
    .sidebar-card h4{
      font-size:1rem;
      font-weight:800;
      margin-bottom:1rem;
    }
    .mini-list{
      list-style:none;
      padding:0;
      margin:0;
    }
    .mini-list li{
      padding:.8rem 0;
      border-bottom:1px dashed rgba(17,24,39,.12);
    }
    .mini-list li:last-child{
      border-bottom:none;
      padding-bottom:0;
    }
    .badge-soft{
      display:inline-block;
      background:rgba(37,99,235,.08);
      color:var(--primary);
      font-weight:700;
      font-size:.8rem;
      padding:.4rem .65rem;
      border-radius:999px;
      margin:.2rem;
    }
    .newsletter-input{
      border-radius:0;
      border:1px solid rgba(17,24,39,.16);
      padding:.9rem 1rem;
      background:#fff;
    }
    .newsletter-input:focus{
      box-shadow:none;
      border-color:var(--primary);
    }
    footer{
      margin-top:4rem;
    }
    .footer-wrap{
      background:var(--section);
      border-radius:2rem 2rem 0 0;
      padding:3rem 0 2rem;
      border-top:1px solid rgba(17,24,39,.06);
    }
    .footer-brand{
      font-size:1.4rem;
      font-weight:800;
      letter-spacing:-.04em;
    }
    .footer-text{
      color:var(--muted);
      max-width:28rem;
    }
    .footer-link{
      color:var(--text);
      display:block;
      padding:.28rem 0;
      font-weight:500;
    }
    .footer-link:hover{
      color:var(--primary);
    }
    .footer-bottom{
      border-top:1px solid rgba(17,24,39,.08);
      margin-top:2rem;
      padding-top:1.25rem;
      color:var(--muted);
      font-size:.95rem;
    }
    @media (max-width: 991.98px){
      .hero-visual img{min-height:300px;}
      .floating-card{position:static;max-width:none;margin-top:1rem;}
      .hero-panel{padding-bottom:1rem;}
    }
    @media (max-width: 767.98px){
      .section-shell{padding:1.25rem;}
      .hero-wrap{padding-top:6rem;}
      .hero-title{font-size:clamp(2.2rem,11vw,3.4rem);}
      .post-thumb{min-height:200px;}
    }