:root{
    --ibm-plex-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --bg:#ffffff;
    --bg-soft:#F7F8F5;
    --ink:#0A0A0A;
    --ink-2:#242424;
    --muted:#5B5B5B;
    --muted-2:#8A8A8A;
    --line:#E6E6E1;
    --line-2:#EFEFEA;
    --green:#B9FB9C;
    --green-strong:#A4F281;
    --green-soft:#ECFDE2;
    --green-line:#D3F4BE;
    --tile:#F2F2EE;
    --radius:16px;
    --shadow-sm:0 1px 2px rgba(10,10,10,.04),0 4px 14px rgba(10,10,10,.05);
    --shadow-md:0 12px 30px rgba(10,10,10,.09);
    --pad:clamp(20px,4vw,64px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:var(--ibm-plex-mono);
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--ibm-plex-mono);line-height:1.12;margin:0;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  a{color:inherit;text-decoration:none}
  p{margin:0 0 1rem}
  .wrap{width:100%;max-width:100%;margin:0;padding:0 var(--pad)}
  .hl{background:var(--green);color:var(--ink);padding:0 .18em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

  /* ---------- Nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(180%) blur(12px);
    background:rgba(255,255,255,.85);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease;
  }
  header.nav.scrolled{border-bottom:1px solid var(--line);background:rgba(255,255,255,.94)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{display:flex;align-items:center;gap:9px}
  .logo-mark{width:26px;height:26px;display:block;flex:none}
  .logo-word{font-weight:700;font-size:1.02rem;letter-spacing:-.03em;color:var(--ink)}
  .nav-links{display:flex;align-items:center;gap:8px}
  .nav-links a{color:var(--ink);font-size:.86rem;font-weight:500;padding:8px 12px;border-radius:8px;transition:background .2s}
  .nav-links a:hover{background:var(--tile)}
  .nav-links a[aria-current="page"]{background:var(--green-soft);color:var(--ink);box-shadow:inset 0 -2px 0 var(--green-strong)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--ibm-plex-mono);font-weight:600;font-size:.86rem;
    padding:11px 18px;border-radius:10px;cursor:pointer;border:1.5px solid var(--ink);
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--green);color:var(--ink)}
  .btn-primary:hover{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .btn-ghost{background:#fff;color:var(--ink)}
  .btn-ghost:hover{background:var(--green);transform:translateY(-2px)}
  .nav-cta{display:flex;align-items:center;gap:12px}
  .menu-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
  .mobile-menu{display:none}

  /* ---------- Hero ---------- */
  .hero{position:relative;padding:92px 0 80px;overflow:hidden;background:
      radial-gradient(60% 46% at 50% -8%,var(--green-soft),transparent 72%),
      var(--bg);}
  .grid-lines{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 55% at 50% 12%,#000 30%,transparent 75%);opacity:.9}
  .hero-inner{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--ink);background:var(--tile);border:1px solid var(--line);padding:7px 14px;border-radius:999px;margin-bottom:26px}
  .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green-strong);box-shadow:0 0 0 4px rgba(185,251,156,.45)}
  .hero h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:700;letter-spacing:-.03em}
  .hero p.sub{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--muted);max-width:680px;margin:24px auto 34px;line-height:1.7}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn-lg{padding:14px 24px;font-size:.95rem;border-radius:12px}
  .trust{margin-top:50px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
  .trust span{display:inline-flex;align-items:center;gap:8px}
  .trust svg{width:17px;height:17px;color:var(--ink)}
  .trust .chk{display:grid;place-items:center}
  .trust .chk svg{width:16px;height:16px}

  /* ---------- Sections ---------- */
  section{position:relative}
  .section-pad{padding:84px 0}
  .soft{background:var(--bg-soft);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .section-head{max-width:680px;margin:0 auto 52px;text-align:center}
  .eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:14px;display:inline-block}
  .section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.03em}
  .section-head p{color:var(--muted);margin-top:16px;font-size:1rem}

  /* ---------- Services ---------- */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{
    background:#fff;
    border:1.5px solid var(--line);border-radius:var(--radius);
    padding:28px 26px;position:relative;overflow:hidden;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--ink)}
  .card .ic{width:46px;height:46px;border-radius:11px;background:var(--tile);display:grid;place-items:center;margin-bottom:20px;border:1px solid var(--line)}
  .card .ic svg{width:23px;height:23px;color:var(--ink)}
  .card h3{font-size:1.08rem;margin-bottom:10px;letter-spacing:-.02em}
  .card p{color:var(--muted);font-size:.9rem;margin:0}

  /* ---------- Focus areas ---------- */
  .focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .focus{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:transform .2s,border-color .2s,box-shadow .2s}
  .focus:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow-md)}
  .focus .tag{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;font-weight:700;color:var(--ink);font-size:.85rem;background:var(--tile);border:1px solid var(--line);border-radius:7px;margin-bottom:14px}
  .focus h4{font-size:1rem;margin-bottom:8px;letter-spacing:-.02em}
  .focus p{color:var(--muted);font-size:.86rem;margin:0}

  /* ---------- About ---------- */
  .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;max-width:1200px;margin:0 auto}
  .about-grid h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:20px;letter-spacing:-.03em}
  .about-grid p{color:var(--ink-2);font-size:1rem;line-height:1.7}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .stat{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
  .stat::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;background:var(--ink);border-radius:0 4px 4px 0}
  .stat .num{font-size:1.4rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
  .stat .lbl{color:var(--muted);font-size:.84rem;margin-top:4px}

  /* ---------- Insights ---------- */
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .post{
    background:#fff;
    border:1.5px solid var(--line);border-radius:var(--radius);
    padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit;
    display:flex;flex-direction:column;overflow:hidden;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .post:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:var(--shadow-md)}
  .post:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .post .body{padding:26px;display:flex;flex-direction:column;flex:1}
  .post .cat{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--tile);border:1px solid var(--line);padding:4px 10px;border-radius:999px;margin-bottom:14px}
  .post h3{font-size:1.04rem;margin-bottom:12px;letter-spacing:-.02em;line-height:1.3}
  .post .excerpt{color:var(--muted);font-size:.88rem;margin-bottom:18px;flex:1}
  .post .meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted-2);font-size:.78rem;margin-top:auto}
  .post .read{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
  .post .read svg{width:15px;height:15px;transition:transform .2s}
  .post:hover .read svg{transform:translateX(3px)}
  .post-full{display:none}

  /* ---------- Modal ---------- */
  .modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.5);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
  .modal-overlay.open{display:flex}
  .modal{background:#fff;border:1.5px solid var(--ink);border-radius:18px;max-width:760px;width:100%;padding:0;position:relative;box-shadow:0 40px 90px rgba(10,10,10,.3);animation:pop .3s ease}
  @keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
  .modal .top{height:8px;background:var(--tile);border-radius:17px 17px 0 0}
  .modal .inner{padding:40px 44px 48px}
  .modal-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:9px;background:#fff;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s;z-index:2}
  .modal-close:hover{background:var(--tile)}
  .modal .cat{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--tile);border:1px solid var(--line);padding:4px 10px;border-radius:999px;margin-bottom:16px}
  .modal h2{font-size:1.5rem;margin-bottom:10px;letter-spacing:-.03em;line-height:1.2}
  .modal .byline{color:var(--muted-2);font-size:.82rem;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .article-body{color:var(--ink-2);font-size:.94rem;line-height:1.75}
  .article-body h3{color:var(--ink);font-size:1.08rem;margin:28px 0 12px;letter-spacing:-.02em}
  .article-body strong{color:var(--ink)}
  .article-body ul,.article-body ol{padding-left:20px;margin:0 0 1rem}
  .article-body li{margin-bottom:8px}
  .article-body .formula{background:var(--tile);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:8px;padding:12px 16px;color:var(--ink);margin:0 0 1rem;font-size:.9rem;font-weight:500}

  /* ---------- Contact ---------- */
  .contact-card{
    background:#fff;
    border:1.5px solid var(--line);border-radius:22px;padding:56px 40px;text-align:center;position:relative;overflow:hidden;max-width:1100px;margin:0 auto;
  }
  .contact-card h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:16px;letter-spacing:-.03em}
  .contact-card p{color:var(--ink-2);max-width:540px;margin:0 auto 30px;font-size:1rem}
  .contact-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
  .contact-card .btn-ghost{background:#fff}
  .contact-meta{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;color:var(--ink-2);font-size:.86rem;padding-top:26px;border-top:1px solid var(--line)}
  .contact-meta a{font-weight:600}
  .contact-meta a:hover{text-decoration:underline}
  .contact-meta span{display:inline-flex;align-items:center;gap:8px}
  .contact-meta svg{width:16px;height:16px;color:var(--ink)}

  /* ---------- Footer ---------- */
  footer{border-top:1.5px solid var(--ink);padding:44px 0 40px;background:#fff}
  .foot-links{display:flex;flex-wrap:wrap;gap:6px 4px;justify-content:center;margin:0 0 30px;padding:0 0 28px;border-bottom:1px solid var(--line)}
  .foot-links a{color:var(--ink-2);font-size:.84rem;font-weight:500;padding:6px 12px;border-radius:8px;transition:background .2s,color .2s}
  .foot-links a:hover{background:var(--tile);color:var(--ink)}
  .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .socials{display:flex;gap:10px}
  .socials a{width:40px;height:40px;border-radius:10px;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:all .2s}
  .socials a:hover{background:var(--tile);border-color:var(--ink);transform:translateY(-3px)}
  .socials svg{width:18px;height:18px}
  .foot-meta{color:var(--muted);font-size:.8rem}
  .foot-meta a{color:var(--ink);font-weight:500}
  .foot-meta a:hover{text-decoration:underline}

  /* ---------- Callout / highlight statement ---------- */
  .callout{max-width:820px;margin:36px auto 0;background:var(--green-soft);border:1.5px solid var(--green-line);border-left:4px solid var(--green-strong);border-radius:14px;padding:22px 26px;text-align:center;font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}

  /* ---------- Journey progression ---------- */
  .journey{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;justify-content:center;max-width:960px;margin:44px auto 0}
  .journey .step{flex:1 1 150px;min-width:130px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center;font-size:.86rem;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;position:relative}
  .journey .arrow{display:grid;place-items:center;color:var(--muted-2);flex:0 0 auto}
  .journey .arrow svg{width:20px;height:20px}
  @media(max-width:680px){.journey .arrow{transform:rotate(90deg)}}

  /* ---------- Feature / capability lists ---------- */
  .feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;max-width:960px;margin-left:auto;margin-right:auto}
  .feature-list li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:.92rem;line-height:1.5}
  .feature-list li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ink)}
  @media(max-width:680px){.feature-list{grid-template-columns:1fr}}

  /* ---------- Section CTA ---------- */
  .section-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:40px}

  /* ---------- KloudStack status ---------- */
  .status-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;margin:0 auto}
  .status-col{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:26px 24px}
  .status-col .st-head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;margin-bottom:16px;letter-spacing:-.02em}
  .status-col .st-head .dot{width:9px;height:9px;border-radius:50%;flex:none}
  .status-col.operating .st-head .dot{background:var(--green-strong);box-shadow:0 0 0 4px rgba(185,251,156,.4)}
  .status-col.developing .st-head .dot{background:#F2C94C;box-shadow:0 0 0 4px rgba(242,201,76,.28)}
  .status-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .status-col li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.9rem;line-height:1.45}
  .status-col li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--muted)}
  .qualification{max-width:960px;margin:20px auto 0;background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:16px 20px;color:var(--ink-2);font-size:.9rem;line-height:1.55}
  .qualification strong{color:var(--ink)}
  @media(max-width:680px){.status-grid{grid-template-columns:1fr}}

  /* ---------- Reveal animation ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- Responsive ---------- */
  @media(max-width:980px){
    .cards{grid-template-columns:1fr 1fr}
    .focus-grid{grid-template-columns:1fr 1fr}
    .posts{grid-template-columns:1fr 1fr}
    .about-grid{grid-template-columns:1fr;gap:34px}
  }
  @media(max-width:680px){
    .nav-links{display:none}
    .nav-cta .btn-ghost{display:none}
    .menu-toggle{display:block}
    .mobile-menu{display:none;flex-direction:column;gap:4px;padding:10px var(--pad) 20px;border-bottom:1px solid var(--line);background:#fff}
    .mobile-menu.open{display:flex}
    .mobile-menu a{padding:12px 8px;color:var(--ink);border-radius:8px}
    .mobile-menu a:hover{background:var(--tile)}
    .mobile-menu a[aria-current="page"]{background:var(--green-soft);font-weight:600}
    .cards,.focus-grid,.posts,.stats{grid-template-columns:1fr}
    .section-pad{padding:60px 0}
    .modal .inner{padding:30px 24px 34px}
    .contact-card{padding:40px 22px}
    .detail-two{grid-template-columns:1fr}
  }

/* ---------- Subpage hero & breadcrumb ---------- */
.page-hero{position:relative;padding:60px 0 46px;overflow:hidden;background:radial-gradient(60% 46% at 50% -8%,var(--green-soft),transparent 72%),var(--bg);border-bottom:1px solid var(--line-2)}
.page-hero .hero-inner{position:relative;z-index:1;text-align:center;max-width:840px;margin:0 auto}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:700;letter-spacing:-.03em}
.page-hero p.sub{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--muted);max-width:700px;margin:20px auto 0;line-height:1.7}
.breadcrumb{display:flex;gap:8px;align-items:center;justify-content:center;font-size:.78rem;color:var(--muted-2);margin-bottom:18px}
.breadcrumb a{color:var(--muted);font-weight:500}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline}
.breadcrumb .sep{opacity:.55}

