/*
 * Sections shown on every page: Testimonials and Need help.
 *
 * Extracted from home-sections.css when those blocks became shared — they
 * render on product pages too, so their rules must load everywhere. Loaded
 * by every template, including home.
 */

/*
 * Horizontal overflow, without turning the page into a scroll container.
 *
 * Every template sheet declares `body { overflow-x: hidden }` to stop wide
 * sections putting a horizontal scrollbar on the page. The catch is in the
 * spec: when one axis is `hidden` and the other is left `visible`, the visible
 * one is coerced to `auto`. So body and #wby-root were both scroll containers
 * 5,126px tall in a 5,126px box — containers that can never scroll.
 *
 * That is what stopped "Your configuration" sticking. `position: sticky` sticks
 * to its nearest scrolling ancestor, and its nearest one was a box with nothing
 * to scroll; the viewport scrolling underneath it made no difference.
 *
 * `clip` clips without scrolling, so the other axis stays `visible` and the
 * viewport goes back to being the scroller. `hidden` is kept underneath for
 * Safari before 16, which does not know `clip` — there sticky stays as it is
 * today rather than the page gaining a scrollbar.
 *
 * This sheet loads after the template sheet, which is what lets it win.
 */
/* The fallback first — #wby-root used to carry this inline. */
#wby-root { overflow-x: hidden; }

@supports (overflow-x: clip) {
    body,
    #wby-root {
        overflow-x: clip;
    }
}

