/*
Theme Name: VishBill Child
Theme URI: https://vishbill.com
Description: Flat, curvy, off-white child theme of Hello Elementor for vishbill.com. Scroll animations via GSAP + Lenis. Works with Elementor via CSS classes (see README).
Author: VishBill
Template: hello-elementor
Version: 1.5.0
Text Domain: vishbill-child
*/

/* ---------- Tokens ---------- */
:root{
  /* Brand matrix tokens */
  --color-ground-saturn:#1a1d20;
  --color-canvas-moon:#f8f9fa;
  --color-line-venus:#d1d5db;
  --color-kinetic-mars:#991b1b;
  --color-bridge-mercury:#335c4d;

  /* Functional mappings */
  --bg-primary:var(--color-canvas-moon);
  --text-primary:var(--color-ground-saturn);
  --text-body:#374151;
  --border-agamic:1px solid var(--color-line-venus);
  --cta-primary:var(--color-kinetic-mars);
  --accent-interactive:var(--color-bridge-mercury);

  /* Legacy aliases used by the animation/layout classes */
  --wb-bg:var(--bg-primary);
  --wb-ink:var(--text-primary);
  --wb-mute:var(--text-body);
  --wb-line:var(--color-line-venus);
  --wb-r-xl:72px;
  --wb-r-lg:40px;
  --wb-r-md:24px;
  --wb-font-head:'Sora',system-ui,sans-serif;
  --wb-font-body:'Inter',system-ui,sans-serif;
  --wb-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg-primary);color:var(--text-body);font-family:var(--wb-font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.wb-head{font-family:var(--wb-font-head);color:var(--text-primary);letter-spacing:-.03em;line-height:1.05;font-weight:700}
::selection{background:var(--accent-interactive);color:#fff}
a{color:var(--text-primary)}

/* Hide Hello's default header/footer on our template */
body.wb-home .site-header,body.wb-home .site-footer,body.wb-home #site-header,body.wb-home #site-footer{display:none}

/* ---------- Progress + cursor (flat) ---------- */
.wb-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent-interactive);transform:scaleX(0);transform-origin:0 50%;z-index:9999}
.wb-cursor{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--text-primary);pointer-events:none;z-index:9998;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .3s var(--wb-ease),height .3s var(--wb-ease),background .3s}
.wb-cursor.is-hover{width:64px;height:64px;background:#fff}
@media (hover:none){.wb-cursor{display:none}}

/* ---------- Nav: flat, bordered ---------- */
.wb-nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:28px;padding:10px 12px 10px 26px;background:var(--bg-primary);border:var(--border-agamic);border-radius:999px}
.wb-nav a{color:var(--text-primary);text-decoration:none;font-size:14px;font-weight:500;transition:color .3s}
.wb-nav .wb-links a:hover{color:var(--accent-interactive)}
.wb-logo{font-family:var(--wb-font-head);font-weight:800;font-size:18px;letter-spacing:-.04em;color:var(--text-primary)}
.wb-logo span{color:inherit;background:none;-webkit-text-fill-color:currentColor}
.wb-nav .wb-links{display:flex;gap:22px}
@media(max-width:700px){.wb-nav .wb-links{display:none}}

/* ---------- Buttons ---------- */
.wb-btn,.elementor-button.wb-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;background:var(--text-primary);color:#fff!important;font-weight:600;text-decoration:none;border:1px solid var(--text-primary);box-shadow:none;transition:transform .4s var(--wb-ease),background .3s,border-color .3s,color .3s;will-change:transform}
.wb-btn:hover{background:var(--accent-interactive);border-color:var(--accent-interactive)}
.wb-btn--ghost{background:transparent;color:var(--text-primary)!important;border:var(--border-agamic);border-color:var(--text-primary)}
.wb-btn--ghost:hover{background:transparent;color:var(--accent-interactive)!important;border-color:var(--accent-interactive)}
/* Crimson: decisive actions only (CTA buttons, nav CTA, form submit) */
.wb-btn--cta,.wb-btn--grad{background:var(--cta-primary);border-color:var(--cta-primary)}
.wb-btn--cta:hover,.wb-btn--grad:hover{background:#7f1616;border-color:#7f1616}
.wb-btn--sm{padding:11px 20px;font-size:14px}

/* ---------- Layout ---------- */
.wb-section{position:relative;padding:120px 6vw;overflow:hidden}
.wb-wrap{max-width:1240px;margin:0 auto;position:relative;z-index:2}
.wb-eyebrow{display:inline-block;padding:7px 16px;border-radius:999px;background:transparent;border:1px solid var(--accent-interactive);color:var(--accent-interactive);font-size:13px;font-weight:600;margin-bottom:22px}
.wb-title{font-size:clamp(40px,7vw,104px)}
.wb-h2{font-size:clamp(34px,5vw,72px);margin:0 0 24px}
.wb-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--text-body);max-width:620px}
.wb-grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--accent-interactive)}

