/* ==========================================================================
   Seacow Technology Pty. Ltd. — Design System
   1. Tokens          5. Hero & page heads    9. Editorial / prose
   2. Base            6. Cards & grids       10. Footer
   3. Utility bar     7. Data display        11. Utilities & motion
   4. Header + mega   8. Marketing blocks
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root{
  --ink:        #08182a;
  --ink-2:      #0d2337;
  --ink-3:      #16344f;
  --deep:       #050f1c;
  --brand:      #0e7fa8;
  --brand-d:    #0b6688;
  --brand-2:    #14b0a6;
  --accent:     #ff7a45;
  --aws:        #ff9900;

  --paper:      #ffffff;
  --paper-2:    #f6f9fb;
  --paper-3:    #eaf1f5;
  --line:       #dde6ec;
  --line-2:     #c9d8e2;
  --text:       #16293a;
  --muted:      #5c7488;
  --on-dark:    #e9f2f7;
  --on-dark-mut:#9ab6c8;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --r:    16px;
  --r-sm: 9px;
  --r-lg: 24px;
  --shadow:    0 1px 2px rgba(8,24,42,.05), 0 10px 30px rgba(8,24,42,.07);
  --shadow-lg: 0 2px 6px rgba(8,24,42,.06), 0 30px 70px rgba(8,24,42,.16);
  --hdr-h: 76px;
  --util-h: 38px;
}

/* 2. Base ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:130px; }
body{
  margin:0; font-family:var(--sans); color:var(--text); background:var(--paper);
  font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"cv08" 1;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4,h5{ line-height:1.14; margin:0 0 .5em; letter-spacing:-.025em; font-weight:800; color:var(--ink); }
h1{ font-size:clamp(2.5rem,5.1vw,4.25rem); letter-spacing:-.037em; font-weight:800; line-height:1.04; }
h2{ font-size:clamp(1.9rem,3.5vw,3rem); letter-spacing:-.032em; line-height:1.1; }
h3{ font-size:1.22rem; letter-spacing:-.018em; font-weight:700; }
h4{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1.15em; }
ul,ol{ margin:0 0 1.15em; padding-left:1.15em; }
li{ margin-bottom:.4em; }
hr{ border:0; border-top:1px solid var(--line); margin:3rem 0; }
strong,b{ font-weight:650; }
::selection{ background:var(--brand-2); color:#fff; }
:focus-visible{ outline:3px solid var(--brand-2); outline-offset:2px; border-radius:5px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }
@media(max-width:600px){ .wrap{ padding:0 20px; } }
.wrap--narrow{ max-width:860px; }

.section{ padding:clamp(64px,7.5vw,116px) 0; }
.section--tight{ padding:clamp(40px,5vw,68px) 0; }
.section--alt{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }
.section--dark p{ color:var(--on-dark-mut); }
.section--dark a{ color:var(--brand-2); }
.section--deep{ background:var(--deep); color:var(--on-dark); }
.section--deep h2,.section--deep h3{ color:#fff; }
.section--deep p{ color:var(--on-dark-mut); }

.center{ text-align:center; }
.lead{ font-size:1.19rem; line-height:1.6; color:var(--muted); max-width:64ch; }
.center .lead{ margin-left:auto; margin-right:auto; }
.muted{ color:var(--muted); }
.small{ font-size:.87rem; }
.xsmall{ font-size:.79rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em; font-size:.735rem; font-weight:750;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brand); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; opacity:.6; }
.section--dark .eyebrow,.section--deep .eyebrow,.hero .eyebrow,.pagehead .eyebrow{ color:var(--brand-2); }

.sec-head{ max-width:70ch; margin-bottom:clamp(34px,4vw,56px); }
.sec-head.center{ margin-inline:auto; }
.sec-head p:last-child{ margin-bottom:0; }

/* Buttons ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding:.88em 1.6em; border-radius:var(--r-sm); font-weight:650; font-size:.97rem;
  border:1px solid transparent; cursor:pointer; text-decoration:none; line-height:1.2;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(14,127,168,.3); }
.btn--primary:hover{ background:var(--brand-d); }
/* Ink, not white: #fff on this orange is 2.59:1 and fails WCAG AA on the most
   important button in the site. Ink gives 6.92:1 and keeps the brand colour.
   Verified by check-contrast.js. */
