/* ===================================================================== GREEN CITY MARKETING — SEO (Web3 / cinematic search-dominance system) Shared design-system foundation. Design authority: Emil Kowalski. Dual-mode (cinema/black <-> system/white), green "current" motion fingerprint. Tokens are 1:1 with the Video Production & Meta Ads pages so all three read as one elite ecosystem. Global primitives are `seo-` prefixed; each section owns its own `sN-` namespace. ===================================================================== */ /* ----- FONTS -------------------------------------------------------- */ /* Display: PP Neue Montreal is NOT licensed in this project — titles render in Space Grotesk (the documented GCM substitute). Drop a licensed @font-face for "PP Neue Montreal" and the --font-display stack auto-upgrades. Body: General Sans (Fontshare, free license) — loaded in ; Inter is the cross-page fallback so this page stays cohesive with VP / Meta Ads. */ /* ----- TOKENS ------------------------------------------------------- */ :root{ /* brand */ --green:#27F58C; --green-bright:#3BFF9C; --green-deep:#0A8A4F; --green-deep-2:#0FB866; --green-glow:rgba(39,245,140,.35); /* platform palette — controlled accents (use sparingly over the emerald/black base) */ --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC05; --g-green:#34A853; --maps:#1A73E8; --maps-pin:#EA4335; --meta:#0866FF; --yt:#FF3D33; --tiktok:#25F4EE; --chatgpt:#10A37F; --claude:#D97757; --perplexity:#20B8C5; --gemini-a:#4285F4; --gemini-b:#9B72CB; --gemini-c:#D96570; --gsc:#5E97F6; --gsc-2:#AA66CC; --ga:#E8710A; --bing:#0C8484; /* rank-pin scale (local SEO) */ --rank-g:#1DB954; --rank-g2:#16A34A; --rank-a:#E0A82E; --rank-o:#E0772B; --rank-r:#DB4437; /* status */ --status-good:#1DB954; --status-warn:#E0A82E; --status-bad:#DB4437; /* cinema (black) */ --void:#050505; --void-edge:#080A09; --void-panel:#0C0F0E; --void-panel-2:#121817; --void-line:rgba(255,255,255,.10); --void-line-green:rgba(39,245,140,.22); --void-ink:#FFFFFF; --void-ink-2:#C7D3CD; --void-ink-3:#7E8E87; /* system (white) */ --paper:#FFFFFF; --paper-edge:#F4F7F5; --paper-panel:#F6F9F7; --paper-panel-2:#EEF3F0; --paper-line:rgba(5,5,5,.10); --paper-line-green:rgba(10,138,79,.22); --paper-ink:#0A0C0B; --paper-ink-2:#2C3A33; --paper-ink-3:#6A7972; /* fonts */ --font-display:"Neue Haas Grotesk Display Pro","Helvetica Now Display","Helvetica Neue",Arial,sans-serif; --font-body:"Neue Haas Grotesk Text Pro","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* layout */ --max:1320px; --max-wide:1440px; --max-text:780px; --gutter:clamp(20px,5vw,48px); /* radius / motion */ --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.2,.9,.25,1); --dur-micro:180ms; --dur-ui:320ms; --dur-reveal:700ms; --dur-cine:1100ms; color-scheme:dark; } /* contextual contract — components only read these (--c-*) */ .seo-cinema{ --c-bg:var(--void); --c-bg-edge:var(--void-edge); --c-panel:var(--void-panel); --c-panel-2:var(--void-panel-2); --c-line:var(--void-line); --c-line-green:var(--void-line-green); --c-ink:var(--void-ink); --c-ink-2:var(--void-ink-2); --c-ink-3:var(--void-ink-3); --c-accent:var(--green); --c-accent-soft:var(--green-glow); --c-on-accent:#04140C; --c-shadow:0 30px 80px -40px rgba(0,0,0,.9); color:var(--c-ink); background:var(--c-bg); } .seo-system{ --c-bg:var(--paper); --c-bg-edge:var(--paper-edge); --c-panel:var(--paper-panel); --c-panel-2:var(--paper-panel-2); --c-line:var(--paper-line); --c-line-green:var(--paper-line-green); --c-ink:var(--paper-ink); --c-ink-2:var(--paper-ink-2); --c-ink-3:var(--paper-ink-3); --c-accent:var(--green-deep); --c-accent-soft:rgba(10,138,79,.08); --c-on-accent:#04140C; --c-shadow:0 24px 60px -30px rgba(5,5,5,.14); color:var(--c-ink); background:var(--c-bg); } /* ----- RESET -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* overflow-x on (root scroller) — NOT , which would break window scroll/spy. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--void);color:var(--void-ink); font-family:var(--font-body);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} ::selection{background:var(--green);color:#04140C} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px} /* ----- GRAIN + AMBIENT --------------------------------------------- */ .seo-grain{ position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .seo-scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none} .seo-scrollbar__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 12px var(--green-glow);transform-origin:left} /* ----- HEADER ------------------------------------------------------- */ .seo-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--gutter); transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui) ease,backdrop-filter var(--dur-ui) ease,border-color var(--dur-ui) ease; border-bottom:1px solid transparent} .seo-header.is-scrolled{background:rgba(5,6,5,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--void-line)} .seo-header.is-hidden{transform:translateY(-110%)} .seo-header__inner{max-width:var(--max-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px} .seo-brand{display:flex;align-items:center;color:#fff;flex:none} .seo-brand__logo{height:clamp(42px,4.4vw,54px);width:auto;display:block;filter:drop-shadow(0 5px 16px rgba(0,0,0,.55))} .seo-brand__logo--foot{height:48px} .seo-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0} .seo-nav__pill{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border:1px solid var(--void-line);border-radius:22px;background:rgba(6,10,8,.30);backdrop-filter:blur(10px)} .seo-nav__row{display:flex;gap:3px;justify-content:center;list-style:none;margin:0;padding:0} .seo-nav__pill a{display:block;padding:6px 13px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:16px;letter-spacing:.03em;color:var(--void-ink-2);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.55);transition:color var(--dur-micro) ease,background var(--dur-micro) ease} .seo-nav__pill a:hover{color:#fff} .seo-nav__pill a.is-active{color:var(--green);background:rgba(39,245,140,.1)} .seo-burger{display:none;width:42px;height:38px;border:1px solid var(--void-line);border-radius:10px;flex-direction:column;gap:5px;align-items:center;justify-content:center} .seo-burger span{width:18px;height:1.6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.6);transition:transform var(--dur-ui) var(--ease-snap)} .seo-burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)} .seo-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)} /* ----- BUTTONS ------------------------------------------------------ */ .seo-btn{position:relative;display:inline-flex;align-items:center;gap:9px; padding:13px 22px;border-radius:var(--r-pill);font-family:var(--font-mono); font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; transition:transform var(--dur-micro) var(--ease-snap),box-shadow var(--dur-ui) ease,background var(--dur-ui) ease,color var(--dur-ui) ease; will-change:transform} .seo-btn svg{transition:transform var(--dur-ui) var(--ease-snap)} .seo-btn:active{transform:scale(.97)} .seo-btn--cta{background:var(--green);color:#04140C;box-shadow:0 8px 30px -8px var(--green-glow),inset 0 0 0 1px rgba(255,255,255,.12)} .seo-btn--cta:hover{background:var(--green-bright);box-shadow:0 12px 40px -8px var(--green-glow)} .seo-btn--cta:hover svg{transform:translateX(3px)} .seo-btn--ghost{background:transparent;color:var(--c-ink,#fff);box-shadow:inset 0 0 0 1px var(--c-line,rgba(255,255,255,.18))} .seo-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--c-accent,var(--green));color:var(--c-accent,var(--green))} .seo-btn--lg{padding:16px 28px;font-size:15px} .seo-btn--sm{padding:11px 18px;font-size:14px} /* ----- SECTION SHELL ------------------------------------------------ */ .seo-sec{position:relative;padding:clamp(96px,12vw,160px) 0;overflow:clip;isolation:isolate} .seo-sec + .seo-sec{border-top:1px solid var(--c-line)} .seo-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .seo-inner--wide{max-width:var(--max-wide)} .seo-page > .seo-sec:first-child{padding-top:0} /* the hero is the first section but must clear the fixed header and own the first viewport. Desktop header is a tall 2-row nav pill (~121px); below 1200px it collapses to a burger bar. */ .seo-page > .seo-sec.seo-hero{padding-top:clamp(136px,15vh,164px);min-height:100vh} @media (max-width:1199px){.seo-page > .seo-sec.seo-hero{padding-top:clamp(96px,12vh,124px)}} /* feather edges (seam system) */ .seo-cinema::before,.seo-system::before,.seo-cinema::after,.seo-system::after{content:"";position:absolute;left:0;right:0;height:12%;z-index:1;pointer-events:none} .seo-cinema::before{top:0;background:linear-gradient(var(--void-edge),transparent)} .seo-cinema::after{bottom:0;background:linear-gradient(transparent,var(--void-edge))} .seo-system::before{top:0;background:linear-gradient(var(--paper-edge),transparent)} .seo-system::after{bottom:0;background:linear-gradient(transparent,var(--paper-edge))} /* ----- TYPOGRAPHY --------------------------------------------------- */ .seo-eyebrow{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--c-accent);display:inline-flex;align-items:center;gap:9px;margin-bottom:22px} .seo-system .seo-eyebrow{color:var(--green-deep)} .seo-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:seoPulse 2.4s var(--ease-out) infinite} @keyframes seoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}} .seo-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase; letter-spacing:0;line-height:.96;font-size:clamp(34px,5.4vw,64px);color:var(--c-ink)} .seo-title--hero{font-size:clamp(40px,6.6vw,86px);line-height:.92;letter-spacing:0} .seo-title--final{font-size:clamp(38px,6.6vw,82px);line-height:.94} .seo-title .seo-line{display:block} .seo-word{color:var(--c-accent);position:relative} .seo-system .seo-word{color:var(--green-deep)} /* animated gradient display word (use sparingly for marquee headline words) */ .seo-word--grad{-webkit-background-clip:text;background-clip:text;color:transparent; background-image:linear-gradient(120deg,#bff6d8,var(--green) 40%,#0a8a4f 75%,var(--green-bright)); background-size:220% 100%;animation:seoGradWord 7s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(39,245,140,.35))} @keyframes seoGradWord{0%,100%{background-position:0% 0}50%{background-position:100% 0}} .seo-lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--c-ink-2);max-width:var(--max-text)} .seo-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-ink-2);max-width:560px} .seo-label{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)} .seo-proofline{margin:48px auto 0;max-width:760px;text-align:center;font-size:16px;color:var(--c-ink-2)} .seo-proofline strong{color:var(--c-accent);font-weight:600} .seo-system .seo-proofline strong{color:var(--green-deep)} .seo-banner{margin:64px auto 0;max-width:900px;text-align:center;font-family:var(--font-display); font-weight:700;text-transform:uppercase;font-size:clamp(22px,3.4vw,40px);line-height:1.05;letter-spacing:0;color:var(--c-ink)} /* ----- HEADS -------------------------------------------------------- */ .seo-head{margin-bottom:clamp(48px,6vw,80px)} .seo-head--center{text-align:center;max-width:900px;margin-left:auto;margin-right:auto} .seo-head--center .seo-eyebrow{justify-content:center} .seo-head--center .seo-lead{margin-left:auto;margin-right:auto} .seo-head--split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end} @media (max-width:900px){.seo-head--split{grid-template-columns:1fr;gap:28px;align-items:start}} /* ----- THE GREEN CURRENT (motion fingerprint) ---------------------- */ .seo-current__track{fill:none;stroke:var(--c-line);stroke-width:1.5} .seo-current__line{fill:none;stroke:var(--c-accent);stroke-width:1.5; stroke-dasharray:8 12;filter:drop-shadow(0 0 4px var(--green-glow)); stroke-dashoffset:200;animation:seoFlow 3.4s linear infinite} .seo-system .seo-current__line{stroke:var(--green-deep-2)} @keyframes seoFlow{to{stroke-dashoffset:0}} /* ----- REVEAL (GSAP-driven, bulletproof) --------------------------- Content is visible by default. ONLY when JS is on (html.js, set synchronously before paint) do reveal targets start hidden — GSAP then animates them in on scroll. If GSAP fails to load, seo.js (or the head watchdog) adds html.no-gsap which forces everything visible. Reduced motion also forces visible. Worst case = fully readable, never stuck. */ .js [data-reveal]{opacity:0;will-change:transform,opacity} .js [data-reveal="up"]{transform:translateY(26px)} .js [data-reveal="down"]{transform:translateY(-26px)} .js [data-reveal="left"]{transform:translateX(34px)} .js [data-reveal="right"]{transform:translateX(-34px)} .js [data-reveal="scale"]{transform:scale(.94)} .js [data-reveal="blur"]{transform:translateY(20px);filter:blur(8px)} .is-revealed[data-reveal],.js [data-reveal].is-revealed{opacity:1!important;transform:none!important;filter:none!important} html.no-gsap [data-reveal]{opacity:1!important;transform:none!important;filter:none!important} @media (prefers-reduced-motion:reduce){ .js [data-reveal]{opacity:1!important;transform:none!important;filter:none!important} } /* On narrow screens, reveal only on the Y axis — a horizontal offset on a full-width element would poke past the viewport edge (clipped, but avoidable). */ @media (max-width:720px){ .js [data-reveal="left"],.js [data-reveal="right"]{transform:translateY(24px)} } /* ----- AMBIENT ORBS / GRID ----------------------------------------- */ .seo-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none} .seo-orb--1{width:600px;height:600px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(39,245,140,.30),transparent 70%);animation:seoDrift 22s ease-in-out infinite} .seo-orb--2{width:520px;height:520px;bottom:-160px;right:-100px;background:radial-gradient(circle,rgba(15,184,102,.22),transparent 70%);animation:seoDrift 26s ease-in-out infinite reverse} .seo-orb--center{position:absolute;top:30%;left:50%;width:680px;height:680px;transform:translateX(-50%);background:radial-gradient(circle,rgba(39,245,140,.12),transparent 70%);filter:blur(90px);z-index:0;pointer-events:none} @keyframes seoDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}} .seo-grid-fade{position:absolute;inset:0; background-image:linear-gradient(var(--c-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);opacity:.4} /* ----- SHARED ATOMS ------------------------------------------------- */ .seo-stars{color:var(--green);letter-spacing:2px;font-size:13px} .seo-stars--xs{font-size:10px;letter-spacing:1px} .seo-system .seo-stars{color:var(--green-deep)} .seo-num{font-family:var(--font-display);font-weight:700;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums} /* play button */ .seo-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4; width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#04140C; background:var(--green);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -8px var(--green-glow); transition:transform var(--dur-ui) var(--ease-snap),box-shadow var(--dur-ui) ease;animation:seoBreath 3.4s var(--ease-out) infinite} .seo-play:hover{transform:translate(-50%,-50%) scale(1.08)} .seo-play:active{transform:translate(-50%,-50%) scale(.96)} @keyframes seoBreath{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -8px var(--green-glow)}50%{box-shadow:0 0 0 8px rgba(39,245,140,.08),0 10px 50px -6px var(--green-glow)}} .seo-play--sm{width:50px;height:50px} /* marquee (clone row injected by JS) */ .seo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .seo-marquee__row{display:flex;gap:56px;width:max-content;animation:seoMarq 32s linear infinite} .seo-marquee--rev .seo-marquee__row{animation-direction:reverse} .seo-marquee:hover .seo-marquee__row{animation-play-state:paused} @keyframes seoMarq{to{transform:translateX(-50%)}} /* generic glass card (sections may extend) */ .seo-card{border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);position:relative;overflow:hidden; transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)} @media (hover:hover){.seo-card--lift:hover{transform:translateY(-4px);border-color:var(--c-line-green);box-shadow:0 0 40px -16px var(--green-glow)}} /* generic chip / tag */ .seo-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:13px;letter-spacing:.03em; padding:7px 13px;border-radius:var(--r-pill);background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-ink-2)} /* ----- FILTER BAR (tabs / category filters) ------------------------ */ .seo-filterbar{display:flex;flex-wrap:wrap;gap:8px} .seo-filter{font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase; padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:transparent;color:var(--c-ink-3); transition:color var(--dur-micro) ease,border-color var(--dur-micro) ease,background var(--dur-micro) ease} .seo-filter:hover{color:var(--c-ink);border-color:var(--c-line-green)} .seo-filter.is-active{color:var(--c-on-accent);background:var(--green);border-color:transparent} .seo-system .seo-filter.is-active{background:var(--green-deep);color:#fff} /* ----- MODAL / LIGHTBOX (generic, JS-driven via [data-modal]) ------ */ .seo-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(16px,4vw,48px); background:rgba(3,5,4,.82);backdrop-filter:blur(10px);opacity:0;visibility:hidden; transition:opacity var(--dur-ui) ease,visibility var(--dur-ui) ease} .seo-modal.is-open{opacity:1;visibility:visible} .seo-modal__dialog{position:relative;width:min(960px,100%);border-radius:var(--r-lg);overflow:hidden; background:var(--void-panel);border:1px solid var(--void-line-green);box-shadow:0 60px 140px -50px #000; transform:translateY(14px) scale(.98);transition:transform var(--dur-ui) var(--ease-out)} .seo-modal.is-open .seo-modal__dialog{transform:none} .seo-modal__close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;background:rgba(0,0,0,.5);border:1px solid var(--void-line);color:#fff;font-size:18px;backdrop-filter:blur(6px)} .seo-modal__close:hover{border-color:var(--green);color:var(--green)} .seo-modal__media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden} .seo-modal__media img,.seo-modal__media iframe{width:100%;height:100%;object-fit:cover;border:0} /* ----- FOOTER ------------------------------------------------------- */ .seo-foot{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--void-line);background:var(--void)} .seo-foot__inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .seo-foot__inner p{font-family:var(--font-mono);font-size:13px;letter-spacing:.03em;color:var(--void-ink-3);max-width:680px} /* ===================================================================== RESPONSIVE HEADER / NAV ===================================================================== */ @media (max-width:1199px){ .seo-nav{position:fixed;inset:78px 0 auto;padding:0 var(--gutter);transform:translateY(-130%);transition:transform var(--dur-ui) var(--ease-out);pointer-events:none;display:block} .seo-nav.is-open{transform:none;pointer-events:auto} .seo-nav__pill{flex-direction:column;gap:0;border-radius:var(--r-lg);background:rgba(5,6,5,.96);backdrop-filter:blur(18px);padding:10px} .seo-nav__row{flex-direction:column;gap:0;width:100%;align-items:stretch} .seo-nav__pill a{padding:14px 18px;font-size:16px} .seo-header__cta{display:none} .seo-burger{display:flex} } /* ===================================================================== REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .seo-current__line{animation:none;stroke-dashoffset:0} .seo-marquee__row{animation:none} .seo-orb{animation:none} } /* touch: drop hover-only transforms */ @media (hover:none){ .seo-card--lift:hover{transform:none} } /* perf: skip painting offscreen sections (hero exempt) */ .seo-sec:not(.seo-hero){content-visibility:auto;contain-intrinsic-size:auto 900px} /* perf: pause decorative animations on sections far from the viewport. The .is-near flag is toggled by a rect poll in seo.js; gated on .js so a no-JS visitor keeps every animation running. */ .js .seo-sec:not(.is-near), .js .seo-sec:not(.is-near) *, .js .seo-sec:not(.is-near) *::before, .js .seo-sec:not(.is-near) *::after{animation-play-state:paused!important} /* ===================================================================== GREEN CITY — SEO · PLATFORM REALISM LAYER Reusable, polished "product screenshot" components used across sections: Google SERP card, Maps local-pack, Google Business Profile, AI answer cards (ChatGPT/Claude/Gemini/Perplexity), Search Console & Analytics panels, browser-frame website previews, a Google-Maps-style surface, rank pins, platform chips. These keep their real-product look regardless of section dual-mode so they read as genuine embedded screenshots. Author: Emil Kowalski principles. Prefix: seo-* ===================================================================== */ /* ----- ICON HELPER -------------------------------------------------- */ .seo-ic{ display:block; width:var(--s,20px); height:var(--s,20px); flex:none; } .seo-ic--inline{ display:inline-block; vertical-align:middle; } /* generic scroll draw-in for any inline chart line tagged .seo-draw inside a reveal target (section-specific lines in sN.css override this safely). */ .seo-draw{ stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.6s var(--ease-out); } .is-revealed .seo-draw, .no-gsap .seo-draw{ stroke-dashoffset:0; } /* platform chip (Featured-in style) */ .seo-pchip{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill); font-family:var(--font-body); font-size:13px; font-weight:500; white-space:nowrap; background:rgba(255,255,255,.05); border:1px solid var(--c-line,rgba(255,255,255,.12)); color:var(--c-ink,#fff); } .seo-system .seo-pchip{ background:#fff; border-color:rgba(5,5,5,.1); color:#0a0c0b; box-shadow:0 6px 18px -10px rgba(0,0,0,.2); } .seo-pchip .seo-ic{ --s:17px; } .seo-pchip--on{ border-color:var(--c-line-green,rgba(39,245,140,.3)); } .seo-pchip__dot{ width:7px; height:7px; border-radius:50%; background:var(--status-good); box-shadow:0 0 7px var(--status-good); } /* ===================================================================== GOOGLE SERP CARD (always-light "screenshot") ===================================================================== */ .seo-serp{ position:relative; background:#fff; border-radius:14px; padding:14px 16px; color:#202124; font-family:var(--font-body); border:1px solid rgba(0,0,0,.06); box-shadow:0 26px 60px -30px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.12); max-width:100%; } .seo-serp__omni{ display:flex; align-items:center; gap:10px; padding:8px 14px; margin-bottom:14px; border-radius:var(--r-pill); background:#fff; border:1px solid #dfe1e5; box-shadow:0 1px 4px rgba(32,33,36,.12); } .seo-serp__omni .seo-ic{ --s:18px; } .seo-serp__omni input,.seo-serp__q{ flex:1; border:0; font-size:14px; color:#3c4043; background:none; } .seo-serp__omni .seo-serp__mic{ color:#4285F4; } .seo-serp__item{ position:relative; } .seo-serp__item + .seo-serp__item{ margin-top:16px; padding-top:16px; border-top:1px solid #ececec; } .seo-serp__crumb{ display:flex; align-items:center; gap:8px; margin-bottom:3px; } .seo-serp__fav{ width:26px; height:26px; border-radius:50%; background:#e8f0fe; display:grid; place-items:center; flex:none; } .seo-serp__fav .seo-ic{ --s:15px; } .seo-serp__site{ font-size:13px; color:#202124; line-height:1.2; } .seo-serp__url{ font-size:12px; color:#5f6368; } .seo-serp__title{ font-family:var(--font-body); font-size:19px; line-height:1.3; color:#1a0dab; font-weight:500; margin:2px 0 3px; } .seo-serp__desc{ font-size:13px; line-height:1.5; color:#4d5156; } .seo-serp__rating{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; color:#70757a; } .seo-serp__stars{ color:#fbbc04; letter-spacing:1px; font-size:12px; } .seo-serp__badge{ position:absolute; top:0; right:0; font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); background:#e6f4ea; color:#137333; } .seo-serp__ad{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:#202124; padding:1px 6px; border-radius:4px; border:1px solid #dadce0; margin-right:6px; } .seo-serp__sitelinks{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; margin-top:8px; } .seo-serp__sitelinks a,.seo-serp__sitelinks span{ font-size:12.5px; color:#1a0dab; } /* ===================================================================== MAPS LOCAL PACK (always-light) ===================================================================== */ .seo-localpack{ background:#fff; border-radius:14px; overflow:hidden; color:#202124; font-family:var(--font-body); border:1px solid rgba(0,0,0,.06); box-shadow:0 26px 60px -30px rgba(0,0,0,.55); max-width:100%; } .seo-localpack__map{ position:relative; height:96px; } .seo-localpack__head{ display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:13px; color:#3c4043; border-bottom:1px solid #eee; } .seo-lp__item{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:start; padding:12px 14px; } .seo-lp__item + .seo-lp__item{ border-top:1px solid #f1f1f1; } .seo-lp__rank{ width:24px; height:30px; flex:none; display:grid; place-items:center; position:relative; } .seo-lp__name{ font-size:14px; font-weight:600; color:#202124; } .seo-lp__meta{ font-size:12px; color:#70757a; margin-top:2px; } .seo-lp__stars{ color:#fbbc04; letter-spacing:.5px; } .seo-lp__cat{ font-size:11.5px; color:#1a73e8; } .seo-lp__cta{ align-self:center; font-size:11px; font-weight:600; color:#1a73e8; padding:6px 11px; border:1px solid #dadce0; border-radius:var(--r-pill); white-space:nowrap; } .seo-lp__item--you{ background:#f0f9f3; } .seo-lp__item--you .seo-lp__name::after{ content:"You"; margin-left:7px; font-size:10px; font-weight:600; color:#137333; background:#e6f4ea; padding:1px 7px; border-radius:var(--r-pill); } /* teardrop map pin (shared) */ .seo-mappin{ position:relative; width:24px; height:30px; } .seo-mappin::before{ content:""; position:absolute; inset:0 0 4px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--pin,#EA4335); box-shadow:0 4px 8px -2px rgba(0,0,0,.4); } .seo-mappin > span{ position:absolute; top:2px; left:0; right:0; text-align:center; color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700; z-index:2; } .seo-mappin--g{ --pin:var(--rank-g); } .seo-mappin--a{ --pin:var(--rank-a); } .seo-mappin--o{ --pin:var(--rank-o); } .seo-mappin--r{ --pin:var(--rank-r); } /* ===================================================================== GOOGLE BUSINESS PROFILE CARD (always-light) ===================================================================== */ .seo-gbp{ background:#fff; border-radius:14px; overflow:hidden; color:#202124; font-family:var(--font-body); border:1px solid rgba(0,0,0,.06); box-shadow:0 26px 60px -30px rgba(0,0,0,.55); max-width:100%; } .seo-gbp__photos{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,1fr); gap:2px; height:120px; } .seo-gbp__photos img{ width:100%; height:100%; object-fit:cover; } .seo-gbp__photos > :first-child{ grid-row:1 / 3; } .seo-gbp__body{ padding:14px 16px; } .seo-gbp__name{ font-size:18px; font-weight:600; } .seo-gbp__rrow{ display:flex; align-items:center; gap:7px; margin:5px 0 2px; font-size:13px; color:#70757a; } .seo-gbp__rnum{ color:#202124; font-weight:600; } .seo-gbp__stars{ color:#fbbc04; } .seo-gbp__cat{ font-size:12.5px; color:#5f6368; } .seo-gbp__hours{ font-size:12.5px; margin-top:6px; } .seo-gbp__open{ color:#137333; font-weight:600; } .seo-gbp__actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .seo-gbp__act{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:54px; padding:8px 4px; border:1px solid #dadce0; border-radius:10px; font-size:11px; color:#1a73e8; } .seo-gbp__act .seo-ic{ --s:18px; color:#1a73e8; } /* ===================================================================== AI ANSWER CARDS (dark "assistant" UI; per-platform accent) ===================================================================== */ .seo-aicard{ position:relative; background:linear-gradient(180deg,#202123,#17181a); border-radius:14px; padding:14px 16px; color:#ECECF1; font-family:var(--font-body); border:1px solid rgba(255,255,255,.08); box-shadow:0 26px 60px -30px rgba(0,0,0,.7); max-width:100%; --ai:var(--chatgpt); } .seo-aicard__head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; } .seo-aicard__mark{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:rgba(255,255,255,.06); } .seo-aicard__mark .seo-ic{ --s:20px; } .seo-aicard__name{ font-size:13px; font-weight:600; color:#fff; } .seo-aicard__tag{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--ai); padding:3px 9px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--ai) 16%,transparent); border:1px solid color-mix(in srgb,var(--ai) 40%,transparent); } .seo-aicard__q{ font-size:12px; color:#9aa0a6; margin-bottom:7px; } .seo-aicard__body{ font-size:13.5px; line-height:1.55; color:#ECECF1; } .seo-aicard__body b{ color:var(--ai); font-weight:600; } .seo-aicard__cite{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:11px; color:#9aa0a6; padding:5px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); } .seo-aicard__cite .seo-ic{ --s:13px; } .seo-aicard--chatgpt{ --ai:var(--chatgpt); } .seo-aicard--claude{ --ai:var(--claude); background:linear-gradient(180deg,#2a2422,#1c1917); } .seo-aicard--gemini{ --ai:var(--gemini-a); } .seo-aicard--perplexity{ --ai:var(--perplexity); } /* ===================================================================== SEARCH CONSOLE PANEL (always-light) ===================================================================== */ .seo-gsc{ background:#fff; border-radius:14px; padding:15px 16px; color:#202124; font-family:var(--font-body); border:1px solid rgba(0,0,0,.06); box-shadow:0 26px 60px -30px rgba(0,0,0,.5); max-width:100%; } .seo-gsc__head{ display:flex; align-items:center; gap:8px; font-size:13px; color:#3c4043; margin-bottom:12px; } .seo-gsc__head .seo-ic{ --s:18px; } .seo-gsc__metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; } .seo-gsc__m{ padding:9px 10px; border-radius:9px; border:1px solid #eaecef; } .seo-gsc__m b{ display:block; font-size:17px; color:#202124; font-weight:700; } .seo-gsc__m span{ font-size:10.5px; color:#70757a; display:flex; align-items:center; gap:5px; } .seo-gsc__m span::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--mc,#5E97F6); } .seo-gsc__m--clicks span::before{ background:#5E97F6; } .seo-gsc__m--imp span::before{ background:#AA66CC; } .seo-gsc__m--ctr span::before{ background:#1DB954; } .seo-gsc__m--pos span::before{ background:#E8710A; } .seo-gsc__chart{ height:90px; } .seo-gsc__chart svg{ width:100%; height:100%; } .seo-gsc__clicks{ fill:none; stroke:#5E97F6; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .seo-gsc__imp{ fill:none; stroke:#AA66CC; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .seo-gsc__fill{ fill:url(#seo-gsc-fill); opacity:.18; } /* ===================================================================== ANALYTICS PANEL (always-light) ===================================================================== */ .seo-ga{ background:#fff; border-radius:14px; padding:15px 16px; color:#202124; font-family:var(--font-body); border:1px solid rgba(0,0,0,.06); box-shadow:0 26px 60px -30px rgba(0,0,0,.5); max-width:100%; } .seo-ga__head{ display:flex; align-items:center; gap:8px; font-size:13px; color:#3c4043; margin-bottom:10px; } .seo-ga__head .seo-ic{ --s:18px; } .seo-ga__rt{ display:flex; align-items:baseline; gap:9px; margin-bottom:10px; } .seo-ga__rtn{ font-family:var(--font-display); font-weight:700; font-size:30px; color:#202124; } .seo-ga__rtl{ font-size:11.5px; color:#137333; display:inline-flex; align-items:center; gap:5px; } .seo-ga__rtl::before{ content:""; width:8px; height:8px; border-radius:50%; background:#1DB954; box-shadow:0 0 7px #1DB954; } .seo-ga__bars{ display:flex; align-items:flex-end; gap:3px; height:40px; margin-bottom:12px; } .seo-ga__bars i{ flex:1; background:linear-gradient(180deg,#E8710A,#F9AB00); border-radius:2px 2px 0 0; } .seo-ga__src{ display:flex; flex-direction:column; gap:7px; } .seo-ga__srow{ display:grid; grid-template-columns:80px 1fr 36px; align-items:center; gap:9px; font-size:12px; color:#3c4043; } .seo-ga__bar{ height:7px; border-radius:4px; background:#eef0f2; overflow:hidden; } .seo-ga__bar i{ display:block; height:100%; border-radius:4px; } .seo-ga__bar--org i{ background:#1DB954; } .seo-ga__bar--dir i{ background:#4285F4; } .seo-ga__bar--ref i{ background:#E8710A; } /* ===================================================================== BROWSER FRAME (website screenshot) ===================================================================== */ .seo-browser{ border-radius:12px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 24px 60px -34px rgba(0,0,0,.6); max-width:100%; } .seo-browser__bar{ display:flex; align-items:center; gap:9px; padding:9px 12px; background:#f1f3f4; border-bottom:1px solid #e3e6e8; } /* generic browser chrome — neutral monochrome dots (not macOS traffic-lights) so the framed Google/Windows screenshot reads as ONE coherent product shot, no OS clash */ .seo-browser__dots{ display:flex; gap:6px; flex:none; } .seo-browser__dots i{ width:8px; height:8px; border-radius:50%; background:#c4c8cc; } .seo-browser__url{ flex:1; display:flex; align-items:center; gap:7px; padding:5px 11px; background:#fff; border:1px solid #e3e6e8; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; color:#5f6368; min-width:0; } .seo-browser__url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .seo-browser__lock{ width:11px; height:11px; flex:none; color:#1DB954; } .seo-browser__body{ position:relative; aspect-ratio:16/10; background:#fff; overflow:hidden; } .seo-browser__body img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } /* ===================================================================== GOOGLE-MAPS-STYLE SURFACE (light, realistic) ===================================================================== */ .seo-gmap{ position:relative; overflow:hidden; border-radius:12px; background: radial-gradient(circle at 86% 14%, #AAD5F7 0 16%, rgba(170,213,247,0) 17%), radial-gradient(ellipse 22% 26% at 16% 80%, #C3E6C0 0 70%, rgba(195,230,192,0) 72%), radial-gradient(ellipse 16% 18% at 74% 86%, #C3E6C0 0 70%, rgba(195,230,192,0) 72%), linear-gradient(135deg,#F3F1EA,#E9EDE3); } .seo-gmap::before{ content:""; position:absolute; inset:-10%; background: repeating-linear-gradient(26deg, transparent 0 46px, #d7d4cc 46px 47px, #ffffff 47px 51px, #d7d4cc 51px 52px, transparent 52px 96px), repeating-linear-gradient(116deg, transparent 0 54px, #dcd9d1 54px 55px, #ffffff 55px 58px, #dcd9d1 58px 59px, transparent 59px 110px); opacity:.9; } .seo-gmap::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(72deg, transparent 0 120px, #FBD9A8 120px 124px, transparent 124px 240px); opacity:.7; } /* highway */ .seo-gmap__attr{ position:absolute; right:6px; bottom:4px; font-family:var(--font-body); font-size:9px; color:#9a9a93; z-index:5; } .seo-gmap > .seo-mappin,.seo-gmap > [class*="pin"]{ position:absolute; z-index:4; } /* status badges (shared) */ .seo-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); } .seo-badge--good{ color:#0b7a3b; background:rgba(29,185,84,.14); } .seo-system .seo-badge--good{ background:rgba(29,185,84,.12); } .seo-badge--warn{ color:#a9791a; background:rgba(224,168,46,.16); } .seo-badge--bad{ color:#b3392d; background:rgba(219,68,55,.14); } .seo-cinema .seo-badge--good{ color:#5ef0a0; } .seo-cinema .seo-badge--warn{ color:#f2cd6b; } .seo-cinema .seo-badge--bad{ color:#ff8b80; } /* ===================================================================== DONUT + HEAT MAP (JS-built) ===================================================================== */ .seo-donut{ position:relative; display:inline-grid; place-items:center; width:120px; height:120px; } .seo-donut__svg{ width:100%; height:100%; } .seo-donut__c{ position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1.05; text-align:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--c-ink); } .seo-heat{ display:grid; gap:3px; } .seo-heat__c{ aspect-ratio:1; border-radius:3px; background:var(--heat,rgba(10,138,79,.1)); transform:scale(0); animation:seoHeatPop .4s var(--ease-out) forwards; animation-delay:calc(var(--i,0) * 7ms); } @keyframes seoHeatPop{ to{ transform:scale(1); } } .no-gsap .seo-heat__c{ transform:scale(1); animation:none; } .seo-heat__c[data-v="0"]{ --heat:rgba(10,138,79,.08); } .seo-heat__c[data-v="1"]{ --heat:rgba(10,138,79,.26); } .seo-heat__c[data-v="2"]{ --heat:rgba(10,138,79,.46); } .seo-heat__c[data-v="3"]{ --heat:rgba(13,166,90,.7); } .seo-heat__c[data-v="4"]{ --heat:rgba(15,184,102,.95); } .seo-cinema .seo-heat__c[data-v="0"]{ --heat:rgba(39,245,140,.08); } .seo-cinema .seo-heat__c[data-v="1"]{ --heat:rgba(39,245,140,.28); } .seo-cinema .seo-heat__c[data-v="2"]{ --heat:rgba(39,245,140,.5); } .seo-cinema .seo-heat__c[data-v="3"]{ --heat:rgba(39,245,140,.74); } .seo-cinema .seo-heat__c[data-v="4"]{ --heat:rgba(59,255,156,.98); box-shadow:0 0 8px -1px var(--green-glow); } /* reduced motion */ @media (prefers-reduced-motion:reduce){ .seo-draw{ stroke-dashoffset:0 !important; transition:none; } .seo-heat__c{ animation:none; transform:scale(1); } } /* mobile: Search Console metric grid 4-up -> 2-up so the panel never overflows */ @media (max-width:440px){ .seo-gsc__metrics{ grid-template-columns:repeat(2,1fr); } } /* ===================================================================== SECTION 01 — HERO (dark / cinema) Split layout: search-dominance copy + a cinematic search-ecosystem stage — a dimensional glowing globe (dotted-continent texture, atmo rim, orbiting rings, connection arcs) orbited by real-looking platform cards (Google SERP, local 3-pack, AI recommends, score, traffic, keyword ranks, backlinks/DA, featured-in chips). Trust marquee + proof. Scope: .s1 ===================================================================== */ .s1{ overflow:clip; } .s1 .seo-orb--1{ top:-200px; left:-160px; opacity:.5; } .s1 .seo-orb--2{ bottom:-220px; right:-160px; opacity:.4; } /* balanced two-up: copy left, composite right. The grid STRETCHES both columns to equal height; the copy column defines that height (its rating line is the last item) and the visual fills its cell top-to-bottom — so the image starts exactly where the copy starts and ends where it ends, and the two halves are perfectly aligned. */ .s1-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(22px,2.6vw,44px); align-items:center; } /* ---------- COPY ---------- */ .s1-copy{ min-width:0; } .s1-title{ margin-bottom:16px; letter-spacing:0; } .s1-title .seo-line{ display:block; overflow:hidden; padding-bottom:.06em; } .s1-title .s1-linei{ display:block; } /* hero headline sized so the copy column's total height ≈ the composite's landscape ratio — the image then fills its cell with near-zero crop */ .s1-title.seo-title--hero{ font-size:clamp(30px,3.3vw,46px); line-height:.98; } /* lead fills the column (fewer line-wraps → shorter copy → wider image box) */ .s1-lead{ max-width:62ch; margin-bottom:18px; line-height:1.5; font-size:15.5px; } .s1-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; } /* compact the two CTAs so they share ONE row — a second row would push the copy ~74px taller and force the landscape composite to crop. */ .s1-ctas .seo-btn{ padding:13px 19px; font-size:13px; letter-spacing:.05em; gap:8px; } /* feature band — full width, four across, sits UNDER the two-up so the copy column stays short enough to match the landscape composite's height */ .s1-feats{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:clamp(30px,3.6vw,48px); } .s1-feat{ display:flex; align-items:center; gap:12px; min-width:0; padding:13px 15px; border-radius:var(--r-sm); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); position:relative; overflow:hidden; transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } .s1-feat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); opacity:.5; } .s1-feat--g::before{ background:var(--g-blue); } .s1-feat--ai::before{ background:linear-gradient(180deg,var(--chatgpt),var(--claude)); } .s1-feat--maps::before{ background:var(--maps); } .s1-feat--rev::before{ background:var(--green); } @media (hover:hover){ .s1-feat:hover{ border-color:var(--c-line-green); transform:translateY(-2px); } } .s1-feat__ic{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--green); background:radial-gradient(circle at 50% 28%,rgba(39,245,140,.16),transparent 65%),var(--c-panel-2); border:1px solid var(--c-line-green); } .s1-feat__ic--ai{ gap:1px; padding:0 5px; width:auto; min-width:36px; } .s1-feat__ic .seo-ic{ color:var(--c-ink); } .s1-feat--g .s1-feat__ic .seo-ic{ color:var(--g-blue); } .s1-feat--maps .s1-feat__ic .seo-ic{ color:var(--maps); } .s1-feat--rev .s1-feat__ic .seo-ic{ color:var(--green); } .s1-feat__body{ display:flex; flex-direction:column; gap:3px; min-width:0; } .s1-feat__t{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--c-ink); text-transform:uppercase; } .s1-feat__d{ font-size:12.5px; color:var(--c-ink-3); line-height:1.3; } /* subtle Google-colour wash behind each feature icon to echo the platform cue */ .s1-feat--g .s1-feat__ic{ background:radial-gradient(circle at 50% 28%,rgba(66,133,244,.18),transparent 65%),var(--c-panel-2); border-color:rgba(66,133,244,.32); } .s1-feat--maps .s1-feat__ic{ background:radial-gradient(circle at 50% 28%,rgba(52,168,83,.18),transparent 65%),var(--c-panel-2); border-color:rgba(52,168,83,.30); } .s1-trustline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .s1-rate{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:14px; color:var(--c-ink); } .s1-rate strong{ color:var(--green); } .s1-trustline__sep{ width:1px; height:18px; background:var(--c-line); } .s1-trustline__txt{ font-size:13px; color:var(--c-ink-3); max-width:360px; line-height:1.4; } .s1-trustline__txt strong{ color:var(--c-ink-2); font-weight:600; } /* ==================================================================== STAGE / SEARCH-ECOSYSTEM ==================================================================== */ /* The composite is a TRANSPARENT RGBA landscape PNG. It renders at its NATURAL ratio, sized to its column and vertically centred against the copy — so it is never cropped and never forced to a height that makes it dominate the fold. A soft green halo anchors it so it reads as floating UI, not a boxed image. */ .s1-stage{ position:relative; min-width:0; } .s1-stage::before{ content:""; position:absolute; inset:-8% -6% -10% -6%; z-index:0; background:radial-gradient(58% 56% at 55% 46%,rgba(39,245,140,.16),transparent 72%); filter:blur(38px); pointer-events:none; } .s1-heroshot{ position:relative; z-index:1; display:block; width:100%; height:auto; max-width:100%; } .s1-heroshot.is-noimg{ display:none; } /* ==================================================================== TRUST MARQUEE ==================================================================== */ .s1-trust{ margin-top:clamp(54px,7vw,90px); } .s1-trust__h{ text-align:center; margin-bottom:22px; color:var(--c-ink-3); } /* ONE seamless line: the row holds two identical chip halves and the shared seoMarq keyframe slides it -50%. Use per-chip margin (not flex gap) so each half is self-contained and the -50% wrap is pixel-perfect (no hiccup). */ .s1-trust__marq .seo-marquee__row{ gap:0; align-items:center; } /* marquee logo chips — REAL logos on white chips, sized to FILL their box */ .s1-mchip{ flex:none; display:inline-grid; place-items:center; height:66px; min-width:108px; padding:0 20px; margin-right:42px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 26px -14px rgba(0,0,0,.6); opacity:.95; transition:opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } .s1-mchip img{ display:block; width:auto; max-width:150px; height:46px; max-height:50px; object-fit:contain; } .s1-mchip--client img{ height:52px; max-height:54px; max-width:172px; } .s1-mchip.is-noimg{ display:none; } @media (hover:hover){ .s1-mchip:hover{ opacity:1; transform:translateY(-2px); } } @media (max-width:600px){ .s1-mchip{ height:54px; min-width:84px; padding:0 16px; margin-right:28px; } .s1-mchip img{ height:34px; max-height:38px; } .s1-mchip--client img{ height:40px; max-height:42px; } } /* ==================================================================== PROOF STAT ROW ==================================================================== */ .s1-stats{ margin-top:clamp(48px,6vw,76px); display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } .s1-stat{ padding:24px 20px; border-radius:var(--r); text-align:center; min-width:0; background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease; } @media (hover:hover){ .s1-stat:hover{ border-color:var(--c-line-green); transform:translateY(-4px); box-shadow:0 0 44px -20px var(--green-glow); } } .s1-stat__n{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.2vw,42px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s1-stat__l{ display:block; margin-top:10px; font-size:13px; line-height:1.35; color:var(--c-ink-3); } /* ==================================================================== RESPONSIVE ==================================================================== */ /* Keep the side-by-side two-up across laptop widths (it uses the horizontal space and keeps the headline + CTA in view). Only STACK on tablets/phones (<=1024), where a narrow copy column would get cramped — and there the image is capped to a sensible size so it never fills the whole viewport and hides the text below it. */ @media (max-width:1024px){ .s1-grid{ grid-template-columns:1fr; } .s1-copy{ order:2; max-width:760px; } .s1-stage{ order:1; width:100%; max-width:540px; margin:0 auto 14px; } .s1-ctas .seo-btn{ font-size:13.5px; padding:14px 22px; letter-spacing:.06em; } } @media (max-width:860px){ .s1-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px){ .s1-stats{ grid-template-columns:repeat(3,1fr); } .s1-stat:nth-child(4){ grid-column:1 / 3; } .s1-stat:nth-child(5){ grid-column:3 / 4; } } @media (max-width:600px){ .s1-ctas .seo-btn{ width:100%; justify-content:center; } .s1-stage{ max-width:480px; } } @media (max-width:480px){ .s1-stats{ grid-template-columns:repeat(2,1fr); } .s1-stat:nth-child(4){ grid-column:auto; } .s1-stat:nth-child(5){ grid-column:1 / 3; } } @media (max-width:420px){ .s1-feats{ grid-template-columns:1fr; } } /* ===================================================================== SECTION 02 — SEO GROWTH ENGINE (dark / cinema) Radial showpiece: layered reactor core + 12 platform-aware service nodes on two orbits, animated green-current energy conduits, 3 live dashboard stat tiles, floating system-status chips, outcome rail. Collapses to a designed mobile core + system grid under ~860px. Scope: .s2 ===================================================================== */ .s2{ overflow:clip; } .s2-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--c-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 50%,#000,transparent 78%); mask-image:radial-gradient(ellipse 70% 58% at 50% 50%,#000,transparent 78%); } .s2-lead{ margin-left:auto; margin-right:auto; } /* ===================== TOP STAT TILES (live dashboard) ============== */ .s2-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:clamp(20px,4vw,40px); } .s2-stat{ position:relative; min-width:0; padding:18px 20px 16px; border-radius:var(--r); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); display:flex; flex-direction:column; gap:5px; overflow:hidden; isolation:isolate; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 50px -38px rgba(0,0,0,.9); transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease; } .s2-stat::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 80% at 80% -10%,rgba(39,245,140,.10),transparent 60%); opacity:.85; } .s2-stat--lead::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--green-bright),var(--green) 60%,transparent); box-shadow:0 0 16px var(--green-glow); } @media (hover:hover){ .s2-stat:hover{ border-color:var(--c-line-green); transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 60px -34px rgba(0,0,0,.95),0 0 44px -22px var(--green-glow); } } .s2-stat__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .s2-stat__chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); min-width:0; } .s2-stat__chip .seo-ic{ color:var(--c-accent); opacity:.9; flex:none; } .s2-stat__delta{ display:inline-flex; align-items:center; gap:4px; flex:none; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:var(--r-pill); } .s2-stat__delta svg{ width:9px; height:9px; } .s2-stat__delta--up{ color:var(--green); background:rgba(39,245,140,.10); border:1px solid var(--c-line-green); } .s2-stat__n{ display:flex; align-items:baseline; gap:1px; font-family:var(--font-display); font-weight:700; font-size:clamp(34px,3.8vw,48px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:0; margin-top:4px; text-shadow:0 0 24px rgba(39,245,140,.18); } .s2-stat__unit{ font-size:.5em; font-weight:700; color:var(--green); transform:translateY(-.18em); margin-left:1px; } .s2-stat__d{ font-size:12.5px; color:var(--c-ink-3); line-height:1.3; } .s2-stat__leg{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-3); opacity:.78; margin-top:7px; } .s2-stat__legkey{ width:14px; height:0; border-top:2px solid var(--green); border-radius:2px; flex:none; box-shadow:0 0 6px var(--green-glow); } .s2-stat__spark{ width:100%; height:38px; margin-top:6px; overflow:visible; } .s2-stat__sparkline{ fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px var(--green-glow)); } .s2-stat__bars{ display:flex; align-items:flex-end; gap:3px; height:22px; margin-top:4px; opacity:.55; } .s2-stat__foot{ display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--c-line); font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--c-ink-3); } .s2-stat__foot b{ color:var(--c-ink); font-weight:600; } .s2-stat__fdot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--green); box-shadow:0 0 7px var(--green); } /* ===================== DATA PATHWAY (search->rank->traffic->lead) ====== */ .s2-flow{ position:relative; margin:clamp(22px,3vw,34px) auto clamp(6px,1.4vw,14px); max-width:760px; display:flex; flex-direction:column; align-items:center; gap:12px; } .s2-flow__lab{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-ink-3); } .s2-flow__track{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; justify-content:center; gap:0; width:100%; min-width:0; flex-wrap:nowrap; } .s2-flow__step{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 8px 12px; border-radius:var(--r-sm); border:1px solid var(--c-line); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } /* connecting pathway with a travelling pulse between steps */ .s2-flow__step:not(:last-child){ margin-right:34px; } .s2-flow__step:not(:last-child)::after{ content:""; position:absolute; right:-34px; top:50%; width:34px; height:2px; transform:translateY(-50%); border-radius:2px; z-index:0; background:linear-gradient(90deg,var(--c-line-green),rgba(39,245,140,.25)); -webkit-mask:linear-gradient(90deg,#000,#000); } .s2-flow__step:not(:last-child)::before{ content:""; position:absolute; right:-34px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); z-index:1; opacity:0; animation:s2FlowPulse 2.4s linear infinite; animation-delay:var(--fd,0s); } .s2-flow__step:nth-child(1)::before{ --fd:0s; } .s2-flow__step:nth-child(2)::before{ --fd:.6s; } .s2-flow__step:nth-child(3)::before{ --fd:1.2s; } @keyframes s2FlowPulse{ 0%{ left:auto; right:-34px; opacity:0; transform:translateX(0) } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ opacity:0; transform:translateX(34px) } } .s2-flow__ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#fff; padding:6px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 4px 12px -6px rgba(0,0,0,.7); } .s2-flow__ico img{ width:100%; height:100%; object-fit:contain; display:block; } .s2-flow__ico.is-noimg{ background:var(--c-panel-2); box-shadow:inset 0 0 0 1px var(--c-line-green); } .s2-flow__name{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--c-ink); line-height:1.2; } .s2-flow__val{ font-family:var(--font-mono); font-size:10px; letter-spacing:.02em; color:var(--green); font-variant-numeric:tabular-nums; } .s2-flow__step--win{ border-color:var(--c-line-green); background:radial-gradient(120% 120% at 50% 0,rgba(39,245,140,.12),transparent 62%),linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); } .s2-flow__step--win .s2-flow__val{ color:var(--green-bright); } @media (hover:hover){ .s2-flow__step{ transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out); } .s2-flow__step:hover{ border-color:var(--c-line-green); transform:translateY(-2px); } } /* ===================== THE ENGINE STAGE ===================== */ .s2-engine{ position:relative; width:min(100%,900px); aspect-ratio:1/1; margin:8px auto 0; isolation:isolate; perspective:1100px; } /* ---- 3D depth / parallax field behind the ring ---- */ .s2-depth{ position:absolute; inset:0; z-index:0; pointer-events:none; transform-style:preserve-3d; } .s2-depth__layer{ position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); border:1px solid var(--c-line); opacity:.5; will-change:transform; } .s2-depth__layer--1{ width:58%; aspect-ratio:1/1; border-color:var(--c-line-green); opacity:.4; box-shadow:inset 0 0 60px -30px var(--green-glow); animation:s2DepthDrift 22s ease-in-out infinite; } .s2-depth__layer--2{ width:78%; aspect-ratio:1/1; opacity:.32; animation:s2DepthDrift 28s ease-in-out infinite reverse; } .s2-depth__layer--3{ width:98%; aspect-ratio:1/1; opacity:.22; animation:s2DepthDrift 34s ease-in-out infinite; } @keyframes s2DepthDrift{ 0%,100%{ transform:translate(-50%,-50%) rotate(0deg) } 50%{ transform:translate(-50%,-51%) rotate(8deg) } } .s2-depth__bloom{ position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(39,245,140,.22),rgba(39,245,140,.06) 45%,transparent 70%); filter:blur(26px); animation:s2BloomPulse 5s var(--ease-out) infinite; } @keyframes s2BloomPulse{ 0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12) } } .s2-depth__star{ position:absolute; left:var(--sx); top:var(--sy); width:3px; height:3px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); opacity:.4; animation:s2Twinkle 4s var(--ease-out) infinite; animation-delay:var(--sd,0s); } @keyframes s2Twinkle{ 0%,100%{ opacity:.18; transform:scale(.7) } 50%{ opacity:.85; transform:scale(1.2) } } /* reveal-in: depth field fades up */ .s2-engine[data-reveal]{ } .s2-depth{ opacity:0; transition:opacity .8s var(--ease-out); } .s2-engine.is-revealed .s2-depth{ opacity:1; } /* ---- travelling energy dots along spokes ---- */ .s2-energy{ pointer-events:none; } .s2-energy__dot{ fill:var(--green-bright); filter:drop-shadow(0 0 4px var(--green-glow)); animation:s2Travel 2.8s linear infinite; animation-delay:var(--ed,0s); offset-rotate:0deg; } .s2-energy__dot--out{ fill:var(--green); animation-duration:3.6s; opacity:.85; } @keyframes s2Travel{ 0%{ transform:translate(0,0); opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ transform:translate(calc(var(--ex) - 200px),calc(var(--ey) - 200px)); opacity:0 } } .s2-spokes{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none; } .s2 .seo-current__line{ stroke-width:1.5; opacity:.9; } .s2 .seo-current__track{ stroke-width:1.2; opacity:.55; } .s2-spokeset--outer .seo-current__line{ animation-duration:4.4s; opacity:.62; } .s2-spokeset--outer .seo-current__track{ opacity:.38; } /* ---- reactor core ---- */ .s2-core{ position:absolute; top:50%; left:50%; z-index:6; width:31%; aspect-ratio:1/1; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; outline:none; } .s2-core:focus-visible{ box-shadow:0 0 0 3px rgba(39,245,140,.35); } .s2-core__face{ position:relative; z-index:3; width:80%; aspect-ratio:1/1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:7%; background: radial-gradient(circle at 50% 30%,rgba(39,245,140,.20),transparent 60%), radial-gradient(circle at 50% 120%,rgba(10,138,79,.30),transparent 55%), linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line-green); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 60px -22px var(--green-glow),0 0 90px -16px var(--green-glow),0 36px 80px -42px rgba(0,0,0,.95); } /* layered reactor plates + energy bolt */ .s2-core__reactor{ position:relative; width:clamp(40px,4.6vw,62px); aspect-ratio:1/1; display:grid; place-items:center; margin-bottom:2px; } .s2-core__plate{ position:absolute; inset:0; border-radius:50%; } .s2-core__plate--1{ background:radial-gradient(circle at 50% 38%,rgba(39,245,140,.55),rgba(39,245,140,.05) 70%); filter:blur(1px); animation:s2Breathe 3.4s var(--ease-out) infinite; } .s2-core__plate--2{ inset:14%; border:1px solid rgba(39,245,140,.55); box-shadow:inset 0 0 14px rgba(39,245,140,.4); animation:s2Spin 9s linear infinite; -webkit-mask:conic-gradient(from 0deg,#000 0 70%,transparent 0); mask:conic-gradient(from 0deg,#000 0 70%,transparent 0); } .s2-core__plate--3{ inset:30%; border-radius:50%; background:radial-gradient(circle,var(--green-bright),var(--green) 55%,rgba(10,138,79,.4)); box-shadow:0 0 22px var(--green-glow),inset 0 0 8px rgba(255,255,255,.5); animation:s2Breathe 3.4s var(--ease-out) infinite; } .s2-core__bolt{ position:relative; z-index:2; width:46%; color:#04140C; display:grid; place-items:center; filter:drop-shadow(0 1px 1px rgba(255,255,255,.4)); animation:s2Float 5s var(--ease-out) infinite; } .s2-core__bolt svg{ width:100%; height:100%; } @keyframes s2Float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } } @keyframes s2Breathe{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.08); opacity:1 } } .s2-core__label{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0; line-height:.98; color:var(--c-ink); font-size:clamp(12px,1.6vw,20px); } .s2-core__sub{ font-family:var(--font-mono); font-size:clamp(7px,.85vw,9.5px); letter-spacing:.04em; color:var(--c-accent); line-height:1.3; } .s2-core__live{ margin-top:4px; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); background:rgba(39,245,140,.07); border:1px solid var(--c-line-green); } .s2-core__livedot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:seoPulse 2s var(--ease-out) infinite; } .s2-core__livenum{ font-family:var(--font-mono); font-size:clamp(10.5px,.9vw,12px); letter-spacing:.02em; color:var(--c-ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; } /* core rings */ .s2-ring{ position:absolute; border-radius:50%; pointer-events:none; } .s2-ring--halo{ inset:-26%; background:radial-gradient(circle,rgba(39,245,140,.18),transparent 62%); filter:blur(8px); animation:s2HaloPulse 4s var(--ease-out) infinite; } .s2-ring--conic{ inset:-4%; background:conic-gradient(from 0deg,transparent 0deg,rgba(39,245,140,0) 200deg,var(--green) 320deg,var(--green-bright) 350deg,transparent 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); animation:s2Spin 7s linear infinite; filter:drop-shadow(0 0 6px var(--green-glow)); } .s2-ring--ticks{ inset:-9%; border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--c-line-green) 0deg 1deg,transparent 1deg 15deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px) calc(100% - 1px),transparent 100%); mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px) calc(100% - 1px),transparent 100%); opacity:.6; animation:s2Spin 60s linear infinite; } .s2-ring--dash{ inset:-15%; border:1.5px dashed var(--c-line-green); animation:s2Spin 36s linear infinite reverse; } .s2-ring--pulse{ inset:0; border:1px solid var(--green); opacity:0; animation:s2Pulse 3.6s var(--ease-out) infinite; } .s2-ring--pulse2{ animation-delay:1.8s; } @keyframes s2Spin{ to{ transform:rotate(360deg) } } @keyframes s2Pulse{ 0%{ transform:scale(1); opacity:.55 } 70%{ opacity:0 } 100%{ transform:scale(1.9); opacity:0 } } @keyframes s2HaloPulse{ 0%,100%{ opacity:.6; transform:scale(1) } 50%{ opacity:1; transform:scale(1.06) } } /* orbit nodes */ .s2-orbit{ position:absolute; inset:0; z-index:5; } .s2-node{ position:absolute; inset:0; transform:rotate(var(--ang)); transform-origin:center; pointer-events:none; } .s2-node__inner{ position:absolute; top:50%; width:0; height:0; transform:rotate(calc(-1 * var(--ang))); } .s2-orbit--inner .s2-node__inner{ left:73.2%; } .s2-orbit--outer .s2-node__inner{ left:92%; } .s2-node__btn{ position:absolute; left:0; top:0; pointer-events:auto; transform:translate(-50%,-50%); display:block; animation:s2Bob var(--bob,6s) var(--ease-out) infinite; } .s2-node:nth-child(2) .s2-node__btn{ --bob:6.6s; animation-delay:-1s; } .s2-node:nth-child(3) .s2-node__btn{ --bob:7.2s; animation-delay:-2s; } .s2-node:nth-child(4) .s2-node__btn{ --bob:6.2s; animation-delay:-3s; } .s2-node:nth-child(5) .s2-node__btn{ --bob:6.9s; animation-delay:-1.6s; } .s2-node:nth-child(6) .s2-node__btn{ --bob:7.4s; animation-delay:-2.4s; } @keyframes s2Bob{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 5px)) } } .s2-node__icon{ position:relative; width:clamp(52px,6.4vw,70px); aspect-ratio:1/1; display:grid; place-items:center; border-radius:50%; color:var(--c-accent); background: radial-gradient(circle at 50% 26%,rgba(39,245,140,.18),transparent 64%), linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line-green); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 34px -18px rgba(0,0,0,.92); transition:transform var(--dur-ui) var(--ease-snap),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,background var(--dur-ui) ease; } .s2-node--out .s2-node__icon{ width:clamp(48px,5.6vw,62px); } .s2-node__icon > svg{ width:46%; height:46%; } .s2-node__icon .seo-ic{ filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); } .s2-node__star{ color:var(--g-yellow); } /* real platform logo on a white disc (visible on dark engine) */ .s2-logo{ display:grid; place-items:center; width:58%; aspect-ratio:1/1; border-radius:50%; background:#fff; padding:13%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 2px 8px -2px rgba(0,0,0,.5); } .s2-logo img{ width:100%; height:100%; object-fit:contain; display:block; } .s2-logo--duo{ position:relative; } .s2-logo--duo .s2-logo__sub{ position:absolute; right:-22%; bottom:-14%; width:54%; aspect-ratio:1/1; background:#fff; border-radius:50%; padding:11%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 3px 9px -3px rgba(0,0,0,.6); } .s2-logo--duo .s2-logo__sub img{ width:100%; height:100%; object-fit:contain; display:block; } .s2-node__icon.is-noimg .s2-logo{ background:transparent; box-shadow:none; } .s2-node__icon::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--green); opacity:.5; animation:s2NodePulse 3.4s var(--ease-out) infinite; } .s2-node:nth-child(odd) .s2-node__icon::after{ animation-delay:-1.7s; } @keyframes s2NodePulse{ 0%{ transform:scale(1); opacity:.45 } 70%,100%{ transform:scale(1.45); opacity:0 } } /* platform badge on each orb */ .s2-node__badge{ position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; z-index:2; background:var(--c-panel-2); border:1px solid var(--c-line-green); color:var(--c-accent); box-shadow:0 4px 12px -4px rgba(0,0,0,.8); } .s2-node--out .s2-node__badge{ width:24px; height:24px; } .s2-node__badge--blue{ color:var(--maps); border-color:rgba(26,115,232,.5); background:#0a1422; } .s2-node__badge--ai{ color:var(--gemini-b); border-color:rgba(155,114,203,.5); background:#160f1f; } .s2-node__badge--gold{ color:var(--g-yellow); border-color:rgba(251,188,5,.5); background:#1c1606; } .s2-node__badge--orange{ color:var(--ga); border-color:rgba(232,113,10,.5); background:#1c1106; } .s2-node__rank{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0; } /* label + tiny metric */ .s2-node__label{ position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--font-mono); font-size:clamp(10.5px,1vw,13px); letter-spacing:.02em; color:var(--c-ink-2); white-space:nowrap; padding:4px 10px 5px; border-radius:12px; background:rgba(8,12,11,.66); border:1px solid var(--c-line); backdrop-filter:blur(4px); transition:color var(--dur-ui) ease,border-color var(--dur-ui) ease; } .s2-node__metric{ font-size:9.5px; letter-spacing:.03em; color:var(--green); font-variant-numeric:tabular-nums; } @media (hover:hover){ .s2-node__btn:hover .s2-node__icon{ transform:scale(1.15); border-color:var(--green); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 44px -16px rgba(0,0,0,.92),0 0 38px -6px var(--green-glow); background:radial-gradient(circle at 50% 28%,rgba(39,245,140,.32),transparent 70%),var(--c-panel-2); } .s2-node__btn:hover .s2-node__label{ color:var(--c-ink); border-color:var(--c-line-green); } .s2-node__btn:hover .s2-node__badge{ border-color:var(--green); } } .s2-node__btn:focus-visible .s2-node__icon{ transform:scale(1.15); border-color:var(--green); box-shadow:0 0 0 3px rgba(39,245,140,.3),0 20px 44px -16px rgba(0,0,0,.92); } /* tooltip */ .s2-tip{ position:absolute; left:0; top:0; transform:translate(-50%,calc(-50% - 64px)); width:max-content; max-width:220px; padding:10px 13px; border-radius:var(--r-sm); background:rgba(10,16,14,.95); border:1px solid var(--c-line-green); box-shadow:0 24px 60px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(8px); font-family:var(--font-body); font-size:12.5px; line-height:1.45; color:var(--c-ink-2); text-align:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility var(--dur-ui); z-index:20; } .s2-tip b{ display:block; margin-bottom:3px; font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--green); } .s2-tip::after{ content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px; transform:translateX(-50%) rotate(45deg); background:rgba(10,16,14,.95); border-right:1px solid var(--c-line-green); border-bottom:1px solid var(--c-line-green); } .s2-node__btn:hover + .s2-tip,.s2-node__btn:focus-visible + .s2-tip,.s2-node:focus-within .s2-tip{ opacity:1; visibility:visible; transform:translate(-50%,calc(-50% - 72px)); } /* lower nodes flip tooltip below */ .s2-orbit--outer .s2-node[style*="90deg"] .s2-tip, .s2-orbit--outer .s2-node[style*="150deg"] .s2-tip, .s2-orbit--inner .s2-node[style*="60deg"] .s2-tip, .s2-orbit--inner .s2-node[style*="120deg"] .s2-tip{ transform:translate(-50%,calc(50% + 64px)); } .s2-orbit--outer .s2-node[style*="90deg"] .s2-node__btn:hover + .s2-tip, .s2-orbit--outer .s2-node[style*="150deg"] .s2-node__btn:hover + .s2-tip, .s2-orbit--inner .s2-node[style*="60deg"] .s2-node__btn:hover + .s2-tip, .s2-orbit--inner .s2-node[style*="120deg"] .s2-node__btn:hover + .s2-tip, .s2-orbit--outer .s2-node[style*="90deg"] .s2-node__btn:focus-visible + .s2-tip, .s2-orbit--outer .s2-node[style*="150deg"] .s2-node__btn:focus-visible + .s2-tip, .s2-orbit--inner .s2-node[style*="60deg"] .s2-node__btn:focus-visible + .s2-tip, .s2-orbit--inner .s2-node[style*="120deg"] .s2-node__btn:focus-visible + .s2-tip, .s2-orbit--outer .s2-node[style*="90deg"]:focus-within .s2-tip, .s2-orbit--outer .s2-node[style*="150deg"]:focus-within .s2-tip, .s2-orbit--inner .s2-node[style*="60deg"]:focus-within .s2-tip, .s2-orbit--inner .s2-node[style*="120deg"]:focus-within .s2-tip{ transform:translate(-50%,calc(50% + 72px)); } .s2-orbit--outer .s2-node[style*="90deg"] .s2-tip::after, .s2-orbit--outer .s2-node[style*="150deg"] .s2-tip::after, .s2-orbit--inner .s2-node[style*="60deg"] .s2-tip::after, .s2-orbit--inner .s2-node[style*="120deg"] .s2-tip::after{ bottom:auto; top:-5px; border-right:none; border-bottom:none; border-left:1px solid var(--c-line-green); border-top:1px solid var(--c-line-green); } /* ---- floating system-status chips ---- */ .s2-status{ position:absolute; z-index:7; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--r-pill); white-space:nowrap; background:rgba(8,14,12,.74); border:1px solid var(--c-line); backdrop-filter:blur(8px); box-shadow:0 18px 40px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--c-ink-3); } .s2-status b{ color:var(--green); font-weight:600; font-variant-numeric:tabular-nums; } .s2-status__dot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--status-good); box-shadow:0 0 8px var(--status-good); animation:seoPulse 2.4s var(--ease-out) infinite; } .s2-status--tl{ left:-1%; top:9%; } .s2-status--tr{ right:-1%; top:9%; } .s2-status--bl{ left:1%; bottom:11%; } .s2-status--br{ right:1%; bottom:11%; } @media (max-width:1180px){ .s2-status--tl,.s2-status--bl{ left:-2%; } .s2-status--tr,.s2-status--br{ right:-2%; } } @media (max-width:1000px){ .s2-status{ display:none; } } /* ---- system-status detail chips (all widths) ---- */ .s2-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:clamp(26px,3.4vw,40px) auto 0; } /* ---- real-logo "powered by" chip row ---- */ .s2-powered{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(10px,1.6vw,18px); margin:clamp(20px,2.6vw,30px) auto 0; max-width:100%; } .s2-powered__lab{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); flex:none; } .s2-powered__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; min-width:0; } .s2-powered__chip{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:#fff; padding:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 8px 22px -14px rgba(0,0,0,.9); transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; } .s2-powered__chip img{ width:100%; height:100%; object-fit:contain; display:block; } @media (hover:hover){ .s2-powered__chip:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 14px 30px -14px rgba(0,0,0,.95); } } .s2-powered__chip.is-noimg{ display:none; } /* ===================== MOBILE ENGINE ===================== */ .s2-mobile{ display:none; } .s2-mcore{ position:relative; width:154px; height:154px; margin:18px auto 32px; display:grid; place-items:center; } .s2-mcore__ring{ position:absolute; inset:-10px; border-radius:50%; border:1px dashed var(--c-line-green); animation:s2Spin 30s linear infinite; } .s2-mcore__ring--2{ inset:6px; border-style:solid; border-color:var(--c-line); animation:s2Spin 18s linear infinite reverse; } .s2-mcore__face{ position:relative; z-index:2; width:124px; height:124px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:10px; background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.18),transparent 62%),linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line-green); box-shadow:inset 0 0 44px -20px var(--green-glow),0 0 56px -16px var(--green-glow); } .s2-mcore__glyph{ width:24px; color:var(--green); filter:drop-shadow(0 0 8px var(--green-glow)); } .s2-mcore__label{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:15px; line-height:1; color:var(--c-ink); letter-spacing:0; } .s2-mcore__sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--c-accent); } .s2-mgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .s2-scard{ display:flex; align-items:center; gap:12px; min-width:0; padding:13px 14px; border-radius:var(--r); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s2-scard:hover{ border-color:var(--c-line-green); transform:translateY(-3px); } } .s2-scard__ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--c-accent); background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.16),transparent 65%),var(--c-panel-2); border:1px solid var(--c-line-green); } .s2-scard__ic svg{ width:20px; height:20px; } .s2-scard__ic--platform{ background:var(--c-panel); } .s2-scard__star{ color:var(--g-yellow); } /* real logo on white disc inside mobile card */ .s2-scard__ic--logo{ background:#fff; border-color:rgba(0,0,0,.08); padding:8px; } .s2-scard__ic--logo img{ width:100%; height:100%; object-fit:contain; display:block; } .s2-scard__ic--logo.is-noimg{ background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.16),transparent 65%),var(--c-panel-2); border-color:var(--c-line-green); } .s2-scard__b{ display:flex; flex-direction:column; gap:2px; min-width:0; } .s2-scard__t{ font-family:var(--font-mono); font-size:13px; letter-spacing:.01em; color:var(--c-ink); overflow:hidden; text-overflow:ellipsis; } .s2-scard__m{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--green); } /* ===================== OUTCOME RAIL ===================== */ .s2-rail{ margin:clamp(40px,4.6vw,64px) auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .s2-rail__item{ display:flex; align-items:flex-start; gap:12px; min-width:0; padding:16px 18px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; } @media (hover:hover){ .s2-rail__item:hover{ border-color:var(--c-line-green); transform:translateY(-3px); box-shadow:0 0 40px -18px var(--green-glow); } } .s2-rail__ic{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--c-accent); background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.16),transparent 65%),var(--c-panel-2); border:1px solid var(--c-line-green); } .s2-rail__ic svg{ width:21px; height:21px; } .s2-rail__txt{ font-size:13.5px; line-height:1.4; color:var(--c-ink-2); } .s2-rail__txt strong{ color:var(--c-ink); font-weight:600; } /* ===================== RESPONSIVE ===================== */ @media (max-width:1100px){ .s2-engine{ width:min(100%,760px); } } @media (max-width:980px){ .s2-stats{ grid-template-columns:1fr 1fr; } .s2-stat--lead{ grid-column:1 / -1; } } @media (max-width:860px){ .s2-engine{ display:none; } .s2-mobile{ display:block; } .s2-stats{ grid-template-columns:1fr; } .s2-stat--lead{ grid-column:auto; } .s2-rail{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .s2-rail{ grid-template-columns:1fr; } } @media (max-width:520px){ .s2-mgrid{ grid-template-columns:1fr; } } /* data-pathway becomes a vertical ladder on narrow widths */ @media (max-width:600px){ .s2-flow__track{ flex-direction:column; align-items:stretch; gap:0; } .s2-flow__step{ flex-direction:row; gap:12px; text-align:left; padding:11px 14px; } .s2-flow__step:not(:last-child){ margin-right:0; margin-bottom:26px; } .s2-flow__step:not(:last-child)::after{ right:auto; left:50%; top:auto; bottom:-26px; width:2px; height:26px; transform:translateX(-50%); background:linear-gradient(180deg,var(--c-line-green),rgba(39,245,140,.25)); } .s2-flow__step:not(:last-child)::before{ right:auto; left:50%; top:auto; bottom:-26px; margin:0 0 0 -3.5px; animation-name:s2FlowPulseV; } .s2-flow__name{ flex:1 1 auto; } } @keyframes s2FlowPulseV{ 0%{ top:auto; bottom:0; opacity:0; transform:translateY(0) } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ opacity:0; transform:translateY(26px) } } @media (prefers-reduced-motion:reduce){ .s2-ring--conic,.s2-ring--dash,.s2-ring--ticks,.s2-ring--pulse,.s2-ring--halo,.s2-node__btn,.s2-node__icon::after, .s2-core__bolt,.s2-core__plate--1,.s2-core__plate--2,.s2-core__plate--3,.s2-core__livedot,.s2-status__dot,.s2-mcore__ring, .s2-energy__dot,.s2-depth__layer,.s2-depth__bloom,.s2-depth__star,.s2-flow__step::before{ animation:none !important; } .s2-energy__dot,.s2-flow__step::before{ opacity:0 !important; } .s2-depth{ opacity:1 !important; transition:none; } } @media (hover:none){ .s2-node__btn{ animation:none; } } /* ===================================================================== SECTION 03 — INSIDE GOOGLE'S RANKING ENGINE (light / system) A premium white "ranking intelligence" product: live status strip, left score+metric stack, center SEO CORE REACTOR with orbiting platform icons, right ranking-weight donut + ranking heat map, the 12 scored ranking-factor cards, an algorithm signal-flow chart + competitor panel, and a crawl→index→rank→serve pipeline with a "View Detailed Report" CTA. Scope: .s3 ===================================================================== */ .s3{ overflow:clip; } .s3 .seo-inner{ min-width:0; } /* brighter premium paper backdrop for this section */ .s3{ background: radial-gradient(60% 50% at 18% 0%, rgba(66,133,244,.05), transparent 60%), radial-gradient(55% 50% at 86% 8%, rgba(10,138,79,.06), transparent 60%), linear-gradient(180deg, #FBFEFC, var(--c-bg)); } /* shared panel ------------------------------------------------------ */ .s3-panel{ position:relative; padding:18px; border-radius:var(--r); background:linear-gradient(180deg,#fff,var(--c-panel)); border:1px solid var(--c-line); box-shadow:0 1px 0 #fff inset, var(--c-shadow); min-width:0; } .s3-panel__h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); } .s3-panel__h span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s3-panel__h em{ flex:none; font-style:normal; color:var(--green-deep); display:inline-flex; align-items:center; gap:5px; font-size:10.5px; } .s3-panel__h em::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green-deep); box-shadow:0 0 7px var(--green-deep); animation:seoPulse 2s var(--ease-out) infinite; } /* status strip ------------------------------------------------------ */ .s3-strip{ margin:22px auto 0; max-width:920px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; padding:11px 18px; border-radius:var(--r-pill); background:linear-gradient(180deg,#fff,var(--c-panel)); border:1px solid var(--c-line); box-shadow:var(--c-shadow); } .s3-strip__live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; color:var(--green-deep); font-weight:600; } .s3-strip__live i{ width:8px; height:8px; border-radius:50%; background:var(--green-deep); box-shadow:0 0 0 0 rgba(10,138,79,.5); animation:s3Beat 2.4s var(--ease-out) infinite; } @keyframes s3Beat{ 0%{ box-shadow:0 0 0 0 rgba(10,138,79,.45) } 70%,100%{ box-shadow:0 0 0 7px rgba(10,138,79,0) } } .s3-strip__stat{ display:inline-flex; align-items:baseline; gap:6px; font-size:12px; color:var(--c-ink-3); } .s3-strip__stat b{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s3-strip__stat--upd b{ color:var(--green-deep); } .s3-strip__sep{ width:1px; height:18px; background:var(--c-line); } /* real proof shots (SERP + Ahrefs) ---------------------------------- */ .s3-proof{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:16px; align-items:stretch; } .s3-shot{ margin:0; min-width:0; display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:var(--r); background:linear-gradient(180deg,#fff,var(--c-panel)); border:1px solid var(--c-line); box-shadow:0 1px 0 #fff inset, var(--c-shadow); transform-style:preserve-3d; } .s3-shot__cap{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; } .s3-shot__pill{ display:inline-flex; align-items:center; gap:6px; min-width:0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--green-deep); padding:4px 9px; border-radius:var(--r-pill); background:rgba(10,138,79,.1); border:1px solid var(--paper-line-green); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s3-shot__pill .seo-ic{ color:var(--green-deep); flex:none; } .s3-shot__pill--tool{ color:var(--c-ink-2); background:var(--c-panel-2,#f3f7f4); border-color:var(--c-line); } .s3-shot__logo{ width:14px; height:14px; object-fit:contain; flex:none; display:block; } .s3-shot__t{ flex:none; font-family:var(--font-mono); font-size:11px; color:var(--c-ink-3); white-space:nowrap; } .s3-shot__frame{ position:relative; display:block; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--c-line); background:#fff; box-shadow:0 14px 34px -22px rgba(8,30,20,.5); } .s3-shot__frame img{ display:block; width:100%; height:auto; max-width:100%; } .s3-shot__frame.is-noimg{ min-height:120px; background:repeating-linear-gradient(45deg,var(--c-panel) 0 10px,#fff 10px 20px); } .s3-shot__frame--browser{ padding-top:30px; } .s3-shot__chrome{ position:absolute; top:0; left:0; right:0; height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:linear-gradient(180deg,#fff,var(--c-panel)); border-bottom:1px solid var(--c-line); } .s3-shot__chrome i{ width:8px; height:8px; border-radius:50%; background:var(--c-line); flex:none; } .s3-shot__chrome i:nth-child(1){ background:#FF5F57; } .s3-shot__chrome i:nth-child(2){ background:#FEBC2E; } .s3-shot__chrome i:nth-child(3){ background:#28C840; } .s3-shot__chrome b{ margin-left:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-weight:400; font-size:10px; color:var(--c-ink-3); } @media (max-width:760px){ .s3-proof{ grid-template-columns:1fr; } .s3-shot--wide{ order:-1; } } /* subtle Google colour cue on the two SERP proof cards (authenticity) */ .s3-shot--g1,.s3-shot--g2{ overflow:hidden; } .s3-shot__gcue{ position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r) var(--r) 0 0; pointer-events:none; opacity:.85; background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75% 100%); } .s3-shot--g2 .s3-shot__gcue{ background:linear-gradient(90deg,#34A853 0 25%,#FBBC05 25% 50%,#EA4335 50% 75%,#4285F4 75% 100%); } /* ===================================================================== RANKING PROOF GRID — climbing keywords + traffic growth + visibility ===================================================================== */ .s3-proofgrid{ margin-top:16px; display:grid; grid-template-columns:1.35fr 1fr .8fr; gap:16px; align-items:stretch; } .s3-proofgrid .s3-panel{ display:flex; flex-direction:column; } /* ---- real Search Console screenshots (moved from Content Hub) ---- */ .s3-shotpanel{ padding:0; overflow:hidden; } .s3-shotpanel .s3-panel__h{ flex:none; padding:14px 16px 12px; } .s3-shotpanel__img{ flex:1; display:block; width:100%; max-width:100%; min-height:160px; object-fit:cover; object-position:top center; border-top:1px solid var(--c-line); background:var(--c-panel-2); } .s3-shotpanel.is-noimg{ min-height:180px; } /* ---- Visibility Score gauge ---- */ .s3-vis{ text-align:center; } .s3-vis__gauge{ position:relative; width:100%; max-width:200px; margin:4px auto 0; } .s3-vis__gauge svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 6px 14px rgba(10,138,79,.16)); } .s3-vis__arc{ stroke-dasharray:157; stroke-dashoffset:157; transition:stroke-dashoffset 1.6s var(--ease-out) .15s; } .is-revealed .s3-vis__arc,.no-gsap .s3-vis__arc{ stroke-dashoffset:13; } /* (1 - 92/100) * ~157 */ .s3-vis__num{ position:absolute; left:0; right:0; bottom:2px; display:flex; align-items:baseline; justify-content:center; gap:2px; line-height:1; } .s3-vis__num strong{ font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s3-vis__num span{ font-family:var(--font-mono); font-size:12px; color:var(--c-ink-3); } .s3-vis__meta{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:6px; } .s3-vis__d{ font-family:var(--font-mono); font-size:11.5px; color:var(--green-deep); } .s3-vis__rows{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--c-line); display:flex; flex-direction:column; gap:9px; } .s3-vis__rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--c-ink-2); } .s3-vis__rows b{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--c-ink); font-variant-numeric:tabular-nums; } @media (max-width:1040px){ .s3-proofgrid{ grid-template-columns:1fr 1fr; } .s3-vis{ grid-column:1 / -1; } .s3-vis__gauge{ max-width:220px; } } @media (max-width:680px){ .s3-proofgrid{ grid-template-columns:1fr; } } /* top dashboard ----------------------------------------------------- */ .s3-top{ margin-top:18px; display:grid; grid-template-columns:1fr 1.22fr 1fr; gap:16px; align-items:stretch; } .s3-col{ display:flex; flex-direction:column; gap:16px; min-width:0; } /* score panel */ .s3-score{ display:flex; align-items:center; gap:16px; } .s3-score__gauge{ position:relative; width:104px; height:104px; flex:none; } .s3-score__gauge svg{ width:100%; height:100%; filter:drop-shadow(0 6px 14px rgba(10,138,79,.18)); } .s3-score__arc{ stroke-dasharray:314; stroke-dashoffset:314; transition:stroke-dashoffset 1.5s var(--ease-out); } .is-revealed .s3-score__arc,.no-gsap .s3-score__arc{ stroke-dashoffset:13; } .s3-score__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .s3-score__c strong{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--c-ink); } .s3-score__c span{ font-family:var(--font-mono); font-size:11px; color:var(--c-ink-3); margin-top:2px; } .s3-score__meta{ display:flex; flex-direction:column; gap:6px; min-width:0; } .s3-badge{ align-self:flex-start; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; padding:4px 10px; border-radius:var(--r-pill); background:rgba(10,138,79,.1); color:var(--green-deep); border:1px solid var(--paper-line-green); } .s3-score__t{ font-size:15px; color:var(--c-ink); font-weight:600; } .s3-score__d{ font-family:var(--font-mono); font-size:12px; color:var(--green-deep); } /* mini metric rows */ .s3-mini{ display:flex; flex-direction:column; gap:13px; flex:1; justify-content:center; } .s3-mini__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; } .s3-mini__lbl{ font-size:13px; color:var(--c-ink-2); } .s3-mini__v{ font-family:var(--font-mono); font-size:13px; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s3-mini__v--up{ color:var(--green-deep); font-weight:600; } .s3-mini__bar{ display:block; height:7px; border-radius:5px; background:rgba(10,138,79,.1); overflow:hidden; } .s3-mini__bar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--green-deep-2),var(--green-deep)); transform-origin:left; transform:scaleX(0); transition:transform 1.1s var(--ease-out) .15s; } .is-revealed .s3-mini__bar i,.no-gsap .s3-mini__bar i{ transform:scaleX(1); } /* sparkline panel */ .s3-sparkpanel{ display:flex; flex-direction:column; } .s3-spark{ height:84px; display:flex; align-items:flex-end; gap:4px; } .s3-spark i{ min-width:0; } .s3-spark i:last-child{ box-shadow:0 0 14px -2px rgba(10,138,79,.5); } .s3-sparkpanel__foot{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--c-ink-3); } /* CENTER reactor ---------------------------------------------------- */ .s3-center{ display:flex; flex-direction:column; min-width:0; } .s3-reactor{ position:relative; flex:1; min-height:336px; border-radius:var(--r); border:1px solid var(--c-line); background: radial-gradient(circle at 50% 40%,rgba(10,138,79,.09),transparent 62%), radial-gradient(circle at 50% 40%,rgba(66,133,244,.05),transparent 70%), linear-gradient(180deg,#fff,var(--c-panel)); display:grid; place-items:center; overflow:hidden; box-shadow:0 1px 0 #fff inset, var(--c-shadow); } .s3-react__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(10,138,79,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,138,79,.05) 1px,transparent 1px); background-size:26px 26px; -webkit-mask:radial-gradient(circle at 50% 45%,#000,transparent 72%); mask:radial-gradient(circle at 50% 45%,#000,transparent 72%); pointer-events:none; } .s3-react__ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; } .s3-react__ring--conic{ width:210px; height:210px; background:conic-gradient(from 0deg,transparent 0deg,rgba(10,138,79,0) 200deg,var(--green-deep) 330deg,var(--green-deep-2) 356deg,transparent 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); animation:s3Spin 8s linear infinite; } .s3-react__ring--dash{ width:258px; height:258px; border:1.5px dashed var(--paper-line-green); animation:s3Spin 30s linear infinite reverse; } .s3-react__ring--dash2{ width:312px; height:312px; border:1px solid var(--c-line); animation:s3Spin 55s linear infinite; } .s3-react__pulse{ width:172px; height:172px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--green-deep); opacity:0; animation:s3Pulse 3.8s var(--ease-out) infinite; } .s3-react__pulse--2{ animation-delay:1.9s; } @keyframes s3Spin{ to{ transform:translate(-50%,-50%) rotate(360deg) } } @keyframes s3Pulse{ 0%{ transform:translate(-50%,-50%) scale(.8); opacity:.5 } 70%,100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0 } } /* orbiting platform icon chips */ .s3-react__orbit{ position:absolute; top:50%; left:50%; width:258px; height:258px; transform:translate(-50%,-50%); animation:s3Spin 38s linear infinite; } .s3-react__orbit li{ position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--paper-line-green); box-shadow:0 6px 16px -8px rgba(10,138,79,.6); color:var(--green-deep); transform:rotate(var(--a)) translateX(129px) rotate(calc(-1 * var(--a))); animation:s3OrbitCounter 38s linear infinite; } .s3-react__orbit li .seo-ic{ color:var(--green-deep); } @keyframes s3OrbitCounter{ to{ transform:rotate(var(--a)) translateX(129px) rotate(calc(-1 * var(--a) - 360deg)) } } .s3-react__core{ position:relative; z-index:2; width:158px; height:158px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; background:radial-gradient(circle at 50% 30%,#fff,var(--c-panel-2)); border:1px solid var(--paper-line-green); box-shadow:0 22px 56px -22px rgba(10,138,79,.55),inset 0 1px 0 #fff; } .s3-react__g{ width:32px; height:32px; } .s3-react__glogo{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--paper-line-green); box-shadow:0 6px 16px -8px rgba(10,138,79,.55); } .s3-react__glogo img{ width:24px; height:24px; object-fit:contain; display:block; } .s3-react__glogo.is-noimg{ background:rgba(10,138,79,.08); } .s3-react__t{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:16px; line-height:1; color:var(--c-ink); letter-spacing:0; } .s3-react__s{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.09em; color:var(--green-deep); } .s3-react__bolt{ display:flex; gap:4px; margin-top:4px; } .s3-react__bolt i{ width:5px; height:5px; border-radius:50%; background:var(--green-deep); opacity:.3; animation:s3Bolt 1.4s var(--ease-out) infinite; } .s3-react__bolt i:nth-child(2){ animation-delay:.18s; } .s3-react__bolt i:nth-child(3){ animation-delay:.36s; } @keyframes s3Bolt{ 0%,100%{ opacity:.25; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } } .s3-center__cap{ margin-top:10px; text-align:center; } .s3-center__capt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--c-ink-3); } /* weight distribution + donut --------------------------------------- */ .s3-weight__wrap{ display:grid; grid-template-columns:108px 1fr; align-items:center; gap:16px; min-width:0; } .s3-weight__donut{ display:grid; place-items:center; } .s3-weight .seo-donut{ width:108px; height:108px; } .s3-weight .seo-donut__c{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--c-ink); } .s3-weight__list{ display:flex; flex-direction:column; gap:7px; min-width:0; } .s3-weight__list li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; } .s3-weight__sw{ width:9px; height:9px; border-radius:3px; background:var(--sw,#0A8A4F); flex:none; } .s3-weight__n{ font-size:12.5px; color:var(--c-ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s3-weight__v{ font-family:var(--font-mono); font-size:11.5px; color:var(--c-ink); text-align:right; font-variant-numeric:tabular-nums; } /* heat map ---------------------------------------------------------- */ .s3-heatpanel{ display:flex; flex-direction:column; } .s3-heat{ width:100%; } .s3-heat__scale{ display:flex; align-items:center; gap:4px; margin-top:11px; font-family:var(--font-mono); font-size:10px; color:var(--c-ink-3); } .s3-heat__scale i{ width:13px; height:9px; border-radius:2px; } .s3-heat__s0{ background:rgba(10,138,79,.08); } .s3-heat__s1{ background:rgba(10,138,79,.26); } .s3-heat__s2{ background:rgba(10,138,79,.46); } .s3-heat__s3{ background:rgba(13,166,90,.7); } .s3-heat__s4{ background:rgba(15,184,102,.95); } .s3-heat__scale span:last-child{ margin-left:2px; } /* factor head ------------------------------------------------------- */ .s3-factorhead{ margin-top:30px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .s3-factorhead__t{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--c-ink); text-transform:uppercase; letter-spacing:.01em; } .s3-factorhead__sub{ font-family:var(--font-mono); font-size:11px; color:var(--c-ink-3); } /* 12 factors — logo cards ------------------------------------------- */ .s3-factors{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .s3-factor{ position:relative; display:flex; flex-direction:column; gap:9px; padding:16px; border-radius:var(--r-sm); background:linear-gradient(180deg,#fff,var(--c-panel)); border:1px solid var(--c-line); box-shadow:0 1px 0 #fff inset; transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; min-width:0; transform-style:preserve-3d; } @media (hover:hover){ .s3-factor:hover{ border-color:var(--paper-line-green); transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(10,138,79,.55); } } /* index number — top-right corner watermark */ .s3-factor__no{ position:absolute; top:13px; right:15px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--green-deep); opacity:.32; line-height:1; font-variant-numeric:tabular-nums; } /* real logo on a white rounded chip (brand colours read clearly) */ .s3-factor__logo{ position:relative; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; padding:7px; background:#fff; border:1px solid var(--c-line); box-shadow:0 2px 6px -2px rgba(8,30,20,.18); flex:none; } .s3-factor__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; } .s3-factor__fallback{ display:none; color:var(--ac,var(--green-deep)); } .s3-factor__fallback .seo-ic{ color:var(--ac,var(--green-deep)); } .s3-factor__logo.is-noimg{ padding:0; background:color-mix(in srgb, var(--ac,var(--green-deep)) 10%, #fff); } .s3-factor__logo.is-noimg .s3-factor__fallback{ display:grid; place-items:center; } .s3-factor__name{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--c-ink); line-height:1.2; } .s3-factor__desc{ font-size:14px; line-height:1.4; color:var(--c-ink-2); min-height:2.6em; } /* score ring + tag */ .s3-factor__metric{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:4px; } .s3-ring{ position:relative; width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--ac,var(--green-deep)) calc(var(--p,0)*1%), rgba(10,138,79,.12) 0); } .s3-ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; } .s3-ring b{ position:relative; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--c-ink); font-variant-numeric:tabular-nums; line-height:1; } .s3-factor__tag.s3-badge--good,.s3-factor__tag.s3-badge--warn{ align-self:center; } .s3-badge--good,.s3-badge--warn{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); } .s3-badge--good{ background:rgba(10,138,79,.1); color:var(--green-deep); border:1px solid var(--paper-line-green); } .s3-badge--warn{ background:rgba(232,113,10,.1); color:var(--ga,#E8710A); border:1px solid rgba(232,113,10,.24); } /* overall SEO health score summary ---------------------------------- */ .s3-health{ margin-top:14px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; border-radius:var(--r); background: radial-gradient(120% 140% at 0% 0%, rgba(10,138,79,.07), transparent 60%), linear-gradient(180deg,#fff,var(--c-panel)); border:1px solid var(--paper-line-green); box-shadow:0 1px 0 #fff inset, var(--c-shadow); } .s3-health__ic{ width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,var(--green-deep-2),var(--green-deep)); box-shadow:0 8px 20px -8px rgba(10,138,79,.6); } .s3-health__ic .seo-ic{ color:#fff; } .s3-health__body{ display:flex; flex-direction:column; gap:3px; min-width:160px; flex:1; } .s3-health__t{ font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.01em; color:var(--c-ink); } .s3-health__sub{ font-size:14px; line-height:1.4; color:var(--c-ink-2); } .s3-health__bar{ flex:1 1 180px; min-width:140px; height:9px; border-radius:6px; background:rgba(10,138,79,.12); overflow:hidden; } .s3-health__bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--green-deep-2),var(--green-deep)); box-shadow:0 0 12px rgba(10,138,79,.45); transform-origin:left; transform:scaleX(0); transition:transform 1.2s var(--ease-out) .2s; } .is-revealed .s3-health__bar i,.no-gsap .s3-health__bar i{ transform:scaleX(1); } .s3-health__score{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1; } .s3-health__score strong{ font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--green-deep); font-variant-numeric:tabular-nums; } .s3-health__grade{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); } /* mid: signal flow + competitor ------------------------------------- */ .s3-mid{ margin-top:18px; display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:stretch; } .s3-flow{ display:flex; flex-direction:column; } .s3-flowchart{ width:100%; height:110px; margin-top:auto; } .s3-flow__l1{ stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.6s var(--ease-out); } .s3-flow__l2{ stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.6s var(--ease-out) .2s; } .is-revealed .s3-flow__l1,.no-gsap .s3-flow__l1,.is-revealed .s3-flow__l2,.no-gsap .s3-flow__l2{ stroke-dashoffset:0; } .s3-flow__area{ opacity:0; transition:opacity 1.2s var(--ease-out) .4s; } .is-revealed .s3-flow__area,.no-gsap .s3-flow__area{ opacity:1; } .s3-flow__legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--c-ink-3); } .s3-flow__legend span{ display:inline-flex; align-items:center; gap:6px; } .s3-flow__delta{ margin-left:auto; color:var(--green-deep); font-weight:600; } .s3-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-deep); } .s3-dot--soft{ background:rgba(10,138,79,.35); } .s3-comp{ display:flex; flex-direction:column; } .s3-comp__list{ display:flex; flex-direction:column; gap:11px; flex:1; justify-content:center; } .s3-comp__list li{ display:grid; grid-template-columns:108px 1fr 30px; align-items:center; gap:10px; min-width:0; } .s3-comp__n{ font-size:12.5px; color:var(--c-ink-2); display:inline-flex; align-items:center; gap:6px; min-width:0; } .s3-comp__tag{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.05em; padding:2px 5px; border-radius:4px; background:var(--green-deep); color:#fff; flex:none; } .s3-comp__bar{ height:9px; border-radius:5px; background:rgba(5,5,5,.06); overflow:hidden; } .s3-comp__bar i{ display:block; height:100%; border-radius:5px; background:rgba(5,5,5,.22); transform-origin:left; transform:scaleX(0); transition:transform 1s var(--ease-out) .2s; } .is-revealed .s3-comp__bar i,.no-gsap .s3-comp__bar i{ transform:scaleX(1); } .s3-comp__list li.is-you .s3-comp__bar i{ background:linear-gradient(90deg,var(--green-deep-2),var(--green-deep)); box-shadow:0 0 10px rgba(10,138,79,.4); } .s3-comp__list li.is-you .s3-comp__n{ color:var(--green-deep); font-weight:600; } .s3-comp__v{ font-family:var(--font-mono); font-size:12px; color:var(--c-ink); text-align:right; font-variant-numeric:tabular-nums; } .s3-comp__foot{ display:flex; align-items:center; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--c-line); font-size:12px; color:var(--c-ink-2); } .s3-comp__foot .seo-ic{ color:var(--green-deep); } .s3-comp__foot b{ color:var(--green-deep); } /* pipeline ---------------------------------------------------------- */ .s3-pipe{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:18px 20px; border-radius:var(--r); background:linear-gradient(180deg,#fff,var(--c-panel)); border:1px solid var(--c-line); box-shadow:0 1px 0 #fff inset, var(--c-shadow); } .s3-pipe__steps{ display:flex; align-items:flex-start; justify-content:center; gap:4px; flex-wrap:wrap; flex:1; min-width:0; } .s3-pipe__step{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:2px 8px; } .s3-pipe__ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--green-deep); background:rgba(10,138,79,.08); border:1px solid var(--paper-line-green); } .s3-pipe__ic svg{ width:20px; height:20px; } .s3-pipe__t{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--c-ink); } .s3-pipe__sub{ font-family:var(--font-mono); font-size:10px; color:var(--c-ink-3); } .s3-pipe__step.is-final .s3-pipe__ic{ background:var(--green-deep); color:#fff; box-shadow:0 0 18px -4px rgba(10,138,79,.6); } .s3-pipe__step.is-final .s3-pipe__t{ color:var(--green-deep); font-weight:600; } .s3-pipe__link{ width:30px; height:2px; border-radius:2px; margin-top:21px; background:repeating-linear-gradient(90deg,var(--green-deep) 0 6px,transparent 6px 12px); opacity:.5; } .s3-pipe__cta{ flex:none; display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:#fff; text-decoration:none; background:linear-gradient(180deg,var(--green-deep-2),var(--green-deep)); box-shadow:0 12px 28px -12px rgba(10,138,79,.7); transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; } .s3-pipe__cta svg{ width:17px; height:17px; transition:transform var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s3-pipe__cta:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(10,138,79,.8); } .s3-pipe__cta:hover svg{ transform:translateX(3px); } } /* responsive -------------------------------------------------------- */ @media (max-width:1040px){ .s3-top{ grid-template-columns:1fr 1fr; } .s3-center{ grid-column:1 / -1; order:-1; } .s3-reactor{ min-height:320px; } .s3-mid{ grid-template-columns:1fr; } } @media (max-width:760px){ .s3-top{ grid-template-columns:1fr; } .s3-factors{ grid-template-columns:repeat(2,1fr); } .s3-factor__desc{ min-height:0; } .s3-strip{ gap:8px 12px; } .s3-strip__sep{ display:none; } .s3-health{ flex-direction:column; align-items:stretch; text-align:left; } .s3-health__bar{ order:3; flex-basis:auto; } .s3-health__score{ order:2; flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; } .s3-pipe{ justify-content:center; } .s3-pipe__cta{ width:100%; justify-content:center; } } @media (max-width:560px){ .s3-weight__wrap{ grid-template-columns:1fr; justify-items:center; } .s3-weight__list{ width:100%; max-width:300px; } .s3-pipe__sub{ display:none; } .s3-pipe__t{ font-size:11px; } .s3-pipe__link{ width:18px; } } @media (max-width:420px){ .s3-factors{ grid-template-columns:1fr; } .s3-score{ flex-direction:column; text-align:center; } .s3-score__meta{ align-items:center; } .s3-badge{ align-self:center; } } /* reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .s3-react__ring--conic,.s3-react__ring--dash,.s3-react__ring--dash2,.s3-react__pulse, .s3-react__orbit,.s3-react__orbit li,.s3-react__bolt i,.s3-strip__live i{ animation:none !important; } .s3-react__orbit li{ transform:rotate(var(--a)) translateX(129px) rotate(calc(-1 * var(--a))); } .s3-mini__bar i,.s3-comp__bar i,.s3-health__bar i{ transition:none; transform:scaleX(1); } /* ranking proof: land in final state, no draw/sweep/pulse */ .s3-vis__arc{ transition:none; stroke-dashoffset:13; } } /* ===================================================================== SECTION 04 — LOCAL SEO MAP GRID (light / system) A realistic local-SEO geo-grid rank-tracker: 2 REAL map-pack proof cards, a live rank-tracker app (top bar + metric row + sidebar + 3x2 grid of map tiles with real geo-grid images), and a citation network. Scope: .s4 — uses shared .seo-gmap + .seo-ic sprite icons. ===================================================================== */ .s4{ overflow:clip; } /* shared rank-colour tokens (legend / pins / tags read the same hues) */ .s4{ --pin-g:var(--rank-g); --pin-gl:#5fe6a4; --pin-a:var(--rank-a); --pin-al:#F4D572; --pin-o:var(--rank-o); --pin-ol:#F0A968; --pin-r:var(--rank-r); --pin-rl:#EE8076; } /* ---- app frame --------------------------------------------------- */ .s4-app{ margin-top:6px; border-radius:var(--r-lg); overflow:hidden; background:var(--c-panel); border:1px solid var(--c-line); box-shadow:var(--c-shadow); } .s4-app__bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:13px 18px; background:var(--c-panel-2); border-bottom:1px solid var(--c-line); min-width:0; } .s4-app__brand{ display:flex; align-items:center; gap:11px; min-width:0; } .s4-app__logo{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--maps),#0b57c4); box-shadow:0 6px 16px -8px rgba(26,115,232,.7), inset 0 1px 0 rgba(255,255,255,.35); } .s4-app__title{ display:block; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--c-ink); line-height:1.1; } .s4-app__sub{ display:block; margin-top:2px; font-size:12px; color:var(--c-ink-3); } .s4-app__bartools{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .s4-app__src{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 5px; border-radius:var(--r-pill); background:var(--c-panel); border:1px solid var(--c-line); min-width:0; } .s4-app__srcchip{ width:21px; height:21px; flex:none; display:grid; place-items:center; background:#fff; border:1px solid var(--c-line); border-radius:6px; padding:3px; } .s4-app__srcchip img{ width:100%; height:100%; object-fit:contain; max-width:100%; } .s4-app__srcchip.is-noimg{ display:none; } .s4-app__srctxt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--c-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .s4-app__range{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; color:var(--c-ink-2); padding:6px 11px; border-radius:var(--r-pill); background:var(--c-panel); border:1px solid var(--c-line); } .s4-app__rdot{ width:7px; height:7px; border-radius:50%; background:var(--maps); } .s4-app__live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--green-deep); padding:6px 10px; border-radius:var(--r-pill); background:rgba(10,138,79,.1); border:1px solid var(--paper-line-green); } .s4-app__live i{ width:7px; height:7px; border-radius:50%; background:var(--green-deep); box-shadow:0 0 0 0 rgba(10,138,79,.45); animation:s4Pulse 2s var(--ease-out) infinite; } @keyframes s4Pulse{ 0%{ box-shadow:0 0 0 0 rgba(10,138,79,.45);} 70%{ box-shadow:0 0 0 7px rgba(10,138,79,0);} 100%{ box-shadow:0 0 0 0 rgba(10,138,79,0);} } /* ---- metric row -------------------------------------------------- */ .s4-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid var(--c-line); } .s4-metric{ position:relative; padding:16px 20px; min-width:0; } .s4-metric + .s4-metric{ border-left:1px solid var(--c-line); } .s4-metric__l{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); } .s4-metric__l .seo-ic{ color:var(--c-ink-3); } .s4-metric__n{ display:block; margin-top:9px; font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.6vw,34px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s4-metric__bar{ display:block; height:5px; margin-top:10px; border-radius:99px; background:rgba(10,138,79,.12); overflow:hidden; } .s4-metric__bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green-deep),#1FB872); } .s4-metric__d{ display:flex; align-items:center; gap:5px; margin-top:9px; font-size:11.5px; color:var(--c-ink-3); } .s4-metric__d--up{ font-family:var(--font-mono); color:var(--green-deep); } /* ---- body: sidebar + maps --------------------------------------- */ .s4-body{ display:grid; grid-template-columns:230px 1fr; gap:0; } /* sidebar */ .s4-side{ display:flex; flex-direction:column; gap:0; padding:16px; background:var(--c-panel-2); border-right:1px solid var(--c-line); min-width:0; } .s4-panel{ padding:14px 0; } .s4-panel + .s4-panel{ border-top:1px solid var(--c-line); } .s4-panel:first-child{ padding-top:2px; } .s4-panel__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); } .s4-panel__c{ font-size:10.5px; color:var(--green-deep); background:rgba(10,138,79,.1); border:1px solid var(--paper-line-green); padding:1px 7px; border-radius:99px; } /* term list (overrides shared filterbar layout, scoped) */ .s4 .s4-terms{ display:flex; flex-direction:column; gap:3px; padding:0; border:0; background:none; box-shadow:none; } .s4 .s4-term{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-sm); background:transparent; border:1px solid transparent; font-family:var(--font-body); font-size:13px; color:var(--c-ink-2); cursor:pointer; transition:background var(--dur-micro) ease, color var(--dur-micro) ease, border-color var(--dur-micro) ease, transform var(--dur-micro) var(--ease-out); } .s4 .s4-term:active{ transform:scale(.97); } .s4 .s4-term__dot{ width:9px; height:9px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); } .s4 .s4-term__dot--all{ background:conic-gradient(var(--rank-g),var(--rank-a),var(--rank-o),var(--rank-r),var(--rank-g)); } .s4 .s4-term__t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s4 .s4-term__r{ flex:none; font-family:var(--font-mono); font-size:11.5px; color:var(--c-ink-3); font-variant-numeric:tabular-nums; } @media (hover:hover){ .s4 .s4-term:hover{ background:var(--c-panel); border-color:var(--c-line); color:var(--c-ink); } } .s4 .s4-term.is-active{ background:var(--c-panel); border-color:var(--paper-line-green); color:var(--c-ink); box-shadow:0 4px 14px -10px rgba(10,138,79,.5); } .s4 .s4-term.is-active .s4-term__r{ color:var(--green-deep); } /* legend */ .s4-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; } .s4-legend li{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--c-ink-2); } .s4-legend__t{ flex:1 1 auto; min-width:0; } .s4-legend__r{ flex:none; font-family:var(--font-mono); font-size:11px; color:var(--c-ink-3); font-variant-numeric:tabular-nums; } .s4-key{ width:12px; height:12px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); } .s4-key--g{ background:radial-gradient(circle at 38% 30%,#3BDc8c,var(--rank-g)); } .s4-key--a{ background:radial-gradient(circle at 38% 30%,#F0CF5A,var(--rank-a)); } .s4-key--o{ background:radial-gradient(circle at 38% 30%,#EE9A52,var(--rank-o)); } .s4-key--r{ background:radial-gradient(circle at 38% 30%,#E2685B,var(--rank-r)); } /* segmented view toggle */ .s4-seg{ display:flex; gap:3px; padding:3px; border-radius:var(--r-sm); background:var(--c-panel); border:1px solid var(--c-line); } .s4-seg__btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 8px; border:0; border-radius:7px; background:transparent; cursor:pointer; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--c-ink-3); transition:background var(--dur-micro) ease, color var(--dur-micro) ease, transform var(--dur-micro) var(--ease-out); } .s4-seg__btn:active{ transform:scale(.97); } .s4-seg__btn.is-active{ background:var(--green-deep); color:#fff; box-shadow:0 4px 12px -6px rgba(10,138,79,.6); } .s4-side__note{ margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--c-ink-3); } /* ---- map grid ---------------------------------------------------- */ .s4-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-line); min-width:0; } .s4-map{ position:relative; background:var(--c-panel); overflow:hidden; min-width:0; transition:box-shadow var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s4-map:hover{ z-index:3; box-shadow:0 18px 40px -22px rgba(10,138,79,.55); } } .s4-map__h{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; border-bottom:1px solid var(--c-line); background:var(--c-panel); min-width:0; } .s4-map__term{ display:flex; align-items:center; gap:7px; min-width:0; font-family:var(--font-mono); font-size:12.5px; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s4-map__term .seo-ic{ color:var(--c-ink-3); } .s4-map__avg{ display:inline-flex; align-items:center; gap:5px; flex:none; font-family:var(--font-mono); font-size:11.5px; padding:3px 9px; border-radius:var(--r-pill); border:1px solid transparent; font-variant-numeric:tabular-nums; } .s4-map__avg strong{ font-variant-numeric:tabular-nums; } .s4-map__avg .seo-ic{ opacity:.8; } .s4-map__avg--g{ color:#0b7a3b; background:rgba(29,185,84,.12); border-color:rgba(29,185,84,.28); } .s4-map__avg--a{ color:#a9791a; background:rgba(224,168,46,.16); border-color:rgba(224,168,46,.32); } .s4-map__avg--o{ color:#b3622a; background:rgba(224,119,43,.15); border-color:rgba(224,119,43,.32); } /* map face = REAL geo-grid map image (object-fit:cover, fills the card map area) */ .s4-mapface{ position:relative; aspect-ratio:4/3; border-radius:0; overflow:hidden; background:var(--c-panel-2); } .s4-mapimg{ position:absolute; inset:0; z-index:1; width:100%; height:100%; max-width:100%; display:block; object-fit:cover; object-position:center; border-radius:inherit; } /* fallback when the real map image fails to load */ .s4-mapface.is-noimg{ display:grid; place-items:center; } .s4-mapface.is-noimg::after{ content:"Geo-grid rank scan"; font-family:var(--font-mono); font-size:12px; color:var(--c-ink-3); } /* soft top-light + edge fade so the card chrome blends into the map */ .s4-mapface::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 120% at 50% 42%, transparent 62%, rgba(255,255,255,.14)); } /* ---- responsive -------------------------------------------------- */ @media (max-width:1080px){ .s4-body{ grid-template-columns:200px 1fr; } .s4-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:860px){ .s4-metrics{ grid-template-columns:repeat(2,1fr); } .s4-metric:nth-child(odd){ border-left:0; } .s4-metric:nth-child(n+3){ border-top:1px solid var(--c-line); } } @media (max-width:720px){ /* sidebar stacks above the maps */ .s4-body{ grid-template-columns:1fr; } .s4-side{ border-right:0; border-bottom:1px solid var(--c-line); } .s4 .s4-terms{ flex-direction:row; flex-wrap:wrap; } .s4 .s4-term{ width:auto; flex:1 1 auto; } .s4 .s4-term__r{ display:none; } .s4-legend{ flex-direction:row; flex-wrap:wrap; gap:10px 16px; } .s4-legend li{ flex:0 0 auto; } .s4-legend__r{ display:none; } } @media (max-width:560px){ .s4-grid{ grid-template-columns:1fr; } .s4-app__sub{ display:none; } .s4-app__src .s4-app__srctxt{ display:none; } } @media (max-width:420px){ .s4-metrics{ grid-template-columns:1fr; } .s4-metric{ border-left:0 !important; } .s4-metric + .s4-metric{ border-top:1px solid var(--c-line); } .s4-app__live{ display:none; } } /* ---- CONSISTENT NAP (citation network) --------------------------- */ .s4-cite{ margin-top:34px; min-width:0; background:var(--c-panel); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--c-shadow); overflow:hidden; } /* left intro + right network */ .s4-cite__grid{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,40px); align-items:center; padding:clamp(20px,3vw,36px); } /* LEFT column */ .s4-cite__intro{ min-width:0; } .s4-cite__title{ margin:8px 0 0; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,34px); letter-spacing:0; text-transform:uppercase; color:var(--c-ink); line-height:1.04; } .s4-cite__lead{ margin:12px 0 0; max-width:42ch; font-size:14.5px; line-height:1.6; color:var(--c-ink-2); } .s4-bens{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; } .s4-ben{ display:flex; align-items:flex-start; gap:12px; min-width:0; } .s4-ben__ic{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--green-deep); background:rgba(10,138,79,.1); border:1px solid var(--paper-line-green); } .s4-ben__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; } .s4-ben__t{ font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--c-ink); line-height:1.1; } .s4-ben__s{ font-size:13px; line-height:1.5; color:var(--c-ink-3); font-family:var(--font-body); } .s4-cite__verified{ display:flex; align-items:center; gap:9px; margin:22px 0 0; padding:11px 14px; border-radius:var(--r-sm); background:var(--c-panel-2); border:1px solid var(--c-line); font-size:13.5px; color:var(--c-ink-2); } .s4-cite__verified strong{ color:var(--green-deep); } .s4-cite__vic{ flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(150deg,var(--green-deep),#0b7a3b); box-shadow:0 4px 12px -5px rgba(10,138,79,.7); } /* RIGHT column — radial network panel */ .s4-net{ position:relative; min-width:0; width:100%; aspect-ratio:800/520; background: radial-gradient(120% 120% at 50% 42%, rgba(10,138,79,.06), transparent 60%), var(--c-panel-2); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px rgba(5,5,5,.02); overflow:hidden; } .s4-net__lines{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; pointer-events:none; } /* draw-in connectors on reveal (engine adds .is-revealed to .s4-net) */ .s4-net .seo-draw line{ stroke-dasharray:340; stroke-dashoffset:340; } /* per-line draw stagger is set inline (style="animation-delay:..") per line */ .s4-net.is-revealed .seo-draw line{ animation:s4Draw .7s var(--ease-out) forwards; } @keyframes s4Draw{ to{ stroke-dashoffset:0; } } /* center node */ .s4-net__core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 22px; border-radius:var(--r-lg); background:linear-gradient(160deg,var(--green-deep),#0b7a3b); color:#fff; box-shadow:0 16px 36px -16px rgba(10,138,79,.7), inset 0 1px 0 rgba(255,255,255,.25); text-align:center; min-width:0; } .s4-net__coredot{ width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:s4Pulse 2.4s var(--ease-out) infinite; } .s4-net__corel{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.1; } .s4-net__cores{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.78); } /* dense 2-ring citation network — each node positioned via inline left/top% (in s4.html); the chip sits ON the ring point, the directory name floats just beneath it. */ .s4-net__orbit{ position:absolute; inset:0; z-index:2; } .s4-cite__node{ position:absolute; transform:translate(-50%,-50%); opacity:0; } .s4-net.is-revealed .s4-cite__node{ animation:s4NodeIn .5s var(--ease-out) forwards; animation-delay:.42s; } @keyframes s4NodeIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.92); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } } .s4-cite__chip{ width:clamp(34px,4.4vw,46px); height:clamp(34px,4.4vw,46px); display:grid; place-items:center; padding:8px; background:#fff; border:1px solid var(--c-line); border-radius:12px; box-shadow:0 8px 20px -10px rgba(5,5,5,.3); transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } /* directory name label under each chip */ .s4-cite__name{ position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:9px; letter-spacing:.01em; line-height:1; white-space:nowrap; color:var(--c-ink-3); pointer-events:none; } @media (hover:hover){ .s4-cite__node:hover .s4-cite__chip{ transform:translateY(-3px); box-shadow:0 14px 26px -12px rgba(10,138,79,.5); } } .s4-cite__chip img{ width:100%; height:100%; object-fit:contain; max-width:100%; } .s4-cite__chip.is-noimg{ background:var(--c-panel); } .s4-cite__chip.is-noimg::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--green-deep); } /* BOTTOM summary stat row */ .s4-cite__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--c-line); background:var(--c-panel-2); } .s4-stat{ padding:16px 20px; min-width:0; text-align:center; } .s4-stat + .s4-stat{ border-left:1px solid var(--c-line); } .s4-stat__n{ display:inline-flex; align-items:center; justify-content:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.2vw,26px); line-height:1; color:var(--green-deep); font-variant-numeric:tabular-nums; } .s4-stat__n--up .seo-ic{ color:var(--green-deep); } .s4-stat__l{ display:block; margin-top:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; line-height:1.4; color:var(--c-ink-3); } /* NAP responsive */ @media (max-width:880px){ .s4-cite__grid{ grid-template-columns:1fr; gap:24px; } .s4-net{ max-width:560px; width:100%; margin:0 auto; } .s4-cite__lead{ max-width:none; } } @media (max-width:640px){ .s4-cite__stats{ grid-template-columns:repeat(2,1fr); } .s4-stat:nth-child(odd){ border-left:0; } .s4-stat:nth-child(n+3){ border-top:1px solid var(--c-line); } /* network switches to a clean wrapping cluster on mobile */ .s4-net{ aspect-ratio:auto; padding:22px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:18px; } .s4-net__lines{ display:none; } .s4-net__core{ position:static; transform:none; } .s4-net__orbit{ position:static; display:flex; flex-wrap:wrap; justify-content:center; gap:16px 12px; } .s4-cite__node{ position:static; transform:none; opacity:1; display:flex; flex-direction:column; align-items:center; gap:4px; } .s4-net.is-revealed .s4-cite__node{ animation:none; } .s4-cite__name{ position:static; transform:none; } } @media (max-width:420px){ .s4-cite__stats{ grid-template-columns:1fr; } .s4-stat{ text-align:left; } .s4-stat:nth-child(n){ border-left:0; } .s4-stat + .s4-stat{ border-top:1px solid var(--c-line); } .s4-stat__n{ justify-content:flex-start; } } @media (prefers-reduced-motion:reduce){ .s4-net .seo-draw line{ stroke-dashoffset:0 !important; animation:none !important; } .s4-cite__node{ animation:none !important; opacity:1; } .s4-net__pulses{ display:none; } .s4-app__live i{ animation:none; } .s4-net__coredot{ animation:none; } } /* ===================================================================== SECTION 06 — AI SEO CONTROL TOWER (dark / cinema) 3-column stage: live agent rails + a 3D stacked-floor tower whose floors ignite on scroll (#s6Tower .s6-floor.is-lit), platform visibility strip, competitor radar + automation rings, + autonomous workflow rail. Scope: .s6 ===================================================================== */ .s6{ overflow:clip; position:relative; } /* faint city skyline at the base of the scene */ .s6-skyline{ position:absolute; left:0; right:0; bottom:0; height:clamp(120px,18vw,220px); pointer-events:none; opacity:.5; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(39,245,140,.05) 26px 27px), linear-gradient(180deg,transparent, rgba(39,245,140,.04) 78%, rgba(39,245,140,.02)); -webkit-mask:linear-gradient(180deg,transparent,#000 70%); mask:linear-gradient(180deg,transparent,#000 70%); } /* ===================== PLATFORM VISIBILITY STRIP ===================== */ .s6-platforms{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.1vw,14px); margin-bottom:clamp(22px,3vw,38px); } .s6-pcard{ position:relative; min-width:0; padding:14px 14px 13px; border-radius:var(--r); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); overflow:hidden; box-shadow:0 24px 60px -42px rgba(0,0,0,.9); transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } .s6-pcard::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--p) 18%,transparent), transparent 60%); } @media (hover:hover){ .s6-pcard:hover{ border-color:color-mix(in srgb,var(--p) 45%,var(--c-line)); transform:translateY(-3px); } } .s6-pcard__top{ position:relative; display:flex; align-items:center; gap:9px; margin-bottom:11px; } .s6-pcard__mark{ width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb,var(--p) 16%,transparent); border:1px solid color-mix(in srgb,var(--p) 38%,transparent); color:var(--p); } /* real brand logos on a white disc for contrast on the dark cinema bg */ .s6-pcard__mark--logo{ background:#fff; border-color:rgba(255,255,255,.5); padding:5px; box-shadow:0 2px 8px -2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.04); } .s6-pcard__mark--logo.is-noimg{ background:color-mix(in srgb,var(--p) 16%,transparent); border-color:color-mix(in srgb,var(--p) 38%,transparent); } .s6-logo{ display:block; width:100%; height:100%; max-width:100%; object-fit:contain; } /* tiny white disc reused in the AI-score list */ .s6-disc{ flex:none; display:grid; place-items:center; background:#fff; border-radius:6px; border:1px solid rgba(255,255,255,.45); box-shadow:0 1px 4px -1px rgba(0,0,0,.5); } .s6-disc--xs{ width:20px; height:20px; padding:3px; } .s6-disc--xs .s6-logo{ width:100%; height:100%; } .s6-pcard__id{ min-width:0; display:flex; flex-direction:column; gap:1px; } .s6-pcard__id b{ font-size:13px; font-weight:600; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s6-pcard__id i{ font-style:normal; font-size:10px; color:var(--c-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s6-pcard__chip{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--p); padding:3px 7px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--p) 13%,transparent); border:1px solid color-mix(in srgb,var(--p) 32%,transparent); } .s6-pcard__chip i{ width:5px; height:5px; border-radius:50%; background:var(--p); box-shadow:0 0 6px var(--p); } .s6-pcard__score{ position:relative; display:flex; align-items:baseline; gap:6px; margin-bottom:9px; } .s6-pcard__score strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,28px); color:var(--c-ink); line-height:1; } .s6-pcard__score span{ font-size:10.5px; color:var(--c-ink-3); } .s6-pcard__bar{ position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; } .s6-pcard__bar i{ position:absolute; inset:0 auto 0 0; width:var(--w,0%); border-radius:99px; background:linear-gradient(90deg, color-mix(in srgb,var(--p) 55%,#000), var(--p)); box-shadow:0 0 10px -2px var(--p); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out) .15s; } .is-revealed .s6-pcard__bar i, .no-gsap .s6-pcard__bar i{ transform:scaleX(1); } .s6-pcard__foot{ display:flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; color:var(--green); } .s6-pcard__foot .seo-ic{ color:var(--green); } /* ===================== STAGE ===================== */ .s6-stage{ display:grid; grid-template-columns:1fr 1.05fr 1fr; gap:clamp(16px,2.4vw,30px); align-items:start; } .s6-rail{ display:flex; flex-direction:column; gap:16px; position:sticky; top:96px; min-width:0; } /* panels */ .s6-panel{ padding:16px 17px; border-radius:var(--r); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); box-shadow:0 24px 60px -40px rgba(0,0,0,.9); min-width:0; } .s6-panel__h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); } .s6-panel__h em{ font-style:normal; color:var(--green); font-size:11px; } .s6-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--green); } .s6-live i{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:seoPulse 2s var(--ease-out) infinite; } /* system status */ .s6-status{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .s6-status div{ display:flex; flex-direction:column; gap:3px; min-width:0; } .s6-status strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,24px); color:var(--c-ink); } .s6-status span{ font-size:11px; color:var(--c-ink-3); } /* activity feed */ .s6-feed__list{ display:flex; flex-direction:column; } .s6-feed__list li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--c-line); font-size:12.5px; color:var(--c-ink-2); } .s6-feed__list li:first-child{ border-top:0; } .s6-feed__txt{ min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px 7px; } .s6-feed__txt b{ color:var(--c-ink); font-weight:600; } .s6-ag{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-family:var(--font-mono); font-size:9.5px; font-weight:600; color:#fff; letter-spacing:.02em; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } .s6-ag--content{ background:linear-gradient(180deg,#3ad17f,#1f8f54); } .s6-ag--link{ background:linear-gradient(180deg,#4f8bff,#2a5bd0); } .s6-ag--rep{ background:linear-gradient(180deg,#ffce4a,#d99a12); color:#231a04; } .s6-ag--gbp{ background:linear-gradient(180deg,#ff7a6b,#d83a2c); } .s6-ag--rep2{ background:linear-gradient(180deg,#b78bff,#7d4fd0); } .s6-feed__tag{ font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; padding:2px 6px; border-radius:5px; white-space:nowrap; } .s6-feed__tag--content{ color:var(--g-green); background:color-mix(in srgb,var(--g-green) 14%,transparent); } .s6-feed__tag--link{ color:var(--g-blue); background:color-mix(in srgb,var(--g-blue) 14%,transparent); } .s6-feed__tag--rep{ color:var(--g-yellow); background:color-mix(in srgb,var(--g-yellow) 16%,transparent); } .s6-feed__tag--gbp{ color:var(--maps-pin); background:color-mix(in srgb,var(--maps-pin) 14%,transparent); } .s6-feed__tag--report{ color:var(--green); background:rgba(39,245,140,.1); } .s6-feed__list time{ font-family:var(--font-mono); font-size:11px; color:var(--c-ink-3); } /* competitor radar */ .s6-radar__row{ display:flex; align-items:center; gap:14px; } .s6-radar__viz{ width:92px; height:92px; flex:none; } .s6-radar__viz svg{ width:100%; height:100%; overflow:visible; } .s6-radar__ring{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; } .s6-radar__spoke{ stroke:rgba(255,255,255,.07); stroke-width:1; } .s6-radar__comp{ fill:rgba(120,140,160,.16); stroke:rgba(150,170,190,.5); stroke-width:1.4; } .s6-radar__you{ fill:rgba(39,245,140,.18); stroke:var(--green); stroke-width:1.8; filter:drop-shadow(0 0 5px var(--green-glow)); } .s6-radar__legend{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; } .s6-radar__legend li{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--c-ink-2); } .s6-radar__legend b{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--c-ink); } .s6-radar__k{ width:9px; height:9px; border-radius:3px; flex:none; } .s6-radar__k--you{ background:var(--green); box-shadow:0 0 8px var(--green-glow); } .s6-radar__k--c1{ background:#8ea3b8; } .s6-radar__k--c2{ background:#6e7f92; } .s6-radar__k--c3{ background:#55636f; } /* ===================== TOWER ===================== */ .s6-tower{ position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; padding:14px 0 0; perspective:1500px; min-width:0; } .s6-tower__beam{ position:absolute; top:-34px; left:50%; transform:translateX(-50%); width:64%; height:118%; background:linear-gradient(180deg,rgba(39,245,140,.18),transparent 58%); filter:blur(34px); pointer-events:none; } /* glowing central energy core / elevator shaft */ .s6-tower__core{ position:absolute; top:30px; bottom:96px; left:50%; transform:translateX(-50%); width:8px; border-radius:99px; z-index:0; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb,var(--green) 70%,transparent), rgba(39,245,140,.12)); box-shadow:0 0 20px -2px var(--green-glow); overflow:hidden; } .s6-tower__core span{ position:absolute; left:-3px; right:-3px; height:26px; border-radius:99px; background:linear-gradient(180deg,transparent,var(--green-bright),transparent); filter:blur(2px); animation:s6Elevator 3.4s var(--ease-out) infinite; } @keyframes s6Elevator{ 0%{ top:100%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:-26px; opacity:0; } } .s6-tower__roof{ position:relative; z-index:3; width:26%; height:14px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,rgba(30,44,40,.95),rgba(14,22,18,.95)); border:1px solid var(--c-line-green); box-shadow:0 -6px 24px -10px var(--green-glow); display:grid; place-items:center; } .s6-tower__beacon{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 14px 2px var(--green); animation:seoPulse 1.8s var(--ease-out) infinite; } .s6-floor{ position:relative; z-index:2; width:88%; padding:13px 16px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(180deg,rgba(18,24,23,.78),rgba(10,15,14,.78)); border:1px solid var(--c-line); box-shadow:0 14px 30px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); transform:rotateX(6deg); transform-style:preserve-3d; transition:border-color var(--dur-reveal) ease, box-shadow var(--dur-reveal) ease, background var(--dur-reveal) ease, transform var(--dur-ui) var(--ease-out); } .s6-floor:nth-child(5){ width:80%; } .s6-floor:nth-child(6){ width:83%; } /* taper toward the top floors for a tower silhouette */ .s6-floor:nth-child(4){ width:84%; } .s6-floor:nth-child(7){ width:85%; } .s6-floor__windows{ position:absolute; inset:0 0 0 0; border-radius:10px; opacity:.5; pointer-events:none; background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.18) 1px,transparent 1.4px); background-size:11px 9px; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 60%,transparent 74%); mask:linear-gradient(90deg,transparent,#000 12%,#000 60%,transparent 74%); } /* per-floor glowing core port that connects to the central shaft */ .s6-floor__core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; z-index:1; pointer-events:none; background:radial-gradient(circle, rgba(39,245,140,.25), transparent 70%); opacity:.4; transition:opacity var(--dur-reveal) ease; } .s6-floor__label{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1px; min-width:0; } .s6-floor__label b{ font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--c-ink); white-space:nowrap; } .s6-floor__label i{ font-style:normal; font-size:11.5px; color:var(--c-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* mini in-floor screen (chart / KPI window) */ .s6-floor__mini{ position:relative; z-index:2; flex:none; display:flex; align-items:center; gap:6px; height:26px; padding:0 8px; border-radius:7px; background:rgba(4,8,7,.6); border:1px solid var(--c-line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); transition:border-color var(--dur-reveal) ease, box-shadow var(--dur-reveal) ease; } .s6-floor__mini svg{ width:40px; height:20px; overflow:visible; } .s6-floor__mini svg polyline{ fill:none; stroke:var(--c-ink-3); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-reveal) ease; } .s6-floor__mini em{ font-style:normal; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--c-ink-2); transition:color var(--dur-reveal) ease; } .s6-floor__mini--bars{ gap:3px; padding:0 7px; } .s6-floor__bar{ width:4px; height:var(--h,50%); align-self:flex-end; border-radius:2px 2px 0 0; background:var(--c-ink-3); transition:background var(--dur-reveal) ease; } .s6-floor__mini--bars{ align-items:flex-end; height:26px; padding-bottom:4px; } .s6-floor__mini--grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:2px; width:26px; padding:4px; } .s6-floor__mini--grid em{ width:100%; height:100%; border-radius:2px; background:var(--c-ink-3); opacity:.5; transition:background var(--dur-reveal) ease,opacity var(--dur-reveal) ease; } .s6-floor__mini--rate em{ font-size:12px; color:var(--c-ink); } /* status light */ .s6-floor__led{ position:relative; z-index:2; flex:none; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--c-ink-3); transition:all var(--dur-reveal) ease; } /* lit state */ .s6-floor.is-lit{ border-color:var(--c-line-green); background:linear-gradient(180deg,rgba(20,40,32,.88),rgba(10,22,18,.88)); box-shadow:0 18px 44px -22px rgba(0,0,0,.9), 0 0 38px -14px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.06); } .s6-floor.is-lit .s6-floor__windows{ opacity:1; background-image:radial-gradient(circle at 1.5px 1.5px,var(--green-bright) 1px,transparent 1.4px); filter:drop-shadow(0 0 3px var(--green-glow)); } .s6-floor.is-lit .s6-floor__core{ opacity:1; } .s6-floor.is-lit .s6-floor__label b{ color:#fff; } .s6-floor.is-lit .s6-floor__led{ border-color:var(--green); background:var(--green); box-shadow:0 0 10px var(--green); } .s6-floor.is-lit .s6-floor__mini{ border-color:var(--c-line-green); box-shadow:0 0 18px -8px var(--green-glow), inset 0 0 0 1px rgba(39,245,140,.06); } .s6-floor.is-lit .s6-floor__mini svg polyline{ stroke:var(--green); filter:drop-shadow(0 0 3px var(--green-glow)); } .s6-floor.is-lit .s6-floor__mini em{ color:var(--green); } .s6-floor.is-lit .s6-floor__bar{ background:linear-gradient(180deg,var(--green),rgba(39,245,140,.25)); } .s6-floor.is-lit .s6-floor__mini--grid em{ background:var(--green); opacity:.9; box-shadow:0 0 5px var(--green-glow); } /* command-center base */ .s6-base{ position:relative; z-index:2; width:100%; margin-top:4px; padding:20px 18px; border-radius:12px; text-align:center; background:radial-gradient(120% 140% at 50% 0%,rgba(39,245,140,.16),transparent 60%),linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line-green); box-shadow:0 30px 70px -40px rgba(0,0,0,.9),0 0 56px -20px var(--green-glow); transform:rotateX(6deg); overflow:hidden; } .s6-base__pulse{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); width:74%; height:64px; background:radial-gradient(ellipse at center,var(--green-glow),transparent 70%); filter:blur(15px); } .s6-base__windows{ position:absolute; left:0; right:0; bottom:0; height:30px; opacity:.6; background-image:radial-gradient(circle at 1.5px 1.5px,var(--green-bright) 1px,transparent 1.6px); background-size:14px 12px; -webkit-mask:linear-gradient(180deg,transparent,#000); mask:linear-gradient(180deg,transparent,#000); } .s6-base__t{ position:relative; display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(16px,1.8vw,20px); color:var(--c-ink); } .s6-base__s{ position:relative; display:block; margin-top:4px; font-family:var(--font-mono); font-size:11px; color:var(--c-accent); } .s6-base__metrics{ position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px; } .s6-base__chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--green); padding:4px 9px; border-radius:var(--r-pill); background:rgba(39,245,140,.08); border:1px solid var(--c-line-green); } .s6-base__chip i{ width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); } .s6-tower__shadow{ width:78%; height:20px; margin-top:-4px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(39,245,140,.22),transparent 70%); filter:blur(8px); } /* ===================== RIGHT RAIL ===================== */ .s6-aiscore__row{ display:flex; align-items:center; gap:16px; } .s6-gauge{ position:relative; width:84px; height:84px; flex:none; } .s6-gauge svg{ width:100%; height:100%; } .s6-gauge__arc{ stroke-dasharray:251; stroke-dashoffset:251; transition:stroke-dashoffset 1.5s var(--ease-out); filter:drop-shadow(0 0 4px var(--green-glow)); } .is-revealed .s6-gauge__arc,.no-gsap .s6-gauge__arc{ stroke-dashoffset:20; } .s6-gauge__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .s6-gauge__c strong{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--c-ink); } .s6-gauge__c span{ font-family:var(--font-mono); font-size:9px; color:var(--c-ink-3); margin-top:2px; } .s6-aiscore__list{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; } .s6-aiscore__list li{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--c-ink-2); padding-bottom:7px; border-bottom:1px solid var(--c-line); } .s6-aiscore__list li:last-child{ border-bottom:0; padding-bottom:0; } .s6-aiscore__list li span{ display:inline-flex; align-items:center; gap:7px; } .s6-aiscore__list b{ font-family:var(--font-mono); color:var(--green); } /* real GBP + Maps screenshot proof */ .s6-proof__fig{ margin:0; min-width:0; } .s6-proof__img{ display:block; width:100%; max-width:100%; height:auto; border-radius:10px; border:1px solid var(--c-line); background:#0b1210; box-shadow:0 18px 40px -26px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03); } .s6-proof__cap{ display:block; margin-top:9px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--c-ink-3); line-height:1.4; } .s6-proof.is-noimg .s6-proof__fig{ display:none; } /* content published */ .s6-content__row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; } .s6-content__row strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,30px); color:var(--c-ink); line-height:1; } .s6-content__d{ flex:1; min-width:90px; font-size:11.5px; color:var(--c-ink-3); } .s6-content__spark{ display:flex; align-items:flex-end; gap:3px; height:38px; } .s6-rev__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } .s6-rev__grid div{ display:flex; flex-direction:column; gap:3px; min-width:0; } .s6-rev__grid strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.2vw,26px); color:var(--c-ink); } .s6-rev__grid span{ font-size:11px; color:var(--c-ink-3); } .s6-rev__spark{ display:flex; align-items:flex-end; gap:3px; height:30px; } /* automation summary with ring */ .s6-auto__top{ display:flex; align-items:center; gap:14px; margin-bottom:13px; } .s6-auto__ring{ position:relative; width:74px; height:74px; flex:none; } .s6-auto__ring svg{ width:100%; height:100%; } .s6-auto__arc{ stroke-dasharray:207; stroke-dashoffset:207; transition:stroke-dashoffset 1.5s var(--ease-out) .2s; filter:drop-shadow(0 0 4px var(--green-glow)); } .is-revealed .s6-auto__arc,.no-gsap .s6-auto__arc{ stroke-dashoffset:10; } .s6-auto__big{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.2vw,22px); color:var(--green); } .s6-auto__sub{ flex:1; min-width:0; font-size:12px; color:var(--c-ink-2); line-height:1.5; } .s6-auto__stats{ display:flex; gap:8px; } .s6-auto__stats span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:9px 8px; border-radius:var(--r-sm); background:rgba(39,245,140,.05); border:1px solid var(--c-line); font-size:10.5px; color:var(--c-ink-3); } .s6-auto__stats b{ font-family:var(--font-mono); font-size:14px; color:var(--c-ink); } /* ===================== WORKFLOW RAIL ===================== */ .s6-flow{ margin-top:clamp(40px,5vw,68px); display:grid; grid-template-columns:repeat(5,1fr); gap:12px; position:relative; } .s6-flow::before{ content:""; position:absolute; top:34px; left:8%; right:8%; height:2px; background:repeating-linear-gradient(90deg,var(--green) 0 7px,transparent 7px 15px); opacity:.4; } .s6-flow__step{ position:relative; padding:18px 16px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); text-align:center; min-width:0; transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s6-flow__step:hover{ border-color:var(--c-line-green); transform:translateY(-3px); } } .s6-flow__no{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; font-family:var(--font-mono); font-size:12px; color:var(--green); background:var(--c-panel-2); border:1px solid var(--c-line-green); margin-bottom:10px; } .s6-flow__t{ display:block; font-family:var(--font-mono); font-size:14px; letter-spacing:.02em; color:var(--c-ink); } .s6-flow__d{ display:block; margin-top:4px; font-size:12px; color:var(--c-ink-3); } /* ===================== SPLINE-INSPIRED DEPTH + RISING DATA PULSES ===================== */ /* layered depth: the tower scene reads in 3D so floors stack toward the viewer */ .s6-tower{ transform-style:preserve-3d; } /* glowing data conduits rising behind the tower (cause -> effect: signal climbs the stack) */ .s6-tower__conduits{ position:absolute; top:24px; bottom:104px; left:50%; transform:translateX(-50%); width:62%; z-index:0; pointer-events:none; } .s6-conduit{ position:absolute; bottom:0; top:0; width:2px; border-radius:99px; overflow:hidden; background:linear-gradient(180deg,transparent,rgba(39,245,140,.12) 30%,rgba(39,245,140,.08)); } .s6-conduit--a{ left:18%; } .s6-conduit--b{ left:50%; transform:translateX(-50%); opacity:.7; } .s6-conduit--c{ right:18%; } .s6-conduit i{ position:absolute; left:-1px; right:-1px; height:34px; border-radius:99px; background:linear-gradient(180deg,transparent,var(--green-bright),transparent); filter:blur(1px); animation:s6Rise 3.6s var(--ease-out) infinite; will-change:transform,opacity; } .s6-conduit--a i{ animation-delay:.2s; } .s6-conduit--b i{ animation-delay:1.5s; } .s6-conduit--c i{ animation-delay:2.7s; } @keyframes s6Rise{ 0%{ transform:translateY(120%); opacity:0; } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ transform:translateY(-120%); opacity:0; } } /* per-floor data pulse — a packet that ignites once the floor lights, then idles as a soft glow */ .s6-floor__pulse{ position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); z-index:1; pointer-events:none; width:6px; height:6px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px 2px var(--green-glow); opacity:0; } .s6-floor.is-lit .s6-floor__pulse{ animation:s6Packet 1.4s var(--ease-out) forwards; } @keyframes s6Packet{ 0%{ transform:translate(-50%,0) scale(.6); opacity:0; } 25%{ opacity:1; } 100%{ transform:translate(-50%,-30px) scale(1); opacity:0; } } /* subtle parallax depth lift on lit floors — they rise toward the viewer (transform only) */ .s6-floor.is-lit{ transform:rotateX(6deg) translateZ(18px); } /* ===================== AI VISIBILITY CLIMBING INDICATOR ===================== */ .s6-climb{ position:absolute; top:30px; right:-4px; z-index:4; display:flex; align-items:stretch; gap:9px; padding:9px 11px 9px 9px; border-radius:12px; pointer-events:none; background:linear-gradient(180deg,rgba(12,22,18,.92),rgba(8,14,12,.92)); border:1px solid var(--c-line-green); box-shadow:0 18px 40px -24px rgba(0,0,0,.95), 0 0 30px -16px var(--green-glow); backdrop-filter:blur(6px); } .s6-climb__rail{ position:relative; flex:none; width:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; } .s6-climb__fill{ position:absolute; left:0; right:0; bottom:0; height:92%; border-radius:99px; background:linear-gradient(180deg,var(--green-bright),color-mix(in srgb,var(--green) 40%,transparent)); transform:scaleY(0); transform-origin:bottom; transition:transform 1.4s var(--ease-out) .2s; } .is-revealed .s6-climb__fill,.no-gsap .s6-climb__fill{ transform:scaleY(1); } .s6-climb__dot{ position:absolute; left:50%; bottom:92%; transform:translate(-50%,50%); width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px 2px var(--green); } .s6-climb__meta{ display:flex; flex-direction:column; gap:1px; } .s6-climb__lbl{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; color:var(--c-ink-3); } .s6-climb__val{ display:flex; align-items:baseline; gap:3px; } .s6-climb__val strong{ font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s6-climb__val em{ font-style:normal; font-size:10px; color:var(--c-ink-3); } .s6-climb__trend{ display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-family:var(--font-mono); font-size:9.5px; color:var(--green); } .s6-climb__trend .seo-ic{ color:var(--green); } /* tighten side-panel type hierarchy: data numerals align + tabular */ .s6-status strong,.s6-rev__grid strong,.s6-content__row strong,.s6-pcard__score strong,.s6-gauge__c strong,.s6-auto__big{ font-variant-numeric:tabular-nums; } .s6-status span,.s6-rev__grid span,.s6-pcard__id i,.s6-content__d{ letter-spacing:.005em; } .s6-status strong{ letter-spacing:0; } /* ===================== RESPONSIVE ===================== */ @media (max-width:1080px){ .s6-platforms{ grid-template-columns:repeat(3,1fr); } .s6-stage{ grid-template-columns:1fr 1fr; } .s6-tower{ grid-column:1 / -1; order:-1; max-width:540px; margin:0 auto 8px; } .s6-rail{ position:static; } /* keep climbing indicator inside the centred tower's box */ .s6-climb{ right:0; } } @media (max-width:720px){ .s6-platforms{ grid-template-columns:repeat(2,1fr); } .s6-stage{ grid-template-columns:1fr; } .s6-flow{ grid-template-columns:repeat(2,1fr); } .s6-flow::before{ display:none; } .s6-radar__viz{ width:80px; height:80px; } } @media (max-width:520px){ /* on phones the climbing chip becomes a compact top-right badge that never overflows */ .s6-climb{ top:6px; right:6px; padding:7px 9px 7px 7px; gap:7px; } .s6-climb__rail{ width:6px; } .s6-climb__val strong{ font-size:16px; } } @media (max-width:430px){ .s6-platforms{ grid-template-columns:1fr; } .s6-flow{ grid-template-columns:1fr; } .s6-status{ grid-template-columns:1fr 1fr; } .s6-floor{ width:96% !important; padding:11px 13px; } .s6-floor__mini--bars,.s6-floor__mini--grid{ display:none; } /* simplify dense mini-screens on small phones */ .s6-auto__top{ flex-direction:row; } } @media (prefers-reduced-motion:reduce){ .s6-floor{ transform:none; } .s6-base{ transform:none; } .s6-floor.is-lit{ transform:none; } /* drop the depth lift */ .s6-tower__core span,.s6-tower__beacon,.s6-live i,.s6-base__chip i{ animation:none; } /* rising data motion -> calm static glow */ .s6-conduit i{ animation:none; opacity:.55; top:0; transform:none; } .s6-floor.is-lit .s6-floor__pulse{ animation:none; opacity:.8; transform:translate(-50%,0); } .s6-climb__fill{ transition:none; } } /* ===================================================================== SECTION 08 — FROM SEARCH TO SOLD (dark / cinema) A conversion ECOSYSTEM: a green-current spine fills on scroll (#s8Flow .s8-spine__lit), 14 platform "mini-screen" nodes ignite (.s8-node.is-on), a side rail (top-of-funnel + count-up revenue + SEO impact + flywheel), all premium dark. Scope: .s8 ===================================================================== */ .s8{ overflow:clip; position:relative; } .s8 .seo-inner{ position:relative; z-index:1; } /* faint engineering grid behind everything */ .s8-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background: linear-gradient(var(--c-line) 1px,transparent 1px) 0 0/100% 56px, linear-gradient(90deg,var(--c-line) 1px,transparent 1px) 0 0/56px 100%; -webkit-mask-image:radial-gradient(120% 80% at 50% 20%,#000 30%,transparent 78%); mask-image:radial-gradient(120% 80% at 50% 20%,#000 30%,transparent 78%); } /* -------- live conversion strip -------- */ .s8-funnelbar{ margin-top:clamp(22px,3vw,34px); display:grid; grid-template-columns:repeat(4,1fr); gap:10px; min-width:0; } .s8-funnelbar__seg{ position:relative; min-width:0; display:flex; flex-direction:column; gap:2px; padding:13px 16px; border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); font-size:12px; color:var(--c-ink-3); } .s8-funnelbar__seg i{ position:absolute; left:0; top:0; bottom:0; width:4px; } .s8-funnelbar__seg b{ font-size:12px; font-weight:600; color:var(--c-ink-2); text-transform:uppercase; letter-spacing:.04em; } .s8-funnelbar__seg u{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); color:var(--c-ink); text-decoration:none; font-variant-numeric:tabular-nums; } .s8-funnelbar__seg--1 i{ background:var(--g-blue); } .s8-funnelbar__seg--2 i{ background:var(--maps); } .s8-funnelbar__seg--3 i{ background:var(--chatgpt); } .s8-funnelbar__seg--4{ border-color:var(--c-line-green); } .s8-funnelbar__seg--4 i{ background:var(--green); box-shadow:0 0 12px var(--green-glow); } .s8-funnelbar__seg--4 u{ color:var(--green); } /* -------- master layout: flow + side rail -------- */ .s8-layout{ margin-top:clamp(28px,3.5vw,46px); display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(20px,2.6vw,34px); align-items:start; } /* ============ FLOW + SPINE ============ */ .s8-flow{ position:relative; display:grid; grid-template-columns:26px minmax(0,1fr); gap:clamp(14px,2.4vw,30px); min-width:0; } .s8-spine{ position:relative; } .s8-spine svg{ position:absolute; inset:0; width:100%; height:100%; } .s8-spine__lit{ filter:drop-shadow(0 0 6px var(--green-glow)); } .no-gsap .s8-spine__lit{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; } .s8-stages{ display:flex; flex-direction:column; gap:clamp(26px,3.6vw,44px); min-width:0; } .s8-stage{ position:relative; min-width:0; } .s8-stage::before{ content:""; position:absolute; left:-22px; top:7px; width:14px; height:14px; border-radius:50%; background:var(--c-panel); border:2px solid var(--c-line-green); box-shadow:0 0 0 4px var(--void),0 0 16px -3px var(--green-glow); } .s8-stage__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:15px; } .s8-stage__no{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--green); } .s8-stage__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(19px,2.4vw,28px); letter-spacing:0; color:var(--c-ink); } .s8-stage__d{ font-size:13px; color:var(--c-ink-3); } .s8-stage__loop{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:12.5px; color:var(--c-ink-3); } .s8-stage__loop .seo-ic{ color:var(--green); } .s8-stage__nodes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; min-width:0; } .s8-stage__nodes--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px; } /* ============ NODE = mini platform screen ============ */ .s8-node{ position:relative; min-width:0; display:flex; flex-direction:column; padding:13px 13px 12px; border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease; --accent:var(--green); } /* top accent hairline lights up with platform color */ .s8-node::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); opacity:0; transition:opacity var(--dur-ui) ease; } .s8-node.is-on::before{ opacity:.85; } .s8-node__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; } .s8-node__brand{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#fff; box-shadow:0 4px 14px -6px rgba(0,0,0,.6); overflow:hidden; } .s8-node__brand .seo-ic{ display:block; } /* real platform logo inside the white disc */ .s8-node__logo{ width:20px; height:20px; max-width:100%; object-fit:contain; display:block; } .s8-node__brand.is-noimg{ background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.16),transparent 65%),var(--c-panel); border:1px solid var(--c-line-green); } .s8-node__brand--g{ background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.16),transparent 65%),var(--c-panel); border:1px solid var(--c-line-green); color:var(--green); box-shadow:none; } .s8-node__brand--g svg{ width:19px; height:19px; } .s8-node__no{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--c-line-green); opacity:.7; } .s8-node__t{ display:block; font-size:13.5px; font-weight:600; color:var(--c-ink); line-height:1.2; margin-bottom:9px; } /* mini visual frame shared base */ .s8-mini{ position:relative; border-radius:9px; overflow:hidden; margin-bottom:10px; min-height:62px; min-width:0; } /* metrics footer */ .s8-node__metrics{ margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:6px; } .s8-node__metric{ min-width:0; display:flex; flex-direction:column; padding:7px 8px; border-radius:7px; background:rgba(255,255,255,.025); border:1px solid var(--c-line); } .s8-node__metric b{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--c-ink); font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap; } .s8-node__metric b i{ font-style:normal; font-size:10px; color:var(--c-ink-3); font-weight:600; } .s8-node__metric span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--c-ink-3); margin-top:2px; } .s8-node.is-on{ border-color:var(--c-line-green); box-shadow:0 0 36px -18px var(--green-glow); } .s8-node.is-on .s8-node__no{ opacity:1; color:var(--green); } .s8-node.is-on .s8-node__metric b{ color:var(--green); } @media (hover:hover){ .s8-node:hover{ transform:translateY(-4px); border-color:var(--c-line-green); box-shadow:0 18px 44px -22px var(--green-glow); } } /* platform accents */ .s8-node--chatgpt{ --accent:var(--chatgpt); } .s8-node--maps{ --accent:var(--maps-pin); } .s8-node--google{ --accent:var(--g-blue); } .s8-node--site{ --accent:var(--g-green); } .s8-node--won{ background:radial-gradient(120% 120% at 50% 0%,rgba(39,245,140,.13),transparent 60%),linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); } /* ---- 01 mini SERP ---- */ .s8-mini--serp{ background:#fff; padding:8px 9px; display:flex; flex-direction:column; gap:5px; } .s8-serpline{ position:relative; } .s8-serpline__crumb{ display:flex; align-items:center; gap:5px; font-size:9px; color:#5f6368; } .s8-serpline__crumb .seo-ic{ flex:none; } .s8-serpline__title{ display:block; font-size:11px; color:#1a0dab; font-weight:500; line-height:1.2; margin-top:1px; padding-right:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s8-serpline__rank{ position:absolute; top:0; right:0; font-family:var(--font-mono); font-size:9px; font-weight:700; color:#fff; background:var(--g-blue); border-radius:5px; padding:1px 5px; } .s8-serpline--ghost{ height:6px; border-radius:3px; background:#eceef1; } .s8-serpline--ghost:last-child{ width:72%; } /* ---- 02 mini AI ---- */ .s8-mini--ai{ background:#1b1c1f; padding:9px 10px; display:flex; flex-direction:column; gap:5px; border:1px solid rgba(255,255,255,.06); } .s8-aiq{ font-size:9.5px; color:#8a8f98; } .s8-aitxt{ font-size:10.5px; line-height:1.4; color:#ECECF1; margin:0; } .s8-aitxt b{ color:var(--chatgpt); font-weight:600; } .s8-aicite{ display:flex; align-items:center; gap:4px; font-size:8.5px; color:var(--chatgpt); } /* ---- 03 mini map ---- */ .s8-mini--map{ background: radial-gradient(circle at 70% 78%,rgba(52,168,83,.16),transparent 30%), linear-gradient(135deg,#13241c,#0c1713); height:78px; } .s8-mini--map::before{ content:""; position:absolute; left:-10%; top:40%; width:120%; height:7px; background:rgba(255,255,255,.07); transform:rotate(-12deg); } .s8-mini--map::after{ content:""; position:absolute; left:30%; top:-10%; width:7px; height:120%; background:rgba(255,255,255,.05); transform:rotate(8deg); } .s8-mappin{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:translate(-50%,-100%) rotate(-45deg); display:grid; place-items:center; } .s8-mappin span,.s8-mappin{ font-family:var(--font-mono); font-size:8px; font-weight:700; color:#fff; } .s8-mappin--a{ background:var(--maps); } .s8-mappin--you{ width:18px; height:18px; background:var(--maps-pin); box-shadow:0 0 0 4px rgba(234,67,53,.22),0 4px 10px -2px rgba(0,0,0,.5); z-index:2; } .s8-mappin--you::after{ content:""; position:absolute; transform:rotate(45deg); } .s8-mappin span{ transform:rotate(45deg); } .s8-mappin--you{ font-size:0; } .s8-mappin--you::before{ content:"1"; transform:rotate(45deg); font-size:9px; } .s8-map-card{ position:absolute; left:6px; bottom:6px; display:flex; align-items:center; gap:6px; padding:3px 7px; border-radius:6px; background:#fff; box-shadow:0 4px 10px -4px rgba(0,0,0,.5); } .s8-map-card__name{ font-size:9px; font-weight:600; color:#202124; } .s8-map-card__r{ display:flex; align-items:center; gap:2px; font-size:9px; font-weight:600; color:#202124; } .s8-map-card__r .seo-ic{ color:#FBBC05; } /* ---- 04 mini browser ---- */ .s8-mini--browser{ background:#0d1110; border:1px solid var(--c-line); height:78px; display:flex; flex-direction:column; } .s8-browser__bar{ display:flex; align-items:center; gap:4px; padding:5px 7px; background:#171c1b; } .s8-browser__bar i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); } .s8-browser__bar u{ flex:1; margin-left:6px; font-size:8px; color:#7E8E87; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s8-browser__view{ flex:1; position:relative; overflow:hidden; } .s8-browser__view img{ width:100%; height:100%; object-fit:cover; display:block; } .s8-browser__view.is-noimg{ background:linear-gradient(135deg,#0f2a1c,#0a1612); } /* ---- 05 mini landing page ---- */ .s8-mini--lp{ background:radial-gradient(120% 100% at 0% 0%,rgba(39,245,140,.08),transparent 60%),#0e1413; border:1px solid var(--c-line); padding:9px 10px; display:flex; flex-direction:column; gap:6px; } .s8-lp__h{ font-size:10.5px; font-weight:700; color:var(--c-ink); } .s8-lp__line{ height:5px; border-radius:3px; background:rgba(255,255,255,.09); } .s8-lp__line--sm{ width:64%; } .s8-lp__cta{ align-self:flex-start; margin-top:1px; font-size:9px; font-weight:700; color:#04140C; background:var(--green); border-radius:5px; padding:3px 8px; } /* ---- 06 mini form ---- */ .s8-mini--form{ background:#0e1413; border:1px solid var(--c-line); padding:9px 10px; display:flex; flex-direction:column; gap:6px; } .s8-field{ height:16px; border-radius:5px; border:1px solid var(--c-line); background:rgba(255,255,255,.025); display:flex; align-items:center; padding:0 7px; } .s8-field i{ font-style:normal; font-size:8.5px; color:#7E8E87; } .s8-field--btn{ border:0; background:var(--green); color:#04140C; font-size:9px; font-weight:700; justify-content:center; } /* ---- 07 mini CRM ---- */ .s8-mini--crm{ background:#0e1413; border:1px solid var(--c-line); padding:8px; display:flex; flex-direction:column; gap:6px; } .s8-crm__row{ display:flex; align-items:center; gap:7px; } .s8-crm__av{ width:22px; height:22px; border-radius:50%; background:var(--g-blue); color:#fff; font-size:8px; font-weight:700; display:grid; place-items:center; flex:none; } .s8-crm__txt{ display:flex; flex-direction:column; min-width:0; } .s8-crm__txt i{ font-style:normal; font-size:9.5px; font-weight:600; color:var(--c-ink); } .s8-crm__txt u{ font-size:8.5px; color:#7E8E87; text-decoration:none; } .s8-crm__dot{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green-glow); flex:none; } .s8-crm__row--ghost{ height:9px; border-radius:5px; background:rgba(255,255,255,.05); } /* ---- 08 mini automation ---- */ .s8-mini--auto{ background:#0e1413; border:1px solid var(--c-line); padding:8px 9px; display:flex; flex-direction:column; gap:5px; } .s8-auto__step{ display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--c-ink-2); } .s8-auto__step .seo-ic{ color:var(--green); flex:none; } .s8-auto__step.is-done{ color:var(--c-ink-3); } .s8-auto__pulse{ width:11px; height:11px; border-radius:50%; border:2px solid var(--green); flex:none; } /* ---- 09 mini calendar ---- */ .s8-mini--cal{ background:#0e1413; border:1px solid var(--c-line); padding:9px 10px; display:flex; flex-direction:column; gap:7px; } .s8-cal__cells{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; } .s8-cal__cells i{ height:11px; border-radius:3px; background:rgba(255,255,255,.06); } .s8-cal__cells i.is-on{ background:var(--green); box-shadow:0 0 8px -1px var(--green-glow); } .s8-cal__tag{ display:flex; align-items:center; gap:6px; min-width:0; font-size:9px; font-weight:600; color:var(--green); } .s8-cal__face{ width:18px; height:18px; flex:none; border-radius:50%; object-fit:cover; border:1.5px solid var(--c-line-green); box-shadow:0 2px 6px -2px rgba(0,0,0,.6); } /* ---- 10 / 11 mini doc ---- */ .s8-mini--doc{ background:#fbfbfa; border:1px solid var(--c-line); padding:9px 10px; display:flex; flex-direction:column; gap:5px; } .s8-doc__lab{ font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9aa0a6; } .s8-doc__big{ font-family:var(--font-display); font-weight:700; font-size:18px; color:#1f7a47; line-height:1; } .s8-doc__line{ height:4px; border-radius:2px; background:#e4e6e9; } .s8-doc__line--sm{ width:60%; } .s8-doc__sign{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:2px; font-size:9px; font-weight:700; color:#1f7a47; } .s8-doc__sign .seo-ic{ color:#1f7a47; } /* ---- 12 mini won ---- */ .s8-mini--won{ position:relative; background:radial-gradient(120% 120% at 50% 0%,rgba(39,245,140,.16),transparent 65%),#0e1413; border:1px solid var(--c-line-green); height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } /* real client crew photo as the won card backdrop */ .s8-won__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32; filter:saturate(1.05); } .s8-mini--won::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0%,rgba(39,245,140,.18),transparent 60%),linear-gradient(180deg,rgba(8,14,12,.55),rgba(8,14,12,.82)); } .s8-won__amt,.s8-won__tag{ position:relative; z-index:1; } .s8-won__amt{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--green); font-variant-numeric:tabular-nums; line-height:1; text-shadow:0 0 22px var(--green-glow),0 2px 10px rgba(0,0,0,.6); } .s8-won__tag{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--green); } /* ---- 13 mini repeat ---- */ .s8-mini--repeat{ background:#0e1413; border:1px solid var(--c-line); padding:9px 10px; display:flex; flex-direction:column; gap:8px; } .s8-rep__top{ display:flex; align-items:flex-end; gap:8px; min-width:0; } .s8-rep__face{ width:34px; height:34px; flex:none; border-radius:8px; object-fit:cover; border:1px solid var(--c-line-green); box-shadow:0 3px 9px -3px rgba(0,0,0,.6); } .s8-rep__top .s8-rep__bars{ flex:1; min-width:0; } .s8-rep__bars{ display:flex; align-items:flex-end; gap:4px; height:30px; } .s8-rep__bars .seo-bar,.s8-rep__bars i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--green),var(--green-deep)); } .s8-rep__lab{ font-size:9.5px; color:var(--c-ink-3); } /* ---- 14 mini referral ---- */ .s8-mini--ref{ background:radial-gradient(circle at 50% 45%,rgba(39,245,140,.1),transparent 60%),#0e1413; border:1px solid var(--c-line); height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; } .s8-ref__net{ position:relative; display:flex; gap:9px; } .s8-ref__net i{ width:10px; height:10px; border-radius:50%; background:var(--c-panel); border:1.5px solid var(--green); } .s8-ref__net i:nth-child(3){ background:var(--green); box-shadow:0 0 10px var(--green-glow); } .s8-ref__lab{ font-size:9.5px; color:var(--c-ink-3); } /* the bars helper from the engine inserts spans; make them green */ .s8-rep__bars [data-bars] > *,.s8 [data-bars] > *{ background:linear-gradient(180deg,var(--green),var(--green-deep)); } /* ============ SIDE RAIL ============ */ .s8-rail{ display:flex; flex-direction:column; gap:14px; min-width:0; position:sticky; top:88px; } .s8-card{ padding:18px; border-radius:var(--r-lg); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); min-width:0; } .s8-card__lab{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:13px; } .s8-card__lab .seo-ic{ color:var(--green); } .s8-card__lab--g{ color:var(--green); } /* top of funnel */ .s8-tof{ display:flex; flex-direction:column; } .s8-tof li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; font-size:13px; color:var(--c-ink-2); } .s8-tof li + li{ border-top:1px solid var(--c-line); } .s8-tof b{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s8-tof .s8-up{ color:var(--green); } /* revenue */ .s8-card--rev{ background:radial-gradient(130% 120% at 100% 0%,rgba(39,245,140,.14),transparent 55%),linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border-color:var(--c-line-green); box-shadow:0 40px 90px -55px #000; } .s8-rev__v{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(36px,4.6vw,46px); line-height:1; color:var(--c-ink); margin:4px 0 14px; font-variant-numeric:tabular-nums; text-shadow:0 0 30px rgba(39,245,140,.25); } .s8-rev__split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; } .s8-rev__roi{ display:flex; flex-direction:column; padding:9px 11px; border-radius:9px; background:rgba(39,245,140,.06); border:1px solid var(--c-line-green); } .s8-rev__roi b{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--green); line-height:1; } .s8-rev__roi span{ font-size:10.5px; color:var(--c-ink-3); margin-top:3px; } .s8-rev__chart{ display:flex; align-items:flex-end; gap:5px; height:42px; } .s8-rev__chart > *,.s8-rev__chart i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--green),var(--green-deep)); opacity:.85; } /* SEO impact */ .s8-impact{ display:flex; flex-direction:column; } .s8-impact li{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:9px 0; font-size:12.5px; color:var(--c-ink-2); } .s8-impact li + li{ border-top:1px solid var(--c-line); } .s8-impact b{ font-family:var(--font-mono); font-size:13px; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s8-impact i{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--green); white-space:nowrap; } /* flywheel */ .s8-card--fly{ background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); } .s8-fly{ position:relative; width:120px; height:120px; margin:2px auto 14px; } .s8-fly__svg{ width:100%; height:100%; } .s8-fly__track{ fill:none; stroke:var(--c-line); stroke-width:6; } .s8-fly__spin{ fill:none; stroke:var(--green); stroke-width:6; stroke-linecap:round; stroke-dasharray:90 300; transform-origin:50% 50%; filter:drop-shadow(0 0 4px var(--green-glow)); animation:s8spin 4s linear infinite; } @keyframes s8spin{ to{ transform:rotate(360deg); } } .s8-fly__hub{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,rgba(39,245,140,.2),transparent 70%),var(--c-panel); border:1px solid var(--c-line-green); color:var(--green); } .s8-fly__ring{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .s8-fly__ring li{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--r-pill); background:rgba(39,245,140,.06); border:1px solid var(--c-line-green); font-family:var(--font-mono); font-size:11px; color:var(--c-ink); } .s8-fly__ring li::after{ content:"→"; margin-left:2px; color:var(--green); } .s8-fly__ring li:last-child::after{ content:"↻"; } .s8-fly__d{ margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--c-ink-2); } /* ===================================================================== PREMIUM ENHANCEMENT — named pathway, travelling current, revenue climb, stage flow-links, node depth. Motion: transform/opacity only, <=320ms for UI; ambient loops respect prefers-reduced-motion. Google cues sparing. ===================================================================== */ /* premium type sharpening on stage labels + section bones */ .s8-stage__no{ font-weight:600; } .s8-stage__name{ letter-spacing:0; } .s8-funnelbar__seg b{ font-family:var(--font-mono); letter-spacing:.06em; } /* -------- the journey, named end-to-end (cause -> effect) -------- */ .s8-path{ list-style:none; margin:14px 0 0; padding:11px 14px; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-radius:var(--r); border:1px solid var(--c-line); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); position:relative; overflow:hidden; } .s8-path::before{ /* the green current sweeping across the named path */ content:""; position:absolute; left:0; top:0; bottom:0; width:140%; background:linear-gradient(90deg,transparent,rgba(39,245,140,.12) 45%,rgba(39,245,140,.22) 50%,rgba(39,245,140,.12) 55%,transparent); transform:translateX(-100%); pointer-events:none; } .s8-path.is-revealed::before{ animation:s8sweep 3.6s var(--ease-out) .25s infinite; } .s8-path__step{ display:inline-flex; align-items:center; gap:8px; min-width:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-2); white-space:nowrap; } .s8-path__no{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--green); background:rgba(39,245,140,.08); border:1px solid var(--c-line-green); font-variant-numeric:tabular-nums; } .s8-path__step--rev{ color:var(--green); } .s8-path__step--rev .s8-path__no{ color:#04140C; background:var(--green); border-color:var(--green); box-shadow:0 0 12px var(--green-glow); } .s8-path__arrow{ flex:1 1 18px; min-width:14px; height:2px; border-radius:2px; position:relative; background:linear-gradient(90deg,var(--c-line-green),rgba(39,245,140,.25)); } .s8-path__arrow::after{ content:""; position:absolute; right:-1px; top:50%; width:5px; height:5px; border-top:1.5px solid var(--green); border-right:1.5px solid var(--green); transform:translateY(-50%) rotate(45deg); } /* -------- travelling current pulses riding the vertical spine -------- */ .s8-pulse{ position:absolute; left:50%; width:7px; height:7px; border-radius:50%; margin-left:-3.5px; top:0; opacity:0; background:var(--green-bright); box-shadow:0 0 10px 2px var(--green-glow),0 0 3px #fff inset; } .s8-pulse--1{ animation:s8ride 4.2s linear infinite; } .s8-pulse--2{ animation:s8ride 4.2s linear infinite 1.4s; } .s8-pulse--3{ animation:s8ride 4.2s linear infinite 2.8s; } @keyframes s8sweep{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(0); } } @keyframes s8ride{ 0%{ transform:translateY(0); opacity:0; } 8%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateY(calc(100% - 7px)); opacity:0; } } /* -------- revenue meter that climbs along the path -------- */ .s8-revtrip{ position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; animation:s8climb 9s var(--ease-out) infinite; } .s8-revtrip__dot{ width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--void); box-shadow:0 0 0 3px rgba(39,245,140,.18),0 0 14px var(--green-glow); } .s8-revtrip__tag{ position:absolute; left:14px; top:-7px; white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--green); font-variant-numeric:tabular-nums; padding:3px 8px; border-radius:var(--r-pill); background:rgba(8,14,12,.78); border:1px solid var(--c-line-green); box-shadow:0 6px 18px -8px #000; backdrop-filter:blur(4px); } @keyframes s8climb{ 0%{ top:2%; opacity:0; } 10%{ opacity:1; } 88%{ opacity:1; } 92%{ top:96%; opacity:1; } 100%{ top:96%; opacity:0; } } /* -------- stage flow-link: green current carrying the hand-off down -------- */ .s8-flowlink{ position:relative; display:flex; align-items:center; gap:8px; margin:14px 0 2px; padding-left:2px; min-width:0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-3); } .s8-flowlink__rail{ position:relative; flex:1 1 60px; min-width:30px; height:2px; border-radius:2px; overflow:hidden; background:linear-gradient(90deg,var(--c-line-green),rgba(39,245,140,.12)); } .s8-flowlink__car{ position:absolute; left:0; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 9px 1px var(--green-glow); opacity:0; } .s8-flowlink.is-revealed .s8-flowlink__car{ animation:s8carry 2.8s linear .2s infinite; } .s8-flowlink b{ font-weight:600; color:var(--green); white-space:nowrap; } .s8-flowlink::after{ content:""; width:5px; height:5px; flex:none; border-right:1.5px solid var(--green); border-bottom:1.5px solid var(--green); transform:rotate(45deg); margin-left:-2px; } .s8-flowlink--rev b{ color:var(--green-bright); } @keyframes s8carry{ 0%{ left:-9px; opacity:0; } 12%{ opacity:1; } 80%{ opacity:1; } 100%{ left:100%; opacity:0; } } /* -------- node depth (Spline-inspired layered glow + ignite sweep) -------- */ .s8-node{ transform:translateZ(0); } .s8-node::after{ /* soft radial floor-glow that lifts on ignite */ content:""; position:absolute; left:0; right:0; bottom:0; height:60%; background:radial-gradient(120% 80% at 50% 120%,rgba(39,245,140,.10),transparent 70%); opacity:0; transition:opacity var(--dur-ui) var(--ease-out); pointer-events:none; } .s8-node.is-on::after{ opacity:1; } .s8-node.is-on{ animation:s8ignite var(--dur-ui) var(--ease-out); } @keyframes s8ignite{ from{ transform:translateY(4px) scale(.985); } to{ transform:translateY(0) scale(1); } } .s8-node:active{ transform:scale(.97); } .s8-node__no{ transition:color var(--dur-ui) var(--ease-out),opacity var(--dur-ui) var(--ease-out); } /* a single travelling glint across the top accent hairline when lit */ .s8-node.is-on::before{ background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent); background-size:240% 100%; animation:s8glint 2.6s var(--ease-out) infinite; } @keyframes s8glint{ 0%{ background-position:120% 0; } 60%,100%{ background-position:-120% 0; } } /* CRM real-face avatar (initials fall back if image 404s) */ .s8-crm__av{ position:relative; overflow:hidden; } .s8-crm__av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .s8-crm__av b{ position:relative; z-index:1; font-size:8px; font-weight:700; color:#fff; opacity:0; } .s8-crm__av.is-noimg img{ display:none; } .s8-crm__av.is-noimg b{ opacity:1; } /* ============ RESPONSIVE ============ */ @media (max-width:1080px){ .s8-layout{ grid-template-columns:1fr; } .s8-rail{ position:static; display:grid; grid-template-columns:1fr 1fr; gap:14px; } .s8-card--rev{ grid-column:1 / -1; } .s8-card--rev .s8-rev__v{ font-size:clamp(40px,7vw,52px); } } @media (max-width:900px){ .s8-stage__nodes{ grid-template-columns:repeat(2,minmax(0,1fr)); } .s8-funnelbar{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ /* let the named journey breathe: 2-per-row chips, arrows hidden */ .s8-path{ gap:7px 10px; padding:11px 12px; justify-content:center; } .s8-path__arrow{ display:none; } .s8-path__step{ font-size:11px; } } @media (max-width:640px){ .s8-rail{ grid-template-columns:1fr; } .s8-fly{ width:108px; height:108px; } } @media (max-width:480px){ .s8-flow{ grid-template-columns:16px minmax(0,1fr); gap:12px; } .s8-stage__nodes,.s8-stage__nodes--2{ grid-template-columns:1fr; max-width:none; } .s8-stage::before{ left:-20px; } .s8-node{ flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px; } .s8-node__top{ width:auto; margin-bottom:0; } .s8-node__t{ flex:1; margin-bottom:0; margin-left:10px; font-size:14px; } .s8-node .s8-mini{ flex-basis:100%; order:3; margin-top:10px; margin-bottom:0; } .s8-node__metrics{ flex-basis:100%; order:4; margin-top:10px; } /* thin spine: keep the climbing dot, drop the wide $ tag to avoid crowding */ .s8-revtrip__tag{ display:none; } .s8-flowlink b{ font-size:10px; } } /* ============ MOTION SAFETY ============ */ @media (prefers-reduced-motion:reduce){ .s8-spine__lit{ stroke-dashoffset:0 !important; } .s8-fly__spin{ animation:none; } /* freeze every ambient loop; show end-states statically */ .s8-pulse, .s8-flowlink__car{ animation:none !important; opacity:1; } .s8-pulse{ display:none; } .s8-path::before{ animation:none !important; transform:none; opacity:.4; } .s8-node.is-on{ animation:none !important; } .s8-node.is-on::before{ animation:none !important; background:var(--accent); } .s8-revtrip{ animation:none !important; top:50%; opacity:1; } } /* ===================================================================== SECTION 09 — REAL RESULTS. REAL CLIENTS. (light / system) Split hero (why-trust + live proof board), 8 case-study cards with browser shots + local-pack + spark + metrics + review, a review wall (GBP + portrait testimonials), and a big proof-stat row. Scope: .s9 ===================================================================== */ .s9{ overflow:clip; } .s9 .seo-inner--wide{ position:relative; z-index:2; } /* ---------- SPLIT HERO ---------- */ .s9-top{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:clamp(22px,3vw,44px); align-items:start; margin-bottom:clamp(56px,7vw,92px); } /* LEFT — why trust */ .s9-why{ min-width:0; } .s9-why__h{ margin:14px 0 16px; font-size:clamp(36px,5vw,60px); line-height:.94; } .s9-why .seo-sub{ max-width:none; margin-bottom:clamp(24px,3vw,34px); } .s9-pillars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .s9-pillar{ display:flex; gap:13px; padding:16px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); box-shadow:var(--c-shadow); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out); min-width:0; } @media (hover:hover){ .s9-pillar:hover{ border-color:var(--paper-line-green); transform:translateY(-3px); } } .s9-pillar__ic{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--green-deep); background:rgba(10,138,79,.08); border:1px solid var(--paper-line-green); } .s9-pillar__ic svg{ width:21px; height:21px; } .s9-pillar__t{ font-size:15px; font-weight:600; color:var(--c-ink); margin-bottom:4px; } .s9-pillar__d{ font-size:12.5px; line-height:1.45; color:var(--c-ink-2); } .s9-pillar__s{ display:inline-block; margin-top:9px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--green-deep); padding:3px 9px; border-radius:var(--r-pill); background:rgba(10,138,79,.08); border:1px solid var(--paper-line-green); } /* RIGHT — live proof board */ .s9-board{ min-width:0; border-radius:var(--r-lg); background:linear-gradient(180deg,var(--c-panel),var(--c-panel-2)); border:1px solid var(--c-line); box-shadow:var(--c-shadow); padding:clamp(16px,1.6vw,22px); display:flex; flex-direction:column; } .s9-board__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; } .s9-board__t{ font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.1vw,26px); letter-spacing:0; color:var(--c-ink); } .s9-board__sub{ font-size:12.5px; color:var(--c-ink-3); margin-top:3px; } .s9-live{ flex:none; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--green-deep); background:rgba(10,138,79,.1); border:1px solid var(--paper-line-green); padding:5px 11px; border-radius:var(--r-pill); } .s9-live__dot{ width:7px; height:7px; border-radius:50%; background:var(--green-deep); box-shadow:0 0 0 0 rgba(10,138,79,.5); animation:s9pulse 2.2s var(--ease-out) infinite; } @keyframes s9pulse{ 0%{ box-shadow:0 0 0 0 rgba(10,138,79,.45); } 70%{ box-shadow:0 0 0 7px rgba(10,138,79,0); } 100%{ box-shadow:0 0 0 0 rgba(10,138,79,0); } } @media (prefers-reduced-motion:reduce){ .s9-live__dot{ animation:none; } } .s9-board__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:11px; } .s9-tile{ grid-column:span 3; min-width:0; display:flex; flex-direction:column; padding:14px; border-radius:var(--r); background:var(--c-bg); border:1px solid var(--c-line); } .s9-tile--wide{ grid-column:span 6; } .s9-tile--center{ align-items:center; text-align:center; } .s9-tile--gbp{ grid-column:span 6; } .s9-tile__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .s9-tile__lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); } .s9-tile__big{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,32px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; margin-bottom:10px; } .s9-tile__big.s9-green{ color:var(--green-deep); } .s9-green{ color:var(--green-deep); } .s9-tile__note{ margin-top:8px; font-size:11px; color:var(--green-deep); font-weight:600; } .s9-tile__pin{ display:inline-grid; place-items:center; } /* area chart inside wide tile */ .s9-area{ position:relative; } .s9-area svg{ display:block; width:100%; height:clamp(72px,9vw,100px); } .s9-area__line{ stroke-linecap:round; stroke-linejoin:round; } .s9-tile__foot{ display:flex; justify-content:space-between; margin-top:7px; font-family:var(--font-mono); font-size:9.5px; color:var(--c-ink-3); } /* real Google Analytics screenshot replacing the wide-tile chart */ .s9-shot{ margin:2px 0 0; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--c-line); background:#fff; box-shadow:0 8px 22px -16px rgba(5,5,5,.4); } .s9-shot img{ display:block; width:100%; height:auto; max-width:100%; } .s9-shot.is-noimg{ display:none; } .s9-shot--ga img{ object-fit:contain; } /* mini bars */ .s9-bars{ display:flex; align-items:flex-end; gap:3px; height:46px; } /* donut */ .s9-donut{ width:120px; height:120px; margin:4px auto 10px; } .s9-donut__legend{ display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; width:100%; } .s9-donut__legend span{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--c-ink-2); } .s9-donut__legend i{ width:9px; height:9px; border-radius:2px; flex:none; } /* heatmap */ .s9-heat{ margin:2px 0 4px; } /* gbp gauge tile */ .s9-gbprow{ display:flex; align-items:center; gap:16px; margin-top:6px; } .s9-gauge{ position:relative; width:62px; height:62px; flex:none; display:grid; place-items:center; } .s9-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); } .s9-gauge__bg{ fill:none; stroke:var(--c-line); stroke-width:3; } .s9-gauge__fg{ fill:none; stroke:var(--green-deep); stroke-width:3; stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:calc(97.4 - 97.4 * var(--p) / 100); transition:stroke-dashoffset 1.1s var(--ease-out); } .s9-gauge b{ position:absolute; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--c-ink); } .s9-gbprow__meta{ display:flex; flex-direction:column; gap:4px; } .s9-gbprow__meta .seo-stars{ font-size:16px; } .s9-gbprow__n{ font-size:13px; color:var(--c-ink-2); } .s9-gbprow__n b{ color:var(--c-ink); } /* board chip strip */ .s9-board__strip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--c-line); } .s9-board__strip .seo-pchip{ font-size:11.5px; } /* ---------- SUCCESS STORIES ---------- */ .s9-cases-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; } .s9-subhead{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(24px,3.4vw,40px); letter-spacing:0; color:var(--c-ink); } .s9-cases-head .seo-sub{ margin:6px 0 0; max-width:520px; font-size:14px; } .s9-filter__bar{ display:flex; flex-wrap:wrap; gap:8px; } /* Spline-inspired layered depth glow behind the story grid */ .s9-cases-wrap{ position:relative; } .s9-cases-wrap::before{ content:""; position:absolute; left:50%; top:-4%; width:min(720px,90%); height:60%; transform:translateX(-50%); background:radial-gradient(60% 60% at 50% 30%,rgba(10,138,79,.10),transparent 70%); filter:blur(8px); pointer-events:none; z-index:0; } .s9-cases{ position:relative; z-index:1; } .s9-cases{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:clamp(44px,5vw,64px); align-items:stretch; } .s9-case{ display:flex; flex-direction:column; min-width:0; height:100%; border-radius:var(--r); overflow:hidden; background:var(--c-panel); border:1px solid var(--c-line); box-shadow:var(--c-shadow); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; will-change:transform; } @media (hover:hover){ .s9-case:hover{ transform:translateY(-6px); border-color:var(--paper-line-green); box-shadow:0 30px 60px -32px rgba(10,138,79,.55),0 2px 0 0 rgba(10,138,79,.18); } } .s9-case:active{ transform:translateY(-2px) scale(.985); } .s9-case__shot{ border-radius:0; border:0; border-bottom:1px solid var(--c-line); box-shadow:none; } .s9-case__shot .seo-browser__body{ aspect-ratio:16/10; background:#f4f7f5; } .s9-case__shot .seo-browser__body.is-noimg::after{ content:"GCM"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:26px; color:rgba(10,138,79,.4); } @media (hover:hover){ .s9-case:hover .seo-browser__body img{ transform:scale(1.04); } } .s9-case__shot .seo-browser__body img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform var(--dur-cine) var(--ease-out); } .s9-case__tag{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px 4px 9px; border-radius:var(--r-pill); background:rgba(4,7,5,.74); color:#fff; backdrop-filter:blur(6px); box-shadow:0 4px 14px -6px rgba(4,7,5,.5),inset 0 0 0 1px rgba(255,255,255,.08); z-index:2; } .s9-case__tag .seo-ic{ color:var(--green); } .s9-case__src{ position:absolute; bottom:8px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.02em; padding:3px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); color:#3c4a42; border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 8px -4px rgba(0,0,0,.4); } .s9-case__src img{ width:11px; height:11px; object-fit:contain; } /* logo chip over the screenshot — sits on WHITE per logo-on-light rule */ .s9-case__logo{ position:absolute; top:10px; right:10px; z-index:3; width:46px; height:46px; display:grid; place-items:center; padding:6px; border-radius:11px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 6px 18px -8px rgba(4,7,5,.45); transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; } .s9-case__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; } .s9-case__logo.is-noimg{ display:none; } @media (hover:hover){ .s9-case:hover .s9-case__logo{ transform:translateY(-2px) scale(1.04); box-shadow:0 12px 26px -10px rgba(4,7,5,.5); } } @media (prefers-reduced-motion:reduce){ .s9-case:hover .s9-case__logo{ transform:none; } } /* real client photo strip */ .s9-case__photo{ position:relative; aspect-ratio:16/8; overflow:hidden; background:#eef2ef; border-bottom:1px solid var(--c-line); } .s9-case__photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-cine) var(--ease-out); } @media (hover:hover){ .s9-case:hover .s9-case__photo img{ transform:scale(1.04); } } .s9-case__photo.is-noimg{ display:none; } .s9-case__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(4,7,5,.14)); pointer-events:none; } .s9-case__body{ display:flex; flex-direction:column; padding:15px 15px 16px; flex:1; } .s9-case__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .s9-case__name{ font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--c-ink); line-height:1.16; letter-spacing:0; min-width:0; } .s9-case__loc{ flex:none; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--c-ink-3); } .s9-case__loc::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green-deep); flex:none; box-shadow:0 0 0 3px rgba(10,138,79,.12); } .s9-case__rank{ margin-top:11px; } .s9-case__lp{ box-shadow:none; border:1px solid #e6e9e7; } .s9-case__lp .seo-lp__item{ padding:9px 10px; } .s9-case__lp .seo-lp__name{ font-size:13px; font-weight:600; } .s9-case__lp .seo-lp__meta{ font-size:11px; } /* ----- per-card "rankings climbing" sparkline (search->rank story) ----- */ .s9-spark{ position:relative; height:46px; margin:13px 0 4px; } .s9-spark__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; } .s9-spark__lbl{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); } .s9-spark__delta{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.02em; color:var(--green-deep); display:inline-flex; align-items:center; gap:3px; } .s9-spark__delta svg{ width:9px; height:9px; } .s9-spark__chart{ position:relative; height:30px; } .s9-spark__chart svg{ display:block; width:100%; height:100%; overflow:visible; } .s9-spark__bars{ display:flex; align-items:flex-end; gap:3px; height:100%; position:absolute; inset:0; opacity:.45; } .s9-spark__bars i{ background:linear-gradient(180deg,rgba(10,138,79,.5),rgba(10,138,79,.06)) !important; } /* rank line draws in on reveal via CSS (.seo-draw transition lives in 01-platform.css) */ .s9-spark__line{ stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:240; stroke-dashoffset:240; filter:drop-shadow(0 1px 3px rgba(10,138,79,.35)); } .s9-case.is-revealed .s9-spark__line{ stroke-dashoffset:0; transition:stroke-dashoffset 1.3s var(--ease-out) .15s; } .s9-spark__dot{ opacity:0; transition:opacity var(--dur-ui) var(--ease-out) .9s; } .s9-case.is-revealed .s9-spark__dot{ opacity:1; } @media (prefers-reduced-motion:reduce){ .s9-spark__line{ stroke-dashoffset:0; } .s9-case.is-revealed .s9-spark__line{ transition:none; } .s9-spark__dot{ opacity:1; transition:none; } } .s9-case__metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:13px; margin-top:auto; border-top:1px solid var(--c-line); } .s9-case__metrics div{ position:relative; display:flex; flex-direction:column; gap:3px; min-width:0; } .s9-case__metrics div + div{ padding-left:8px; } .s9-case__metrics div + div::before{ content:""; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:var(--c-line); } .s9-case__metrics strong{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--green-deep); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:0; } .s9-case__metrics span{ font-family:var(--font-mono); font-size:9px; letter-spacing:.03em; text-transform:uppercase; color:var(--c-ink-3); line-height:1.25; } .s9-case__quote{ margin:13px 0 0; padding-top:12px; border-top:1px solid var(--c-line); } .s9-case__quote blockquote{ margin:5px 0 0; font-size:12.5px; line-height:1.45; color:var(--c-ink-2); font-style:italic; } /* ---------- REVIEW WALL ---------- */ .s9-reviews{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:14px; align-items:stretch; margin-bottom:clamp(44px,5vw,64px); } .s9-gbp{ box-shadow:var(--c-shadow); border:1px solid var(--c-line); } .s9-quote{ margin:0; display:flex; flex-direction:column; padding:22px; border-radius:var(--r); background:var(--c-panel-2); border:1px solid var(--c-line); } .s9-quote blockquote{ margin:11px 0 16px; font-size:14.5px; line-height:1.5; color:var(--c-ink); flex:1; } .s9-quote__by{ display:flex; align-items:center; gap:11px; } .s9-quote__pic{ width:42px; height:42px; flex:none; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,#dfe8e2,#cdd8d1); } .s9-quote__by.is-noimg .s9-quote__pic,.s9-quote__by .s9-quote__pic.is-noimg{ display:block; } .s9-quote__by > span{ display:flex; flex-direction:column; font-size:12px; color:var(--c-ink-3); line-height:1.35; min-width:0; } .s9-quote__by b{ font-size:13.5px; color:var(--c-ink); } .s9-quote__src{ display:inline-flex; align-items:center; gap:5px; margin-top:3px; font-family:var(--font-mono); font-size:10px; color:var(--green-deep); } /* ---------- BIG PROOF STATS ---------- */ .s9-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } .s9-stat{ position:relative; text-align:center; padding:24px 14px 22px; border-radius:var(--r); background:linear-gradient(180deg,var(--c-panel),var(--c-panel-2)); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out); overflow:hidden; } .s9-stat::after{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--green-deep),transparent); opacity:.55; } @media (hover:hover){ .s9-stat:hover{ border-color:var(--paper-line-green); transform:translateY(-3px); } } .s9-stat__ic{ width:34px; height:34px; margin:0 auto 12px; border-radius:9px; display:grid; place-items:center; color:var(--green-deep); background:rgba(10,138,79,.08); border:1px solid var(--paper-line-green); } .s9-stat__ic svg{ width:18px; height:18px; } .s9-stat__n{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.8vw,34px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s9-stat--rating .s9-stat__n{ color:var(--green-deep); } .s9-stat__l{ display:block; margin-top:8px; font-size:11.5px; color:var(--c-ink-3); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1080px){ .s9-top{ grid-template-columns:1fr; gap:36px; } .s9-why .seo-sub{ max-width:560px; } .s9-cases{ grid-template-columns:repeat(2,minmax(0,1fr)); } .s9-stats{ grid-template-columns:repeat(3,1fr); } .s9-reviews{ grid-template-columns:1fr 1fr; } .s9-reviews .s9-gbp{ grid-column:1 / -1; } } @media (max-width:760px){ .s9-board__grid{ grid-template-columns:repeat(2,1fr); } .s9-tile{ grid-column:span 1; } .s9-tile--wide,.s9-tile--center,.s9-tile--gbp{ grid-column:1 / -1; } .s9-reviews{ grid-template-columns:1fr; } .s9-reviews .s9-gbp{ grid-column:auto; } } @media (max-width:600px){ .s9-pillars{ grid-template-columns:1fr; } .s9-cases{ grid-template-columns:1fr; } .s9-stats{ grid-template-columns:repeat(2,1fr); } } @media (max-width:380px){ .s9-board__grid{ grid-template-columns:1fr; } .s9-tile{ grid-column:auto; } } /* ===================================================================== SECTION 10 — PACKAGES BUILT FOR GROWTH (dark / cinema) A growth-trajectory SVG curve climbing behind 3 tiers (middle one highlighted w/ animated gradient border), per-tier ROI forecast panels w/ count-ups + mini bars, a domination banner, a visual comparison table (emerald checkmarks, highlighted middle column), and a 3-step process. Scope: .s10 ===================================================================== */ .s10{ overflow:clip; } /* ---------- trajectory stage ---------- */ .s10-stage{ position:relative; margin-top:clamp(34px,4vw,52px); padding-top:clamp(18px,2.4vw,28px); } /* chart legend + axis label — turns the curve into a readable data story */ .s10-trajectory{ position:absolute; top:-6px; left:2px; right:2px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; } .s10-trajectory__axis{ color:var(--c-ink-3); } .s10-trajectory__legend{ display:inline-flex; align-items:center; gap:7px; color:var(--c-ink-2); } .s10-trajectory__swatch{ width:16px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--green-deep),var(--green-bright)); box-shadow:0 0 8px var(--green-glow); } /* the climbing SVG curve sits behind the cards, glowing emerald */ .s10-curve{ position:absolute; inset:6px -2% auto -2%; width:104%; height:clamp(220px,30vw,380px); pointer-events:none; z-index:0; opacity:.92; } .s10-curve__grid line{ stroke:var(--c-line); stroke-width:1; stroke-dasharray:2 8; opacity:.5; } /* path is ~1320px long — override the generic 1000 dasharray so it fully hides before drawing in (engine flips dashoffset to 0 on reveal) */ .s10 .s10-curve__line.seo-draw{ stroke-dasharray:1400; stroke-dashoffset:1400; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset var(--dur-cine) var(--ease-out); } .s10 .s10-stage.is-revealed .s10-curve__line.seo-draw, .no-gsap .s10 .s10-curve__line.seo-draw{ stroke-dashoffset:0; } .s10-curve__node{ fill:var(--green); stroke:var(--c-bg); stroke-width:3; filter:drop-shadow(0 0 8px var(--green-glow)); } .s10-curve__node--mid{ fill:var(--green-bright); animation:s10Pulse 3.2s var(--ease-out) infinite; } @keyframes s10Pulse{ 0%,100%{ filter:drop-shadow(0 0 6px var(--green-glow)) } 50%{ filter:drop-shadow(0 0 16px var(--green-glow)) } } /* travelling pulse — only rides the curve after the line has drawn in */ .s10-curve__pulse{ fill:var(--green-bright); opacity:0; filter:drop-shadow(0 0 7px var(--green-glow)); transition:opacity var(--dur-ui) var(--ease-out) 1s; } .s10 .s10-stage.is-revealed .s10-curve__pulse{ opacity:.95; } /* trajectory waypoint labels (cause -> effect path) */ .s10-waypoints{ position:absolute; top:calc(6px + clamp(120px,18vw,210px)); left:0; right:0; z-index:1; display:flex; justify-content:space-between; padding:0 2px; pointer-events:none; } .s10-waypoint{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-3); opacity:0; transform:translateY(6px); transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); } .s10-waypoint:nth-child(1){ transition-delay:.45s; } .s10-waypoint:nth-child(2){ transition-delay:.62s; } .s10-waypoint:nth-child(3){ transition-delay:.82s; } .s10-waypoint--mid{ color:var(--green); } .s10 .s10-stage.is-revealed .s10-waypoint{ opacity:1; transform:none; } html:not(.js) .s10-waypoint{ opacity:1; transform:none; } /* tiers */ .s10-tiers{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; } .s10-tiers > *{ min-width:0; } /* prevent grid-child overflow */ .s10-tier{ position:relative; display:flex; flex-direction:column; padding:24px 22px; border-radius:var(--r-lg); background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line); box-shadow:0 30px 70px -50px rgba(0,0,0,.9); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; will-change:transform; transform:perspective(900px); } @media (hover:hover){ .s10-tier:hover{ transform:translateY(-5px); border-color:var(--c-line-green); box-shadow:0 40px 80px -50px rgba(0,0,0,.9),0 0 40px -22px var(--green-glow); } } .s10-tier__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .s10-tier__icon{ display:inline-grid; } .s10-tier .seo-ic-box{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px; background:radial-gradient(120% 120% at 30% 20%,rgba(39,245,140,.18),rgba(39,245,140,.04)); border:1px solid var(--c-line-green); color:var(--green); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 8px 24px -16px var(--green-glow); } .s10-tier .seo-ic-box .seo-ic{ color:var(--green); } .s10-tier__no{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--c-line-green); opacity:.65; line-height:1; } .s10-tier__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.3vw,27px); line-height:1.02; letter-spacing:0; color:var(--c-ink); margin:2px 0 8px; } .s10-tier__for{ font-size:13.5px; line-height:1.45; color:var(--c-ink-3); min-height:40px; } /* metric header */ .s10-tier__metric{ display:flex; flex-direction:column; gap:3px; padding:16px 0 18px; margin:14px 0 0; border-top:1px solid var(--c-line); } .s10-tier__kwwrap{ display:flex; align-items:baseline; gap:8px; } .s10-tier__kw{ font-family:var(--font-display); font-weight:700; font-size:clamp(36px,4.6vw,52px); line-height:.92; color:var(--c-ink); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"ss01" 1; letter-spacing:0; } .s10-tier--pop .s10-tier__kw{ color:var(--green); text-shadow:0 0 36px var(--green-glow); } .s10-tier__kwsuf{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--c-ink-2); } .s10-tier__kwl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); } .s10-tier__growth{ margin-top:11px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; color:var(--green); padding:6px 12px; border-radius:var(--r-pill); background:rgba(39,245,140,.08); border:1px solid var(--c-line-green); } .s10-tier__growth .seo-ic{ color:var(--green); } /* AI logo set inline in feature list */ .s10-aiset{ display:inline-flex; align-items:center; gap:5px; margin-left:4px; vertical-align:middle; } .s10-aiset .seo-ic{ display:block; } /* ---------- ROI forecast mini-panel ---------- */ .s10-roi{ margin:0 0 20px; padding:14px 14px 12px; border-radius:var(--r); border:1px solid var(--c-line); background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)); } .s10-roi--pop{ border-color:var(--c-line-green); background:linear-gradient(180deg,rgba(39,245,140,.07),rgba(39,245,140,.01)); } .s10-roi__lab{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--c-ink-3); margin-bottom:9px; } .s10-roi__rows{ display:flex; flex-direction:column; gap:7px; } .s10-roi__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .s10-roi__k{ font-size:12.5px; color:var(--c-ink-2); } .s10-roi__v{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--c-ink); font-variant-numeric:tabular-nums; letter-spacing:0; } .s10-roi--pop .s10-roi__v{ color:var(--green); } /* JS bar chart (data-bars) container — keep it tidy if engine fills it, else show a subtle baseline */ .s10-roi__bars{ display:flex; align-items:flex-end; gap:4px; height:30px; margin-top:11px; padding-top:11px; border-top:1px solid var(--c-line); } .s10-roi__bars > *{ flex:1 1 0; min-width:0; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--green),var(--green-deep)); opacity:.85; } .s10-roi--pop .s10-roi__bars > *{ background:linear-gradient(180deg,var(--green-bright),var(--green)); } /* ---------- real-tool deliverable badges ---------- */ .s10-deliver{ margin:0 0 20px; padding-top:16px; border-top:1px solid var(--c-line); } .s10-deliver__lab{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px; } .s10-deliver__row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; } /* white chip so real brand-colour logos stay legible on the dark panel */ .s10-deliver__chip{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 16px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.04); opacity:0; transform:translateY(8px); transition:transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } /* fade-up stagger once the parent tier reveals (engine adds .is-revealed to the tier) */ .s10-tier.is-revealed .s10-deliver__chip{ opacity:1; transform:none; } /* no-JS safety: never leave badges hidden if the reveal engine never runs */ html:not(.js) .s10-deliver__chip{ opacity:1; transform:none; } .s10-tier.is-revealed .s10-deliver__chip:nth-child(1){ transition-delay:.05s; } .s10-tier.is-revealed .s10-deliver__chip:nth-child(2){ transition-delay:.11s; } .s10-tier.is-revealed .s10-deliver__chip:nth-child(3){ transition-delay:.17s; } .s10-tier.is-revealed .s10-deliver__chip:nth-child(4){ transition-delay:.23s; } .s10-tier.is-revealed .s10-deliver__chip:nth-child(5){ transition-delay:.29s; } .s10-tier.is-revealed .s10-deliver__chip:nth-child(6){ transition-delay:.35s; } @media (hover:hover){ .s10-deliver__chip:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(0,0,0,.85), 0 0 16px -6px var(--green-glow); } } .s10-deliver__chip img{ display:block; width:18px; height:18px; max-width:100%; object-fit:contain; } .s10-deliver__chip.is-noimg{ display:none; } .s10-tier--pop .s10-deliver__chip{ border-color:rgba(39,245,140,.28); } /* feature list */ .s10-tier__list{ display:flex; flex-direction:column; gap:11px; margin-bottom:22px; flex:1; } .s10-tier__list li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.4; color:var(--c-ink-2); } .s10-tier__list li::before{ content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; background:rgba(39,245,140,.1); border:1px solid var(--c-line-green); } .s10-tier__list li::after{ content:""; position:absolute; left:5.5px; top:6px; width:6px; height:3px; border-left:1.5px solid var(--green); border-bottom:1.5px solid var(--green); transform:rotate(-45deg); } .s10-tier__cta{ width:100%; justify-content:center; } /* popular tier — sits gently elevated above its neighbours (3D depth). NOTE: the reveal engine forces `transform:none!important` on revealed [data-reveal] elements, so the lift uses margin (layout) + a breathing halo pseudo-element, never a transform on the tier itself. */ .s10-tier--pop{ border-color:transparent; background:linear-gradient(180deg,#0e1a15,#0a130f); z-index:2; margin-top:-12px; margin-bottom:-12px; } .s10-tier--pop::before{ content:""; position:absolute; inset:-1px; border-radius:var(--r-lg); padding:1px; background:linear-gradient(135deg,var(--green),#0a8a4f,var(--green-bright),var(--green-deep)); background-size:300% 300%; animation:s10Border 6s ease infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } @keyframes s10Border{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } } /* soft halo glow behind the popular tier — gentle breathing emphasis (opacity only) */ .s10-tier--pop::after{ content:""; position:absolute; inset:-18px; z-index:-1; border-radius:calc(var(--r-lg) + 12px); background:radial-gradient(60% 50% at 50% 35%,var(--green-glow),transparent 70%); opacity:.4; animation:s10Halo 4.4s var(--ease-out) infinite; pointer-events:none; } @keyframes s10Halo{ 0%,100%{ opacity:.32 } 50%{ opacity:.6 } } .s10-tier--pop{ box-shadow:0 44px 96px -50px rgba(0,0,0,.92),0 0 64px -28px var(--green-glow); } /* hover deepens shadow/halo (transform-free — the reveal engine clears transform on revealed cards) */ @media (hover:hover){ .s10-tier--pop:hover{ box-shadow:0 54px 110px -50px rgba(0,0,0,.92),0 0 84px -24px var(--green-glow); } .s10-tier--pop:hover::after{ opacity:.7; } } .s10-tier__pop{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:5px 14px; border-radius:var(--r-pill); background:var(--green); color:#04140C; box-shadow:0 8px 24px -8px var(--green-glow); white-space:nowrap; z-index:2; } .s10-tier__pop .seo-ic{ color:#04140C; } .s10-tier--pop .s10-tier__no{ color:var(--green); opacity:1; } .s10-tier--pop .seo-ic-box{ background:radial-gradient(120% 120% at 30% 20%,rgba(39,245,140,.28),rgba(39,245,140,.06)); } /* ---------- domination banner ---------- */ .s10-banner{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:clamp(22px,3vw,34px); border-radius:var(--r-lg); background:radial-gradient(120% 160% at 100% 0%,rgba(39,245,140,.14),transparent 56%),linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line-green); } .s10-banner__copy{ min-width:0; flex:1 1 320px; } .s10-banner__lab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); } .s10-banner__t{ font-size:15px; line-height:1.5; color:var(--c-ink-2); max-width:600px; margin-top:10px; } .s10-banner__stat{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .s10-banner__big{ font-family:var(--font-display); font-weight:700; font-size:clamp(48px,7vw,80px); line-height:1; color:var(--green); font-variant-numeric:tabular-nums; text-shadow:0 0 50px var(--green-glow); } .s10-banner__cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-3); } /* ---------- comparison table ---------- */ .s10-compare{ margin-top:18px; border-radius:var(--r-lg); border:1px solid var(--c-line); background:var(--c-panel); overflow:hidden; } .s10-compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .s10-table{ width:100%; border-collapse:collapse; min-width:680px; } .s10-table th,.s10-table td{ padding:14px 18px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--c-line); } .s10-table thead .s10-th{ background:rgba(255,255,255,.02); vertical-align:bottom; } .s10-th__eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); } .s10-th__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.02em; color:var(--c-ink-2); } .s10-th__flag{ display:inline-block; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.02em; color:#04140C; background:var(--green); padding:5px 12px; border-radius:var(--r-pill); box-shadow:0 8px 24px -10px var(--green-glow); } .s10-table thead th.is-pop{ background:rgba(39,245,140,.06); } .s10-table tbody td{ color:var(--c-ink-2); text-align:center; font-variant-numeric:tabular-nums; } .s10-table tbody td:first-child{ color:var(--c-ink); font-weight:500; text-align:left; } .s10-table tbody td b{ color:var(--c-ink); font-weight:700; } .s10-table td.is-pop{ background:rgba(39,245,140,.05); } .s10-table td.is-pop b{ color:var(--green); } .s10-table tbody tr:last-child td{ border-bottom:0; } /* emerald check + muted dash glyphs */ .s10-ck{ display:inline-block; width:20px; height:20px; border-radius:50%; position:relative; background:rgba(39,245,140,.12); border:1px solid var(--c-line-green); vertical-align:middle; } .s10-ck::after{ content:""; position:absolute; left:6.5px; top:5px; width:5px; height:9px; border-right:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(42deg); } .s10-yes.is-pop .s10-ck{ background:rgba(39,245,140,.2); box-shadow:0 0 16px -6px var(--green-glow); } .s10-dash{ display:inline-block; width:14px; height:2px; border-radius:2px; background:var(--c-ink-3); opacity:.6; vertical-align:middle; } /* ---------- process ---------- */ .s10-process{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; } .s10-step{ padding:24px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s10-step:hover{ border-color:var(--c-line-green); transform:translateY(-3px); } } .s10-step__no{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; font-family:var(--font-mono); font-size:13px; color:var(--green); background:var(--c-panel-2); border:1px solid var(--c-line-green); margin-bottom:14px; } .s10-step__t{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:20px; color:var(--c-ink); margin-bottom:8px; } .s10-step__d{ font-size:13.5px; line-height:1.5; color:var(--c-ink-2); } .s10-step__link{ width:40px; height:2px; border-radius:2px; background:repeating-linear-gradient(90deg,var(--green) 0 7px,transparent 7px 14px); opacity:.4; } /* ---------- responsive ---------- */ @media (max-width:920px){ .s10-stage{ margin-top:clamp(20px,3vw,34px); padding-top:0; } .s10-curve, .s10-trajectory, .s10-waypoints{ display:none; } /* decorative chrome — hide on stacked mobile to avoid stray glow/labels */ .s10-tiers{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } .s10-tier--pop{ order:-1; margin-top:0; margin-bottom:0; } /* no elevation when stacked */ .s10-tier--pop::after{ inset:-10px; } .s10-process{ grid-template-columns:1fr; } .s10-step__link{ width:2px; height:24px; justify-self:center; background:repeating-linear-gradient(180deg,var(--green) 0 7px,transparent 7px 14px); } } @media (max-width:520px){ .s10-banner{ flex-direction:column; align-items:flex-start; } .s10-banner__stat{ align-items:flex-start; } } @media (prefers-reduced-motion:reduce){ .s10-tier--pop::before, .s10-tier--pop::after, .s10-curve__node--mid{ animation:none; } .s10-tier--pop::after{ opacity:.4; } /* show added detail immediately, no transform/fade choreography */ .s10 .s10-curve__line.seo-draw{ transition:none; } .s10-curve__pulse{ display:none; } .s10-curve__pulse-anim{ display:none; } .s10-waypoint, .s10-deliver__chip{ transition:none !important; transform:none !important; opacity:1 !important; } } /* ===================================================================== SECTION 11 — BUILD YOUR SEARCH EMPIRE (dark / cinema · finale + CTA) A quiet, premium finale: a clean grid of LABELLED KPI cards (every metric is an asset you own), real platform + client proof, a scroll-scrubbed statement, premium CTA cards + benefits row. Scope: .s11 (s11- prefix) ===================================================================== */ .s11{ position:relative; overflow:clip; text-align:center; padding-top:clamp(64px,8vw,120px); padding-bottom:clamp(70px,8vw,120px); } /* ===================================================================== ATMOSPHERE — quiet gradient + subtle stars + one soft aurora glow ===================================================================== */ .s11-sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .s11-sky__grad{ position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 118%, rgba(39,245,140,.16), transparent 55%), linear-gradient(180deg, #04080a 0%, #061310 46%, #04100c 78%, #04080a 100%); } .s11-sky__stars{ position:absolute; inset:0 0 45% 0; background-image: radial-gradient(1px 1px at 12% 22%, rgba(189,255,224,.7), transparent), radial-gradient(1px 1px at 34% 12%, rgba(189,255,224,.5), transparent), radial-gradient(1px 1px at 58% 28%, rgba(189,255,224,.6), transparent), radial-gradient(1px 1px at 73% 16%, rgba(189,255,224,.4), transparent), radial-gradient(1px 1px at 88% 24%, rgba(189,255,224,.5), transparent), radial-gradient(1px 1px at 22% 8%, rgba(189,255,224,.45), transparent), radial-gradient(1px 1px at 47% 6%, rgba(189,255,224,.35), transparent); opacity:.55; } .s11-sky__glow{ position:absolute; bottom:-8%; left:50%; transform:translateX(-50%); width:90%; height:52%; background:radial-gradient(ellipse at center bottom, rgba(39,245,140,.18), transparent 70%); filter:blur(54px); } /* ===================================================================== CONTENT ===================================================================== */ .s11-content{ position:relative; z-index:2; text-align:center; } .s11 .seo-eyebrow{ justify-content:center; } .s11-title{ margin:0 auto 20px; } .s11-lead{ max-width:660px; margin:0 auto clamp(34px,4vw,52px); } /* ===================================================================== KPI GRID — every metric is an asset you own (clean card band) ===================================================================== */ .s11-empire{ position:relative; z-index:1; max-width:1120px; margin:0 auto clamp(46px,6vw,80px); padding:0 4px; } .s11-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,18px); } .s11-empire__cap{ margin:clamp(18px,2.4vw,28px) auto 0; max-width:560px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--c-ink-3,#9fb3aa); text-align:center; } .s11-kpi{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:flex-start; gap:7px; min-width:0; padding:22px 16px 18px; border-radius:16px; background:linear-gradient(180deg, rgba(15,28,23,.92), rgba(8,16,13,.95)); border:1px solid var(--c-line,rgba(255,255,255,.1)); box-shadow:0 18px 44px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); transition:transform var(--dur-ui,.3s) var(--ease-out,ease), border-color var(--dur-ui,.3s) ease, box-shadow var(--dur-ui,.3s) ease; } .s11-kpi--acc{ border-top:2px solid var(--acc,var(--green)); } @media (hover:hover){ .s11-kpi:hover{ transform:translateY(-4px); border-color:var(--c-line-green,rgba(39,245,140,.34)); box-shadow:0 26px 54px -26px rgba(0,0,0,.85), 0 0 40px -22px var(--green-glow,rgba(39,245,140,.55)); } } /* inner bits (shared across cards) */ .s11-card__ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; margin-bottom:2px; background:color-mix(in srgb, var(--acc,var(--green)) 16%, transparent); color:var(--acc,var(--green)); } .s11-card__ic .seo-ic{ color:var(--acc,var(--green)); } .s11-card__lab{ font-family:var(--font-mono); font-size:11px; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3,#9fb3aa); } .s11-card__v{ font-family:var(--font-display); font-weight:700; line-height:1; font-size:clamp(28px,3.1vw,40px); color:var(--c-ink,#f5fbf7); font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; gap:1px; } .s11-card__v i{ font-style:normal; font-size:.56em; color:var(--green); margin-left:1px; } .s11-card__d{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--c-ink-2,#cfe0d7); margin-top:auto; padding-top:4px; } .s11-up{ color:var(--green); display:inline-flex; align-items:center; gap:4px; } .s11-up::before{ content:""; width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent; border-bottom:5px solid currentColor; } /* inner viz */ .s11-spark{ display:flex; align-items:flex-end; gap:2px; width:68%; height:18px; margin:1px 0; } .s11-stars{ color:var(--g-yellow,#FBBC05); font-size:14px; letter-spacing:1.5px; line-height:1; } .s11-ring{ position:relative; width:38px; height:38px; border-radius:50%; margin:1px 0; background:conic-gradient(var(--gsc-2,#AA66CC) var(--p,90%), rgba(255,255,255,.12) 0); } .s11-ring::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:linear-gradient(180deg, rgba(15,28,23,.96), rgba(8,16,13,.98)); } .s11-ring b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:#fff; z-index:1; } .s11-card__pin{ display:inline-flex; margin:1px 0; } .s11-card__pin .seo-mappin{ width:20px; height:25px; } .s11-card__pin .seo-mappin > span{ font-size:10px; top:1px; } .s11-card__chips, .s11-card__plats{ display:inline-flex; gap:7px; align-items:center; margin:1px 0; color:var(--c-ink-2); } .s11-card__chips .seo-ic{ opacity:.85; } /* hero card — brighter, accent glow, gradient value */ .s11-kpi--hero{ border:1px solid var(--green); border-top:2px solid var(--green); background:linear-gradient(180deg, rgba(18,40,30,.95), rgba(8,18,14,.96)); box-shadow:0 22px 56px -26px rgba(0,0,0,.85), 0 0 52px -20px var(--green-glow,rgba(39,245,140,.6)), inset 0 1px 0 rgba(255,255,255,.06); } .s11-card__crownbadge{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; margin-bottom:2px; background:color-mix(in srgb, var(--green) 18%, transparent); color:var(--green); } .s11-card__crownbadge svg{ width:23px; height:23px; } .s11-kpi--hero .s11-card__v{ font-size:clamp(30px,3.5vw,44px); background:linear-gradient(180deg,#eafff5,var(--green-bright,#5dffb0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .s11-kpi--hero .s11-card__v i{ -webkit-text-fill-color:var(--green); } .s11-card__plats{ margin-top:4px; padding-top:8px; width:100%; justify-content:center; border-top:1px solid var(--c-line,rgba(255,255,255,.08)); } /* ===================================================================== REAL PROOF — platform logo cloud (white chips) + live screenshot ===================================================================== */ .s11-proof{ position:relative; z-index:2; display:block; max-width:760px; margin:0 auto clamp(34px,4vw,52px); text-align:center; } .s11-proof__plats{ min-width:0; } .s11-proof__cap{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3,#9fb3aa); margin-bottom:10px; } .s11-proof__sub{ margin:0 auto 18px; max-width:540px; font-size:14px; line-height:1.5; color:var(--c-ink-2,#cfe0d7); } /* logo cloud — each brand logo on a WHITE rounded chip (dark-section contrast) */ .s11-logocloud{ display:flex; flex-wrap:wrap; gap:10px; min-width:0; justify-content:center; max-width:none; } .s11-chip{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; padding:11px; border-radius:13px; background:#fff; box-shadow:0 10px 26px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.5); transition:transform var(--dur-ui,.3s) var(--ease-out,ease), box-shadow var(--dur-ui,.3s) ease; } .s11-chip img{ width:100%; height:100%; max-width:100%; object-fit:contain; display:block; } .s11-chip.is-noimg{ display:none; } @media (hover:hover){ .s11-chip:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px var(--green-glow,rgba(39,245,140,.5)), inset 0 0 0 1px rgba(255,255,255,.6); } } /* ===================================================================== REAL CLIENT TRUST STRIP — actual client logos ===================================================================== */ .s11-trust{ position:relative; z-index:2; max-width:1040px; margin:0 auto clamp(40px,5vw,60px); } .s11-trust__cap{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3,#9fb3aa); margin-bottom:16px; } .s11-trust__strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; min-width:0; } .s11-clogo{ display:inline-flex; align-items:center; justify-content:center; height:52px; min-width:86px; padding:8px 13px; border-radius:12px; background:#fff; box-shadow:0 10px 26px -16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.45); transition:transform var(--dur-ui,.3s) var(--ease-out,ease), box-shadow var(--dur-ui,.3s) ease; } .s11-clogo img{ max-width:100%; max-height:36px; width:auto; height:auto; object-fit:contain; display:block; } .s11-clogo.is-noimg{ display:none; } @media (hover:hover){ .s11-clogo:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px var(--green-glow,rgba(39,245,140,.45)), inset 0 0 0 1px rgba(255,255,255,.55); } } @media (max-width:480px){ .s11-chip{ width:48px; height:48px; padding:9px; border-radius:11px; } .s11-clogo{ height:48px; min-width:80px; padding:8px 13px; } .s11-clogo img{ max-height:30px; } } /* ===================================================================== SCRUBBED STATEMENT + future line ===================================================================== */ /* premium mono kicker above the closing statement */ .s11-statement__kick{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--green); } .s11-statement__kick i{ display:block; width:clamp(22px,5vw,42px); height:1px; background:linear-gradient(90deg, transparent, var(--green)); } .s11-statement__kick i:last-child{ background:linear-gradient(90deg, var(--green), transparent); } .s11-statement{ position:relative; z-index:2; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(30px,5.6vw,68px); line-height:.96; letter-spacing:0; text-wrap:balance; color:var(--c-ink,#f5fbf7); margin:0 auto 16px; } .s11-statement span{ background:linear-gradient(110deg, var(--green-bright,#5dffb0) 0%, var(--green,#27F58C) 45%, #eafff5 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--green); } .s11-future{ position:relative; z-index:2; font-family:var(--font-mono); font-size:clamp(13px,1.6vw,16px); letter-spacing:.04em; color:var(--c-ink-2,#cfe0d7); margin-bottom:clamp(34px,4vw,48px); } /* ===================================================================== PREMIUM CTA CARDS ===================================================================== */ .s11-ctas{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:clamp(40px,5vw,60px); } .s11-cta{ position:relative; min-width:0; flex:0 1 300px; display:flex; align-items:center; gap:13px; text-align:left; padding:15px 18px; border-radius:var(--r,14px); text-decoration:none; transition:transform var(--dur-ui,.25s) var(--ease-out,ease), box-shadow var(--dur-ui,.25s) ease, border-color var(--dur-ui,.25s) ease; } .s11-cta__ic{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; } .s11-cta__ic svg{ width:21px; height:21px; } .s11-cta__txt{ min-width:0; display:flex; flex-direction:column; gap:3px; line-height:1.12; } .s11-cta__txt b{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; } .s11-cta__txt small{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; opacity:.82; } .s11-cta__arrow{ flex:none; margin-left:auto; transition:transform var(--dur-ui,.25s) var(--ease-out,ease); } /* tactile press (Emil) — transform-only, instant feedback */ .s11-cta:active{ transform:scale(.97); transition-duration:.1s; } /* primary — solid emerald, with a restrained one-shot sheen on reveal */ .s11-cta--primary{ position:relative; overflow:hidden; background:var(--green); color:#04140c; box-shadow:0 12px 38px -10px var(--green-glow,rgba(39,245,140,.7)), inset 0 0 0 1px rgba(255,255,255,.14); } .s11-cta--primary::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform:translateX(-120%); } .s11-ctas.is-revealed .s11-cta--primary::after{ animation:s11Sheen 1.1s var(--ease-out,cubic-bezier(.16,1,.3,1)) .25s 1; } @keyframes s11Sheen{ to{ transform:translateX(120%); } } .s11-cta--primary .s11-cta__ic{ background:rgba(4,20,12,.16); color:#04140c; } .s11-cta--primary .s11-cta__txt small{ color:#0a3a24; opacity:.9; } /* accent — glassy emerald outline */ .s11-cta--accent{ background:linear-gradient(180deg, rgba(13,28,22,.9), rgba(8,18,14,.92)); color:var(--c-ink,#f5fbf7); box-shadow:inset 0 0 0 1px var(--c-line-green,rgba(39,245,140,.34)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .s11-cta--accent .s11-cta__ic{ background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); } .s11-cta--accent .s11-cta__txt small{ color:var(--c-ink-2,#cfe0d7); } /* ghost — quiet outline */ .s11-cta--ghost{ background:transparent; color:var(--c-ink,#f5fbf7); box-shadow:inset 0 0 0 1px var(--c-line,rgba(255,255,255,.16)); } .s11-cta--ghost .s11-cta__ic{ background:rgba(255,255,255,.05); color:var(--c-ink-2,#cfe0d7); } .s11-cta--ghost .s11-cta__txt small{ color:var(--c-ink-3,#9fb3aa); } @media (hover:hover){ .s11-cta:hover{ transform:translateY(-3px); } .s11-cta:hover .s11-cta__arrow{ transform:translateX(3px); } .s11-cta--primary:hover{ background:var(--green-bright,#5dffb0); box-shadow:0 16px 48px -10px var(--green-glow,rgba(39,245,140,.8)), inset 0 0 0 1px rgba(255,255,255,.18); } .s11-cta--accent:hover{ box-shadow:inset 0 0 0 1px var(--green); } .s11-cta--ghost:hover{ box-shadow:inset 0 0 0 1px var(--c-line-green,rgba(39,245,140,.4)); color:var(--green); } } .s11-cta:focus-visible{ outline:2px solid var(--green); outline-offset:3px; } /* ===================================================================== BENEFITS ROW ===================================================================== */ .s11-benefits{ position:relative; z-index:2; list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; max-width:960px; margin:0 auto; } .s11-benefits li{ display:inline-flex; align-items:center; gap:10px; padding:9px 15px; border-radius:var(--r-pill,99px); background:linear-gradient(180deg, rgba(13,26,21,.6), rgba(8,15,12,.6)); border:1px solid var(--c-line,rgba(255,255,255,.08)); min-width:0; } .s11-benefits svg{ flex:none; width:18px; height:18px; color:var(--green); } .s11-benefits b{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--c-ink,#f5fbf7); letter-spacing:.01em; } .s11-benefits small{ font-family:var(--font-mono); font-size:10px; letter-spacing:.02em; color:var(--c-ink-3,#9fb3aa); } /* ===================================================================== RESPONSIVE — KPI grid reflow ===================================================================== */ @media (max-width:980px){ /* stack CTAs full-width across the tablet band (no 2+1 orphan row) */ .s11-cta{ flex:1 1 100%; } } @media (max-width:760px){ .s11-grid{ grid-template-columns:repeat(2,1fr); } .s11-kpi--hero{ grid-column:span 2; } } @media (max-width:640px){ .s11-card__v{ font-size:26px; } .s11-benefits li small{ display:none; } } @media (max-width:420px){ .s11-grid{ grid-template-columns:1fr; } .s11-kpi--hero{ grid-column:span 1; } } @media (prefers-reduced-motion:reduce){ .s11-cta--primary::after{ display:none; animation:none; } } /* ===================================================================== SECTION 01 — CINEMATIC VIDEO HERO Full-viewport background video (100vw x 100svh) + ONE headline that appears instantly, holds ~1s, then fades up & out. Zero layout shift, GPU-composited, NO blur, minimal scrim (only what nav/headline need). Overrides the legacy two-up hero rules by higher specificity + order. ===================================================================== */ .seo-videohero{ position:relative; padding:0; width:100%; height:100svh; min-height:100svh; /* svh dodges the mobile URL-bar jump */ overflow:hidden; isolation:isolate; display:grid; place-items:center; background:#000; /* base tone while the video streams in */ } @supports not (height:100svh){ .seo-videohero{ height:100vh; min-height:100vh; } } /* beat the base-hero header padding + 100vh min-height (this hero owns the frame) */ .seo-page > .seo-sec.seo-hero.seo-videohero{ padding-top:0; min-height:100svh; } /* --- the video: cover the whole frame, subject centred, MAX quality (no filter) --- */ .seo-vhero__vid{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center center; transform:translateZ(0); backface-visibility:hidden; /* hardware compositing */ pointer-events:none; user-select:none; background:#000; } /* --- minimal scrim: ONLY top (nav legibility) + a soft bottom blend into the page --- */ .seo-vhero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(3,6,5,.40) 0%, rgba(3,6,5,.12) 10%, transparent 20%), linear-gradient(0deg, var(--void,#050505) 0%, rgba(5,5,5,0) 18%); } /* --- headline: centred, appears instantly, holds ~1s, then fades UP & OUT --- */ .seo-vhero__stage{ position:relative; z-index:2; padding:0 var(--gutter); text-align:center; pointer-events:none; /* never blocks the video */ transform:translateY(-2vh); /* optically centre above the fold */ } .seo-vhero__title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(30px,6vw,84px); line-height:1.03; letter-spacing:.01em; text-transform:uppercase; color:#fff; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.42), 0 1px 8px rgba(0,0,0,.32); will-change:transform,opacity; transform:translateZ(0); animation:seoHeroTitle 2.6s cubic-bezier(.16,1,.3,1) both; } @keyframes seoHeroTitle{ 0% { opacity:0; transform:translate3d(0,18px,0); } 12% { opacity:1; transform:translate3d(0,0,0); } /* ~0.31s: fully in */ 46% { opacity:1; transform:translate3d(0,0,0); } /* ~1.2s: hold */ 100% { opacity:0; transform:translate3d(0,-30px,0); } /* ~2.6s: gone */ } /* --- scroll cue: subtle, premium; appears after the headline, gently bobs --- */ .seo-vhero__cue{ position:absolute; left:50%; bottom:clamp(18px,3.2vh,38px); z-index:2; transform:translateX(-50%); width:26px; height:42px; border-radius:14px; border:1.5px solid rgba(255,255,255,.55); display:grid; justify-items:center; align-content:start; padding-top:8px; opacity:0; animation:seoCueIn .7s ease 1.5s forwards; transition:opacity var(--dur-ui) ease; } .seo-vhero__cue:hover{ border-color:rgba(255,255,255,.9); } .seo-vhero__cuedot{ width:3px; height:8px; border-radius:2px; background:#fff; animation:seoCueDot 1.9s var(--ease-out) infinite; } @keyframes seoCueIn{ to{ opacity:.82 } } @keyframes seoCueDot{ 0%{ transform:translateY(0); opacity:0 } 22%{ opacity:1 } 70%{ transform:translateY(12px); opacity:0 } 100%{ opacity:0 } } /* --- proof band (relocated marquee + stats): no double gap; seamless seam --- */ .seo-proofband .s1-trust{ margin-top:0; } .seo-videohero + .seo-sec{ border-top:0; } /* --- reduced motion: keep the sole H1 visible. The global *{animation-duration:.001ms!important} clobber would otherwise snap any keyframe to its opacity:0 end frame and hide the headline entirely, so we pin opacity:1 with animation:none instead of animating. --- */ @media (prefers-reduced-motion:reduce){ .seo-vhero__title{ animation:none!important; opacity:1; } .seo-vhero__cue{ animation:none; opacity:.7; } .seo-vhero__cuedot{ animation:none; } } /* --- tablet / phone tuning --- */ @media (max-width:768px){ .seo-vhero__title{ font-size:clamp(28px,8.4vw,54px); letter-spacing:.005em; } .seo-vhero__scrim{ background: linear-gradient(180deg, rgba(3,6,5,.48) 0%, rgba(3,6,5,.14) 12%, transparent 24%), linear-gradient(0deg, var(--void,#050505) 0%, rgba(5,5,5,0) 20%); } } @media (max-width:480px){ .seo-vhero__stage{ transform:translateY(-1vh); } } /* ===================================================================== IN-PAGE CINEMATIC VIDEO SECTION (.seo-vsec) Full-width, ~full-viewport background video + ONE headline that appears when the section scrolls into view, holds ~1s, then fades up & out — then the video is clean. Lazy-loaded + data-aware via seo.js. Kept generic so it can wrap ANY section (currently Section 06 — AI SEO Control Tower). ===================================================================== */ .seo-vsec{ position:relative; padding:0; width:100%; min-height:100svh; height:100svh; /* svh dodges the mobile URL-bar jump */ overflow:hidden; isolation:isolate; display:grid; place-items:center; background:#000; } @supports not (height:100svh){ .seo-vsec{ height:100vh; min-height:100vh; } } /* seamless cinematic seams with the neighbouring sections (entrance + exit) */ .seo-sec.seo-vsec{ border-top:0; } .seo-vsec + .seo-sec{ border-top:0; } /* the video: cover the whole section, subject centred, MAX quality (no filter) */ .seo-vsec__vid{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center center; transform:translateZ(0); backface-visibility:hidden; /* hardware compositing */ pointer-events:none; user-select:none; background:#000; } /* headline-backing scrim: darkens ONLY behind the words, and ONLY while the headline is showing — the rest of the video stays at full brightness. */ .seo-vsec__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:radial-gradient(62% 48% at 50% 46%, rgba(3,6,5,.42), transparent 72%); } .seo-vsec.is-inview .seo-vsec__scrim{ animation:seoVsecScrim 2.6s ease both; } @keyframes seoVsecScrim{ 0%{opacity:0} 10%{opacity:1} 42%{opacity:1} 100%{opacity:0} } /* headline: centred, appears on scroll-in (JS adds .is-inview), holds ~1s, then fades UP & OUT — leaving the video unobstructed. */ .seo-vsec__stage{ position:relative; z-index:2; padding:0 var(--gutter); text-align:center; pointer-events:none; } .seo-vsec__title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(28px,5.6vw,80px); line-height:1.03; letter-spacing:.01em; text-transform:uppercase; color:#fff; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.42), 0 1px 8px rgba(0,0,0,.34); opacity:0; /* hidden until the section enters view */ will-change:transform,opacity; transform:translateZ(0); } .seo-vsec.is-inview .seo-vsec__title{ animation:seoVsecTitle 2.6s cubic-bezier(.16,1,.3,1) both; } @keyframes seoVsecTitle{ 0%{ opacity:0; transform:translate3d(0,18px,0) } 12%{ opacity:1; transform:translate3d(0,0,0) } /* ~0.31s: fully in */ 44%{ opacity:1; transform:translate3d(0,0,0) } /* ~1.15s: hold */ 100%{ opacity:0; transform:translate3d(0,-30px,0) } /* ~2.6s: gone */ } /* reduced motion: keep the section heading statically visible (opacity only). The global *{animation-duration:.001ms!important} clobber forces any keyframe to its end frame, so we pin opacity:1 rather than animate to opacity:0. */ @media (prefers-reduced-motion:reduce){ .seo-vsec__title{ animation:none!important; opacity:1; } .seo-vsec__scrim{ animation:none!important; opacity:1; } } @media (max-width:768px){ .seo-vsec__title{ font-size:clamp(26px,7.8vw,52px); } } /* ===================================================================== SECTION-END CTA (jumps to the #seo-final lead form) ===================================================================== */ .s-cta{ display:flex; justify-content:center; margin-top:clamp(38px,5vw,64px); } .s-cta .seo-btn{ text-align:center; } /* ===================================================================== SECTION 11 — CONTACT / LEAD FORM over a video background Video stays bright; the form has its OWN dark-glass card for legibility. ===================================================================== */ .seo-formsec{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(104px,13vw,160px) 0; min-height:100svh; display:flex; align-items:center; background:#000; } .seo-sec.seo-formsec{ border-top:0; } .seo-formsec__vid{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center center; transform:translateZ(0); backface-visibility:hidden; pointer-events:none; user-select:none; background:#000; } /* soft scrim: legibility for the left copy + clean top/bottom section seams */ .seo-formsec__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(4,7,6,.74) 0%, rgba(4,7,6,.44) 44%, rgba(4,7,6,.18) 100%), linear-gradient(0deg, var(--void,#050505) 0%, rgba(5,5,5,0) 15%, rgba(5,5,5,0) 86%, rgba(5,5,5,.5) 100%); } .seo-formsec__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; } .seo-formsec__copy{ min-width:0; } .seo-formsec__title{ margin:14px 0 14px; font-size:clamp(30px,3.6vw,52px); line-height:1.02; } .seo-formsec__copy .seo-sub{ max-width:52ch; } .seo-formsec__points{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; } .seo-formsec__points li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--void-ink-2); } .seo-formsec__points svg{ flex:none; color:var(--green); } /* form card */ .seo-form{ position:relative; min-width:0; background:linear-gradient(180deg, rgba(10,17,14,.88), rgba(7,12,10,.92)); border:1px solid var(--void-line-green); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,32px); box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03); backdrop-filter:blur(8px); } .seo-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .seo-field{ display:flex; flex-direction:column; gap:7px; min-width:0; } .seo-field--full{ margin-top:14px; } .seo-field__l{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--void-ink-3); } .seo-field__i{ width:100%; font-family:var(--font-body); font-size:15px; color:var(--void-ink); background:rgba(255,255,255,.04); border:1px solid var(--void-line); border-radius:12px; padding:12px 14px; transition:border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, background var(--dur-ui) ease; } .seo-field__i::placeholder{ color:var(--void-ink-3); opacity:.75; } .seo-field__i:focus{ outline:none; border-color:var(--green); background:rgba(39,245,140,.05); box-shadow:0 0 0 3px rgba(39,245,140,.14); } .seo-field__i:user-invalid{ border-color:rgba(255,139,128,.6); } textarea.seo-field__i{ resize:vertical; min-height:82px; } .seo-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .seo-form__submit{ width:100%; justify-content:center; margin-top:16px; } .seo-form__submit[disabled]{ opacity:.65; cursor:progress; } .seo-form__note{ margin:12px 0 0; font-size:12.5px; color:var(--void-ink-3); text-align:center; } .seo-form__status{ margin:12px 0 0; font-size:14px; text-align:center; display:none; } .seo-form__status.is-ok{ display:block; color:var(--green-bright); } .seo-form__status.is-err{ display:block; color:#ff8b80; } @media (max-width:960px){ .seo-formsec__inner{ grid-template-columns:1fr; gap:clamp(24px,5vw,40px); } .seo-formsec__copy{ max-width:640px; } .seo-formsec__scrim{ background: linear-gradient(180deg, rgba(4,7,6,.5) 0%, rgba(4,7,6,.34) 30%, rgba(4,7,6,.66) 100%); } } @media (max-width:560px){ .seo-form__grid{ grid-template-columns:1fr; } .seo-formsec{ min-height:auto; } } /* ===================================================================== SECTION 10 — SEO PACKAGES · Growth System (scannable SaaS pricing) Compact cards (price + rating + big metric tiles + channels + collapsed detail accordions + CTA) -> comparison table -> shared platform strip. Hover transforms use !important to beat the reveal system's inline transform. ===================================================================== */ .spk{ overflow:clip; } .spk .spk-head{ text-align:center; max-width:760px; margin:0 auto; } .spk-title{ font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:0; margin:14px 0 14px; text-transform:none; } .spk-lead{ margin:0 auto; max-width:600px; } /* grid */ .spk-grid{ margin-top:clamp(40px,4.4vw,64px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,24px); align-items:start; } /* card */ .spk-card{ position:relative; display:flex; flex-direction:column; isolation:isolate; padding:clamp(22px,1.9vw,30px); border-radius:24px; background:linear-gradient(180deg, rgba(16,22,20,.92), rgba(9,13,12,.95)); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 60px -34px rgba(0,0,0,.75); transition:transform .5s var(--ease-out), border-color .35s ease, box-shadow .5s ease; } .spk-card__glow{ position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; background:radial-gradient(120% 60% at 50% -8%, rgba(39,245,140,.16), transparent 68%); transition:opacity .5s ease; } @media (hover:hover){ .spk-card:hover{ transform:translateY(-8px) !important; border-color:rgba(39,245,140,.35); box-shadow:0 44px 96px -44px rgba(0,0,0,.85), 0 0 70px -34px var(--green-glow); } .spk-card:hover .spk-card__glow{ opacity:1; } } .spk-card--pop{ margin-top:-16px; border-color:rgba(39,245,140,.42); background:linear-gradient(180deg, rgba(18,30,25,.95), rgba(10,17,14,.96)); box-shadow:0 0 0 1px rgba(39,245,140,.2), 0 46px 110px -48px rgba(39,245,140,.42), 0 30px 70px -42px rgba(0,0,0,.82); } .spk-card--pop .spk-card__glow{ opacity:1; } .spk-card--pop::after{ content:""; position:absolute; inset:0 0 auto; height:3px; border-radius:24px 24px 0 0; background:linear-gradient(90deg, transparent, var(--green-bright), transparent); } @media (hover:hover){ .spk-card--pop:hover{ transform:translateY(-8px) !important; } } .spk-flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:4; padding:6px 16px; border-radius:999px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#04140c; background:linear-gradient(180deg,var(--green-bright),var(--green)); white-space:nowrap; box-shadow:0 10px 26px -8px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,.28); } /* head */ .spk-card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .spk-card__icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--green); flex:none; background:radial-gradient(circle at 50% 28%, rgba(39,245,140,.2), transparent 65%), rgba(255,255,255,.03); border:1px solid var(--void-line-green); } .spk-card__isvg{ width:23px; height:23px; } .spk-badge{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--void-ink-3); padding:5px 11px; border-radius:999px; border:1px solid var(--void-line); background:rgba(255,255,255,.03); } .spk-card__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(19px,1.4vw,22px); color:#fff; letter-spacing:0; line-height:1.15; margin:0 0 10px; } .spk-card__price{ display:flex; align-items:baseline; gap:7px; } .spk-card__amt{ font-family:var(--font-display); font-weight:700; font-size:clamp(36px,3.2vw,46px); letter-spacing:0; line-height:1; background:linear-gradient(180deg,#fff,#c8e8d8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff; } .spk-card__per{ font-size:14px; color:var(--void-ink-3); font-family:var(--font-mono); } .spk-rate{ display:flex; align-items:center; gap:9px; margin-top:12px; flex-wrap:wrap; } .spk-stars{ color:var(--green); font-size:14px; letter-spacing:2px; } .spk-bestfor{ font-size:13px; color:var(--void-ink-2); } /* metric tiles (big, comparable numbers) */ .spk-metrics{ margin:22px 0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .spk-metric{ text-align:center; padding:14px 6px; border-radius:14px; background:linear-gradient(180deg, rgba(39,245,140,.06), rgba(255,255,255,.015)); border:1px solid var(--void-line); } .spk-metric__n{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.6vw,36px); line-height:1; color:var(--green); font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(39,245,140,.35); } .spk-metric__l{ display:block; margin-top:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--void-ink-3); } /* accordion (progressive disclosure of the detail) */ .spk-acc-wrap{ border-top:1px solid var(--void-line); padding-top:18px; } .spk-acc-wrap__h{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--void-ink-3); margin:0 0 12px; } .spk-inherit{ display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:10px 12px; border-radius:11px; background:rgba(39,245,140,.07); border:1px solid var(--void-line-green); font-size:12.5px; color:var(--void-ink-2); } .spk-inherit b{ color:var(--green-bright); font-weight:600; } .spk-inherit .spk-ck{ width:15px; height:15px; margin-top:0; } .spk-acc{ border-bottom:1px solid var(--void-line); } .spk-acc__head{ width:100%; display:flex; align-items:center; gap:11px; padding:13px 2px; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--void-ink); transition:color .2s ease; } .spk-acc__head:hover{ color:var(--green-bright); } .spk-acc__head:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:8px; } .spk-acc__ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--green); flex:none; background:rgba(39,245,140,.08); border:1px solid var(--void-line-green); } .spk-acc__svg{ width:15px; height:15px; } .spk-acc__t{ flex:1 1 auto; min-width:0; } .spk-acc__n{ font-size:11px; color:var(--void-ink-3); font-weight:500; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--void-line); } .spk-acc__pm{ width:16px; height:16px; color:var(--void-ink-3); flex:none; transition:transform .35s var(--ease-out), color .2s ease; } .spk-acc.is-open .spk-acc__pm{ transform:rotate(45deg); color:var(--green); } .spk-acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease-out); } .spk-acc.is-open .spk-acc__panel{ grid-template-rows:1fr; } .spk-acc__inner{ overflow:hidden; min-height:0; } .spk-acc .spk-list{ padding:2px 0 15px 37px; } .spk-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } .spk-list li{ display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; color:var(--void-ink-2); } .spk-list li span{ min-width:0; } .spk-ck{ width:16px; height:16px; margin-top:1px; color:var(--green); flex:none; } /* CTA */ .spk-cta{ margin-top:22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px 22px; border-radius:14px; font-family:var(--font-mono); font-size:13.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.04); border:1px solid var(--void-line-green); transition:transform var(--dur-micro) var(--ease-snap), background .3s ease, color .3s ease, box-shadow .3s ease; } .spk-cta svg{ transition:transform var(--dur-ui) var(--ease-snap); } .spk-cta:active{ transform:scale(.98); } @media (hover:hover){ .spk-cta:hover{ background:var(--green); color:#04140c; border-color:transparent; box-shadow:0 14px 40px -12px var(--green-glow); } .spk-cta:hover svg{ transform:translateX(4px); } } .spk-cta--pop{ background:linear-gradient(180deg,var(--green-bright),var(--green)); color:#04140c; border-color:transparent; box-shadow:0 12px 34px -10px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,.2); } @media (hover:hover){ .spk-cta--pop:hover{ background:var(--green-bright); box-shadow:0 20px 54px -12px var(--green-glow); } } /* comparison table */ .spk-compare{ margin-top:clamp(44px,5vw,76px); } .spk-compare__h{ text-align:center; font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2vw,28px); color:#fff; margin:0 0 24px; letter-spacing:0; } .spk-compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; border:1px solid var(--void-line); background:linear-gradient(180deg, rgba(14,20,18,.6), rgba(9,13,12,.6)); } .spk-table{ width:100%; border-collapse:collapse; min-width:640px; } .spk-table th, .spk-table td{ padding:14px 18px; text-align:center; font-size:14px; border-bottom:1px solid var(--void-line); } .spk-table thead th{ position:sticky; top:0; background:rgba(11,16,14,.97); backdrop-filter:blur(6px); font-family:var(--font-display); font-weight:600; font-size:15px; color:#fff; z-index:2; } .spk-table__price{ display:block; margin-top:3px; font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--green); } .spk-table__feat{ text-align:left; } .spk-table tbody th{ text-align:left; font-family:var(--font-body); font-weight:500; font-size:13.5px; color:var(--void-ink-2); position:sticky; left:0; background:rgba(11,16,14,.97); z-index:1; } .spk-table tbody td{ color:var(--void-ink); font-variant-numeric:tabular-nums; } .spk-table .is-pop{ background:rgba(39,245,140,.06); color:#fff; } .spk-table thead .is-pop{ background:rgba(39,245,140,.13); color:var(--green-bright); } .spk-table tbody tr:last-child th, .spk-table tbody tr:last-child td{ border-bottom:0; } .spk-y{ display:inline-grid; place-items:center; } .spk-y .spk-ck{ width:17px; height:17px; } .spk-dash{ color:var(--void-ink-3); } /* platform strip */ .spk-stack{ margin-top:clamp(30px,3.4vw,48px); text-align:center; } .spk-stack__h{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--void-ink-3); margin-bottom:16px; } .spk-stack__logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:780px; margin:0 auto; } .spk-logo{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.05); border:1px solid var(--void-line); transition:transform .25s var(--ease-out), border-color .25s ease, background .25s ease; } .spk-logo img{ width:22px; height:22px; object-fit:contain; display:block; } @media (hover:hover){ .spk-logo:hover{ transform:translateY(-2px); border-color:var(--void-line-green); background:rgba(255,255,255,.08); } } /* responsive */ @media (max-width:1024px){ .spk-grid{ grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; gap:22px; } .spk-card--pop{ margin-top:0; } } @media (max-width:420px){ .spk-metric__n{ font-size:26px; } } /* ===================================================================== NEUE HAAS GROTESK — licensed font system. Display Pro (75 Bold / 95 Black) = hero, section & card titles, stats, big numbers. Text Pro (55 Roman / 75 Bold) = body, nav, buttons, forms, footer. JetBrains Mono = micro labels / badges / counters / chips only. Families flow through --font-display / --font-body / --font-mono. ===================================================================== */ @font-face{font-family:"Neue Haas Grotesk Display Pro";src:url(../assets/fonts/NeueHaasGroteskDisplayPro-75Bold.woff2) format("woff2"),url(../assets/fonts/NeueHaasGroteskDisplayPro-75Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Neue Haas Grotesk Display Pro";src:url(../assets/fonts/NeueHaasGroteskDisplayPro-95Black.woff2) format("woff2"),url(../assets/fonts/NeueHaasGroteskDisplayPro-95Black.woff) format("woff");font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:"Neue Haas Grotesk Text Pro";src:url(../assets/fonts/NeueHaasGroteskTextPro-55Roman.woff2) format("woff2"),url(../assets/fonts/NeueHaasGroteskTextPro-55Roman.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Neue Haas Grotesk Text Pro";src:url(../assets/fonts/NeueHaasGroteskTextPro-75Bold.woff2) format("woff2"),url(../assets/fonts/NeueHaasGroteskTextPro-75Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap} /* body / paragraphs / forms / footer -> Text Pro 55 Roman */ body{ font-family:var(--font-body); font-weight:400; } /* every heading -> Display Pro (weights set per element) */ h1,h2,h3,h4{ font-family:var(--font-display); } /* hero headline -> Display Pro 95 Black */ .seo-vhero__title,.seo-hero h1{ font-weight:900; } /* section & card display titles -> Display Pro 75 Bold */ .seo-title,.seo-vsec__title,.seo-formsec__title,.spk-title{ font-weight:700; } /* subtle display-title tracking (sharper — still wide, not condensed) */ .seo-title,.seo-vhero__title,.seo-vsec__title,.seo-formsec__title,.spk-title{ letter-spacing:0; } /* buttons + navigation -> Text Pro 75 Bold (was JetBrains Mono) */ .seo-btn,.seo-nav__pill a,.spk-cta,.seo-form__submit{ font-family:var(--font-body); font-weight:700; } /* footer copy -> Text Pro 55 Roman (was JetBrains Mono); package/card titles -> Display Pro 75 Bold */ .seo-foot,.seo-foot__inner p{ font-family:var(--font-body); } .seo-foot__inner p{ font-weight:400; } .spk-card__name{ font-weight:700; } /* ===================================================================== */ /* READABILITY PASS (text only) — Neue Haas Grotesk sets tighter than the previous */ /* faces, so the old leading/tracking crowded the big headings and made */ /* uppercase words run together. Open the leading, neutralise the negative */ /* tracking, and give body copy airier line-height so everything reads */ /* easily for a general / older audience. No layout/colour/size changes. */ /* ===================================================================== */ .seo-title,.seo-title--hero,.seo-title--final,.seo-vsec__title,.seo-formsec__title, .spk-title,.s9-why__h,.s9-subhead,.s9-board__t{ line-height:1.1 !important; letter-spacing:normal !important; } .seo-vhero__title{ line-height:1.06 !important; letter-spacing:normal !important; } /* airier, effortless body copy */ body{ line-height:1.65; } p,.seo-lead,.seo-sub,.spk-lead,.spk-bestfor,.spk-card__sub,.seo-foot__inner p, .s2-lead,.s3-factor__desc,.s4-cite__lead,.s9-pillar__d,.s9-case__quote{ line-height:1.7; letter-spacing:normal; } .spk-list li,.seo-serp__desc{ line-height:1.6; } /* ===================================================================== */ /* READABILITY PASS v2 — supersedes v1. Spacing/leading ONLY (no size, */ /* colour, weight, family or layout changes). Neue Haas Grotesk sets tight,*/ /* so we OPEN body via inherited letter+word spacing and hand POSITIVE */ /* tracking back to UPPERCASE display, tapered inversely to size. Mono */ /* micro-labels & tabular numbers keep their own spacing. */ /* ===================================================================== */ /* 1. ROOT LEVER — letter/word-spacing inherit, so this opens all copy */ body{ letter-spacing:.01em; word-spacing:.03em; line-height:1.65; } /* 2. Long-form copy — re-open (v1 had pinned these to letter-spacing:normal) */ p,.seo-lead,.seo-sub,.spk-lead,.spk-bestfor,.spk-card__sub,.seo-foot__inner p, .s2-lead,.s3-factor__desc,.s4-cite__lead,.s9-pillar__d,.s9-case__quote{ letter-spacing:.01em; word-spacing:.035em; line-height:1.7; } /* 3. Dense list / SERP copy */ .spk-list li,.seo-serp__desc{ letter-spacing:.01em; word-spacing:.03em; line-height:1.6; } /* 4. Mono micro-labels + buttons/nav — keep letter tracking; only cancel inherited word-spacing */ .seo-eyebrow,.seo-label,.seo-badge,.spk-badge,.spk-acc__t,.spk-metric__l, .seo-btn,.seo-nav__pill a,.spk-cta,.s2-node__rank{ word-spacing:normal; } /* 5. Display UPPERCASE — LG section titles: positive tracking + open leading */ .seo-title,.seo-vsec__title,.s9-why__h,.s9-subhead{ letter-spacing:.02em !important; word-spacing:.08em !important; line-height:1.1 !important; } /* 6a. Display UPPERCASE — XL hero/large tier (least tracking; scale separates) */ .seo-title--hero,.seo-title--final,.s1-title{ letter-spacing:.012em !important; word-spacing:.08em !important; line-height:1.08 !important; } /* 6b. Video hero headline (Display 95 Black) */ .seo-vhero__title{ letter-spacing:.01em !important; word-spacing:.08em !important; line-height:1.06 !important; } /* 6c. Closing statement */ .s11-statement{ letter-spacing:.012em !important; word-spacing:.08em !important; line-height:1.1 !important; } /* 7. Display UPPERCASE — small / mid caps labels (smallest caps need the most air) */ .seo-banner,.s4-cite__title,.s2-core__label,.s2-mcore__label,.s3-react__t, .s8-stage__name,.s10-tier__name{ letter-spacing:.03em !important; word-spacing:.06em !important; line-height:1.15 !important; } /* 8. Numbers + mixed-case display headings — hold at 0 (not positive) */ .s2-stat__n,.s2-node__rank,.s9-case__metrics strong,.s10-tier__kw,.s10-roi__v, .spk-card__amt,.s6-status strong,.spk-card__name,.spk-compare__h,.s9-case__name{ letter-spacing:0 !important; } /* 9. Tabular numerals so stat columns/rows align */ .s1-stat__n,.s2-stat__n,.s4-metric__n,.s9-stat__n,.spk-metric__n,.spk-card__amt, .s10-tier__kw,.s10-roi__v,.s9-case__metrics strong{ font-variant-numeric:tabular-nums; }