:root{
      --bg:#f9fafb;
      --section:#e5e7eb;
      --primary:#2563eb;
      --text:#111827;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      background:
        radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 60%, #eef2ff 100%);
      color:var(--text);
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    .sidebar{
      position:fixed;
      top:0;
      left:0;
      width:260px;
      height:100vh;
      background:rgba(255,255,255,.78);
      backdrop-filter:blur(18px);
      border-right:1px solid rgba(17,24,39,.08);
      z-index:1040;
      padding:1.25rem 1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:.75rem;
      margin-bottom:1.5rem;
    }
    .brand-icon{
      width:42px;
      height:42px;
      border-radius:14px;
      background:linear-gradient(135deg, var(--primary), #60a5fa);
      box-shadow:0 10px 30px rgba(37,99,235,.22);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:700;
      letter-spacing:.06em;
    }
    .brand-text{
      font-weight:700;
      font-size:1rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      line-height:1.1;
    }
    .side-nav{
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .side-nav a{
      padding:.8rem .95rem;
      border-radius:14px;
      font-size:.95rem;
      transition:all .35s ease;
      color:var(--text);
      background:transparent;
    }
    .side-nav a:hover,
    .side-nav a.active{
      background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.18));
      transform:translateX(4px);
      color:var(--primary);
    }
    .sidebar-note{
      background:linear-gradient(180deg, rgba(37,99,235,.10), rgba(255,255,255,.75));
      border:1px solid rgba(37,99,235,.12);
      border-radius:20px;
      padding:1rem;
      font-size:.88rem;
      line-height:1.5;
    }
    .main{
      margin-left:260px;
      min-height:100vh;
    }
    .section-pad{padding:1.4rem}
    .hero-shell{
      padding:1rem 1rem .5rem;
    }
    .hero-card{
      background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(229,231,235,.95));
      border:1px solid rgba(17,24,39,.06);
      border-radius:34px;
      overflow:hidden;
      box-shadow:0 20px 60px rgba(17,24,39,.06);
    }
    .carousel-item{
      min-height:520px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.25fr .95fr;
      gap:1rem;
      min-height:520px;
      align-items:stretch;
    }
    .hero-left{
      padding:2.3rem 2.2rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      animation:fadeIn .9s ease both;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-size:.78rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--primary);
      margin-bottom:1rem;
    }
    .eyebrow span{
      width:28px;
      height:2px;
      background:linear-gradient(90deg, var(--primary), transparent);
      display:inline-block;
    }
    h1,h2,h3,h4,h5{
      text-transform:uppercase;
      letter-spacing:.04em;
      color:var(--text);
    }
    .hero-title{
      font-size:clamp(2rem,4vw,4rem);
      line-height:.98;
      margin-bottom:1rem;
      max-width:10ch;
    }
    .hero-text{
      font-size:1rem;
      line-height:1.7;
      color:rgba(17,24,39,.82);
      max-width:58ch;
      margin-bottom:1.25rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-bottom:1.5rem;
    }
    .btn-gradient{
      border:0;
      color:#fff;
      padding:.85rem 1.2rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary), #60a5fa);
      box-shadow:0 14px 35px rgba(37,99,235,.22);
      transition:transform .3s ease, box-shadow .3s ease;
      font-weight:600;
    }
    .btn-gradient:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(37,99,235,.28);
      color:#fff;
    }
    .btn-soft{
      padding:.85rem 1.15rem;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(17,24,39,.08);
      color:var(--text);
      font-weight:600;
    }
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:.75rem;
      max-width:560px;
    }
    .metric{
      background:rgba(255,255,255,.7);
      border:1px solid rgba(17,24,39,.05);
      border-radius:20px;
      padding:.95rem;
    }
    .metric strong{
      display:block;
      font-size:1.25rem;
      color:var(--primary);
    }
    .metric span{
      font-size:.82rem;
      color:rgba(17,24,39,.7);
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .hero-right{
      position:relative;
      padding:1.2rem;
      display:flex;
      align-items:center;
      justify-content:center;
      animation:fadeIn 1s ease both;
    }
    .orbital{
      width:min(88%,420px);
      aspect-ratio:1/1;
      border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(229,231,235,.85) 45%, rgba(37,99,235,.16) 100%);
      border:1px solid rgba(17,24,39,.06);
      position:relative;
      box-shadow:inset 0 0 60px rgba(255,255,255,.8), 0 20px 50px rgba(37,99,235,.12);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .orbital::before,
    .orbital::after{
      content:"";
      position:absolute;
      border-radius:50%;
      border:1px dashed rgba(37,99,235,.22);
    }
    .orbital::before{inset:10%}
    .orbital::after{inset:24%}
    .orbit-card{
      position:absolute;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(17,24,39,.06);
      border-radius:18px;
      padding:.8rem .9rem;
      min-width:140px;
      box-shadow:0 12px 28px rgba(17,24,39,.08);
      font-size:.85rem;
      animation:fadeIn 1.1s ease both;
    }
    .orbit-card strong{
      display:block;
      color:var(--primary);
      text-transform:uppercase;
      font-size:.76rem;
      letter-spacing:.08em;
      margin-bottom:.2rem;
    }
    .o1{top:11%; right:6%}
    .o2{bottom:13%; left:4%}
    .o3{top:50%; left:-2%; transform:translateY(-50%)}
    .center-chip{
      width:160px;
      height:160px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--primary), #93c5fd);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      text-align:center;
      padding:1rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:0 18px 50px rgba(37,99,235,.28);
    }
    .carousel-indicators [data-bs-target]{
      background-color:var(--primary);
      width:10px;
      height:10px;
      border-radius:50%;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon{
      filter:invert(22%) sepia(87%) saturate(2235%) hue-rotate(214deg) brightness(93%) contrast(96%);
    }
    .feature-wrap{
      padding:.5rem 1rem 1rem;
    }
    .feature-panel{
      background:var(--section);
      border-radius:30px;
      padding:1.2rem;
      position:relative;
      overflow:hidden;
    }
    .feature-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, rgba(255,255,255,.46), transparent 45%, rgba(37,99,235,.07));
      pointer-events:none;
    }
    .section-header{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
      position:relative;
      z-index:1;
    }
    .section-header p{
      margin:0;
      max-width:640px;
      color:rgba(17,24,39,.72);
    }
    .feature-mixed{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:1rem;
      position:relative;
      z-index:1;
    }
    .feature-primary{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(17,24,39,.05);
      border-radius:26px;
      padding:1.2rem;
      display:grid;
      grid-template-columns:auto 1fr;
      gap:1rem;
      align-items:start;
      min-height:100%;
      animation:fadeIn .7s ease both;
    }
    .icon-badge{
      width:58px;
      height:58px;
      border-radius:18px;
      background:linear-gradient(135deg, var(--primary), #93c5fd);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      box-shadow:0 14px 32px rgba(37,99,235,.2);
      flex-shrink:0;
    }
    .mini-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1rem;
    }
    .mini-card{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(17,24,39,.05);
      border-radius:24px;
      padding:1rem;
      animation:fadeIn .9s ease both;
    }
    .mini-card h3,.feature-primary h3{font-size:1rem;margin-bottom:.55rem}
    .mini-card p,.feature-primary p{margin:0;color:rgba(17,24,39,.75);line-height:1.65;font-size:.94rem}
    .content-area{
      padding:.3rem 1rem 1rem;
    }
    .content-shell{
      background:linear-gradient(180deg, var(--section), rgba(229,231,235,.8));
      border-radius:34px;
      padding:1.2rem;
      overflow:hidden;
    }
    .content-layout{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:1rem;
      align-items:start;
    }
    .content-intro{
      position:sticky;
      top:1rem;
      background:rgba(255,255,255,.75);
      border:1px solid rgba(17,24,39,.05);
      border-radius:28px;
      padding:1.2rem;
      animation:fadeIn .8s ease both;
    }
    .content-intro .circle-visual{
      width:110px;
      height:110px;
      border-radius:50%;
      background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(147,197,253,.9));
      margin-bottom:1rem;
      box-shadow:0 16px 35px rgba(37,99,235,.2);
    }
    .post-list{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:.9rem;
    }
    .post-item{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(17,24,39,.06);
      border-radius:28px;
      padding:.9rem;
      display:grid;
      grid-template-columns:110px 1fr auto;
      gap:.95rem;
      align-items:center;
      transition:transform .3s ease, box-shadow .3s ease;
      animation:fadeIn .8s ease both;
    }
    .post-item:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 40px rgba(17,24,39,.08);
    }
    .post-image{
      width:110px;
      height:110px;
      border-radius:50%;
      overflow:hidden;
      background:#fff;
      border:4px solid rgba(37,99,235,.08);
      flex-shrink:0;
    }
    .post-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .post-body h3{
      font-size:1rem;
      margin-bottom:.45rem;
    }
    .post-body p{
      margin:0;
      color:rgba(17,24,39,.75);
      line-height:1.6;
      font-size:.93rem;
    }
    .post-link{
      white-space:nowrap;
      align-self:center;
    }
    .footer-wrap{
      padding:0 1rem 1rem;
    }
    footer{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(17,24,39,.06);
      border-radius:24px;
      padding:1rem 1.2rem;
    }
    .footer-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .footer-links{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
    }
    .footer-links a{
      color:rgba(17,24,39,.72);
      font-size:.92rem;
    }
    .fade-in{
      animation:fadeIn .8s ease both;
    }
    .mobile-topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:1030;
      padding:.8rem 1rem;
      background:rgba(249,250,251,.88);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(17,24,39,.06);
    }
    @keyframes fadeIn{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:translateY(0)}
    }
    @media (max-width: 1199.98px){
      .hero-grid,
      .feature-mixed,
      .content-layout{
        grid-template-columns:1fr;
      }
      .content-intro{position:relative;top:0}
    }
    @media (max-width: 991.98px){
      .sidebar{
        transform:translateX(-100%);
        transition:transform .35s ease;
      }
      .sidebar.show{transform:translateX(0)}
      .main{margin-left:0}
      .mobile-topbar{display:flex;align-items:center;justify-content:space-between}
      .carousel-item{min-height:auto}
      .hero-left{padding:1.4rem}
      .hero-right{padding:1rem 1rem 1.5rem}
      .hero-metrics{grid-template-columns:1fr}
    }
    @media (max-width: 767.98px){
      .post-item{
        grid-template-columns:1fr;
        text-align:left;
      }
      .post-link{justify-self:start}
      .mini-grid{grid-template-columns:1fr}
      .section-pad,.hero-shell,.feature-wrap,.content-area,.footer-wrap{padding-left:.75rem;padding-right:.75rem}
      .hero-card,.feature-panel,.content-shell{border-radius:24px}
      .orbit-card{position:static; transform:none; margin:.35rem 0}
      .orbital{
        width:100%;
        max-width:320px;
        display:flex;
        flex-direction:column;
        gap:.5rem;
        padding:1rem;
        height:auto;
        aspect-ratio:auto;
        border-radius:34px;
      }
      .orbital::before,.orbital::after{display:none}
      .center-chip{width:130px;height:130px}
    }