*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #040710;--bg-alt: #08111d;--surface: rgba(255,255,255,.03);--surface-hover: rgba(255,255,255,.06);--border: rgba(255,255,255,.08);--fg: #edf4ff;--muted: #7a9cc4;--accent: #dc2726;--accent-dim: rgba(220,39,38,.18);--ocean: #47c6ff;--ocean-dim: rgba(71,198,255,.14);--radius: 18px;--radius-lg: 28px}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}.site{display:flex;flex-direction:column;min-height:100vh}main{flex:1}a{color:inherit;text-decoration:none}img{max-width:100%}.container{max-width:1200px;margin:0 auto;padding:0 24px}.section{padding:80px 0}.section-sm{padding:48px 0}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.display{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1.05}.display-sm{font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1}.lead{font-size:18px;line-height:1.7;color:var(--muted)}.body-sm{font-size:14px;line-height:1.7;color:var(--muted)}.text-coral{background:linear-gradient(135deg,#dc2726,#ff9f6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-ocean{background:linear-gradient(135deg,#47c6ff,#a0e8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:all .18s;border:none;text-decoration:none}.btn-primary{background:linear-gradient(135deg,#dc2726,#e85d54);color:#fff;box-shadow:0 8px 24px #dc272640}.btn-primary:hover{background:linear-gradient(135deg,#ff7a71,#dc2726);transform:translateY(-1px);box-shadow:0 12px 32px #dc272659}.btn-secondary{background:var(--surface);color:var(--fg);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-hover);border-color:#ffffff29;transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--muted)}.btn-ghost:hover{color:var(--fg)}.btn-lg{padding:16px 32px;font-size:17px;gap:10px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:border-color .18s,transform .18s,box-shadow .18s}.card:hover{border-color:#ffffff24;transform:translateY(-2px);box-shadow:0 16px 48px #0000004d}.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em}.badge-accent{background:var(--accent-dim);color:var(--accent)}.badge-muted{background:var(--surface-hover);color:var(--muted)}.badge-ocean{background:var(--ocean-dim);color:var(--ocean)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.agent-commerce-strip{padding:22px 24px;display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:18px;align-items:center}@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}@media(max-width:900px){.agent-commerce-strip{grid-template-columns:1fr 1fr}}@media(max-width:600px){.agent-commerce-strip{grid-template-columns:1fr}}.nav{position:sticky;top:0;z-index:100;background:#040710e0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.nav-inner{display:flex;align-items:center;gap:32px;height:64px}.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.04em;color:#f8fafc;flex-shrink:0}.nav-logo-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#dc2726,#ff9a56);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;letter-spacing:-.02em;flex-shrink:0;box-shadow:0 4px 14px #dc272659}.nav-logo-name{color:#f8fafc}.nav-logo-current{color:var(--ocean)}.nav-links{display:flex;align-items:center;gap:4px;flex:1}.nav-link{padding:6px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted);transition:all .15s}.nav-link:hover{color:var(--fg);background:var(--surface)}.nav-link.active{color:var(--fg);background:var(--surface);box-shadow:inset 0 0 0 1px #ffffff14}.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}@media(max-width:700px){.nav-links{display:none}}.hero-new{position:relative;padding:100px 0 0;text-align:center;overflow:hidden;min-height:85vh;display:flex;flex-direction:column;align-items:center}.hero-new-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(220,39,38,.1) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 50% 100%,rgba(71,198,255,.08) 0%,transparent 60%);pointer-events:none}.hero-new-glow{position:absolute;top:20%;left:50%;transform:translate(-50%);width:600px;height:400px;background:radial-gradient(circle,rgba(220,39,38,.08) 0%,rgba(71,198,255,.04) 40%,transparent 70%);filter:blur(60px);pointer-events:none}.hero-new-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:60px 24px 40px}.hero-new-eyebrow{margin-bottom:28px}.hero-new-title{font-size:clamp(36px,5.5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:24px}.hero-new-title-accent{background:linear-gradient(135deg,var(--accent),var(--ocean));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-new-desc{font-size:18px;line-height:1.7;color:var(--muted);max-width:600px;margin:0 auto 40px}.hero-new-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}.hero-new-trust{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);letter-spacing:.02em}.hero-new-trust-dot{opacity:.35}.hero-new-diagram{position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto;padding:0 24px 80px}.hero-new .kit-diagram{min-height:380px;transform:scale(.85);transform-origin:top center}.hero{padding:80px 0 64px;text-align:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-120px;left:50%;transform:translate(-50%);width:900px;height:500px;background:radial-gradient(ellipse at center,rgba(220,39,38,.12) 0%,transparent 70%);pointer-events:none}.hero-eyebrow{margin-bottom:24px}.hero h1{margin-bottom:24px;max-width:760px;margin-left:auto;margin-right:auto}.hero .lead{max-width:560px;margin:0 auto 40px}.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:64px}.hero-trust{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.hero-trust-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.hero-visual{text-align:left}.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.86fr);gap:48px;align-items:center}.hero-copy h1,.hero-copy .lead{margin-left:0;margin-right:0}.hero-copy .lead{max-width:650px}.hero-copy .hero-ctas{justify-content:flex-start;margin-bottom:26px}.hero-copy .hero-trust{justify-content:flex-start;gap:18px}.plain-explainer{max-width:650px;margin:0 0 28px;padding:14px 16px;border:1px solid rgba(71,198,255,.18);border-radius:16px;background:#47c6ff12;color:var(--muted);font-size:14px;line-height:1.65}.plain-explainer strong{color:var(--fg)}.hero-art{min-width:0}@media(max-width:640px){.hero-new{padding:60px 0 0;min-height:auto}.hero-new-title{font-size:32px}.hero-new-desc{font-size:16px}.hero-new-diagram{padding:0 16px 48px}.hero-new .kit-diagram{transform:scale(.7)}}.kit-diagram{position:relative;min-height:520px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(135deg,#47c6ff1a,#dc272614),radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),transparent 42%);overflow:hidden}.kit-diagram:before,.kit-diagram:after{content:"";position:absolute;top:72px;right:72px;bottom:72px;left:72px;border:1px solid rgba(255,255,255,.08);border-radius:999px}.kit-diagram:after{top:128px;right:128px;bottom:128px;left:128px;border-color:#47c6ff29}.kit-diagram-core{position:absolute;left:50%;top:49%;width:146px;min-height:146px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.18);border-radius:28px;background:#040710c7;box-shadow:0 24px 80px #00000059;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;z-index:2}.kit-diagram-mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#dc2726,#47c6ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:-.06em}.kit-diagram-core strong{font-size:18px;line-height:1.15}.kit-diagram-core span{color:var(--muted);font-size:13px}.kit-diagram-node{position:absolute;width:142px;min-height:104px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#08111de6;box-shadow:0 18px 48px #00000038;z-index:1}.kit-diagram-node strong{display:block;font-size:14px;margin-bottom:6px}.kit-diagram-node span{display:block;color:var(--muted);font-size:12px;line-height:1.5}.node-1{top:34px;left:50%;transform:translate(-50%);border-color:#47c6ff3d}.node-2{top:128px;right:22px;border-color:#dc27263d}.node-3{right:42px;bottom:58px;border-color:#47c6ff3d}.node-4{bottom:24px;left:50%;transform:translate(-50%);border-color:#dc27263d}.node-5{left:42px;bottom:58px;border-color:#47c6ff3d}.node-6{top:128px;left:22px;border-color:#dc27263d}.control-illustration{position:relative;min-height:360px;padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(135deg,#47c6ff14,#dc272614);display:grid;grid-template-columns:1fr .82fr 1fr;gap:14px;align-items:center}.control-column,.control-gate{min-height:178px;border:1px solid var(--border);border-radius:22px;background:#0407109e;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px}.control-gate{border-color:#dc272647;background:#dc27261f}.control-column span,.control-gate span{color:var(--ocean);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.control-gate span{color:#ff9f6b}.control-column strong,.control-gate strong{font-size:18px;line-height:1.22}@media(max-width:900px){.hero-split{grid-template-columns:1fr}.hero-copy .hero-ctas,.hero-copy .hero-trust{justify-content:center}.hero-visual,.hero-copy{text-align:center}.plain-explainer{margin-left:auto;margin-right:auto}.kit-diagram{min-height:460px}}@media(max-width:600px){.hero{padding-top:54px}.kit-diagram{min-height:auto;padding:18px;display:grid;grid-template-columns:1fr;gap:10px}.kit-diagram:before,.kit-diagram:after{display:none}.kit-diagram-core,.kit-diagram-node{position:static;width:auto;min-height:auto;transform:none}.kit-diagram-core{min-height:132px;margin-bottom:6px}.control-illustration{grid-template-columns:1fr;min-height:auto}.control-column,.control-gate{min-height:120px}}.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.stats-inner{display:flex;justify-content:center;gap:0}.stat-item{padding:28px 48px;text-align:center;border-right:1px solid var(--border)}.stat-item:last-child{border-right:none}.stat-num{font-size:32px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:4px}.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}@media(max-width:700px){.stats-inner{flex-wrap:wrap}.stat-item{flex:1 1 40%;border-right:none;border-bottom:1px solid var(--border)}}.pricing-grid{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:20px;align-items:start}@media(max-width:900px){.pricing-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.pricing-grid{grid-template-columns:1fr}}.pricing-card{border-radius:var(--radius-lg);padding:32px;background:var(--surface);border:1px solid var(--border)}.pricing-card.featured{background:linear-gradient(145deg,#dc27261a,#47c6ff0d);border-color:#dc27264d}.pricing-name{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:8px}.pricing-price{font-size:40px;font-weight:700;letter-spacing:-.04em;margin-bottom:4px}.pricing-price span{font-size:18px;font-weight:500;color:var(--muted)}.pricing-desc{font-size:14px;color:var(--muted);margin:16px 0 24px;line-height:1.6}.pricing-features{list-style:none;margin-bottom:28px;display:flex;flex-direction:column;gap:10px}.pricing-features li{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:10px}.pricing-features li:before{content:"✓";color:var(--accent);font-weight:700;flex-shrink:0;margin-top:2px}.pricing-cta{display:block;width:100%;text-align:center}.dir-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:all .18s}.dir-card:hover{border-color:#dc272633;background:var(--surface-hover)}.dir-card-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px}.dir-card h3{font-size:17px;font-weight:600;margin-bottom:8px}.dir-card p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}.dir-card-count{font-size:12px;color:var(--muted);font-weight:500}.trust-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}.trust-item:last-child{border-bottom:none}.trust-icon{width:44px;height:44px;border-radius:14px;background:var(--ocean-dim);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px}.trust-body h3{font-size:15px;font-weight:600;margin-bottom:4px}.trust-body p{font-size:14px;color:var(--muted);line-height:1.6}.faq-item{border-bottom:1px solid var(--border);padding:20px 0}.faq-q{font-size:15px;font-weight:600;margin-bottom:8px}.faq-a{font-size:14px;color:var(--muted);line-height:1.7}.timeline-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.timeline-row{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;padding:18px;border:1px solid var(--border);background:var(--surface);border-radius:18px}.timeline-row.compact{grid-template-columns:34px 1fr;padding:12px;border-radius:14px}.timeline-num{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#ff665c1f;color:var(--accent);border:1px solid rgba(255,102,92,.24);font-size:13px;font-weight:900}.timeline-row.compact .timeline-num{width:28px;height:28px;border-radius:9px;font-size:12px}.timeline-row h3{font-size:17px;font-weight:800;margin-bottom:6px}.timeline-row p{font-size:14px;line-height:1.65;color:var(--muted)}.task-chip{padding:10px 14px;border-radius:12px;background:var(--surface-hover);border:1px solid var(--border);font-size:13px;color:var(--muted)}.article-card{display:flex;flex-direction:column;min-height:280px;text-decoration:none;transition:border-color .18s,transform .18s}.article-card:hover{border-color:#ff665c57;transform:translateY(-2px)}.blog-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}.blog-sidebar{position:sticky;top:88px}.blog-sidebar-section{border:1px solid var(--border);border-radius:22px;background:#ffffff08;padding:18px}.blog-sidebar-label{color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}.blog-category-list{display:flex;flex-direction:column;gap:8px}.blog-category-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:10px 12px;border:1px solid transparent;border-radius:13px;color:var(--muted);background:transparent;transition:background .15s,border-color .15s,color .15s}.blog-category-link:hover{color:var(--fg);background:var(--surface-hover)}.blog-category-link.active{color:var(--fg);background:#47c6ff14;border-color:#47c6ff2e}.blog-category-link span{font-size:14px;font-weight:650;line-height:1.25}.blog-category-link strong{min-width:26px;height:24px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--ocean);background:#47c6ff1a;font-size:12px;font-weight:850}.blog-post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.blog-filter-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.blog-filter-row span{color:var(--muted);font-size:13px}.blog-filter-row a{color:var(--accent);font-size:13px;font-weight:800}.article-header{max-width:900px}.article-body{max-width:760px;margin:0 auto}.article-body section{margin-bottom:40px}.article-body h2{font-size:28px;line-height:1.15;font-weight:850;letter-spacing:-.03em;margin-bottom:14px}.article-body p{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:16px}.article-faq{border-bottom:1px solid var(--border);padding:18px 0}.article-faq h3{font-size:17px;line-height:1.3;margin-bottom:8px}.article-resource-list{display:grid;gap:10px}.article-resource-list a{display:block;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ocean);font-size:14px;font-weight:700}.article-resource-list a:hover{border-color:#47c6ff3d;background:var(--surface-hover)}.article-cta{margin-top:48px;padding:28px;border:1px solid rgba(255,102,92,.25);border-radius:20px;background:linear-gradient(135deg,#ff665c14,#47c6ff0d)}.article-cta h2{font-size:24px}.learn-header{padding-bottom:64px}.learn-header-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);gap:48px;align-items:center}.learn-explainer{margin-top:24px;margin-bottom:0}.learn-illustration{position:relative;min-height:390px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:radial-gradient(circle at 28% 22%,rgba(220,39,38,.16),transparent 34%),radial-gradient(circle at 76% 74%,rgba(71,198,255,.14),transparent 36%),linear-gradient(135deg,#47c6ff12,#dc27260f);overflow:hidden;padding:24px}.learn-orbit{position:absolute;top:58px;right:80px;bottom:58px;left:80px;border:1px solid rgba(255,255,255,.1);border-radius:999px}.learn-card,.learn-output-card,.learn-path-step{position:relative;z-index:1;border:1px solid var(--border);background:#040710b8;box-shadow:0 18px 50px #0000003d}.learn-card-primary{max-width:330px;padding:22px;border-radius:22px;border-color:#47c6ff38}.learn-card span,.learn-output-card span{display:block;color:var(--ocean);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.learn-card strong,.learn-output-card strong{display:block;font-size:20px;line-height:1.2;letter-spacing:-.02em}.learn-card p,.learn-path-step p{color:var(--muted);font-size:13px;line-height:1.55;margin-top:8px}.learn-path-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px}.learn-path-step{min-height:132px;border-radius:18px;padding:15px}.learn-path-step span{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:10px;color:var(--accent);background:#dc27261f;border:1px solid rgba(220,39,38,.22);font-size:12px;font-weight:900;margin-bottom:12px}.learn-path-step strong{display:block;font-size:14px;line-height:1.25}.learn-output-card{width:min(360px,100%);margin:22px 0 0 auto;padding:20px;border-radius:20px;border-color:#dc27263d;background:#dc27261a}.learn-output-card span{color:#ff9f6b}@media(max-width:900px){.learn-header-grid{grid-template-columns:1fr}}@media(max-width:640px){.learn-illustration{min-height:auto}.learn-orbit{display:none}.learn-path-row{grid-template-columns:1fr}.learn-path-step{min-height:auto}.learn-output-card{margin-left:0}}.product-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}.product-summary-card h2{font-size:28px;line-height:1.15;margin:18px 0 12px}.product-summary-card p{color:var(--muted);font-size:15px;line-height:1.7}.product-explainer{margin-top:18px;margin-bottom:0}.product-price-row{margin-top:24px;display:flex;align-items:baseline;gap:8px}.product-price-row span{font-size:38px;font-weight:900;letter-spacing:-.04em}.product-price-row small{color:var(--muted);font-size:13px}.product-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.flow-step{min-height:150px;padding:18px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,#47c6ff14,#ff665c0a);display:flex;flex-direction:column;justify-content:space-between}.flow-step span{color:var(--ocean);font-weight:900;font-size:12px}.flow-step strong{font-size:15px;line-height:1.3}.install-blueprint{min-height:100%;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(145deg,#47c6ff14,#dc272612),linear-gradient(180deg,rgba(255,255,255,.04),transparent);overflow:hidden}.install-blueprint-header{padding:22px 24px;border-bottom:1px solid var(--border)}.install-blueprint-header span{display:block;color:var(--ocean);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}.install-blueprint-header strong{display:block;font-size:22px;line-height:1.15;letter-spacing:-.03em}.install-blueprint-body{padding:24px;display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:stretch}.blueprint-stack{display:flex;flex-direction:column;gap:8px}.blueprint-stack div{padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:#0407107a;color:var(--muted);font-size:13px;font-weight:750}.blueprint-agent{border:1px solid rgba(71,198,255,.22);border-radius:20px;background:#47c6ff14;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:8px}.blueprint-agent span{color:var(--ocean);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.blueprint-agent strong{font-size:21px;line-height:1.18}.install-blueprint-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}.install-blueprint-footer div{min-height:112px;padding:18px;border-right:1px solid var(--border);background:#04071057}.install-blueprint-footer div:last-child{border-right:none}.install-blueprint-footer strong{display:block;color:var(--accent);font-size:13px;margin-bottom:6px}.install-blueprint-footer span{display:block;color:var(--muted);font-size:12px;line-height:1.5}.install-path-card h3{font-size:22px;line-height:1.2;margin:16px 0}.install-path-card ol{padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:10px;line-height:1.65;font-size:14px}.connection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.connection-card h3{font-size:18px;line-height:1.25;font-weight:850;margin-bottom:8px}.connection-examples{color:var(--ocean);font-size:13px;line-height:1.5;margin-bottom:16px}.connection-card strong{display:block;color:var(--fg);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 5px}.connection-card p{color:var(--muted);line-height:1.65;font-size:14px}.objection-card h3{font-size:19px;font-weight:850;line-height:1.25;margin-bottom:10px}.objection-card p{color:var(--muted);line-height:1.7;font-size:15px}.agent-approval-map{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.approval-rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.approval-rings div{min-height:110px;border-radius:22px;border:1px solid rgba(255,102,92,.24);background:radial-gradient(circle at top left,#ff665c2e,#47c6ff0f);display:flex;align-items:center;justify-content:center;font-weight:900}@media(max-width:640px){.blog-layout{grid-template-columns:1fr}.blog-sidebar{position:static}.blog-post-grid{grid-template-columns:1fr}.blog-filter-row{align-items:flex-start;flex-direction:column}.timeline-row{grid-template-columns:1fr}.article-body h2{font-size:23px}.article-body p{font-size:15px}.product-hero-grid,.agent-approval-map{grid-template-columns:1fr}.product-flow{grid-template-columns:1fr 1fr}.flow-step{min-height:92px}.connection-grid,.install-blueprint-body,.install-blueprint-footer{grid-template-columns:1fr}.install-blueprint-footer div{min-height:auto;border-right:none;border-bottom:1px solid var(--border)}.install-blueprint-footer div:last-child{border-bottom:none}}.page-header{padding:64px 0 48px}.page-header h1{margin:12px 0 16px}.footer{border-top:1px solid var(--border);padding:48px 0 32px;margin-top:auto}.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}.footer-brand p{font-size:14px;color:var(--muted);margin-top:12px;max-width:280px;line-height:1.7}.footer-col h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.footer-col a{display:block;font-size:14px;color:var(--muted);padding:4px 0;transition:color .15s}.footer-col a:hover{color:var(--fg)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:24px}.footer-bottom p{font-size:13px;color:var(--muted)}@media(max-width:800px){.footer-inner{grid-template-columns:1fr 1fr}}@media(max-width:500px){.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}}.divider{height:1px;background:var(--border);margin:0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}@media(max-width:768px){.intro-grid{grid-template-columns:1fr}}.intro-features{margin-top:24px;display:flex;flex-direction:column;gap:16px}.intro-feature{display:flex;gap:14px}.intro-feature-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:8px}.intro-feature h4{font-size:15px;font-weight:600;margin-bottom:4px}.intro-feature p{font-size:14px;color:var(--muted);line-height:1.6}@media(max-width:900px){.ten-min-line{display:none!important}}.ten-min-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}@media(max-width:1000px){.ten-min-steps{grid-template-columns:repeat(3,1fr);gap:32px}}@media(max-width:640px){.ten-min-steps{grid-template-columns:1fr 1fr;gap:28px}}@media(max-width:400px){.ten-min-steps{grid-template-columns:1fr}} /* ============================================================ ClawCurrent — "The Current" 2026 redesign override layer Append AFTER index-DdJ9oiHc.css. No HTML/JS changes required. Design: deep-ink field, luminous tidal-teal current, aurora flow motifs, hairline gradient borders, glass surfaces. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- 1. Tokens ---------- */ :root{ /* base field: near-black blue-ink, low saturation */ --bg:#04070c; --bg-alt:#060b13; --surface:rgba(148,210,214,.035); --surface-hover:rgba(148,210,214,.07); --border:rgba(148,210,214,.12); --fg:#e8f4f2; --muted:#8ba8ac; /* ONE luminous accent family: tidal teal -> glacial cyan */ --accent:#41e8c4; /* tidal teal */ --accent-2:#5ac8fa; /* glacial cyan */ --accent-deep:#0fbf9e; --accent-dim:rgba(65,232,196,.14); --ocean:#5ac8fa; /* mapped so legacy .text-ocean/.badge-ocean join the family */ --ocean-dim:rgba(90,200,250,.12); --ember:#f5d9a8; /* rare warm hairline highlight only */ --radius:14px; --radius-lg:22px; --font-display:'Space Grotesk','Inter',system-ui,sans-serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --grad-current:linear-gradient(115deg,#41e8c4 0%,#5ac8fa 100%); --grad-current-soft:linear-gradient(115deg,rgba(65,232,196,.16),rgba(90,200,250,.16)); --ring:0 0 0 1px rgba(65,232,196,.45); } /* ---------- 2. Global field: ink + grain + drifting current ---------- */ html{scroll-behavior:smooth} body{ background-color:var(--bg); background-image: /* faint contour/grid field */ linear-gradient(rgba(148,210,214,.033) 1px,transparent 1px), linear-gradient(90deg,rgba(148,210,214,.033) 1px,transparent 1px); background-size:72px 72px,72px 72px; font-family:var(--font-body); color:var(--fg); } /* fixed aurora wash + film grain over everything, never interactive */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 90% 55% at 15% -10%,rgba(65,232,196,.07),transparent 60%), radial-gradient(ellipse 70% 50% at 90% 10%,rgba(90,200,250,.055),transparent 55%), radial-gradient(ellipse 80% 60% at 50% 115%,rgba(15,191,158,.06),transparent 60%); } body::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .site{position:relative;z-index:1} ::selection{background:rgba(65,232,196,.32);color:#eafffa} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(65,232,196,.35),rgba(90,200,250,.3));border-radius:8px;border:3px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(65,232,196,.6),rgba(90,200,250,.55))} a{color:var(--accent-2);transition:color .2s ease} a:hover{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* ---------- 3. Typography ---------- */ h1,h2,h3,h4,.display,.display-sm,.hero-new-title,.stat-num,.pricing-price{ font-family:var(--font-display); letter-spacing:-.03em; } .display{font-weight:600;letter-spacing:-.035em} .display-sm{font-weight:600;letter-spacing:-.03em} .eyebrow,.hero-eyebrow,.hero-new-eyebrow,.badge,.blog-sidebar-label,.cc-kicker{ font-family:var(--font-mono); font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase; color:var(--accent); } .hero-new-eyebrow,.hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; padding:7px 16px;border-radius:999px; border:1px solid rgba(65,232,196,.28); background:rgba(65,232,196,.06); box-shadow:inset 0 0 24px rgba(65,232,196,.06); } .hero-new-eyebrow::before,.hero-eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%; background:var(--accent);box-shadow:0 0 10px var(--accent); animation:ccPulse 2.6s ease-in-out infinite; } .hero-new-title{ font-weight:600; letter-spacing:-.04em; line-height:1.04; text-wrap:balance; } .hero-new-title-accent{ background:linear-gradient(100deg,#41e8c4 10%,#8ef0dd 45%,#5ac8fa 90%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:ccSheen 9s ease-in-out infinite; } .text-coral{color:var(--accent)} /* legacy class remapped */ .text-ocean{color:var(--accent-2)} .lead,.hero-new-desc{color:#a9c4c6} /* ---------- 4. Navigation ---------- */ .nav{ background:rgba(4,7,12,.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(65,232,196,.35) 30%,rgba(90,200,250,.35) 70%,transparent) 1; } .nav-logo{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em} /* logo mark + small coral chips are inline-styled divs in the compiled app; retint them into the current family via attribute selector */ .nav-logo>div[style],div[style*="rgb(255, 102, 92)"]{ background:var(--grad-current)!important; box-shadow:0 4px 16px rgba(65,232,196,.42)!important; } .nav-logo-mark{ border-radius:10px; background:var(--grad-current); box-shadow:0 4px 18px rgba(65,232,196,.35),inset 0 1px 0 rgba(255,255,255,.35); } .nav-logo-current{ background:var(--grad-current); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .nav-link{ position:relative; color:var(--muted); font-weight:500; padding:6px 2px; transition:color .2s ease; } .nav-link::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--grad-current); transition:right .28s cubic-bezier(.22,.9,.28,1); } .nav-link:hover{color:var(--fg)} .nav-link:hover::after,.nav-link.active::after{right:0} .nav-link.active{color:var(--fg)} /* ---------- 5. Hero: the current ---------- */ .hero-new{ background: radial-gradient(ellipse 100% 60% at 50% -20%,rgba(65,232,196,.08),transparent 65%); } .hero-new-bg{ background: /* aurora river: two sweeping gradient bands */ radial-gradient(ellipse 90% 45% at 20% 8%,rgba(65,232,196,.13),transparent 60%), radial-gradient(ellipse 80% 40% at 82% 22%,rgba(90,200,250,.11),transparent 60%), radial-gradient(ellipse 60% 40% at 50% 105%,rgba(15,191,158,.09),transparent 65%); animation:ccDrift 22s ease-in-out infinite alternate; } .hero-new-bg::before{ content:"";position:absolute;inset:0; background: repeating-linear-gradient(115deg,transparent 0 90px,rgba(148,210,214,.05) 90px 91px,transparent 91px 190px); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%); } .hero-new-bg::after{ /* flow lines: fine horizontal current contours */ content:"";position:absolute;inset:0;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='260' viewBox='0 0 900 260'%3E%3Cg fill='none' stroke='%2341e8c4' stroke-opacity='0.10'%3E%3Cpath d='M-20 40 C 200 10, 420 70, 920 30'/%3E%3Cpath d='M-20 110 C 220 70, 460 140, 920 90'/%3E%3Cpath d='M-20 180 C 180 140, 480 210, 920 160'/%3E%3Cpath d='M-20 240 C 240 200, 480 270, 920 220'/%3E%3C/g%3E%3C/svg%3E"); background-size:900px 260px;background-repeat:repeat-x;background-position:0 60%; animation:ccFlow 26s linear infinite; } .hero-new-glow{ width:min(820px,90vw);height:520px; background: radial-gradient(circle at 40% 45%,rgba(65,232,196,.16) 0%,transparent 55%), radial-gradient(circle at 62% 55%,rgba(90,200,250,.12) 0%,transparent 60%); filter:blur(70px); animation:ccGlow 11s ease-in-out infinite alternate; } .hero-new-ctas,.hero-ctas{margin-top:8px} .hero-new-trust,.hero-trust{color:var(--muted)} .hero-new-trust-dot,.hero-trust-dot{ background:var(--accent); box-shadow:0 0 8px rgba(65,232,196,.8); } /* hero diagram & kit diagram: glass panel framing, no layout changes */ .hero-new-diagram,.kit-diagram,.hero-art,.learn-illustration,.control-illustration{ position:relative; border:1px solid rgba(148,210,214,.14); border-radius:var(--radius-lg); background:linear-gradient(160deg,rgba(65,232,196,.05),rgba(6,11,19,.55) 45%,rgba(90,200,250,.05)); box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(232,244,242,.06); backdrop-filter:blur(6px); } .kit-diagram-mark{ background:var(--grad-current); color:#04120e; box-shadow:0 6px 20px rgba(65,232,196,.45); } .kit-diagram-core{ border:1px solid rgba(65,232,196,.35)!important; box-shadow:0 0 40px rgba(65,232,196,.18),inset 0 0 30px rgba(65,232,196,.06); } .kit-diagram-node{ border-color:rgba(148,210,214,.2)!important; background:rgba(6,11,19,.7)!important; transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; } .kit-diagram-node:hover{ border-color:rgba(65,232,196,.5)!important; box-shadow:0 8px 30px rgba(65,232,196,.15); transform:translateY(-2px); } /* ---------- 6. Buttons ---------- */ .btn{ position:relative; border-radius:12px; font-family:var(--font-display); font-weight:600; letter-spacing:.01em; transition:transform .22s cubic-bezier(.22,.9,.28,1),box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease; } .btn-primary{ background:var(--grad-current); color:#04120e; box-shadow:0 10px 30px -8px rgba(65,232,196,.45),inset 0 1px 0 rgba(255,255,255,.4); } .btn-primary:hover{ background:var(--grad-current); transform:translateY(-2px); box-shadow:0 16px 42px -8px rgba(65,232,196,.6),0 0 0 1px rgba(65,232,196,.4),inset 0 1px 0 rgba(255,255,255,.4); color:#04120e; } .btn-secondary{ background:rgba(65,232,196,.07); border:1px solid rgba(65,232,196,.3); color:var(--accent); } .btn-secondary:hover{ background:rgba(65,232,196,.13); border-color:rgba(65,232,196,.55); color:#a9f5e4; transform:translateY(-2px); box-shadow:0 12px 32px -12px rgba(65,232,196,.4); } .btn-ghost{ border:1px solid rgba(148,210,214,.18); color:var(--fg); background:rgba(148,210,214,.03); } .btn-ghost:hover{ border-color:rgba(148,210,214,.4); background:rgba(148,210,214,.07); transform:translateY(-2px); } .btn-lg{border-radius:14px} /* ---------- 7. Cards: glass + gradient hairlines ---------- */ .card,.dir-card,.article-card,.pricing-card,.learn-card,.learn-output-card,.learn-path-step, .install-path-card,.objection-card,.connection-card,.trust-item,.product-summary-card{ background:linear-gradient(165deg,rgba(148,210,214,.055),rgba(148,210,214,.015) 55%); border:1px solid rgba(148,210,214,.13); border-radius:var(--radius-lg); box-shadow:0 20px 50px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(232,244,242,.05); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .28s cubic-bezier(.22,.9,.28,1),border-color .28s ease,box-shadow .28s ease; } .card:hover,.dir-card:hover,.article-card:hover,.pricing-card:hover,.learn-card:hover, .objection-card:hover,.connection-card:hover{ transform:translateY(-4px); border-color:rgba(65,232,196,.4); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(65,232,196,.15),0 0 40px -10px rgba(65,232,196,.18),inset 0 1px 0 rgba(232,244,242,.08); } .dir-card-icon{ background:var(--grad-current-soft); border:1px solid rgba(65,232,196,.28); border-radius:12px; color:var(--accent); } .dir-card-count{color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em} .pricing-card.featured{ border:1px solid rgba(65,232,196,.5); background:linear-gradient(170deg,rgba(65,232,196,.09),rgba(90,200,250,.04) 60%); box-shadow:0 0 60px -18px rgba(65,232,196,.4),inset 0 1px 0 rgba(232,244,242,.08); } .pricing-price{font-weight:600} .pricing-price span{color:var(--muted)} .pricing-features li:before{color:var(--accent)} /* ---------- 8. Stats ---------- */ .stats{ border-top:1px solid transparent;border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(148,210,214,.28),transparent) 1; background:linear-gradient(180deg,rgba(65,232,196,.03),rgba(90,200,250,.02)); } .stat-item{position:relative} .stat-num{ font-size:clamp(34px,4vw,44px);font-weight:600; background:linear-gradient(180deg,#eafffa,#8ef0dd); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .stat-label{color:var(--muted);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase} /* ---------- 9. Sections & misc components ---------- */ .section{padding:96px 0} .divider{border-color:rgba(148,210,214,.12)} .badge{ border:1px solid rgba(148,210,214,.22); background:rgba(148,210,214,.06); color:#b9d4d2; border-radius:999px; } .badge-accent{border-color:rgba(65,232,196,.4);background:rgba(65,232,196,.1);color:#a9f5e4} .badge-ocean{border-color:rgba(90,200,250,.4);background:rgba(90,200,250,.1);color:#b7e4fd} .badge-muted{border-color:rgba(148,210,214,.16);background:transparent;color:var(--muted)} .faq-item{ border:1px solid rgba(148,210,214,.13); border-radius:var(--radius); background:linear-gradient(165deg,rgba(148,210,214,.04),transparent); transition:border-color .25s ease; } .faq-item:hover{border-color:rgba(65,232,196,.35)} .faq-q{font-family:var(--font-display);font-weight:600} .timeline-num{ font-family:var(--font-mono); color:var(--accent); border:1px solid rgba(65,232,196,.35); background:rgba(65,232,196,.07); border-radius:10px; box-shadow:0 0 18px -6px rgba(65,232,196,.4); } .timeline-row h3{font-family:var(--font-display)} .task-chip{ border:1px solid rgba(148,210,214,.18); background:rgba(148,210,214,.05); border-radius:999px; color:#c3dbd9; font-family:var(--font-mono);font-size:12.5px; transition:border-color .2s ease,background-color .2s ease; } .task-chip:hover{border-color:rgba(65,232,196,.45);background:rgba(65,232,196,.09)} .intro-feature-dot,.flow-step span,.learn-path-step span{ background:var(--grad-current)!important; box-shadow:0 0 12px rgba(65,232,196,.55); color:#04120e!important; } .install-blueprint{ border:1px solid rgba(65,232,196,.3); border-radius:var(--radius-lg); background:linear-gradient(170deg,rgba(65,232,196,.07),rgba(6,11,19,.6)); box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 50px -20px rgba(65,232,196,.3); } .install-blueprint-header strong{font-family:var(--font-display)} .install-blueprint-footer{border-top:1px solid rgba(148,210,214,.12)} .blog-category-link{ border:1px solid rgba(148,210,214,.14); border-radius:12px; transition:border-color .2s ease,background-color .2s ease; } .blog-category-link:hover,.blog-category-link.active{ border-color:rgba(65,232,196,.4); background:rgba(65,232,196,.06); } .blog-filter-row a{color:var(--muted)} .blog-filter-row a:hover{color:var(--accent)} .article-cta{ border:1px solid rgba(65,232,196,.35); border-radius:var(--radius-lg); background:linear-gradient(150deg,rgba(65,232,196,.1),rgba(90,200,250,.06)); box-shadow:0 0 50px -18px rgba(65,232,196,.35); } .article-resource-list a{color:var(--accent-2)} .article-resource-list a:hover{color:var(--accent)} .page-header h1{font-family:var(--font-display);letter-spacing:-.035em} /* product page */ .product-hero-grid{ border:1px solid rgba(148,210,214,.13); border-radius:var(--radius-lg); background:linear-gradient(165deg,rgba(148,210,214,.05),rgba(6,11,19,.5)); } .product-price-row span{ font-family:var(--font-display);font-weight:600; color:var(--accent); } .agent-approval-map,.blueprint-agent,.approval-rings div{ border-color:rgba(148,210,214,.18)!important; } /* ---------- 10. Footer ---------- */ .footer{ border-top:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(148,210,214,.3),transparent) 1; background:linear-gradient(180deg,transparent,rgba(6,11,19,.9)); } .footer-col h4{ font-family:var(--font-mono);font-size:11px;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--accent); } .footer-col a{color:var(--muted)} .footer-col a:hover{color:var(--accent)} .footer-brand p{color:var(--muted)} .footer-bottom p{color:#5f7a7d;font-family:var(--font-mono);font-size:12px} /* ---------- 11. Forms & tables ---------- */ input,textarea,select{ background:rgba(6,11,19,.7); border:1px solid rgba(148,210,214,.2); border-radius:10px; color:var(--fg); font-family:var(--font-body); transition:border-color .2s ease,box-shadow .2s ease; } input:focus,textarea:focus,select:focus{ outline:none;border-color:rgba(65,232,196,.55); box-shadow:var(--ring),0 0 24px -8px rgba(65,232,196,.4); } table{border-collapse:collapse} th{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid rgba(65,232,196,.3)} td{border-bottom:1px solid rgba(148,210,214,.1)} code,kbd,pre{ font-family:var(--font-mono); background:rgba(65,232,196,.08); border:1px solid rgba(65,232,196,.18); border-radius:6px; } pre{background:rgba(6,11,19,.85);border-color:rgba(148,210,214,.15);border-radius:12px} /* ---------- 12. Motion ---------- */ @keyframes ccDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-2%,1.5%,0) scale(1.04)} } @keyframes ccFlow{0%{background-position:0 60%}100%{background-position:900px 60%}} @keyframes ccGlow{0%{opacity:.75;transform:translate(-50%,0) scale(1)}100%{opacity:1;transform:translate(-50%,2%) scale(1.06)}} @keyframes ccSheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}} @keyframes ccPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}} @media (prefers-reduced-motion:reduce){ .hero-new-bg,.hero-new-bg::after,.hero-new-glow,.hero-new-title-accent, .hero-new-eyebrow::before,.hero-eyebrow::before{animation:none!important} *,*::before,*::after{transition-duration:.01ms!important} } /* ---------- 13. Breakpoint safety ---------- */ @media (max-width:768px){ .section{padding:64px 0} .hero-new-glow{width:95vw;height:380px;filter:blur(50px)} body{background-size:56px 56px,56px 56px} } /* ============================================================ ClawCurrent — "The Current" v2 · TRI-HUE PALETTE LAYER Append AFTER index-DdJ9oiHc.css (which already contains the 2026 "The Current" override layer). Append-only: wins purely by cascade/source order. No HTML/JS changes required. Feedback addressed: "Too much green. Mix in some color." System: PRIMARY tidal teal #41e8c4 -> glacial cyan #5ac8fa (brand identity: hero, primary CTA, logo, focus) WARM solar amber #f5b453 (secondary emphasis: stats, eyebrows, secondary buttons, pricing, warm section auroras) EXPRESS soft orchid #b78bff (selective accents: link hovers, card variant 3, category chips, blockquotes, footer labels) Why orchid over coral: teal (~165°) + amber (~38°) already cover cool-warm; coral #ff7a6e (~5°) clusters with amber and reads muddy. Orchid (~265°) sits ~120° from both, a true triadic third. All three hues share ~70-78% lightness and high chroma so they read as one luminous family on ink. Rule: max ONE accent hue per component instance. ============================================================ */ /* ---------- v2.1 Tokens ---------- */ :root{ --amber:#f5b453; /* solar amber */ --amber-hi:#ffd9a0; /* amber highlight (text on tint) */ --amber-deep:#e0913a; --amber-dim:rgba(245,180,83,.13); --amber-line:rgba(245,180,83,.38); --orchid:#b78bff; /* soft orchid */ --orchid-hi:#d9c8ff; /* orchid highlight (text on tint) */ --orchid-deep:#9a6bf0; --orchid-dim:rgba(183,139,255,.12); --orchid-line:rgba(183,139,255,.36); --grad-amber:linear-gradient(115deg,#f5b453 0%,#ffd9a0 100%); --grad-orchid:linear-gradient(115deg,#b78bff 0%,#d9c8ff 100%); } /* ---------- v2.2 Global field: warm + orchid join the aurora ---------- Re-declare the fixed wash with two added, low-alpha fields so the whole page breathes three hues (teal still dominant). */ body::before{ background: radial-gradient(ellipse 90% 55% at 15% -10%,rgba(65,232,196,.07),transparent 60%), radial-gradient(ellipse 70% 50% at 90% 10%,rgba(90,200,250,.055),transparent 55%), radial-gradient(ellipse 55% 40% at 88% 78%,rgba(245,180,83,.045),transparent 60%), radial-gradient(ellipse 50% 42% at 6% 62%,rgba(183,139,255,.04),transparent 60%), radial-gradient(ellipse 80% 60% at 50% 115%,rgba(15,191,158,.06),transparent 60%); } /* ---------- v2.3 Section auroras: each section breathes one hue ---------- Hero (.hero-new) keeps the teal current untouched. Sections cycle: teal (default, v1) -> amber -> orchid. */ .section{position:relative} .section:nth-of-type(3n+2){ background-image: radial-gradient(ellipse 70% 60% at 85% 0%,rgba(245,180,83,.05),transparent 62%), radial-gradient(ellipse 55% 55% at 8% 100%,rgba(245,180,83,.035),transparent 60%); } .section:nth-of-type(3n){ background-image: radial-gradient(ellipse 70% 60% at 12% 0%,rgba(183,139,255,.05),transparent 62%), radial-gradient(ellipse 55% 55% at 92% 100%,rgba(90,200,250,.035),transparent 60%); } /* ---------- v2.4 Eyebrows: cycle teal -> amber -> orchid per section ---------- */ .section:nth-of-type(3n+2) .eyebrow, .section:nth-of-type(3n+2) .cc-kicker{color:var(--amber)} .section:nth-of-type(3n) .eyebrow, .section:nth-of-type(3n) .cc-kicker{color:var(--orchid)} /* ---------- v2.5 Stats: warm numbers (the big "less green" win) ---------- */ .stats{ background:linear-gradient(180deg,rgba(245,180,83,.035),rgba(65,232,196,.02)); border-image:linear-gradient(90deg,transparent,rgba(245,180,83,.3),transparent) 1; } .stat-num{ background:linear-gradient(180deg,#ffe9c8,var(--amber) 70%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* every 3rd stat returns to the teal current, tying back to brand */ .stat-item:nth-child(3n) .stat-num{ background:linear-gradient(180deg,#eafffa,#8ef0dd); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- v2.6 Badges: three-hue family ---------- */ /* .badge-accent stays teal (v1). Re-hue the legacy "ocean" badge to orchid — it is used for categories, an expressive (not brand) slot. */ .badge-ocean{ border-color:var(--orchid-line); background:var(--orchid-dim); color:var(--orchid-hi); } /* alternating accent badges inside a row take amber (2nd) / orchid (3rd) */ .hero-new-trust .badge:nth-of-type(3n+2), .hero-trust .badge:nth-of-type(3n+2){ border-color:var(--amber-line);background:var(--amber-dim);color:var(--amber-hi); } .hero-new-trust .badge:nth-of-type(3n), .hero-trust .badge:nth-of-type(3n){ border-color:var(--orchid-line);background:var(--orchid-dim);color:var(--orchid-hi); } /* ---------- v2.7 Buttons: secondary goes warm, ghost stays ink ---------- */ .btn-secondary{ background:var(--amber-dim); border:1px solid var(--amber-line); color:var(--amber-hi); } .btn-secondary:hover{ background:rgba(245,180,83,.19); border-color:rgba(245,180,83,.6); color:#ffe9c8; box-shadow:0 12px 32px -12px rgba(245,180,83,.42); } .btn-ghost:hover{ border-color:var(--amber-line); color:var(--amber-hi); background:rgba(245,180,83,.05); } /* ---------- v2.8 Cards: hairlines cycle teal -> amber -> orchid ---------- */ .grid-2>.card,.grid-3>.card,.grid-4>.card, .grid-2>.dir-card,.grid-3>.dir-card,.grid-4>.dir-card, .grid-3>.objection-card,.grid-3>.connection-card,.grid-3>.learn-card, .grid-3>.install-path-card,.grid-4>.trust-item, .intro-grid>.intro-feature,.blog-post-grid>.article-card, .connection-grid>.connection-card{ border-top-color:rgba(65,232,196,.35); } .grid-2>:nth-child(3n+2),.grid-3>:nth-child(3n+2),.grid-4>:nth-child(3n+2), .intro-grid>:nth-child(3n+2),.blog-post-grid>:nth-child(3n+2), .connection-grid>:nth-child(3n+2){ border-top-color:var(--amber-line); } .grid-2>:nth-child(3n),.grid-3>:nth-child(3n),.grid-4>:nth-child(3n), .intro-grid>:nth-child(3n),.blog-post-grid>:nth-child(3n), .connection-grid>:nth-child(3n){ border-top-color:var(--orchid-line); } /* hover glow follows the card's own hue */ .grid-2>:nth-child(3n+2):hover,.grid-3>:nth-child(3n+2):hover,.grid-4>:nth-child(3n+2):hover, .intro-grid>:nth-child(3n+2):hover,.blog-post-grid>:nth-child(3n+2):hover, .connection-grid>:nth-child(3n+2):hover{ border-color:rgba(245,180,83,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(245,180,83,.16),0 0 40px -10px rgba(245,180,83,.2),inset 0 1px 0 rgba(232,244,242,.08); } .grid-2>:nth-child(3n):hover,.grid-3>:nth-child(3n):hover,.grid-4>:nth-child(3n):hover, .intro-grid>:nth-child(3n):hover,.blog-post-grid>:nth-child(3n):hover, .connection-grid>:nth-child(3n):hover{ border-color:rgba(183,139,255,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(183,139,255,.16),0 0 40px -10px rgba(183,139,255,.22),inset 0 1px 0 rgba(232,244,242,.08); } /* ---------- v2.8b Legacy gradient text joins the family ---------- v1 remapped only `color`; the base rules use background-clip:text, so the old red/coral gradients still win. Re-clip them in-family: .text-coral (warm word in headlines) -> amber, .text-ocean -> current. */ .text-coral{ background:linear-gradient(100deg,var(--amber) 10%,var(--amber-hi) 90%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .text-ocean{ background:linear-gradient(100deg,#41e8c4 10%,#5ac8fa 90%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- v2.9 Links & inline accents ---------- */ a:hover{color:var(--orchid)} .footer-col a:hover{color:var(--amber-hi)} .blog-filter-row a:hover{color:var(--amber)} .article-resource-list a:hover{color:var(--orchid)} blockquote{ border-left:3px solid var(--orchid); background:linear-gradient(150deg,var(--orchid-dim),transparent 70%); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; color:#cfc4e8; } /* ---------- v2.10 Chips, categories, timeline, faq ---------- */ .task-chip:hover{border-color:var(--amber-line);background:var(--amber-dim)} .blog-category-list .blog-category-link:nth-child(3n+2):hover, .blog-category-list .blog-category-link:nth-child(3n+2).active{ border-color:var(--amber-line);background:var(--amber-dim); } .blog-category-list .blog-category-link:nth-child(3n):hover, .blog-category-list .blog-category-link:nth-child(3n).active{ border-color:var(--orchid-line);background:var(--orchid-dim); } .timeline-row:nth-child(3n+2) .timeline-num{ color:var(--amber);border-color:var(--amber-line); background:var(--amber-dim);box-shadow:0 0 18px -6px rgba(245,180,83,.4); } .timeline-row:nth-child(3n) .timeline-num{ color:var(--orchid);border-color:var(--orchid-line); background:var(--orchid-dim);box-shadow:0 0 18px -6px rgba(183,139,255,.4); } .faq-item:nth-child(even):hover{border-color:var(--amber-line)} .faq-item:nth-child(odd):hover{border-color:var(--orchid-line)} /* ---------- v2.11 Pricing & product accents ---------- */ .pricing-price{ background:linear-gradient(180deg,#ffe9c8,var(--amber) 75%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .pricing-price span{ -webkit-text-fill-color:var(--muted);color:var(--muted); } /* featured card keeps teal (brand), non-featured prices go amber — above. Feature checkmarks alternate teal / amber. */ .pricing-features li:nth-child(even):before{color:var(--amber)} .product-price-row span{color:var(--amber)} /* ---------- v2.12 Footer: labels cycle warm/orchid ---------- */ .footer-col:nth-of-type(3n+2) h4{color:var(--amber)} .footer-col:nth-of-type(3n) h4{color:var(--orchid)} .footer{ border-image:linear-gradient(90deg,transparent,rgba(245,180,83,.22) 35%,rgba(183,139,255,.22) 65%,transparent) 1; } /* ---------- v2.13 Tables & code: hairline hue variety ---------- */ th{color:var(--amber);border-bottom-color:var(--amber-line)} /* ---------- v2.14 Motion safety ---------- v2 adds no new animations; re-assert the reduced-motion contract. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} } /* ===== THE CURRENT V3 — AURORA SPECTRUM (2026-07-22) ===== */ /* ============================================================ ClawCurrent — "The Current" v3 · AURORA SPECTRUM LAYER Append AFTER index-DdJ9oiHc.css (which already contains the v1 "The Current" layer and the v2 tri-hue layer). Append-only: wins purely by cascade/source order (+ !important only where the compiled app sets inline styles). No HTML/JS changes. Feedback addressed: "Much better, still needs MORE color." v3 expands 3 hues -> a 6-hue aurora spectrum: teal #41e8c4 cyan #5ac8fa (brand current) amber #f5b453 coral #ff7a6e orchid #b78bff spring #7ee787 Governing rules (unchanged from v2): - max TWO hues per component instance (hue + its highlight, or one gradient pair) - backgrounds stay deep ink; saturation lives in accents - all accent text passes WCAG AA on #04070c - multi-hue appears only as cycles across siblings or as per-section identities ============================================================ */ /* ---------- v3.1 Tokens: the full spectrum ---------- */ :root{ --teal:#41e8c4; --teal-hi:#a9f5e4; --teal-line:rgba(65,232,196,.38); --cyan:#5ac8fa; --cyan-hi:#bde7fd; --cyan-dim:rgba(90,200,250,.12); --cyan-line:rgba(90,200,250,.38); --coral:#ff7a6e; --coral-hi:#ffc9c0; --coral-dim:rgba(255,122,110,.12); --coral-line:rgba(255,122,110,.36); --spring:#7ee787; --spring-hi:#cdf7d3; --spring-dim:rgba(126,231,135,.12); --spring-line:rgba(126,231,135,.36); --grad-coral:linear-gradient(115deg,#ff7a6e 0%,#ffc9c0 100%); --grad-spring:linear-gradient(115deg,#7ee787 0%,#cdf7d3 100%); --grad-sunset:linear-gradient(115deg,#ff7a6e 0%,#f5b453 100%); /* the aurora: all six, for hairlines / scrollbar / selection accents */ --grad-aurora:linear-gradient(90deg, #41e8c4 0%,#5ac8fa 20%,#b78bff 40%,#ff7a6e 60%,#f5b453 80%,#7ee787 100%); } /* ---------- v3.2 Global field: six-hue aurora ---------- v2 painted 5 fields; v3 adds coral (upper-left warm) and spring (lower-right cool-green) so the whole page breathes the spectrum. Alphas stay at .035–.07: ink stays ink. */ body::before{ background: radial-gradient(ellipse 90% 55% at 15% -10%,rgba(65,232,196,.07),transparent 60%), radial-gradient(ellipse 70% 50% at 90% 10%,rgba(90,200,250,.055),transparent 55%), radial-gradient(ellipse 50% 42% at 4% 30%,rgba(255,122,110,.045),transparent 60%), radial-gradient(ellipse 55% 40% at 88% 78%,rgba(245,180,83,.045),transparent 60%), radial-gradient(ellipse 50% 42% at 6% 62%,rgba(183,139,255,.04),transparent 60%), radial-gradient(ellipse 46% 40% at 82% 46%,rgba(126,231,135,.035),transparent 60%), radial-gradient(ellipse 80% 60% at 50% 115%,rgba(15,191,158,.06),transparent 60%); } /* selection joins the expressive slot: orchid wash, near-white text */ ::selection{background:rgba(183,139,255,.38);color:#f6f1ff} /* scrollbar: full aurora travel */ ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(65,232,196,.4),rgba(90,200,250,.36),rgba(183,139,255,.34), rgba(255,122,110,.32),rgba(245,180,83,.34),rgba(126,231,135,.32)); border-radius:8px;border:3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, rgba(65,232,196,.62),rgba(90,200,250,.58),rgba(183,139,255,.55), rgba(255,122,110,.52),rgba(245,180,83,.55),rgba(126,231,135,.52)); } /* nav + footer hairlines carry the whole spectrum */ .nav{ border-image:linear-gradient(90deg,transparent, rgba(65,232,196,.3) 18%,rgba(90,200,250,.3) 34%,rgba(183,139,255,.28) 50%, rgba(255,122,110,.26) 66%,rgba(245,180,83,.28) 82%,transparent) 1; } .footer{ border-image:linear-gradient(90deg,transparent, rgba(65,232,196,.22) 16%,rgba(90,200,250,.22) 32%,rgba(183,139,255,.22) 48%, rgba(255,122,110,.2) 64%,rgba(245,180,83,.22) 80%,rgba(126,231,135,.2) 92%,transparent) 1; } /* footer column headings: complete the 6-hue cycle (v2 did 3) */ .footer-col:nth-of-type(6n+4) h4{color:var(--cyan)} .footer-col:nth-of-type(6n+5) h4{color:var(--coral)} .footer-col:nth-of-type(6n+6) h4{color:var(--spring)} /* ---------- v3.3 SECTION IDENTITIES ---------- Homepage
positions inside
: 1 .hero-new (teal->cyan, brand — untouched) 2 "The directory" -> AMBER (product showcase) 3 "Agent-ready commerce" -> ORCHID 4 "Agent commerce kits" -> CYAN 5 "Trust layer" -> SPRING (trust = go/verified) 6 "Start with discovery" -> CORAL (CTA) Expressed as a 5n cycle so every other page's sections rotate through the same five identities. Each identity sets: aurora wash, eyebrow color, h2 gradient text, in-section card hairline + hover glow. Max 2 hues per component throughout. */ /* — AMBER identity (sections 5n+2) — */ .section:nth-of-type(5n+2){ background-image: radial-gradient(ellipse 70% 60% at 85% 0%,rgba(245,180,83,.06),transparent 62%), radial-gradient(ellipse 55% 55% at 8% 100%,rgba(245,180,83,.04),transparent 60%); } .section:nth-of-type(5n+2) .eyebrow, .section:nth-of-type(5n+2) .cc-kicker{color:var(--amber)} .section:nth-of-type(5n+2) h2, .section:nth-of-type(5n+2) .display-sm{ background:linear-gradient(100deg,var(--amber) 8%,var(--amber-hi) 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .section:nth-of-type(5n+2) .card, .section:nth-of-type(5n+2) .dir-card{border-top-color:var(--amber-line)} .section:nth-of-type(5n+2) .card:hover, .section:nth-of-type(5n+2) .dir-card:hover{ border-color:rgba(245,180,83,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(245,180,83,.16), 0 0 44px -10px rgba(245,180,83,.22),inset 0 1px 0 rgba(232,244,242,.08); } /* — ORCHID identity (sections 5n+3) — */ .section:nth-of-type(5n+3){ background-image: radial-gradient(ellipse 70% 60% at 12% 0%,rgba(183,139,255,.06),transparent 62%), radial-gradient(ellipse 55% 55% at 92% 100%,rgba(183,139,255,.04),transparent 60%); } .section:nth-of-type(5n+3) .eyebrow, .section:nth-of-type(5n+3) .cc-kicker{color:var(--orchid)} .section:nth-of-type(5n+3) h2, .section:nth-of-type(5n+3) .display-sm{ background:linear-gradient(100deg,var(--orchid) 8%,var(--orchid-hi) 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .section:nth-of-type(5n+3) .card, .section:nth-of-type(5n+3) .dir-card{border-top-color:var(--orchid-line)} .section:nth-of-type(5n+3) .card:hover, .section:nth-of-type(5n+3) .dir-card:hover{ border-color:rgba(183,139,255,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(183,139,255,.16), 0 0 44px -10px rgba(183,139,255,.24),inset 0 1px 0 rgba(232,244,242,.08); } /* — CYAN identity (sections 5n+4) — */ .section:nth-of-type(5n+4){ background-image: radial-gradient(ellipse 70% 60% at 80% 0%,rgba(90,200,250,.06),transparent 62%), radial-gradient(ellipse 55% 55% at 10% 100%,rgba(65,232,196,.04),transparent 60%); } .section:nth-of-type(5n+4) .eyebrow, .section:nth-of-type(5n+4) .cc-kicker{color:var(--cyan)} .section:nth-of-type(5n+4) h2, .section:nth-of-type(5n+4) .display-sm{ background:linear-gradient(100deg,var(--teal) 8%,var(--cyan) 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .section:nth-of-type(5n+4) .card, .section:nth-of-type(5n+4) .dir-card{border-top-color:var(--cyan-line)} .section:nth-of-type(5n+4) .card:hover, .section:nth-of-type(5n+4) .dir-card:hover{ border-color:rgba(90,200,250,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(90,200,250,.16), 0 0 44px -10px rgba(90,200,250,.22),inset 0 1px 0 rgba(232,244,242,.08); } /* — SPRING identity (sections 5n+5) — */ .section:nth-of-type(5n+5){ background-image: radial-gradient(ellipse 70% 60% at 15% 0%,rgba(126,231,135,.055),transparent 62%), radial-gradient(ellipse 55% 55% at 88% 100%,rgba(126,231,135,.035),transparent 60%); } .section:nth-of-type(5n+5) .eyebrow, .section:nth-of-type(5n+5) .cc-kicker{color:var(--spring)} .section:nth-of-type(5n+5) h2, .section:nth-of-type(5n+5) .display-sm{ background:linear-gradient(100deg,var(--spring) 8%,var(--spring-hi) 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .section:nth-of-type(5n+5) .card, .section:nth-of-type(5n+5) .dir-card{border-top-color:var(--spring-line)} .section:nth-of-type(5n+5) .card:hover, .section:nth-of-type(5n+5) .dir-card:hover{ border-color:rgba(126,231,135,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(126,231,135,.16), 0 0 44px -10px rgba(126,231,135,.2),inset 0 1px 0 rgba(232,244,242,.08); } /* — CORAL identity (sections 5n+6, i.e. 5n+1 — the CTA) — */ .section:nth-of-type(5n+1){ background-image: radial-gradient(ellipse 75% 60% at 50% 0%,rgba(255,122,110,.06),transparent 62%), radial-gradient(ellipse 55% 55% at 90% 100%,rgba(245,180,83,.04),transparent 60%); } .section:nth-of-type(5n+1) .eyebrow, .section:nth-of-type(5n+1) .cc-kicker{color:var(--coral)} .section:nth-of-type(5n+1) h2, .section:nth-of-type(5n+1) .display-sm{ background:linear-gradient(100deg,var(--coral) 8%,var(--amber) 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .section:nth-of-type(5n+1) .card, .section:nth-of-type(5n+1) .dir-card{border-top-color:var(--coral-line)} .section:nth-of-type(5n+1) .card:hover, .section:nth-of-type(5n+1) .dir-card:hover{ border-color:rgba(255,122,110,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,122,110,.16), 0 0 44px -10px rgba(255,122,110,.22),inset 0 1px 0 rgba(232,244,242,.08); } /* ---------- v3.4 Hero diagram: six nodes, six hues ---------- The kit diagram is the hero's centerpiece — it now literally shows the spectrum the site runs on. One hue per node. */ .kit-diagram-node.node-1{border-color:var(--teal-line)!important} .kit-diagram-node.node-2{border-color:var(--amber-line)!important} .kit-diagram-node.node-3{border-color:var(--cyan-line)!important} .kit-diagram-node.node-4{border-color:var(--coral-line)!important} .kit-diagram-node.node-5{border-color:var(--spring-line)!important} .kit-diagram-node.node-6{border-color:var(--orchid-line)!important} .kit-diagram-node.node-1:hover{border-color:rgba(65,232,196,.55)!important;box-shadow:0 8px 30px rgba(65,232,196,.18)} .kit-diagram-node.node-2:hover{border-color:rgba(245,180,83,.55)!important;box-shadow:0 8px 30px rgba(245,180,83,.18)} .kit-diagram-node.node-3:hover{border-color:rgba(90,200,250,.55)!important;box-shadow:0 8px 30px rgba(90,200,250,.18)} .kit-diagram-node.node-4:hover{border-color:rgba(255,122,110,.55)!important;box-shadow:0 8px 30px rgba(255,122,110,.18)} .kit-diagram-node.node-5:hover{border-color:rgba(126,231,135,.55)!important;box-shadow:0 8px 30px rgba(126,231,135,.18)} .kit-diagram-node.node-6:hover{border-color:rgba(183,139,255,.55)!important;box-shadow:0 8px 30px rgba(183,139,255,.18)} /* ---------- v3.5 Stats: full-spectrum numbers ---------- v2: amber with every 3rd teal. v3: six-hue cycle across the row. */ .stat-item:nth-child(6n+1) .stat-num{ background:linear-gradient(180deg,#ffe9c8,var(--amber) 70%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .stat-item:nth-child(6n+2) .stat-num{ background:linear-gradient(180deg,var(--coral-hi),var(--coral) 70%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .stat-item:nth-child(6n+3) .stat-num{ background:linear-gradient(180deg,#eafffa,#8ef0dd); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .stat-item:nth-child(6n+4) .stat-num{ background:linear-gradient(180deg,var(--orchid-hi),var(--orchid) 70%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .stat-item:nth-child(6n+5) .stat-num{ background:linear-gradient(180deg,var(--spring-hi),var(--spring) 70%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .stat-item:nth-child(6n+6) .stat-num{ background:linear-gradient(180deg,var(--cyan-hi),var(--cyan) 70%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- v3.6 Cards: hairlines + hover glows cycle all six ---------- Extends v2's 3-hue cycle to 6. Section identities (v3.3) still win inside .section contexts due to higher specificity. */ .grid-2>:nth-child(6n+4),.grid-3>:nth-child(6n+4),.grid-4>:nth-child(6n+4), .intro-grid>:nth-child(6n+4),.blog-post-grid>:nth-child(6n+4), .connection-grid>:nth-child(6n+4){border-top-color:var(--cyan-line)} .grid-2>:nth-child(6n+5),.grid-3>:nth-child(6n+5),.grid-4>:nth-child(6n+5), .intro-grid>:nth-child(6n+5),.blog-post-grid>:nth-child(6n+5), .connection-grid>:nth-child(6n+5){border-top-color:var(--coral-line)} .grid-2>:nth-child(6n+6),.grid-3>:nth-child(6n+6),.grid-4>:nth-child(6n+6), .intro-grid>:nth-child(6n+6),.blog-post-grid>:nth-child(6n+6), .connection-grid>:nth-child(6n+6){border-top-color:var(--spring-line)} .grid-2>:nth-child(6n+4):hover,.grid-3>:nth-child(6n+4):hover,.grid-4>:nth-child(6n+4):hover, .intro-grid>:nth-child(6n+4):hover,.blog-post-grid>:nth-child(6n+4):hover, .connection-grid>:nth-child(6n+4):hover{ border-color:rgba(90,200,250,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(90,200,250,.16),0 0 40px -10px rgba(90,200,250,.22),inset 0 1px 0 rgba(232,244,242,.08); } .grid-2>:nth-child(6n+5):hover,.grid-3>:nth-child(6n+5):hover,.grid-4>:nth-child(6n+5):hover, .intro-grid>:nth-child(6n+5):hover,.blog-post-grid>:nth-child(6n+5):hover, .connection-grid>:nth-child(6n+5):hover{ border-color:rgba(255,122,110,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,122,110,.16),0 0 40px -10px rgba(255,122,110,.22),inset 0 1px 0 rgba(232,244,242,.08); } .grid-2>:nth-child(6n+6):hover,.grid-3>:nth-child(6n+6):hover,.grid-4>:nth-child(6n+6):hover, .intro-grid>:nth-child(6n+6):hover,.blog-post-grid>:nth-child(6n+6):hover, .connection-grid>:nth-child(6n+6):hover{ border-color:rgba(126,231,135,.45); box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(126,231,135,.16),0 0 40px -10px rgba(126,231,135,.2),inset 0 1px 0 rgba(232,244,242,.08); } /* ---------- v3.7 Badges & trust pills: six-hue family ---------- v2 cycled 3 hues on hero trust badges; v3 completes the cycle. */ .hero-new-trust .badge:nth-of-type(6n+4), .hero-trust .badge:nth-of-type(6n+4){ border-color:var(--cyan-line);background:var(--cyan-dim);color:var(--cyan-hi); } .hero-new-trust .badge:nth-of-type(6n+5), .hero-trust .badge:nth-of-type(6n+5){ border-color:var(--coral-line);background:var(--coral-dim);color:var(--coral-hi); } .hero-new-trust .badge:nth-of-type(6n+6), .hero-trust .badge:nth-of-type(6n+6){ border-color:var(--spring-line);background:var(--spring-dim);color:var(--spring-hi); } /* trust dots in the hero strip pulse through the spectrum */ .hero-new-trust-dot:nth-of-type(3n+2), .hero-trust-dot:nth-child(3n+2){background:var(--amber);box-shadow:0 0 8px rgba(245,180,83,.8)} .hero-new-trust-dot:nth-of-type(3n), .hero-trust-dot:nth-child(3n){background:var(--orchid);box-shadow:0 0 8px rgba(183,139,255,.8)} /* ---------- v3.8 Shop: every category pill gets its own hue ---------- The filter pills are inline-styled