/* Curvy section shapes (flat, bordered) */
.wb-curve{border-radius:var(--wb-r-xl) var(--wb-r-xl) 0 0;border-top:var(--border-agamic)}
.wb-curve-both{border-radius:var(--wb-r-xl);border:var(--border-agamic)}
.wb-soft{background:#fff}
.wb-dark{background:var(--text-primary);color:#fff}
.wb-dark .wb-lead{color:var(--wb-line)}
.wb-wave{position:absolute;left:0;width:100%;line-height:0;z-index:1}
.wb-wave svg{display:block;width:100%;height:90px}
.wb-wave--top{top:-1px}.wb-wave--bottom{bottom:-1px;transform:rotate(180deg)}

/* Morphing shapes: flat outlines, no gradients or blur */
.wb-blob{position:absolute;width:520px;height:520px;opacity:1;z-index:0;pointer-events:none;background:transparent;border:1px solid var(--color-line-venus);border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;animation:wbMorph 14s ease-in-out infinite alternate}
.wb-blob.v,.wb-blob.c,.wb-blob.m{background:transparent}
.wb-blob.m{border-color:var(--accent-interactive);opacity:.35}
@keyframes wbMorph{0%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}50%{border-radius:61% 39% 35% 65%/56% 62% 38% 44%}100%{border-radius:35% 65% 54% 46%/63% 38% 62% 37%}}

/* Hero */
.wb-hero{min-height:100vh;display:flex;align-items:center;padding-top:160px}
.wb-hero .wb-title .w{display:inline-block;overflow:hidden;vertical-align:top}
.wb-hero .wb-title .w>span{display:inline-block;transform:translateY(110%)}
.wb-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.wb-badge-spin{position:absolute;right:6vw;bottom:80px;width:150px;height:150px;border-radius:50%;background:transparent;border:var(--border-agamic);display:grid;place-items:center;color:var(--text-primary);font-weight:700;text-align:center;font-size:14px;animation:wbSpin 18s linear infinite;z-index:2}
@keyframes wbSpin{to{transform:rotate(360deg)}}

/* Marquee */
.wb-marquee{overflow:hidden;white-space:nowrap;padding:28px 0;border-block:var(--border-agamic);background:#fff}
.wb-marquee-track{display:inline-flex;gap:60px;font-family:var(--wb-font-head);color:var(--text-primary);font-size:clamp(28px,4vw,56px);font-weight:700;letter-spacing:-.03em}
.wb-marquee-track span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--text-primary)}

/* Scrub text */
.wb-scrub{font-family:var(--wb-font-head);color:var(--text-primary);font-size:clamp(28px,4.4vw,64px);line-height:1.2;letter-spacing:-.03em;font-weight:600;max-width:1100px}
.wb-scrub .sw{opacity:.18;display:inline-block;margin-right:.25em}