/* ---------- Detail / prose blocks ---------- */
.detail{max-width:760px;margin:0 auto}
.detail p{color:var(--ink-2);font-size:.98rem;line-height:1.72}
.detail p:last-child{margin-bottom:0}
.detail-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;margin:0 auto}

/* ---------- Article pages ---------- */
.article-hero{padding:52px 0 32px;border-bottom:1px solid var(--line-2);background:radial-gradient(60% 46% at 50% -8%,var(--green-soft),transparent 72%),var(--bg)}
.article-hero .wrap{max-width:820px;margin:0 auto}
.article-hero .cat{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--tile);border:1px solid var(--line);padding:4px 10px;border-radius:999px;margin:12px 0 16px}
.article-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.03em;line-height:1.14}
.article-hero .byline{color:var(--muted-2);font-size:.84rem;margin-top:18px}
.article-main{padding:44px 0 22px}
.article-main .wrap{max-width:760px;margin:0 auto}
.related{padding:12px 0 80px}
.related .wrap{max-width:760px;margin:0 auto}
.related h2{font-size:1.2rem;margin-bottom:18px;letter-spacing:-.02em}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related-card{display:block;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:18px 20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.related-card:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-md)}
.related-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.related-card .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);font-weight:600}
.related-card .t{font-weight:600;margin-top:6px;letter-spacing:-.01em;color:var(--ink)}
.insights-more{text-align:center;margin-top:40px}
@media(max-width:680px){.related-grid{grid-template-columns:1fr}}