.btn--accent{ background:var(--accent); color:var(--ink); box-shadow:0 8px 22px rgba(255,122,69,.32); }
.btn--accent:hover{ background:#f2682f; color:var(--ink); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-3); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:var(--paper); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn--on-dark{ border-color:rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.04); }
.btn--on-dark:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); }
.btn--lg{ padding:1.02em 1.9em; font-size:1.03rem; }
.btn--sm{ padding:.6em 1.1em; font-size:.88rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.center .btn-row{ justify-content:center; }

.arrow-link{ font-weight:650; font-size:.95rem; display:inline-flex; align-items:center; gap:.4em; }
.arrow-link::after{ content:"→"; transition:transform .16s ease; }
.arrow-link:hover{ text-decoration:none; }
.arrow-link:hover::after{ transform:translateX(4px); }

/* 3. Utility bar ---------------------------------------------------------- */
.util{ background:var(--deep); color:#8fadc1; font-size:.79rem; border-bottom:1px solid rgba(255,255,255,.07); }
.util__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--util-h); }
.util a{ color:#b6cedd; }
.util a:hover{ color:#fff; text-decoration:none; }
.util__right{ display:flex; align-items:center; gap:1.5rem; }
.util__hot{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; }
.util__hot .dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand-2); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(20,176,166,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(20,176,166,0); } 100%{ box-shadow:0 0 0 0 rgba(20,176,166,0); } }
@media(max-width:820px){ .util{ display:none; } }

/* 4. Header + mega menu --------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
}
.hdr__inner{ display:flex; align-items:center; gap:1.5rem; height:var(--hdr-h); }
.logo{ display:flex; align-items:center; gap:.65rem; font-weight:800; color:var(--ink);
  letter-spacing:-.035em; font-size:1.19rem; flex-shrink:0; }
.logo:hover{ text-decoration:none; }
.logo svg{ width:36px; height:36px; flex-shrink:0; }
.logo span small{ display:block; font-size:.575rem; font-weight:650; letter-spacing:.17em;
  color:var(--muted); text-transform:uppercase; margin-top:-1px; }

.nav{ display:flex; align-items:center; margin-left:auto; gap:1rem; }
.nav__list{ display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0; }
.nav__item{ margin:0; position:static; }
.nav__top{
  display:inline-flex; align-items:center; gap:.3em; padding:.55em .82em; border-radius:7px;
  color:var(--ink-3); font-weight:600; font-size:.945rem; font-family:inherit;
  background:none; border:0; cursor:pointer; line-height:1.4; white-space:nowrap;
}
.nav__top:hover{ background:var(--paper-3); text-decoration:none; color:var(--ink); }
.nav__top .chev{ width:13px; height:13px; opacity:.5; transition:transform .2s ease; }
.nav__btn[aria-expanded="true"]{ background:var(--paper-3); color:var(--brand); }
.nav__btn[aria-expanded="true"] .chev{ transform:rotate(180deg); opacity:1; }
.nav__top[aria-current="page"]{ color:var(--brand); background:rgba(14,127,168,.09); }
.nav__cta .btn{ padding:.62em 1.15em; font-size:.9rem; }

.mega{
  position:absolute; top:100%; left:0; right:0; background:var(--paper);
  border-bottom:1px solid var(--line); box-shadow:0 26px 50px -22px rgba(8,24,42,.3);
  animation:megaIn .17s ease-out;
}
@keyframes megaIn{ from{ opacity:0; transform:translateY(-7px); } }
.mega[hidden]{ display:none; }
.mega__inner{ display:grid; grid-template-columns:1fr; gap:36px; padding:34px 28px 30px; }
.mega--wide .mega__inner,.mega:has(.mega__feature) .mega__inner{ grid-template-columns:1fr 288px; }
.mega__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 34px; }
.mega:not(.mega--wide) .mega__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega__col h4{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.9em; font-weight:750;
}
.mega__col h4.is-hidden{ visibility:hidden; }
@media(max-width:960px){ .mega__col h4.is-hidden{ display:none; } }
.mega__link{ display:block; padding:.62em .75em; border-radius:9px; margin-left:-.75em; color:var(--ink); }
.mega__link:hover{ background:var(--paper-2); text-decoration:none; }
.mega__link b{ display:block; font-size:.945rem; font-weight:650; letter-spacing:-.012em; }
.mega__link:hover b{ color:var(--brand); }
.mega__link span{ display:block; font-size:.82rem; color:var(--muted); line-height:1.45; margin-top:1px; }
.mega__feature{
  display:flex; flex-direction:column; gap:.35rem; padding:24px; border-radius:var(--r);
  background:linear-gradient(155deg,var(--ink) 0%,#0f3b57 100%); color:#fff;
  border:1px solid rgba(255,255,255,.1);
}
.mega__feature:hover{ text-decoration:none; }
.mega__kicker{ font-size:.68rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-2); }
.mega__feature b{ font-size:1.08rem; font-weight:750; letter-spacing:-.02em; line-height:1.25; }
.mega__body{ font-size:.85rem; color:#a9c6d7; line-height:1.5; }
.mega__go{ margin-top:auto; padding-top:.8rem; font-size:.85rem; font-weight:650; color:var(--brand-2); }
.mega__foot{ background:var(--paper-2); border-top:1px solid var(--line); padding:13px 0; }
.mega__foot .wrap{ display:flex; gap:2rem; flex-wrap:wrap; }
.mega__foot a{ font-size:.86rem; font-weight:600; }

/* Sits under the header (z-index 80), so the header and its open mega panel
   stay bright while everything else dims — no offset maths needed. */