/* Cards: flat, 1px Platinum border, no shadow */
.wb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.wb-card{background:#fff;border:var(--border-agamic);border-radius:var(--wb-r-lg);padding:38px;box-shadow:none;transition:border-color .4s var(--wb-ease);transform-style:preserve-3d;will-change:transform}
.wb-card:hover{border-color:var(--accent-interactive);box-shadow:none}
.wb-card .ico{width:56px;height:56px;border-radius:20px 20px 20px 6px;background:transparent;border:1px solid var(--accent-interactive);display:grid;place-items:center;color:var(--accent-interactive);font-size:24px;margin-bottom:26px}
.wb-card h3{font-size:26px;margin:0 0 12px}
.wb-card p{color:var(--text-body);line-height:1.65;margin:0}
.wb-card ul{margin:18px 0 0;padding:0;list-style:none;color:var(--text-primary)}
.wb-card li{padding:8px 0;border-top:var(--border-agamic);font-size:15px}
.wb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wb-pills span{padding:5px 12px;border-radius:999px;background:rgba(51,92,77,.08);border:1px solid rgba(51,92,77,.25);color:var(--accent-interactive);font-size:12px;font-weight:600;transition:background .3s,color .3s}
.wb-pills span:hover{background:var(--accent-interactive);color:#fff}

/* Horizontal showcase: flat tiles */
.wb-hscroll{overflow:hidden;background:#fff;border-block:var(--border-agamic)}
.wb-hpin{height:100vh;display:flex;align-items:center}
.wb-htrack{display:flex;gap:34px;padding:0 6vw;will-change:transform}
.wb-hitem{flex:0 0 min(460px,78vw);height:min(560px,68vh);border-radius:var(--wb-r-xl) var(--wb-r-xl) var(--wb-r-xl) 12px;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--text-body);background:var(--bg-primary);border:var(--border-agamic);position:relative;overflow:hidden;transition:border-color .4s var(--wb-ease)}
.wb-hitem:hover{border-color:var(--accent-interactive)}
.wb-hitem:nth-child(3n+1),.wb-hitem:nth-child(3n+2),.wb-hitem:nth-child(3n+3){background:var(--bg-primary)}
.wb-hitem h3{font-size:34px;margin:0 0 8px}
.wb-hitem small{color:var(--accent-interactive);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.wb-hitem::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:transparent;border:var(--border-agamic)}

/* Stats */
.wb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;text-align:center}
.wb-stat b{display:block;font-family:var(--wb-font-head);color:var(--text-primary);font-size:clamp(48px,7vw,96px);letter-spacing:-.04em}

/* Steps */
.wb-steps{display:grid;gap:22px;counter-reset:s}
.wb-step{counter-increment:s;display:grid;grid-template-columns:90px 1fr;gap:20px;padding:34px;border-radius:var(--wb-r-lg);background:var(--bg-primary);border:var(--border-agamic)}
.wb-step::before{content:"0" counter(s);font-family:var(--wb-font-head);font-size:44px;font-weight:800;color:var(--accent-interactive)}
.wb-step h3{margin:0 0 8px;font-size:24px}.wb-step p{margin:0;color:var(--text-body)}

/* CTA + form */
.wb-cta{text-align:center}
.wb-cta .wb-h2{font-size:clamp(44px,8vw,120px)}
.wb-cta input,.wb-cta textarea{background:#fff;color:var(--text-primary);font:inherit;outline:0;box-shadow:none;transition:border-color .3s}
.wb-cta input:focus,.wb-cta textarea:focus{border-color:var(--accent-interactive)!important}
.wb-footer{padding:40px 6vw;text-align:center;color:var(--text-body);font-size:14px;border-top:var(--border-agamic)}

/* ---------- Elementor helper classes (add in Advanced > CSS Classes) ---------- */
.wb-reveal,.wb-clip,.wb-stagger>*{will-change:transform,opacity}
.wb-round{border-radius:var(--wb-r-xl)!important;overflow:hidden}
.wb-round-lg{border-radius:var(--wb-r-lg)!important;overflow:hidden}
.wb-leaf{border-radius:var(--wb-r-xl) 8px var(--wb-r-xl) 8px!important;overflow:hidden}
.wb-glass{background:#fff!important;border:var(--border-agamic)}
.wb-pill{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(51,92,77,.08);border:1px solid rgba(51,92,77,.25);color:var(--accent-interactive);font-size:12px;font-weight:600}
body.elementor-editor-active .wb-hero .wb-title .w>span{transform:none}
body.elementor-editor-active .wb-scrub .sw{opacity:1}

@media (prefers-reduced-motion:reduce){
  .wb-blob,.wb-badge-spin{animation:none}
  .wb-hero .wb-title .w>span{transform:none}
  .wb-scrub .sw{opacity:1}
}
@media(max-width:700px){
  body{font-size:16px}
  .wb-section{padding:80px 5vw}
  :root{--wb-r-xl:44px;--wb-r-lg:28px}
  .wb-step{grid-template-columns:1fr}
  .wb-badge-spin{display:none}
}

/* ---------- v1.2: multi-page additions ---------- */
.wb-subhero{padding-top:190px;padding-bottom:90px}
.wb-title--sub{font-size:clamp(36px,5.6vw,80px);max-width:1000px}
.wb-link{color:var(--accent-interactive);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.wb-link:hover{border-color:var(--accent-interactive)}
.wb-pills--lg{margin-top:28px}
.wb-pills--lg span{padding:8px 16px;font-size:14px}
.wb-footer a{color:var(--text-body);text-decoration:none}.wb-footer a:hover{color:var(--accent-interactive)}
.wb-hitem p{margin:6px 0 0}
.wb-hitem .wb-link{display:inline-block;margin-top:14px}

/* Nav dropdown + burger */
.wb-dd{position:relative}
.wb-dd-menu{position:absolute;top:100%;left:-18px;min-width:210px;padding:12px;margin-top:14px;display:none;flex-direction:column;gap:2px;background:var(--bg-primary);border:var(--border-agamic);border-radius:24px}
.wb-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.wb-dd:hover .wb-dd-menu,.wb-dd:focus-within .wb-dd-menu{display:flex}
.wb-dd-menu a{padding:10px 14px;border-radius:14px;transition:background .3s,color .3s}
.wb-dd-menu a:hover{background:rgba(51,92,77,.08);color:var(--accent-interactive)}
.wb-burger{display:none;width:42px;height:42px;border:var(--border-agamic);border-radius:50%;background:transparent;cursor:pointer;position:relative;padding:0}
.wb-burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--text-primary);transition:transform .3s}
.wb-burger span:first-child{top:16px}.wb-burger span:last-child{top:24px}
.wb-nav.is-open .wb-burger span:first-child{transform:translateY(4px) rotate(45deg)}
.wb-nav.is-open .wb-burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:980px){
  .wb-nav{width:calc(100% - 32px);justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;flex-wrap:wrap;border-radius:32px}
  .wb-burger{display:block;margin-left:auto}
  .wb-nav-cta{display:none}
  .wb-nav .wb-links{display:none;order:5;flex-basis:100%;flex-direction:column;gap:4px;padding:12px 0 8px;border-top:var(--border-agamic)}
  .wb-nav.is-open .wb-links{display:flex}
  .wb-nav .wb-links>a,.wb-dd>a{padding:10px 4px;font-size:16px}
  .wb-dd-menu{position:static;display:flex;margin:0;padding:0 0 0 14px;border:0;min-width:0}
  .wb-dd-menu::before{display:none}
}

/* Forms */
.wb-form{display:grid;gap:18px;max-width:640px;margin-top:40px;text-align:left}
.wb-form label{display:grid;gap:8px;font-size:14px;font-weight:600;color:var(--text-primary)}
.wb-form input,.wb-form select,.wb-form textarea{padding:16px 22px;border-radius:28px;border:var(--border-agamic);background:#fff;color:var(--text-primary);font:inherit;font-weight:400;outline:0;box-shadow:none;transition:border-color .3s}
.wb-form input:focus,.wb-form select:focus,.wb-form textarea:focus{border-color:var(--accent-interactive)}

/* Calendly embed */
.wb-embed{border:var(--border-agamic);border-radius:var(--wb-r-lg);overflow:hidden;background:#fff}
.wb-embed iframe{display:block;width:100%;height:760px;border:0}

/* ---------- v1.3: static inner pages (no parallax) ---------- */
.wb-crumbs{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:112px 6vw 0}
.wb-crumbs nav{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--text-body)}
.wb-crumbs a{color:var(--text-body);text-decoration:none}.wb-crumbs a:hover{color:var(--accent-interactive)}
.wb-crumbs i{font-style:normal;color:var(--color-line-venus)}
.wb-crumbs [aria-current]{color:var(--text-primary);font-weight:600}
.wb-inner .wb-subhero{padding-top:40px;padding-bottom:70px}
.wb-inner .wb-blob{display:none}
.wb-inner .wb-section{padding-top:96px;padding-bottom:96px}
.wb-inner .wb-subhero{padding-top:40px;padding-bottom:70px}
.wb-inner .wb-curve{border-radius:var(--wb-r-xl) var(--wb-r-xl) 0 0}
.wb-prose{max-width:760px}
.wb-prose h2{font-size:clamp(28px,3.4vw,44px);margin:48px 0 16px}
.wb-prose h3{font-size:24px;margin:36px 0 12px}
.wb-prose p,.wb-prose li{font-size:17px;line-height:1.7}
.wb-prose a{color:var(--accent-interactive)}
@media(max-width:700px){.wb-crumbs{padding-top:96px}}

/* =====================================================================
   v1.4: AI look — robot mascot, orbit chips, chat mockup, neural canvas
   ===================================================================== */
:root{--color-jade-light:#8fd3b6}

/* Split hero layout */
.wb-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;width:100%}
.wb-copy{min-width:0}
.wb-hero .wb-title{font-size:clamp(38px,5.4vw,84px)}
.wb-hero{padding-top:150px}
.wb-eyebrow{display:inline-flex;align-items:center;gap:8px}
.wb-live{width:8px;height:8px;border-radius:50%;background:var(--accent-interactive);animation:wbLive 1.8s ease-out infinite}
@keyframes wbLive{0%{box-shadow:0 0 0 0 rgba(51,92,77,.5)}100%{box-shadow:0 0 0 10px rgba(51,92,77,0)}}
.wb-eyebrow--dark{border-color:var(--color-jade-light);color:var(--color-jade-light)}

/* Dot-grid canvas background (flat, drifting) */
.wb-dots::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,var(--color-line-venus) 1.3px,transparent 1.7px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at 72% 45%,#000 0,transparent 68%);mask-image:radial-gradient(ellipse at 72% 45%,#000 0,transparent 68%);animation:wbDrift 40s linear infinite}
@keyframes wbDrift{to{background-position:300px 150px}}
.wb-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Rotating headline word */
.wb-rotor{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.wb-rotor>span{grid-area:1/1;white-space:nowrap;opacity:0;animation:wbRot 12.5s cubic-bezier(.22,1,.36,1) infinite both}
.wb-rotor>span:nth-child(2){animation-delay:2.5s}.wb-rotor>span:nth-child(3){animation-delay:5s}
.wb-rotor>span:nth-child(4){animation-delay:7.5s}.wb-rotor>span:nth-child(5){animation-delay:10s}
@keyframes wbRot{0%{transform:translateY(105%);opacity:0}3.5%{transform:none;opacity:1}16%{transform:none;opacity:1}20%{transform:translateY(-105%);opacity:0}100%{transform:translateY(-105%);opacity:0}}

/* Visual stage */
.wb-visual{--s:100cqw;container-type:inline-size;position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:center}
.wb-ring{position:absolute;top:50%;left:50%;translate:-50% -50%;border-radius:50%;border:1px dashed var(--color-line-venus)}
.wb-ring--a{width:84%;height:84%;animation:wbSpin 60s linear infinite}
.wb-ring--b{width:60%;height:60%;border-style:dotted;animation:wbSpin 40s linear infinite reverse}
.wb-orbit{position:absolute;inset:0;animation:wbSpin 36s linear infinite}
.wb-chip{position:absolute;top:50%;left:50%;width:0;height:0;transform:rotate(var(--a)) translateX(42cqw)}
.wb-chip i{display:block;position:relative;width:0;height:0;transform:rotate(calc(-1 * var(--a)))}
.wb-chip b{position:absolute;left:0;top:0;translate:-50% -50%;white-space:nowrap;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--color-line-venus);color:var(--text-primary);font:600 13px/1 var(--wb-font-body);animation:wbUnspin 36s linear infinite}
.wb-chip:nth-child(odd) b{border-color:var(--accent-interactive);color:var(--accent-interactive)}
@keyframes wbUnspin{to{transform:rotate(-360deg)}}

/* Robot */
.wb-bot{position:absolute;left:50%;top:50%;width:60%;translate:-50% -50%}
.wb-bot svg{display:block;width:100%;height:auto;overflow:visible;animation:wbBob 4.2s ease-in-out infinite}
@keyframes wbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.wb-eye{transform-box:fill-box;transform-origin:center;animation:wbBlink 5.5s infinite}
@keyframes wbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.wb-pupil{animation:wbLook 8s ease-in-out infinite}
@keyframes wbLook{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-2px)}50%{transform:translate(-4px,1px)}75%{transform:translate(2px,3px)}}
.wb-bot.is-tracking .wb-pupil{animation:none;transition:transform .12s}
.wb-eq{transform-box:fill-box;transform-origin:50% 100%;animation:wbEq 1.3s ease-in-out infinite}
@keyframes wbEq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.wb-arm-r{transform-box:view-box;transform-origin:272px 248px;animation:wbWave 2.6s ease-in-out infinite}
@keyframes wbWave{0%,100%{transform:rotate(0)}30%{transform:rotate(-38deg)}50%{transform:rotate(-14deg)}70%{transform:rotate(-38deg)}}
.wb-arm-l{transform-box:view-box;transform-origin:128px 248px;animation:wbSway 5s ease-in-out infinite}
@keyframes wbSway{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.wb-ping{transform-box:fill-box;transform-origin:center;animation:wbPing 2s ease-out infinite}
@keyframes wbPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.wb-spark{transform-box:fill-box;transform-origin:center;animation:wbTwinkle 2.8s ease-in-out infinite}
.wb-spark.s2{animation-delay:.9s}.wb-spark.s3{animation-delay:1.7s}
@keyframes wbTwinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.2) rotate(90deg);opacity:1}}