.wx136{background:linear-gradient(100deg,#166FA8,#6A54C9);-webkit-background-clip:text;background-clip:text;color:transparent}
.wx155{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.wx153{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}
.wx152{font-size:16.5px;line-height:1.7;color:#5F7490;margin:0;text-wrap:pretty}
.wx154{height:100%}
.wx397{font-size:13px;color:#7189A3}
.wx141{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#0E2A48}
.wx394{display:flex;align-items:baseline;gap:10px}
.wx161{max-width:1120px;position:relative}
.wx299{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#8598B0}
.wx387{--bs-gutter-x:3rem;--bs-gutter-y:2.5rem}
.wx404{max-width:1240px;position:relative}
.wx406{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#166FA8;background:#E1F0F9;border:1px solid #C6E4F3;padding:7px 13px;border-radius:100px;margin-bottom:20px}
.wx410{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid #D8E5F1;background:#FFFFFF;color:#123258;box-shadow:0 16px 34px -26px rgba(18,50,88,.8);transition:all .28s ease}
.wx316{position:relative;z-index:1;
        padding: 40px 0 60px;
    background:#F4F8FC;overflow:hidden}
.wx317{max-width:700px;margin:0 auto 46px;text-align:center}
.wx318{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.8vw,46px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;color:#0E2A48}
.wx319{position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 26px;border-radius:22px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 30px 62px -46px rgba(18,50,88,.75);transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.wx320{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:#0E2A48;margin-bottom:8px}
.wx321{font-size:15.5px;font-weight:700;color:#166FA8}
.wx402{
    position:relative;z-index:1;    padding: clamp(60px, 3vw, 60px) 0;background:linear-gradient(180deg,#FFFFFF,#F1F7FC);border-top:1px solid #E9F0F8;overflow:hidden
}
.wx403{position:absolute;top:8%;left:-150px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(24,156,204,.14),transparent 66%);filter:blur(32px)}
.wx405{--bs-gutter-x:3rem;--bs-gutter-y:2rem;margin-bottom:clamp(34px,4vw,52px)}
.wx407{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(32px,4.2vw,52px);line-height:1.02;letter-spacing:-.035em;margin:0;color:#0E2A48;text-wrap:balance}
.wx408{display:flex;align-items:center;gap:16px;justify-content:flex-start}
.wx409{flex:1;height:1px;background:#DCE8F4;min-width:40px}
.wx411{position:relative;overflow:hidden;padding:clamp(28px,3.2vw,44px);border-radius:26px;background:linear-gradient(158deg,rgba(255,255,255,.96),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 90px -54px rgba(18,50,88,.9)}
.wx412{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.wx413{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:#8598B0}
/* .wx414{position:relative;font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,2.1vw,20px);font-weight:500;line-height:1.5;letter-spacing:-.02em;color:#12314F;margin:0 0 clamp(24px,3vw,34px);text-wrap:pretty} */
.wx414{
    font-size: 14.5px;
    line-height: 1.65;
    color: #5F7490;
    margin: 0 0 24px;
    flex: 1;
}
.wx415{position:relative;display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid #E6EEF7}
.wx416{display:grid;gap:3px}
.wx417{font-size:15.5px;font-weight:700;color:#0E2A48}
.wx418{padding:clamp(24px,2.6vw,32px);border-radius:24px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 34px 70px -50px rgba(18,50,88,.85)}
.wx419{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;color:#8598B0;margin-bottom:18px}
.wx420{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:26px}
.wx421{position:relative;overflow:hidden;cursor:pointer;flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:2px solid #DCE8F4;background:#F7FAFD;padding:0;transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.wx422{width:100%;height:100%;object-fit:cover;display:block}
.wx423{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#189CCC,#6A54C9)}
.wx424{height:1px;background:#E9F0F8;margin-bottom:22px}
.wx425{display:grid;gap:14px}

/*
 * Testimonial deck geometry.
 *
 * Lived in home.css, so on a product page the deck had no height and every
 * quote collapsed on top of the heading. It renders site-wide, so it belongs
 * with the other shared rules. Values are the home page originals.
 */
[data-deck]{position:relative;perspective:1700px;
        height: clamp(380px, 26vw, 380px);
}
[data-slide]{position:absolute;left:0;right:0;top:0;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .55s ease,filter .6s ease;will-change:transform,opacity}
[data-slide][data-pos="0"]{transform:translate3d(0,0,0) rotateY(0deg) scale(1);opacity:1;z-index:5;filter:none;pointer-events:auto}
[data-slide][data-pos="1"]{transform:translate3d(6%,20px,-130px) rotateY(-8deg) scale(.95);opacity:.5;z-index:4;filter:blur(1.2px);pointer-events:none}
[data-slide][data-pos="2"]{transform:translate3d(11%,38px,-260px) rotateY(-12deg) scale(.89);opacity:.24;z-index:3;filter:blur(2.4px);pointer-events:none}
[data-slide][data-pos="x"]{transform:translate3d(-16%,-10px,-380px) rotateY(10deg) scale(.82);opacity:0;z-index:1;pointer-events:none}
@media (max-width:767.98px){[data-deck]{height:clamp(500px,120vw,620px)}}

/*
 * Footer wordmark.
 *
 * Each letter lifts and lights up on hover. The template carried one class per
 * letter of "WEBYNE"; the lift is shared and only the colour varies, so the
 * footer can ramp any wordmark across the three tones. Values are the
 * template's originals. Lives here because the footer renders on every page.
 */
.wx4:hover{transform:translateY(-14px) !important}
.wx4-cyan:hover{color:#5CE0F5 !important;text-shadow:0 0 64px rgba(24,156,204,.9) !important}
.wx4-violet:hover{color:#A78BFF !important;text-shadow:0 0 64px rgba(106,84,201,.95) !important}
.wx4-green:hover{color:#34F5B0 !important;text-shadow:0 0 64px rgba(23,166,115,.9) !important}

/* ================================================================ motion off
   Site Settings → Animations off (the default). The page behaves as under
   prefers-reduced-motion for the scroll work only: every scroll-reveal sits
   at rest and nothing waits for a script to fade it in. Keyframe idle motion
   (the floating hero racks, blinking LEDs, the button sheen) and hover
   transitions keep running — they cost nothing on scroll. The template
   scripts read the same switch (see the layout) and skip smooth scrolling,
   the cursor and the scroll-scrubbed hero; pointer tilt stays on. */
html[data-motion="off"]{scroll-behavior:auto!important}
html[data-motion="off"] *{scroll-behavior:auto!important}
html[data-motion="off"] [data-reveal],html[data-motion="off"] [data-gs],html[data-motion="off"] [data-line]{opacity:1!important;transform:none!important;visibility:visible!important;transition:none!important;will-change:auto!important}

/* ------------------------------------------------------------- awards */
/* The badge fills its tile. This lived in home.css, which an inner page does
   not load, so the badges came out at their 96px intrinsic size inside a
   card sized for a full-bleed image. */
/* Every badge sits on the same square tile, centred, whatever proportions the
   artwork ships with — the laurels are 400x353 and the verified badge 140x140,
   so a tile that took each image's own ratio left the rows out of line. The
   card centres its contents too, and an award with no caption drops the line
   rather than holding a gap open. */
.wx147 [data-tilt-inner]{display:flex;flex-direction:column;justify-content:center}
.wx157-awords{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.wx157-awords img{width:100%!important;height:100%!important;object-fit:contain}
.wx147 .wx156:empty,.wx147 .wx159:empty{display:none}

/* ------------------------------------------------------------- footer */
/* The footer's contact column is built from the contact book rather than from
   menu links, so its two lines are styled here. They lived in
   product-sections.css, which the home page no longer loads — the footer is on
   every page, so its rules belong in the sheet that is. */
.wx-foot-phone{font-size:14.5px;font-weight:700;color:#FFFFFF}
.wx-foot-mail{font-size:14.5px;font-weight:500;color:#B8CEE5}

/* ----------------------------------------------- site chrome */
/* The header, its mega panel and the footer are on every page, and so are
   the sitemap and not-found layouts. Their rules were in home-sections.css,
   which meant an inner page loaded 88 KB to use about a tenth of it. Copied
   here, where every template already looks; home-sections.css keeps its own
   copy and is now loaded only by the home template. */
.wx22{max-width:1280px;position:relative}
.wx2{max-width:1280px}
.wx11{display:grid;gap:11px}
.wx51{flex:1}
.wx1{position:relative;z-index:1;background:#0E2A48;color:#C6DAEE;padding:70px 0 34px;overflow:hidden}
.wx3{display:flex;flex-wrap:wrap;gap:clamp(2px,.8vw,10px);margin:0 0 clamp(46px,5vw,72px);cursor:default}
.wx4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(52px,14vw,190px);line-height:.84;letter-spacing:-.05em;color:#15375C;transition:color .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),text-shadow .42s ease;display:inline-block}
.wx5{--bs-gutter-x:2rem;--bs-gutter-y:2.5rem}
.wx6{height:32px;width:auto;display:block;filter:brightness(0) invert(1);margin-bottom:20px}
.wx7{font-size:14.5px;line-height:1.65;color:#9BB6D2;max-width:330px;margin:0 0 24px}
.wx8{display:flex;gap:10px}
.wx9{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#C6DAEE;transition:all .25s ease}
.wx10{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6E8FB4;margin-bottom:18px}
.wx12{font-size:13.5px;color:#7E9CBD;line-height:1.6}
.wx13{height:1px;background:rgba(255,255,255,.12);margin:44px 0 26px}
.wx14{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.wx18{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.wx19{font-size:13px;color:#7E9CBD}
.wx20{font-size:13px;color:#9BB6D2}
.wx21{position:fixed;top:0;left:0;right:0;z-index:90;border-bottom:1px solid rgba(225,235,245,0);background-color:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,padding .35s ease;padding:18px 0}
.wx23{display:flex;align-items:center;gap:28px;    justify-content: space-between}
.wx24{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.wx25{height:32px;width:auto;display:block}
.wx26{display:flex;align-items:center;gap:2px;margin-left:6px}
.wx27{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:'Manrope',sans-serif;color:#4E637E;font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:10px;transition:color .2s ease,background .2s ease}
.wx28{transition:transform .28s ease;opacity:.8}
.wx29{
  /* margin-left:auto; */
  display:flex;align-items:center;gap:12px}
.wx30{white-space:nowrap;color:#184884;font-size:14.5px;font-weight:600;padding:10px 16px;border-radius:11px;border:1px solid #CFE0EF;transition:all .25s ease}
.wx31{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;font-size:14.5px;font-weight:800;padding:11px 20px;border-radius:11px;background:linear-gradient(135deg,#189CCC,#184884);box-shadow:0 12px 28px -12px rgba(24,72,132,.75);transition:transform .25s ease,box-shadow .25s ease}
.wx32{position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:wbySheen 4.2s ease-in-out infinite}
.wx33{align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;border:1px solid #CFE0EF;background:#F4F9FD;color:#123258;cursor:pointer}
.wx34{position:absolute;top:100%;left:12px;right:12px;margin-top:10px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .26s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility .26s;pointer-events:none;z-index:95}
.wx35{border-radius:20px;background:rgba(255,255,255,.985);border:1px solid #E1EBF5;box-shadow:0 44px 90px -46px rgba(18,50,88,.85);overflow:hidden}
.wx38{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:14px;border:1px solid #E5EEF7;background:#FBFDFF;transition:all .26s ease}
.wx39{display:block;font-size:14.5px;font-weight:700;color:#0E2A48}
.wx46{overflow:hidden;max-height:0;opacity:0;transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.wx47{margin:14px 0 4px;border-radius:18px;background:#FFFFFF;border:1px solid #E1EBF5;box-shadow:0 34px 70px -40px rgba(18,50,88,.75);overflow:hidden}
.wx48{max-height:min(66vh,540px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.wx49{border-bottom:1px solid #EDF3F9}
.wx50{display:flex;width:100%;align-items:center;gap:13px;border:0;background:transparent;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:700;font-size:15.5px;color:#0E2A48;padding:16px 18px;text-align:left}
.wx52{transition:transform .3s ease;flex:0 0 auto}
.wx53{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.8,.2,1)}
.wx54{display:grid;padding:2px 18px 16px 69px;border-left:2px solid #E1F0F9;margin-left:36px}
.wx55{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:#4E637E;padding:11px 0}
.wx57{display:flex;width:100%;align-items:center;gap:13px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15.5px;color:#0E2A48;padding:16px 18px}
/* Tags the first pass could not parse (Blade directives containing ">"). */
.wx520{color:#4E637E;font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:10px;transition:color .2s ease,background .2s ease}
/* ============================================================
   Mega-menu panels
   Cards on the left, a CMS-managed promo image on the right.
   ============================================================ */
.wby-panel{display:grid;gap:34px;padding:28px 30px}
.wby-panel--split{grid-template-columns:minmax(0,1.6fr) minmax(220px,.9fr)}
.wby-panel--full{grid-template-columns:minmax(0,1fr)}
.wby-panel-cards{display:grid;gap:22px;min-width:0}
.wby-panel-grid{display:grid;gap:12px}
.wby-panel-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid;flex:0 0 auto}
.wby-panel-promo{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;background:linear-gradient(160deg,#F3F8FD,#E9F2FA);border:1px solid #E1EBF5;min-width:0}
.wby-panel-promo-img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:12px;display:block;background:#E7EFF7}
.wby-panel-promo-title{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:700;color:#0E2A48;line-height:1.3}
.wby-panel-promo-text{font-size:13px;line-height:1.55;color:#5F7490}
.wby-panel-promo-cta{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-size:13.5px;font-weight:700;color:#166FA8}
.wby-panel-promo-cta:hover{gap:11px}
@media (max-width:1199.98px){.wby-panel--split{grid-template-columns:minmax(0,1fr)}.wby-panel-promo{flex-direction:row;align-items:center}.wby-panel-promo-img{width:140px;flex:0 0 auto}}
/* ------------------------------------------------------------------ sitemap
   The visitor-facing directory (template: sitemap). Its banner reuses the
   policy hero (wp-policy, in web-hosting.css); the cards below follow the
   light surface + gradient-accent idiom. */
.wsm-links{padding:64px 0 90px}
.wsm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:24px}
.wsm-card{background:#F8F9FE;border:1px solid #E8EBF8;border-radius:16px;padding:26px 26px 20px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.wsm-card:hover{transform:translateY(-4px);border-color:#D7DDF6;
  box-shadow:0 18px 40px -18px rgba(23,42,84,.22)}
.wsm-card-title{display:flex;align-items:center;gap:10px;margin:0 0 6px;
  color:#0E2A48;font-size:1.22rem;font-weight:800;padding-bottom:12px;position:relative}
.wsm-card-title::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  border-radius:2px;background:linear-gradient(90deg,#189CCC,#6D5BF6 60%,transparent)}
.wsm-card-icon{display:inline-flex;color:#4553C8;flex:none}
.wsm-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.wsm-link{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;
  color:#33415C;font-size:.95rem;font-weight:500;text-decoration:none;
  transition:color .18s ease,background .18s ease,transform .18s ease}
.wsm-link:hover{color:#0E2A48;background:#EEF2FD;transform:translateX(3px)}
.wsm-link-icon{display:inline-flex;color:#8A95B5;flex:none;transition:color .18s ease}
.wsm-link:hover .wsm-link-icon{color:#189CCC}
@media (max-width:640px){.wsm-links{padding:44px 0 64px}}
@media (prefers-reduced-motion:reduce){.wsm-card,.wsm-link{transition:none}}
/* ---------------------------------------------------------------- 404 page
   Light edition: gradient glass digits, a glossy 3D planet with orbit ring
   and satellite in place of the zero, pastel blobs + particle field behind,
   pointer tilt on the whole scene. No libraries — hand-rolled transforms. */
.wnf-stage{position:relative;overflow:hidden;text-align:center;
  padding:clamp(60px,9vw,110px) 0 clamp(70px,10vw,120px);
  background:linear-gradient(180deg,#F8FBFF 0%,#EFF5FC 55%,#E9F1FA 100%)}
.wnf-grid{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(24,110,170,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 85% at 50% 30%,#000 35%,transparent 100%);
  mask-image:radial-gradient(75% 85% at 50% 30%,#000 35%,transparent 100%)}
.wnf-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.wnf-blob-a{width:480px;height:480px;left:-140px;top:-120px;
  background:radial-gradient(circle,rgba(24,156,204,.16),transparent 70%);
  animation:wnfBlob 12s ease-in-out infinite alternate}
.wnf-blob-b{width:520px;height:520px;right:-160px;bottom:-180px;
  background:radial-gradient(circle,rgba(109,91,246,.14),transparent 70%);
  animation:wnfBlob 14s ease-in-out infinite alternate-reverse}
}
.wnf-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.wnf-stage .container{position:relative;z-index:1}
/* Entrance stagger */
.wnf-in{opacity:0;animation:wnfIn .7s cubic-bezier(.2,.8,.2,1) forwards}
.wnf-in-1{animation-delay:.05s}
.wnf-in-2{animation-delay:.18s}
.wnf-in-3{animation-delay:.34s}
.wnf-in-4{animation-delay:.5s}
}

/* Breadcrumb + pill */
.wnf-crumbs{display:flex;justify-content:center;gap:10px;margin-bottom:16px;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FA3BC}
.wnf-crumbs a{color:#189CCC;text-decoration:none}
.wnf-crumbs a:hover{color:#0E7EA9}
.wnf-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
  padding:8px 18px;border-radius:999px;background:#fff;border:1px solid #DFE9F6;
  box-shadow:0 10px 26px -14px rgba(23,58,110,.25);
  color:#33507A;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wnf-pill-dot{width:8px;height:8px;border-radius:50%;
  background:linear-gradient(90deg,#189CCC,#6D5BF6)}
/* Scene + pointer tilt */
.wnf-scene{perspective:950px;margin:6px 0 0}
.wnf-tilt{transform-style:preserve-3d;will-change:transform}
/* 4 - planet - 4 */
.wnf-code{display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,5vw,46px);margin:0;transform-style:preserve-3d}
.wnf-digit{font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(5.5rem,17vw,10rem);
  background:linear-gradient(150deg,#2BB1E4 10%,#4553C8 60%,#6D5BF6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.9)) drop-shadow(0 18px 26px rgba(69,83,200,.28));
  animation:wnfFloat 5.2s ease-in-out infinite alternate}
.wnf-d2{animation-delay:-2.6s}
}

/* The planet */
.wnf-orb-wrap{--wnfO:clamp(96px,15vw,150px);
  position:relative;width:var(--wnfO);height:var(--wnfO)}
.wnf-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:2;
  background:radial-gradient(circle at 32% 26%,#BFEAFF 0%,#4FC0EE 38%,#2E7FD6 68%,#4553C8 100%);
  box-shadow:inset -14px -18px 34px rgba(20,60,130,.35),
    inset 10px 12px 24px rgba(255,255,255,.35),
    0 26px 48px -18px rgba(46,110,190,.45);
  animation:wnfBob 5.2s ease-in-out infinite alternate}
}
.wnf-orb-shine{position:absolute;left:14%;top:10%;width:34%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.85),transparent 70%);
  transform:rotate(-24deg)}
.wnf-orb-band{position:absolute;left:-12%;right:-12%;height:14%;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.wnf-band-1{top:38%;transform:rotate(-8deg)}
.wnf-band-2{top:62%;transform:rotate(-6deg);opacity:.6}
/* Orbit ring: back half behind the planet, front half in front of it */
.wnf-ring{position:absolute;left:-32%;right:-32%;top:50%;height:38%;
  transform:translateY(-50%) rotate(-14deg);border-radius:50%;
  border:3px solid rgba(109,91,246,.5);
  box-shadow:0 0 18px rgba(109,91,246,.18)}
.wnf-ring-back{z-index:1;clip-path:inset(0 0 52% 0)}
.wnf-ring-front{z-index:3;clip-path:inset(48% 0 0 0);border-color:rgba(109,91,246,.65)}
/* Satellite: traces the ring ellipse via keyframed translate; dims and
   shrinks on the far half so it reads as passing behind the planet. */
.wnf-sat-orbit{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;
  transform:rotate(-14deg)}
.wnf-sat{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#2BB1E4 70%);
  box-shadow:0 0 12px rgba(43,177,228,.8);
  animation:wnfSat 7s linear infinite}
}

/* Grounding shadow */
.wnf-orb-shadow{position:absolute;left:4%;right:4%;bottom:-26%;height:16%;
  border-radius:50%;filter:blur(8px);z-index:0;
  background:radial-gradient(ellipse,rgba(46,90,160,.30),transparent 70%);
  animation:wnfShadow 5.2s ease-in-out infinite alternate}
}

/* Copy + the one exit */
.wnf-lede{max-width:520px;margin:26px auto 0;color:#4A5F78;font-size:1.04rem;line-height:1.7}
.wnf-actions{display:flex;justify-content:center;margin-top:28px}
.wnf-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  padding:15px 34px;border-radius:14px;font-weight:700;font-size:1rem;
  text-decoration:none;color:#fff;background:linear-gradient(90deg,#189CCC,#6D5BF6);
  box-shadow:0 18px 34px -14px rgba(69,83,200,.55);
  transition:transform .2s ease,box-shadow .2s ease}
.wnf-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .45s ease}
.wnf-btn:hover{color:#fff;transform:translateY(-2px);
  box-shadow:0 24px 44px -14px rgba(109,91,246,.6)}
.wnf-btn:hover::after{left:120%}
@media (max-width:640px){.wnf-lede{font-size:.96rem;margin-top:20px}.wnf-actions{margin-top:24px}}
@media (prefers-reduced-motion:reduce){.wnf-in{animation:none;opacity:1}.wnf-digit,.wnf-orb,.wnf-sat,.wnf-orb-shadow,.wnf-blob{animation:none}.wnf-sat{transform:translate(calc(var(--wnfO)*.82),0)}.wnf-btn{transition:none}.wnf-btn::after{display:none}}