.nav-scrim{ position:fixed; inset:0; background:rgba(8,24,42,.3); z-index:70; }
.nav-scrim[hidden]{ display:none; }

.burger{
  display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line);
  background:var(--paper); border-radius:9px; cursor:pointer; padding:0; position:relative; flex-shrink:0;
}
.burger span{ position:absolute; left:13px; right:13px; height:2px; background:var(--ink); transition:.22s; border-radius:2px; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media(max-width:1100px){
  .burger{ display:block; }
  /* backdrop-filter makes .hdr a containing block for position:fixed descendants,
     which collapses the full-height mobile drawer. Solid background instead. */
  .hdr{ backdrop-filter:none; background:var(--paper); }
  .nav{
    position:fixed; top:var(--hdr-h); left:0; right:0; bottom:0; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 40px;
    overflow-y:auto; display:none; z-index:75; border-top:1px solid var(--line);
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__item{ border-bottom:1px solid var(--paper-3); }
  .nav__top{ width:100%; justify-content:space-between; padding:1.05em .3em; font-size:1.05rem;
    border-radius:0; font-weight:650; }
  .nav__top .chev{ width:17px; height:17px; }
  .nav__btn[aria-expanded="true"]{ background:none; }
  .mega{ position:static; box-shadow:none; border:0; animation:none; padding-bottom:.6rem; background:none; }
  .mega__inner,.mega--wide .mega__inner,.mega:has(.mega__feature) .mega__inner{
    grid-template-columns:1fr; gap:14px; padding:0 0 8px .3em;
  }
  .mega__cols,.mega:not(.mega--wide) .mega__cols{ grid-template-columns:1fr; gap:14px; }
  .mega__link{ margin-left:0; padding:.5em .6em; background:var(--paper-2); margin-bottom:5px; }
  .mega__link span{ display:none; }
  .mega__feature{ padding:18px; }
  .mega__foot{ display:none; }
  .nav__cta{ margin-top:1.6rem; }
  .nav__cta .btn{ width:100%; padding:.95em 1.2em; font-size:1rem; }
  .nav-scrim{ display:none !important; }
}

/* 5. Hero & page heads ---------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:var(--deep); color:var(--on-dark);
  padding:clamp(76px,8.5vw,132px) 0 clamp(66px,7.5vw,106px);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1000px 520px at 8% -12%, rgba(20,176,166,.32), transparent 60%),
    radial-gradient(820px 560px at 92% 4%, rgba(14,127,168,.4), transparent 62%),
    radial-gradient(640px 440px at 66% 108%, rgba(255,122,69,.15), transparent 58%);
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 38%, #000, transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000, transparent 76%);
}
.hero > .wrap{ position:relative; z-index:2; }
.hero h1{ color:#fff; max-width:17ch; }
.hero--center h1{ margin-inline:auto; max-width:22ch; }
.hero p{ color:#b8d1e0; font-size:1.2rem; max-width:58ch; line-height:1.6; }
.hero--center p{ margin-inline:auto; }
.hero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5vw,72px); align-items:center; }
@media(max-width:960px){ .hero__grid{ grid-template-columns:1fr; } }

.hero__stats{
  display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:2.6rem;
  margin-top:3rem; padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.15);
}
@media(max-width:760px){ .hero__stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1.2rem; } }
.hero__stats div strong{ display:block; font-size:2rem; font-weight:800; color:#fff;
  letter-spacing:-.035em; line-height:1.06; }
.hero__stats div span{ font-size:.81rem; color:#8cadc2; letter-spacing:.01em; }

.pagehead{
  background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden;
  padding:clamp(56px,6.5vw,92px) 0 clamp(52px,6vw,80px);
}
.pagehead::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(880px 420px at 16% -24%, rgba(20,176,166,.28), transparent 60%),
             radial-gradient(760px 440px at 94% -4%, rgba(14,127,168,.34), transparent 62%);
}
.pagehead > .wrap{ position:relative; z-index:2; }
.pagehead h1{ color:#fff; max-width:19ch; margin-bottom:.34em; }
.pagehead--wide h1{ max-width:26ch; }
.pagehead p{ color:#a6c4d6; font-size:1.14rem; max-width:62ch; margin-bottom:0; line-height:1.6; }
.pagehead__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:end; }
@media(max-width:900px){ .pagehead__grid{ grid-template-columns:1fr; gap:28px; } }

.crumbs{ font-size:.82rem; color:#7ba0b7; margin-bottom:1.2rem; }
.crumbs a{ color:#a6c4d6; } .crumbs a:hover{ color:#fff; }
.crumbs span{ opacity:.45; margin:0 .5em; }

/* Anchor sub-nav ---------------------------------------------------------- */
.subnav{
  position:sticky; top:var(--hdr-h); z-index:40; background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.subnav__inner{ display:flex; gap:.3rem; overflow-x:auto; padding:9px 0; scrollbar-width:none; }
.subnav__inner::-webkit-scrollbar{ display:none; }
.subnav a{
  white-space:nowrap; font-size:.87rem; font-weight:600; color:var(--muted);
  padding:.45em .85em; border-radius:100px;
}
.subnav a:hover{ background:var(--paper-3); color:var(--ink); text-decoration:none; }
.subnav a.is-active{ background:var(--ink); color:#fff; }

/* 6. Cards & grids -------------------------------------------------------- */
.grid{ display:grid; gap:24px; }
.grid > *, .split > *, .hero__grid > *, .metrics > *, .steps > *,
.ftr__cols > *, .hero__stats > *, .tier > *, .pagehead__grid > *{ min-width:0; }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-tight{ gap:16px; }
@media(max-width:980px){ .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px){ .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card > h3{ margin-bottom:.45em; }
.card > p:last-child,.card > ul:last-child{ margin-bottom:0; }
.card--link{ display:block; color:inherit; }
.card--link:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); text-decoration:none; }
.card--link:hover h3{ color:var(--brand); }
.card--dark{ background:var(--ink-2); border-color:rgba(255,255,255,.11); color:var(--on-dark-mut); }
.card--dark h3,.card--dark h4{ color:#fff; }
.card--dark.card--link:hover{ border-color:rgba(20,176,166,.5); }
.card--dark.card--link:hover h3{ color:var(--brand-2); }
.card--pad{ padding:34px 32px; }
.card--flat{ box-shadow:none; }

.card__ico{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg,rgba(14,127,168,.14),rgba(20,176,166,.17)); color:var(--brand);
}
.card__ico svg{ width:23px; height:23px; }
.card--dark .card__ico{ background:rgba(20,176,166,.17); color:var(--brand-2); }
.card__more{ font-weight:650; font-size:.9rem; display:inline-flex; align-items:center; gap:.35em;
  margin-top:.9rem; color:var(--brand); }
.card__more::after{ content:"→"; transition:transform .16s ease; }
.card--link:hover .card__more::after{ transform:translateX(4px); }
.card__num{
  font-family:var(--mono); font-size:.76rem; font-weight:700; color:var(--brand);
  letter-spacing:.08em; display:block; margin-bottom:.7rem;
}
.card--dark .card__num{ color:var(--brand-2); }

/* Big feature card (numbered, editorial) ---------------------------------- */
.bigcard{
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start;
  padding:32px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
}
@media(max-width:640px){ .bigcard{ grid-template-columns:1fr; gap:16px; } }
.bigcard__n{
  font-family:var(--mono); font-size:.85rem; font-weight:700; color:#fff; background:var(--ink);
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
}
.section--dark .bigcard{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); }
.section--dark .bigcard__n{ background:var(--brand-2); color:var(--deep); }

/* Checks ------------------------------------------------------------------ */
.checks{ list-style:none; padding:0; margin:0 0 1.15em; }
.checks li{ position:relative; padding-left:1.95em; margin-bottom:.66em; }
.checks li::before{
  content:""; position:absolute; left:0; top:.42em; width:1.15em; height:1.15em; border-radius:50%;
  background-color:rgba(20,176,166,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b0a6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:.72em; background-repeat:no-repeat; background-position:center;
}
.checks--tight li{ margin-bottom:.42em; }
.checks--dash li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a45' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-color:rgba(255,122,69,.14);
}

/* Split ------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,74px); align-items:center; }
.split--wide{ grid-template-columns:1.15fr .85fr; }
.split--narrow{ grid-template-columns:.85fr 1.15fr; }
.split--top{ align-items:start; }
@media(max-width:900px){ .split,.split--wide,.split--narrow{ grid-template-columns:1fr; } }
.split__media{ position:relative; }

/* 7. Data display --------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.table-wrap--bare{ border:0; border-radius:0; }
table{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:560px; }
.table-wrap--bare table{ min-width:0; }
th,td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th{ background:var(--paper-2); font-size:.73rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:750; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:0; }
td strong{ color:var(--ink); font-weight:650; }
.section--dark .table-wrap{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); }
.section--dark th,.section--dark td{ border-color:rgba(255,255,255,.1); color:var(--on-dark-mut); }
.section--dark thead th{ background:rgba(255,255,255,.05); color:#8fb0c4; }
.section--dark td strong{ color:#fff; }

.metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
@media(max-width:900px){ .metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.metric{ border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; background:var(--paper); }
.section--dark .metric,.section--deep .metric{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); }
.metric strong{ display:block; font-size:2.35rem; font-weight:800; letter-spacing:-.04em;
  color:var(--brand); line-height:1.05; margin-bottom:.25rem; }
.section--dark .metric strong,.section--deep .metric strong{ color:var(--brand-2); }
.metric span{ font-size:.86rem; color:var(--muted); line-height:1.45; display:block; }
.section--dark .metric span,.section--deep .metric span{ color:var(--on-dark-mut); }

/* Stat band --------------------------------------------------------------- */
.statband{ background:var(--ink); color:#fff; }
.statband__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); }
@media(max-width:820px){ .statband__inner{ grid-template-columns:repeat(2,1fr); } }
.statband__cell{ background:var(--ink); padding:34px 26px; }
.statband__cell strong{ display:block; font-size:2.4rem; font-weight:800; letter-spacing:-.04em;
  line-height:1.04; color:#fff; }
.statband__cell span{ font-size:.85rem; color:#8fb0c4; }

/* Logo wall --------------------------------------------------------------- */
.logowall{ padding:44px 0; border-bottom:1px solid var(--line); background:var(--paper); }
.logowall p{ text-align:center; font-size:.73rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:1.5rem; }
.logowall__row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(20px,4vw,44px); }
.logowall__row span{
  font-weight:750; font-size:.98rem; color:#8ea6b6; letter-spacing:-.015em;
  padding:.5em 1.1em; border:1px solid var(--line); border-radius:100px; background:var(--paper-2);
}

/* Badges ------------------------------------------------------------------ */
.badge{
  display:inline-flex; align-items:center; gap:.45em; padding:.4em .85em; border-radius:100px;
  font-size:.765rem; font-weight:650; letter-spacing:.015em;
  background:var(--paper-3); color:var(--ink-3); border:1px solid var(--line);
}
.badge--aws{ background:rgba(255,153,0,.13); border-color:rgba(255,153,0,.42); color:#96560a; }
.badge--dark{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.19); color:#cfe2ec; }
.badge--brand{ background:rgba(20,176,166,.13); border-color:rgba(20,176,166,.4); color:#0a7a73; }
a.badge:hover{ text-decoration:none; border-color:var(--brand); color:var(--brand); }
.badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Steps ------------------------------------------------------------------- */
.steps{ counter-reset:s; display:grid; gap:24px; }
.step{ position:relative; padding-left:70px; }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; font-weight:800; font-size:.92rem;
  background:var(--ink); color:#fff; font-family:var(--mono);
}
.section--dark .step::before,.section--deep .step::before{ background:var(--brand-2); color:var(--deep); }
.step h3{ margin-bottom:.32em; }
.step p{ margin-bottom:0; color:var(--muted); }
.section--dark .step p{ color:var(--on-dark-mut); }

/* Timeline ---------------------------------------------------------------- */
.timeline{ list-style:none; padding:0; margin:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line); }
.timeline li{ position:relative; padding-left:40px; margin-bottom:28px; }
.timeline li:last-child{ margin-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:3px solid var(--brand-2);
}
.timeline b{ display:block; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brand); font-weight:750; margin-bottom:.2em; }
.timeline h3{ font-size:1.08rem; margin-bottom:.25em; }
.timeline p{ margin-bottom:0; color:var(--muted); font-size:.95rem; }
.section--dark .timeline::before{ background:rgba(255,255,255,.16); }
.section--dark .timeline li::before{ background:var(--ink); }
.section--dark .timeline b{ color:var(--brand-2); }

/* People ------------------------------------------------------------------ */
.person{ border:1px solid var(--line); border-radius:var(--r); padding:26px; background:var(--paper); }
.person__av{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(140deg,var(--ink) 0%,#0f4a67 100%); color:#fff;
  font-weight:800; font-size:1.28rem; letter-spacing:-.03em;
}
.person h3{ margin-bottom:.15em; font-size:1.08rem; }
.person .role{ font-size:.86rem; color:var(--brand); font-weight:650; margin-bottom:.85em; }
.person p{ font-size:.92rem; color:var(--muted); margin-bottom:0; }

/* Article cards ----------------------------------------------------------- */
.article{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.article:hover{ transform:translateY(-4px); box-shadow:var(--shadow); text-decoration:none; }
.article__band{ height:6px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.article__body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.article__meta{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:700; margin-bottom:.85rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.article h3{ font-size:1.15rem; margin-bottom:.5em; }
.article:hover h3{ color:var(--brand); }
.article p{ font-size:.94rem; color:var(--muted); margin-bottom:1.1em; }
.article .card__more{ margin-top:auto; }

/* Quote ------------------------------------------------------------------- */
.quote{ background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--brand-2);
  border-radius:var(--r); padding:32px 32px 28px; margin:0; }
.quote blockquote{ margin:0 0 1.2rem; font-size:1.12rem; color:var(--ink-2); line-height:1.55;
  letter-spacing:-.012em; }
.quote figcaption{ font-size:.87rem; color:var(--muted); }
.quote figcaption b{ color:var(--ink); display:block; font-size:.95rem; font-weight:650; }
.quote--lg blockquote{ font-size:1.4rem; line-height:1.45; }
.section--dark .quote{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
  border-left-color:var(--brand-2); }
.section--dark .quote blockquote{ color:#e5f0f6; }
.section--dark .quote figcaption b{ color:#fff; }

/* Terminal ---------------------------------------------------------------- */
.term{ background:#04101c; border:1px solid rgba(255,255,255,.13); border-radius:var(--r);
  box-shadow:var(--shadow-lg); overflow:hidden; font-family:var(--mono); font-size:.795rem; line-height:1.78; }
.term__bar{ display:flex; align-items:center; gap:6px; padding:12px 15px;
  background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); }
.term__bar i{ width:10px; height:10px; border-radius:50%; background:#31465a; display:block; }
.term__bar b{ margin-left:8px; font-weight:500; font-size:.72rem; color:#7d99ae;
  font-family:var(--sans); letter-spacing:.03em; }
.term__body{ padding:18px 20px; color:#9fd8d2; overflow-x:auto; white-space:pre; }
.term__body .c{ color:#5f7a8e; } .term__body .g{ color:#5fd3a3; }
.term__body .y{ color:#ffc16a; } .term__body .w{ color:#dceaf2; }
.term__body .r{ color:#ff8f6b; }

/* Tiers ------------------------------------------------------------------- */
.tier{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:32px 28px; }
.tier--hi{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,127,168,.1), var(--shadow); position:relative; }
.tier--hi::after{
  content:"Most adopted"; position:absolute; top:-12px; left:28px; background:var(--brand); color:#fff;
  font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase;
  padding:.38em .85em; border-radius:100px;
}
.tier h3{ font-size:1.08rem; letter-spacing:.01em; }
.tier__price{ font-size:2.15rem; font-weight:800; color:var(--ink); letter-spacing:-.04em; margin:.15em 0 .05em; }
.tier__price small{ font-size:.82rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.tier .checks{ margin:1.3rem 0 1.7rem; font-size:.92rem; }
.tier .btn{ margin-top:auto; width:100%; }

/* FAQ --------------------------------------------------------------------- */
details.faq{ border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:12px; background:var(--paper); }
details.faq summary{ cursor:pointer; padding:18px 22px; font-weight:650; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--brand); font-weight:400; line-height:1; }
details.faq[open] summary::after{ content:"–"; }
details.faq[open]{ border-color:var(--line-2); }
details.faq .faq__body{ padding:0 22px 20px; color:var(--muted); font-size:.95rem; }
details.faq .faq__body p:last-child{ margin-bottom:0; }

/* 8. Marketing blocks ----------------------------------------------------- */
.cta{ background:linear-gradient(128deg,var(--deep) 0%,#0b3450 52%,#0e6180 100%);
  color:#fff; position:relative; overflow:hidden; }
.cta::after{ content:""; position:absolute; right:-90px; bottom:-140px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle, rgba(20,176,166,.3), transparent 70%); }
.cta .wrap{ position:relative; z-index:2; }
.cta h2{ color:#fff; } .cta p{ color:#bbd6e5; }
.cta__split{ display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center; }
@media(max-width:860px){ .cta__split{ grid-template-columns:1fr; } }

.callout{ border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--r-sm);
  background:var(--paper-2); padding:22px 24px; }
.callout p:last-child{ margin-bottom:0; }
.callout h4{ margin-bottom:.4em; }

.pillbox{ display:flex; flex-wrap:wrap; gap:10px; }
.pillbox span{ font-size:.85rem; font-weight:600; color:var(--ink-3); background:var(--paper-2);
  border:1px solid var(--line); padding:.45em 1em; border-radius:100px; }
.section--dark .pillbox span{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#cfe2ec; }

/* 9. Editorial / prose ---------------------------------------------------- */
.prose{ font-size:1.06rem; line-height:1.75; }
.prose h2{ font-size:1.72rem; margin-top:2.4em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.18rem; margin-top:1.9em; }
.prose > p:first-child{ font-size:1.16rem; color:var(--ink-3); }
.prose ul,.prose ol{ padding-left:1.35em; }
.prose li{ margin-bottom:.5em; }
.prose blockquote{ margin:2em 0; padding:.2em 0 .2em 1.4em; border-left:3px solid var(--brand-2);
  font-size:1.14rem; color:var(--ink-2); font-style:italic; }
.prose code{ font-family:var(--mono); font-size:.87em; background:var(--paper-3);
  padding:.14em .42em; border-radius:5px; }
.prose .table-wrap{ margin:2em 0; }
.prose img{ border-radius:var(--r); margin:2em 0; }
.article-layout{ display:grid; grid-template-columns:1fr 260px; gap:64px; align-items:start; }
@media(max-width:940px){ .article-layout{ grid-template-columns:1fr; gap:36px; } }
.aside{ position:sticky; top:calc(var(--hdr-h) + 24px); }
.toc{ border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--paper-2); }
.toc h4{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:1em; }
.toc ul{ list-style:none; padding:0; margin:0; }
.toc li{ margin-bottom:.55em; }
.toc a{ font-size:.89rem; color:var(--ink-3); font-weight:550; }

/* 10. Footer -------------------------------------------------------------- */
.ftr{ background:var(--deep); color:var(--on-dark-mut); padding:72px 0 30px; font-size:.92rem; }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,2.6fr); gap:52px; }
@media(max-width:1000px){ .ftr__top{ grid-template-columns:1fr; gap:40px; } }
.ftr__brand p{ max-width:36ch; margin:1rem 0; }
.ftr__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
@media(max-width:820px){ .ftr__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
.ftr h4{ color:#fff; font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.15em; }
.ftr ul{ list-style:none; padding:0; margin:0; }
.ftr li{ margin-bottom:.62em; }
.ftr a{ color:var(--on-dark-mut); }
.ftr a:hover{ color:#fff; }
.ftr .logo{ color:#fff; }
.ftr .logo span small{ color:#6f8ea3; }
.ftr__contact{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px;
  margin-top:52px; padding-top:36px; border-top:1px solid rgba(255,255,255,.1);
}
@media(max-width:820px){ .ftr__contact{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; } }
.ftr__contact p{ margin:0; line-height:1.6; }
.ftr__ack{ margin:34px 0 0; font-size:.82rem; color:#617f93; max-width:78ch; }
.ftr__bot{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem; color:#617f93; }
.ftr__bot ul{ display:flex; gap:1.4rem; flex-wrap:wrap; }

/* 11. Forms --------------------------------------------------------------- */
.form{ display:grid; gap:17px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:.86rem; font-weight:650; color:var(--ink-2); }
.field label span{ color:var(--accent); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; padding:.76em .9em; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:var(--paper); color:var(--text); width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand); outline:none; box-shadow:0 0 0 3px rgba(14,127,168,.15);
}
.field textarea{ resize:vertical; min-height:124px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:17px; }
@media(max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.84rem; color:var(--muted); }
.consent input{ width:auto; margin-top:.28em; flex-shrink:0; }
.form__note{ font-size:.8rem; color:var(--muted); }
.form-ok{ display:none; background:rgba(20,176,166,.1); border:1px solid rgba(20,176,166,.42);
  color:#0a6f68; padding:16px 18px; border-radius:var(--r-sm); font-size:.93rem; }
.form-ok.is-on{ display:block; }
.form-err{ display:none; background:rgba(214,69,44,.08); border:1px solid rgba(214,69,44,.4);
  color:#a8341c; padding:16px 18px; border-radius:var(--r-sm); font-size:.93rem; }
.form-err.is-on{ display:block; }
.form-err a{ color:inherit; text-decoration:underline; }
.btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 12. Utilities & motion -------------------------------------------------- */
.mt-0{ margin-top:0 !important; } .mb-0{ margin-bottom:0 !important; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.mb-1{ margin-bottom:1rem; } .mb-2{ margin-bottom:2rem; } .mb-3{ margin-bottom:3rem; }
.stack > * + *{ margin-top:1.15rem; }
.stack-sm > * + *{ margin-top:.8rem; }
.flex-start{ align-self:flex-start; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:10px; z-index:200; background:#fff; padding:.75em 1.15em;
  border-radius:7px; box-shadow:var(--shadow); }
.nowrap{ white-space:nowrap; }

/* Scroll reveal, designed to fail open.
   - Scripting disabled: the media query never matches, so .rv is never hidden.
   - Scripting enabled but main.js fails to load or throws: the safety animation
     reveals everything after 3s.
   - Normal case: IntersectionObserver adds .is-in, which cancels the animation.
   No inline bootstrap script is needed, so the CSP can still forbid inline JS. */
@keyframes rv-safety{ to{ opacity:1; transform:none; } }
@media (scripting: enabled){
  .rv{
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
    animation:rv-safety 0s linear 3s forwards;
  }
  .rv.is-in{ opacity:1; transform:none; animation:none; }
}

body.nav-locked{ overflow:hidden; }
/* Keyboard and assistive-tech users must not reach content the drawer covers. */
body.nav-locked [inert]{ pointer-events:none; }

@media(prefers-reduced-motion:reduce){
  .rv,.rv.is-in{ opacity:1; transform:none; transition:none; animation:none; }
  html{ scroll-behavior:auto; }
  .btn:hover,.card--link:hover,.article:hover{ transform:none; }
  .util__hot .dot{ animation:none; }
  .mega{ animation:none; }
}

@media print{
  .util,.hdr,.nav,.cta,.ftr__cols,.subnav{ display:none !important; }
  body{ font-size:11pt; } .section{ padding:14pt 0; }
}