/* AI chat mockup */
.wb-visual.has-chat .wb-bot{left:62%;width:52%}
.wb-chat{position:absolute;left:-6%;top:2%;z-index:3;width:min(300px,58%);background:#fff;border:1px solid var(--color-line-venus);border-radius:26px;padding:0 0 12px;overflow:hidden}
.wb-chat-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--color-line-venus);font-size:12px;font-weight:600;color:var(--text-primary)}
.wb-chat-bar i{width:8px;height:8px;border-radius:50%;background:var(--color-line-venus)}
.wb-chat-bar span{margin-left:6px;color:var(--accent-interactive)}
.wb-chat-body{padding:14px 16px 4px;font-size:13px;line-height:1.5;color:var(--text-body)}
.wb-chat p{margin:0}
.wb-chat .u{margin-left:auto;max-width:88%;padding:9px 13px;border-radius:18px 18px 4px 18px;background:var(--text-primary);color:#fff;animation:wbMsgU 13s ease infinite}
.wb-chat-stack{display:grid;margin-top:10px;min-height:96px}
.wb-chat-stack>*{grid-area:1/1}
.wb-chat .t{align-self:start;display:flex;gap:5px;padding:12px 14px;width:max-content;border-radius:18px 18px 18px 4px;background:rgba(51,92,77,.08);animation:wbMsgT 13s ease infinite}
.wb-chat .t b{width:6px;height:6px;border-radius:50%;background:var(--accent-interactive);animation:wbDot 1s ease-in-out infinite}
.wb-chat .t b:nth-child(2){animation-delay:.15s}.wb-chat .t b:nth-child(3){animation-delay:.3s}
@keyframes wbDot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.wb-chat .a{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:18px 18px 18px 4px;background:rgba(51,92,77,.08);color:var(--text-primary);animation:wbMsgA 13s ease infinite}
.wb-chat .who{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-interactive);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800}
.wb-chat em{font-style:normal;font-weight:700;color:var(--accent-interactive);border-bottom:2px solid var(--accent-interactive)}
.wb-chat sup{color:var(--accent-interactive);font-weight:700}
.wb-chat small{display:block;padding:4px 16px 0;font-size:10px;color:#9ca3af}
@keyframes wbMsgU{0%{opacity:0;transform:translateY(10px)}4%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes wbMsgT{0%,6%{opacity:0}8%,19%{opacity:1}21%,100%{opacity:0}}
@keyframes wbMsgA{0%,20%{opacity:0;transform:translateY(10px)}24%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* Dark "how AI finds you" band */
.wb-flow-sec{background:var(--text-primary);color:#fff;border:0}
.wb-flow-sec .wb-h2{color:#fff}
.wb-flow-sec .wb-grad-text{color:var(--color-jade-light)}
.wb-net--dark{opacity:.9}
.wb-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px}
.wb-node{position:relative;padding:0 26px 0 0}
.wb-node h3{color:#fff;font-size:21px;margin:22px 0 8px}
.wb-node p{margin:0;color:#b6bcc6;font-size:15px;line-height:1.6}
.wb-node-ico{position:relative;width:64px;height:64px;border-radius:22px 22px 22px 6px;border:1px solid var(--color-jade-light);display:grid;place-items:center;background:var(--text-primary);z-index:1}
.wb-node-ico svg{width:28px;height:28px;fill:none;stroke:var(--color-jade-light);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wb-node:not(:last-child)::before{content:"";position:absolute;left:64px;right:0;top:32px;height:2px;background-image:repeating-linear-gradient(90deg,rgba(143,211,182,.55) 0 8px,transparent 8px 16px);background-size:16px 2px;animation:wbDash 1s linear infinite}
.wb-node:not(:last-child)::after{content:"";position:absolute;top:28px;left:64px;width:10px;height:10px;border-radius:50%;background:var(--color-jade-light);animation:wbPacket 2.4s linear infinite}
.wb-node:nth-child(2)::after{animation-delay:.6s}.wb-node:nth-child(3)::after{animation-delay:1.2s}
@keyframes wbDash{to{background-position:16px 0}}
@keyframes wbPacket{0%{left:64px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.wb-btn--light{background:transparent;color:#fff!important;border:1px solid var(--color-jade-light)}
.wb-btn--light:hover{background:var(--color-jade-light);color:var(--text-primary)!important;border-color:var(--color-jade-light)}

/* Card + button polish */
.wb-card{position:relative}
.wb-card::before{content:"✦";position:absolute;top:26px;right:30px;color:var(--accent-interactive);font-size:18px;transition:transform .7s var(--wb-ease)}
.wb-card:has(.ico)::before{display:none}
.wb-card:hover::before,.wb-card:hover .ico{transform:rotate(180deg) scale(1.15)}
.wb-card .ico{transition:transform .7s var(--wb-ease)}
.wb-inner .wb-card{transition:transform .5s var(--wb-ease),border-color .4s}
.wb-inner .wb-card:hover{transform:translateY(-6px)}
.wb-marquee-track span::after{content:"✦";display:inline-block;margin-left:60px;color:var(--accent-interactive);font-size:.5em;vertical-align:middle;-webkit-text-stroke:0}
.wb-btn--cta:hover{transform:translateY(-2px)}

/* Responsive */
@media(max-width:980px){
  .wb-split{grid-template-columns:1fr;gap:20px}
  .wb-visual{max-width:380px}
  .wb-chat{position:relative;left:0;top:0;width:auto;margin-top:-30px}
  .wb-visual.has-chat .wb-bot{left:50%;width:60%}
  .wb-flow{grid-template-columns:1fr;gap:36px}
  .wb-node{padding:0 0 0 0}
  .wb-node:not(:last-child)::before,.wb-node:not(:last-child)::after{display:none}
}
@media(max-width:700px){.wb-hero{padding-top:120px}.wb-chip b{font-size:11px;padding:6px 11px}}
@media (prefers-reduced-motion:reduce){
  .wb-ring,.wb-orbit,.wb-chip b,.wb-bot svg,.wb-eye,.wb-pupil,.wb-eq,.wb-arm-r,.wb-arm-l,.wb-ping,.wb-spark,.wb-dots::before,.wb-node::before,.wb-node::after,.wb-live{animation:none!important}
  .wb-rotor>span{animation:none;opacity:0}.wb-rotor>span:first-child{opacity:1}
  .wb-chat .u,.wb-chat .a{animation:none;opacity:1}.wb-chat .t{display:none}
}

/* =====================================================================
   v1.5: text-only blog (index, cards, single post, TOC, FAQ)
   ===================================================================== */
.wb-narrow{max-width:860px}
.wb-title--post{font-size:clamp(32px,4.8vw,62px);max-width:900px}
.wb-post-head{padding-top:30px;padding-bottom:50px}
.wb-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
a.wb-pill{text-decoration:none;transition:background .3s,color .3s}
a.wb-pill:hover{background:var(--accent-interactive);color:#fff}
.wb-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:26px;font-size:14px;color:var(--text-body)}
.wb-meta>*+*{position:relative}
.wb-meta>*+*::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--color-line-venus)}

.wb-readbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent-interactive);transform:scaleX(0);transform-origin:0 50%;z-index:9999}

/* Post body layout: sticky TOC + reading column */
.wb-post-body{padding-top:20px}
.wb-post-grid{display:grid;grid-template-columns:minmax(0,740px);justify-content:center;gap:40px}
.wb-post-grid.has-toc{grid-template-columns:240px minmax(0,740px);gap:64px}
.wb-toc{position:sticky;top:110px;align-self:start;max-height:calc(100vh - 140px);overflow:auto;padding-right:8px;font-size:14px}
.wb-toc-t{margin:0 0 12px;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-interactive)}
.wb-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--color-line-venus)}
.wb-toc li a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--text-body);text-decoration:none;line-height:1.4;transition:color .3s,border-color .3s}
.wb-toc li.l3 a{padding-left:30px;font-size:13px}
.wb-toc li a:hover,.wb-toc li a.is-active{color:var(--text-primary);border-left-color:var(--accent-interactive)}
.wb-toc li a.is-active{font-weight:600}

/* Article typography (text-only: type does the work) */
.wb-article{max-width:none}
.wb-article>*:first-child{margin-top:0}
.wb-article h2{scroll-margin-top:110px;margin:56px 0 18px;padding-top:12px;border-top:var(--border-agamic)}
.wb-article h3{scroll-margin-top:110px}
.wb-article p,.wb-article li{font-size:18px;line-height:1.75}
.wb-article ul,.wb-article ol{padding-left:1.3em}
.wb-article li{margin:6px 0}
.wb-article li::marker{color:var(--accent-interactive)}
.wb-article blockquote{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--accent-interactive);color:var(--text-primary);font:600 22px/1.45 var(--wb-font-head)}
.wb-article blockquote p{font:inherit}
.wb-article table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;margin:28px 0;font-size:16px}
.wb-article th,.wb-article td{padding:12px 16px;border:var(--border-agamic);text-align:left}
.wb-article th{background:#fff;color:var(--text-primary)}
.wb-article code{padding:2px 7px;border-radius:8px;background:rgba(51,92,77,.08);font-size:.9em}
.wb-article pre{overflow-x:auto;padding:20px 24px;border-radius:24px;background:var(--text-primary);color:#e5e7eb;font-size:14px;line-height:1.6}
.wb-article pre code{padding:0;background:none;color:inherit}
.wb-article hr{border:0;border-top:var(--border-agamic);margin:48px 0}

/* FAQ accordion */
.wb-faq{display:grid;gap:12px;margin-top:24px}
.wb-faq-item{border:var(--border-agamic);border-radius:24px;background:#fff;transition:border-color .3s}
.wb-faq-item[open]{border-color:var(--accent-interactive)}
.wb-faq-item summary{position:relative;list-style:none;cursor:pointer;padding:20px 58px 20px 24px;font:600 18px/1.4 var(--wb-font-head);color:var(--text-primary)}
.wb-faq-item summary::-webkit-details-marker{display:none}
.wb-faq-item summary::after{content:"+";position:absolute;right:22px;top:50%;translate:0 -50%;width:28px;height:28px;border-radius:50%;border:1px solid var(--accent-interactive);color:var(--accent-interactive);display:grid;place-items:center;font:400 18px/1 var(--wb-font-body);transition:transform .4s var(--wb-ease),background .3s,color .3s}
.wb-faq-item[open] summary::after{content:"−";background:var(--accent-interactive);color:#fff}
.wb-faq-item summary:focus-visible{outline:2px solid var(--accent-interactive);outline-offset:3px;border-radius:24px}
.wb-faq-a{padding:0 24px 20px}
.wb-faq-a>*:first-child{margin-top:0}.wb-faq-a>*:last-child{margin-bottom:0}
.wb-faq-a p{font-size:17px}

/* Post cards (no images: type + a small flat corner motif) */
.wb-catnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.wb-catnav a{padding:8px 18px;border-radius:999px;border:var(--border-agamic);background:var(--bg-primary);color:var(--text-primary);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .3s,color .3s,background .3s}
.wb-catnav a:hover{border-color:var(--accent-interactive);color:var(--accent-interactive)}
.wb-catnav a[aria-current]{background:var(--text-primary);border-color:var(--text-primary);color:#fff}
.wb-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.wb-pgrid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:32px}
.wb-pcard{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px;border:var(--border-agamic);border-radius:var(--wb-r-lg);background:#fff;overflow:hidden;transition:border-color .4s var(--wb-ease),transform .5s var(--wb-ease)}
.wb-pcard::after{content:"";position:absolute;right:-46px;top:-46px;width:130px;height:130px;border-radius:50%;border:var(--border-agamic);transition:transform .8s var(--wb-ease),border-color .4s}
.wb-pcard:nth-child(3n+2)::after{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}
.wb-pcard:nth-child(3n)::after{border-radius:30px 0 30px 0}
.wb-pcard:hover{border-color:var(--accent-interactive);transform:translateY(-5px)}
.wb-pcard:hover::after{transform:scale(1.5) rotate(40deg);border-color:var(--accent-interactive)}
.wb-pcard .wb-pill{align-self:flex-start;position:relative;z-index:1}
.wb-pcard h3{margin:0;font-size:24px;line-height:1.2;position:relative;z-index:1}
.wb-pcard h3 a{color:var(--text-primary);text-decoration:none}
.wb-pcard h3 a::before{content:"";position:absolute;inset:-200px -200px -200px -200px;z-index:2}
.wb-pcard p{margin:0;color:var(--text-body);font-size:16px;line-height:1.65;position:relative;z-index:1}
.wb-pmeta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto;padding-top:6px;font-size:13px;color:var(--text-body)}
.wb-pmore{margin-left:auto;font-weight:600;color:var(--accent-interactive);transition:transform .4s var(--wb-ease)}
.wb-pcard:hover .wb-pmore{transform:translateX(5px)}
@media(min-width:1000px){.wb-pgrid:not(.wb-pgrid--3) .wb-pcard:first-child{grid-column:span 2}.wb-pgrid:not(.wb-pgrid--3) .wb-pcard:first-child h3{font-size:34px}}
.navigation.pagination{margin-top:44px}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.navigation.pagination .page-numbers{padding:10px 18px;border-radius:999px;border:var(--border-agamic);background:#fff;color:var(--text-primary);text-decoration:none;font-weight:600;font-size:14px}
.navigation.pagination .page-numbers.current,.navigation.pagination a.page-numbers:hover{background:var(--text-primary);border-color:var(--text-primary);color:#fff}

@media(max-width:1000px){
  .wb-post-grid.has-toc{grid-template-columns:minmax(0,740px);gap:28px}
  .wb-toc{position:static;max-height:none;padding:20px 22px;border:var(--border-agamic);border-radius:24px;background:#fff}
}
@media(max-width:700px){.wb-article p,.wb-article li{font-size:17px}.wb-article blockquote{font-size:19px}}