1import{a as S,b as r,A as i,i as z,n as C,r as u,t as P}from"./state-BdV2P0Pj.js";import{h as D,r as A,e as _,H as b,a as T,P as d,S as M,F as p}from"./main-Ddndrr0f.js";import{t as y}from"./analytics-BFLjitRs.js";import{l as E,a as H}from"./designSource-p45i4GXO.js";var L=Object.defineProperty,R=Object.getOwnPropertyDescriptor,m=(e,a,o,s)=>{for(var t=s>1?void 0:s?R(a,o):a,n=e.length-1,c;n>=0;n--)(c=e[n])&&(t=(s?c(a,o,t):c(t))||t);return s&&t&&L(a,o,t),t};const w="#d4a574",O=[15,23,42],F=[247,239,226],B={sapiens:{accentBase:[198,161,114],coolBase:[109,182,199],warmBase:[240,223,198],shellTop:[242,238,230],shellMid:[232,226,216],shellBottom:[246,242,235],vignette:[96,84,68],panel:"rgba(253, 252, 249, 0.86)",panelStrong:"rgba(248, 245, 239, 0.94)",panelSoft:"rgba(255, 253, 249, 0.72)",border:"rgba(201, 168, 76, 0.2)",textSoft:"rgba(92, 86, 79, 0.88)",textMuted:"rgba(76, 71, 64, 0.78)",textHeading:"rgb(26, 25, 23)",fontBody:"'Newsreader', Georgia, serif",fontDisplay:"'Cormorant Garamond', 'Iowan Old Style', serif",fontLabel:"'Space Mono', 'IBM Plex Mono', monospace",topbar:[242,238,230],topbarOverlayAlpha:.06,gridLineAlpha:.035,gridDotAlpha:.06,ctaPrimaryInk:"#20160f",ctaSecondaryInk:"#2d241d",displayScale:1.02,bodyScale:1,labelScale:.94,microScale:.92,buttonScale:.98,spaceScale:1.16,containerWidth:"1320px",heroCopyWidth:"860px",sectionCopyWidth:"66ch"},ai:{accentBase:[126,95,247],coolBase:[88,202,255],warmBase:[207,202,255],shellTop:[7,11,22],shellMid:[12,21,40],shellBottom:[5,9,18],vignette:[2,5,11],panel:"rgba(18, 23, 42, 0.68)",panelStrong:"rgba(24, 31, 56, 0.82)",panelSoft:"rgba(13, 18, 34, 0.58)",border:"rgba(133, 150, 255, 0.18)",textSoft:"rgba(225, 233, 255, 0.78)",textMuted:"rgba(195, 210, 244, 0.8)",textHeading:"rgb(255, 250, 244)",fontBody:"'DM Sans', 'Space Grotesk', sans-serif",fontDisplay:"'Syncopate', 'Space Grotesk', sans-serif",fontLabel:"'JetBrains Mono', 'IBM Plex Mono', monospace",topbar:[5,9,18],topbarOverlayAlpha:.06,gridLineAlpha:.024,gridDotAlpha:.06,ctaPrimaryInk:"#17110b",ctaSecondaryInk:"rgba(243, 247, 255, 0.96)",displayScale:1.04,bodyScale:1,labelScale:.95,microScale:.94,buttonScale:.98,spaceScale:1.14,containerWidth:"1280px",heroCopyWidth:"800px",sectionCopyWidth:"64ch"},pro:{accentBase:[214,178,124],coolBase:[157,213,202],warmBase:[241,228,208],shellTop:[9,11,12],shellMid:[17,24,25],shellBottom:[7,10,12],vignette:[4,6,7],panel:"rgba(255, 250, 244, 0.045)",panelStrong:"rgba(255, 245, 232, 0.085)",panelSoft:"rgba(255, 248, 238, 0.028)",border:"rgba(226, 206, 178, 0.15)",textSoft:"rgba(241, 235, 227, 0.78)",textMuted:"rgba(224, 229, 226, 0.72)",textHeading:"rgb(247, 240, 234)",fontBody:"'DM Sans', 'Google Sans Text', sans-serif",fontDisplay:"'Cinzel', 'Cormorant Garamond', serif",fontLabel:"'Space Mono', 'IBM Plex Mono', monospace",topbar:[10,14,15],topbarOverlayAlpha:.05,gridLineAlpha:.014,gridDotAlpha:.038,ctaPrimaryInk:"#18120c",ctaSecondaryInk:"rgba(241, 244, 240, 0.94)",displayScale:1.02,bodyScale:1,labelScale:.94,microScale:.92,buttonScale:.96,spaceScale:1.16,containerWidth:"1260px",heroCopyWidth:"820px",sectionCopyWidth:"62ch"}};function f(e){return Math.min(255,Math.max(0,Math.round(e)))}function $(e){const a=e?.trim().replace(/^#/,"")||w.replace(/^#/,""),o=a.length===3?a.split("").map(s=>`${s}${s}`).join(""):a;return/^[\da-fA-F]{6}$/.test(o)?[f(Number.parseInt(o.slice(0,2),16)),f(Number.parseInt(o.slice(2,4),16)),f(Number.parseInt(o.slice(4,6),16))]:$(w)}function h(e,a,o){const s=t=>f(e[t]+(a[t]-e[t])*o);return[s(0),s(1),s(2)]}function l(e){return`${e[0]}, ${e[1]}, ${e[2]}`}function v(e){return`rgb(${l(e)})`}let g=class extends S{constructor(){super(...arguments),this.returningPlannerVisitor=!1,this.designDocuments={},this.previewDocuments={},this.seoRevealObserver=null,this.seoEffectCleanups=[],this.pendingDesignLoads=new Set,this.pendingPreviewLoads=new Set}updated(e){if(e.has("page")&&this.page&&(y({event:"marketing_route_view",route:this.page.path,variant:this.page.variantId}),this.ensureActiveFonts(),this.primeDesignAssetsForPage()),this.isSeoPage()){this.setupSeoEffects();return}this.teardownSeoEffects()}connectedCallback(){super.connectedCallback(),this.returningPlannerVisitor=
1D(),this.ensureActiveFonts(),this.primeDesignAssetsForPage()}disconnectedCallback(){this.teardownSeoEffects(),super.disconnectedCallback()}getSeoAudienceTheme(){return this.isSeoPage()?A():"sapiens"}ensureActiveFonts(){_(this.getSeoAudienceTheme())}primePreviewDocument(e){this.previewDocuments[e]||this.pendingPreviewLoads.has(e)||(this.pendingPreviewLoads.add(e),E(e).then(a=>{this.previewDocuments={...this.previewDocuments,[e]:a}}).finally(()=>{this.pendingPreviewLoads.delete(e)}))}primeDesignDocument(e){this.designDocuments[e]||this.pendingDesignLoads.has(e)||(this.pendingDesignLoads.add(e),H(e).then(a=>{this.designDocuments={...this.designDocuments,[e]:a}}).finally(()=>{this.pendingDesignLoads.delete(e)}))}primeDesignAssetsForPage(){this.page&&(this.page.kind==="home"&&b.map(e=>e.id).filter(e=>this.isActiveDesignSource(e)).forEach(e=>{this.primePreviewDocument(e)}),this.isActiveDesignSource(this.page.variantId)&&this.primeDesignDocument(this.page.variantId))}handleTrackedClick(e,a){if(!this.page)return;const o=this.isSeoPage()?this.getSeoAudienceTheme():null;T(a,o),e&&y({event:e,route:this.page.path,target:a,variant:this.page.variantId})}plannerEntryCta(e){return e.href!==d||this.page?.kind!=="home"||!this.returningPlannerVisitor?e:{...e,label:"Return to Planner",eventName:"planner_return_click"}}renderNavCta(e){const a=this.plannerEntryCta(e);return r` 2 <a 3 class="nav-cta" 4 href=${a.href} 5 @click=${()=>this.handleTrackedClick(a.eventName,a.href)} 6 > 7 ${a.label} 8 </a> 9 `}renderCta(e){const a=this.plannerEntryCta(e),o=a.style==="secondary"?"cta-secondary":a.style==="ghost"?"cta-ghost":"cta-primary";return r` 10 <a 11 class=${`cta ${o}`} 12 href=${a.href} 13 @click=${()=>this.handleTrackedClick(a.eventName,a.href)} 14 > 15 ${a.label} 16 </a> 17 `}isSeoPage(){return this.page.kind!=="home"&&this.page.kind!=="design-lab"}getSeoShellStyle(e){const a=B[e],o=$(this.page.themeColor),s=h(a.accentBase,o,e==="sapiens"?.36:.54),t=h(a.coolBase,o,e==="pro"?.14:.18),n=h(a.warmBase,s,.18),c=h(s,F,.38),x=h(s,e==="sapiens"?a.shellTop:O,.42);return[`--seo-panel: ${a.panel}`,`--seo-panel-strong: ${a.panelStrong}`,`--seo-panel-soft: ${a.panelSoft}`,`--seo-border: ${a.border}`,`--seo-text-soft: ${a.textSoft}`,`--seo-text-muted: ${a.textMuted}`,`--seo-text-heading: ${a.textHeading}`,`--seo-accent: ${v(s)}`,`--seo-accent-rgb: ${l(s)}`,`--seo-cool-rgb: ${l(t)}`,`--seo-warm-rgb: ${l(n)}`,`--seo-shell-top-rgb: ${l(a.shellTop)}`,`--seo-shell-mid-rgb: ${l(a.shellMid)}`,`--seo-shell-bottom-rgb: ${l(a.shellBottom)}`,`--seo-vignette-rgb: ${l(a.vignette)}`,`--seo-topbar-rgb: ${l(a.topbar)}`,`--seo-topbar-overlay-alpha: ${a.topbarOverlayAlpha}`,`--seo-grid-line-alpha: ${a.gridLineAlpha}`,`--seo-grid-dot-alpha: ${a.gridDotAlpha}`,`--seo-font-body: ${a.fontBody}`,`--seo-font-display: ${a.fontDisplay}`,`--seo-font-label: ${a.fontLabel}`,`--seo-cta-primary-ink: ${a.ctaPrimaryInk}`,`--seo-cta-secondary-ink: ${a.ctaSecondaryInk}`,`--seo-type-display-scale: ${a.displayScale}`,`--seo-type-body-scale: ${a.bodyScale}`,`--seo-type-label-scale: ${a.labelScale}`,`--seo-type-micro-scale: ${a.microScale}`,`--seo-type-button-scale: ${a.buttonScale}`,`--seo-space-scale: ${a.spaceScale}`,`--seo-container-width: ${a.containerWidth}`,`--seo-hero-copy-width: ${a.heroCopyWidth}`,`--seo-section-copy-width: ${a.sectionCopyWidth}`,`--seo-accent-soft: ${v(c)}`,`--seo-accent-deep: ${v(x)}`].join("; ")}getPageFamily(){return this.page.kind==="product"?"product":this.page.kind==="destination"||this.page.kind==="use-case"?"explore":this.page.kind==="skills"||this.page.kind==="mcp"?"platform":"company"}isNavActive(e){return this.page.path===e||e==="/ai-trip-planner"&&this.page.kind==="product"||e==="/travel-itinerary-builder"&&(this.page.kind==="destination"||this.page.kind==="use-case")||e==="/skills"&&this.page.kind==="skills"||e==="/mcp"&&this.page.kind==="mcp"||e==="/pricing"&&this.page.kind==="company"}getHeroProofPills(){return this.page.kind==="skills"?["Planner-first skills","Offline-capable","Export-ready","Optional power layer"]:this.page.kind==="mcp"?["Action-first capability model","Maps stay live","Legible tooling","Share-ready outputs"]:this.page.kind==="company"?["Clear positioning","Credible workflow","Planner access","Direct next step"]:this.page.kind==="destination"||this.page.kind==="use-case"?["Route-aware planning","Destination logic","Trip-ready structure","Fast handoff to planner"]:["Maps stay live","Trips can fork","Collaborative review","Share-ready outputs"]}getHeroRailSource(){return this.page.stats?.length?"stats":this.page.pillars?.length?"pillars":this.page.sections.some(e=>e.cards?.length)?"section-cards":"fallback"}getHeroRailCards(){const e=this.getHeroRailSource();return e==="stats"?(this.page.stats||[]).map(a=>({label:a.label,title:a.value,body:a.note})):e==="pillars"?(this.page.pillars||[]).slice(0,4):e==="section-cards"?(this.page.sections.find(a=>a.cards?.length)?.cards||[]).slice(0,4):this.page.ctas.map(a=>({label:a.style==="primary"?"Primary path":a.style==="secondary"?"Explore next":"Alternate route",title:a.label,body:a.href}))}getHeroRailCopy(){const e=this.getHeroRailSource();return e==="stats"?{kicker:"Signal board",title:"Page signals worth scanning first",body:"Lead with the strongest planning or product signals so the route feels immediately legible."}:e==="pillars"?{kicker:"Core structure",title:"The main ideas this page has to carry",body:"These cards anchor the story before the route drops into the longer sections below."}:e==="section-cards"?{kicker:"Preview stack",title:"Highlights pulled from the route itself",body:"Use the first content-rich section as a fast preview instead of repeating generic filler."}:{kicker:"Route paths",title:"Fast ways into the product",body:"Even lean pages should keep the next action and the product shape visible without crowding the hero."}}setupSeoEffects(){this.teardownSeoEffects();const e=this.renderRoot;if(!(e instanceof ShadowRoot))return;const a=Array.from(e.querySelectorAll(".seo-reveal"));window.matchMedia("(prefers-reduced-motion: reduce)").matches?a.forEach(t=>t.classList.add("is-visible")):(this.seoRevealObserver=new IntersectionObserver(t=>{t.forEach(n=>
17{n.isIntersecting&&(n.target.classList.add("is-visible"),this.seoRevealObserver?.unobserve(n.target))})},{threshold:.18}),a.forEach(t=>this.seoRevealObserver?.observe(t))),Array.from(e.querySelectorAll(".seo-spotlight")).forEach(t=>{const n=x=>{const k=t.getBoundingClientRect();t.style.setProperty("--spot-x",`${x.clientX-k.left}px`),t.style.setProperty("--spot-y",`${x.clientY-k.top}px`),t.classList.add("is-active")},c=()=>{t.classList.remove("is-active")};t.addEventListener("pointermove",n),t.addEventListener("pointerleave",c),this.seoEffectCleanups.push(()=>{t.removeEventListener("pointermove",n),t.removeEventListener("pointerleave",c)})})}teardownSeoEffects(){this.seoRevealObserver?.disconnect(),this.seoRevealObserver=null,this.seoEffectCleanups.forEach(e=>e()),this.seoEffectCleanups=[]}renderCards(e,a=!1){if(!e?.length)return i;const o=a||e.length>=4?"seo-card-grid seo-card-grid-four":"seo-card-grid";return r` 18 <div class=${o}> 19 ${e.map(s=>r` 20 <article class="seo-card seo-spotlight"> 21 ${s.label?r`<span class="seo-card-label">${s.label}</span>`:i} 22 <h3 class="seo-card-title">${s.title}</h3> 23 <p class="seo-card-body">${s.body}</p> 24 ${s.meta?r`<span class="seo-card-meta">${s.meta}</span>`:i} 25 </article> 26 `)} 27 </div> 28 `}renderNavLink(e,a,o){const s=this.isNavActive(a);return r` 29 <a 30 class=${`nav-link ${s?"is-active":""}`} 31 href=${a} 32 aria-current=${s?"page":i} 33 @click=${()=>this.handleTrackedClick(o,a)} 34 > 35 ${e} 36 </a> 37 `}renderSectionAside(e){return e.bullets?.length?r` 38 <div class="seo-section-aside"> 39 <div class="seo-callout-kicker">Key moves</div> 40 <ul class="seo-callout-list"> 41 ${e.bullets.map(a=>r`<li>${a}</li>`)} 42 </ul> 43 </div> 44 `:e.codeSample?r` 45 <div class="seo-section-aside"> 46 <div class="seo-callout-kicker">Direct path</div> 47 <pre class="seo-code-sample">${e.codeSample}</pre> 48 ${e.cards?.length?r` 49 <div class="seo-callout-chip-row"> 50 ${e.cards.slice(0,3).map(a=>r` 51 <span class="seo-callout-chip">${a.title}</span> 52 `)} 53 </div> 54 `:i} 55 </div> 56 `:e.cards?.length?r` 57 <div class="seo-section-aside"> 58 <div class="seo-callout-kicker">Highlights</div> 59 <div class="seo-callout-stack"> 60 ${e.cards.slice(0,3).map(a=>r` 61 <div class="seo-callout-item"> 62 <span class="seo-callout-kicker">${a.label||"Detail"}</span> 63 <strong>${a.title}</strong> 64 <span>${a.meta||a.body}</span> 65 </div> 66 `)} 67 </div> 68 </div> 69 `:r` 70 <div class="seo-section-aside"> 71 <div class="seo-callout-kicker">Takeaway</div> 72 <p class="seo-callout-text"> 73 ${e.quote||this.page.heroFootnote||"Keep the route useful to travelers first and legible to builders second."} 74 </p> 75 <div class="seo-callout-chip-row"> 76 ${this.page.ctas.slice(0,3).map(a=>r`<span class="seo-callout-chip">${a.label}</span>`)} 77 </div> 78 </div> 79 `}renderSections(e){const a=this.getPageFamily();return e.map((o,s)=>r` 80 <section class=${`seo-section seo-reveal seo-section-family-${a}`}> 81 <div class="container"> 82 <div class=${`seo-section-frame seo-section-frame-${a}`}> 83 <div class=${`seo-section-layout ${s%2===1?"reverse":""}`}> 84 <div class="seo-section-head"> 85 ${o.kicker?r`<div class="seo-section-kicker">${o.kicker}</div>`:i} 86 <h2 class="seo-section-title">${o.title}</h2> 87 <p class="seo-section-body">${o.body}</p> 88 ${o.quote?r`<div class="seo-section-quote">${o.quote}</div>`:i} 89 </div> 90 ${this.renderSectionAside(o)} 91 </div> 92 ${this.renderCards(o.cards,o.cards?o.cards.length>=4:!1)} 93 </div> 94 </div> 95 </section> 96 `)}renderFaqs(e){return e?.length?r` 97 <section class="seo-section seo-reveal"> 98 <div class="container"> 99 <div class="seo-section-frame"> 100 <div class="seo-section-head"> 101 <div class="seo-section-kicker">FAQ</div> 102 <h2 class="seo-section-title">Questions the launch site should answer clearly</h2> 103 </div>
104 <div class="seo-faq-grid"> 105 ${e.map(a=>r` 106 <article class="seo-card seo-faq-card seo-spotlight"> 107 <h3 class="seo-card-title">${a.question}</h3> 108 <p class="seo-card-body">${a.answer}</p> 109 </article> 110 `)} 111 </div> 112 </div> 113 </div> 114 </section> 115 `:i}isActiveDesignSource(e){return e==="forked-cosmos"||e==="future-souvenir-atelier"||e==="branch-palace"}renderSiteHeader(){return r` 116 <header class="topbar"> 117 <div class="container topbar-inner"> 118 <a 119 class="brand" 120 href="/sapiens" 121 @click=${()=>this.handleTrackedClick("home_page_click","/sapiens")} 122 > 123 <span class="brand-mark"><img src="/favicon.ico" alt="" aria-hidden="true" /></span> 124 <span>Kontour</span> 125 </a> 126 <nav class="nav" aria-label="Marketing navigation"> 127 ${this.renderNavLink("AI Planner","/ai-trip-planner","product_page_click")} 128 ${this.renderNavLink("Itineraries","/travel-itinerary-builder","itinerary_builder_click")} 129 ${this.renderNavLink("Skills","/skills","skills_page_click")} 130 ${this.renderNavLink("MCP","/mcp","mcp_page_click")} 131 ${this.renderNavLink("Pricing","/pricing","pricing_page_click")} 132 ${this.renderNavCta({label:"Open Planner",href:"/planner",style:"primary",eventName:"planner_open_click"})} 133 </nav> 134 </div> 135 </header> 136 `}renderChooserCard(e){const a=e.id,o=this.previewDocuments[a],s=e.id==="forked-cosmos"?"chooser-card-cosmos":e.id==="future-souvenir-atelier"?"chooser-card-souvenir":"chooser-card-palace";return r` 137 <article class=${`chooser-card ${s}`}> 138 <div class="chooser-card-head"> 139 <div class="chooser-kicker">Provided design route</div> 140 <div class="chooser-card-title-row"> 141 <h2>${e.title}</h2> 142 <a 143 class="nav-cta" 144 href=${e.path} 145 @click=${()=>this.handleTrackedClick("design_variant_switch",e.path)} 146 > 147 Open Route 148 </a> 149 </div> 150 <p>${e.hook}</p> 151 </div> 152 <div class="chooser-preview"> 153 ${o?r` 154 <iframe 155 data-preview-source=${a} 156 title=${`${e.title} preview`} 157 .srcdoc=${o} 158 ></iframe> 159 `:r`<div class="chooser-preview-loading">Loading previewâ¦</div>`} 160 </div> 161 <div class="chooser-card-actions"> 162 <a 163 class="cta cta-primary" 164 href=${e.path} 165 @click=${()=>this.handleTrackedClick("design_variant_switch",e.path)} 166 > 167 View Direction 168 </a> 169 <a 170 class="cta cta-ghost" 171 href=${d} 172 @click=${()=>this.handleTrackedClick("planner_open_click",d)} 173 > 174 Open Planner 175 </a> 176 </div> 177 </article> 178 `}renderDesignChooserHome(){const e=this.returningPlannerVisitor;return r` 179 <div class="shell shell-home-reset"> 180 <div class="page"> 181 ${this.renderSiteHeader()} 182 <main class="chooser-shell"> 183 <div class="container"> 184 <div class="chooser-intro"> 185 <div class="chooser-copy"> 186 <div class="eyebrow"> 187 <span>${this.page.kicker}</span> 188 <span>kontour.ai</span> 189 </div> 190 <h1>${this.page.heroTitle}</h1> 191 <p class="chooser-body">${this.page.heroBody}</p> 192 ${this.page.heroFootnote?r`<p class="chooser-note">${this.page.heroFootnote}</p>`:i} 193 <div class="cta-row"> 194 ${this.page.ctas.map(a=>this.renderCta(a))} 195 </div> 196 <div class="chooser-route-strip"> 197 ${b.map(a=>r` 198 <a 199 class="chooser-route-link" 200 href=${a.path} 201 @click=${()=>this.handleTrackedClick("design_variant_switch",a.path)} 202 > 203 ${a.title} 204 </a> 205 `)} 206 </div> 207 </div> 208 <div> 209 <div class="chooser-note"> 210 Open the live planner if you already know what you want to do. If you are reviewing visual direction, these are the only three active homepage concepts in the public flow. 211 </div> 212 <div class="hero-proof">
213 <span class="proof-pill">Forked Cosmos</span> 214 <span class="proof-pill">Future Souvenir Atelier</span> 215 <span class="proof-pill">Branch Palace</span> 216 <span class="proof-pill">User-provided sources</span> 217 </div> 218 </div> 219 </div> 220 ${e?r` 221 <div class="return-panel"> 222 <div> 223 <div class="return-kicker">Returning traveler</div> 224 <div class="return-title">Your live workspace already exists in this browser.</div> 225 <p class="return-body"> 226 Skip the launch surface and jump straight back into <strong>/planner</strong> if you want to continue building the itinerary. 227 </p> 228 </div> 229 <a 230 class="return-link" 231 href=${d} 232 @click=${()=>this.handleTrackedClick("planner_return_click",d)} 233 > 234 Return to Planner 235 </a> 236 </div> 237 `:i} 238 <div class="chooser-grid"> 239 ${b.map(a=>this.renderChooserCard(a))} 240 </div> 241 </div> 242 </main> 243 </div> 244 </div> 245 `}renderActiveDesignExperience(e){const a=b.find(t=>t.id===e),o=b.filter(t=>t.id!==e),s=this.designDocuments[e];return!a||o.length===0?i:r` 246 <div class=${`design-experience-shell design-experience-${e}`}> 247 <div class="design-dock"> 248 <a 249 class="design-dock-link" 250 href="/" 251 @click=${()=>this.handleTrackedClick("home_page_click","/")} 252 > 253 Home 254 </a> 255 ${o.map(t=>r` 256 <a 257 class="design-dock-link" 258 href=${t.path} 259 @click=${()=>this.handleTrackedClick("design_variant_switch",t.path)} 260 > 261 ${t.title} 262 </a> 263 `)} 264 <a 265 class="design-dock-link primary" 266 href=${d} 267 @click=${()=>this.handleTrackedClick("planner_open_click",d)} 268 > 269 Open Planner 270 </a> 271 </div> 272 ${s?r` 273 <iframe 274 class="design-experience-frame" 275 data-design-source=${e} 276 title=${a.title} 277 .srcdoc=${s} 278 ></iframe> 279 `:r`<div class="design-experience-frame design-experience-loading">Loading experienceâ¦</div>`} 280 </div> 281 `}renderHiddenFallbackPage(){return r` 282 <div class=${`shell ${this.page.variantId?`variant-${this.page.variantId}`:""}`}> 283 <div class="page"> 284 ${this.renderSiteHeader()} 285 <section class="hero"> 286 <div class="container"> 287 <div class="hero-grid hero-grid-single"> 288 <div class="hidden-fallback-panel"> 289 <div class="eyebrow"> 290 <span>${this.page.kicker}</span> 291 <span>hidden fallback</span> 292 </div> 293 <h1>${this.page.heroTitle}</h1> 294 <p class="hero-body">${this.page.heroBody}</p> 295 ${this.page.heroFootnote?r`<p class="hero-note">${this.page.heroFootnote}</p>`:i} 296 <div class="cta-row"> 297 ${this.page.ctas.map(e=>this.renderCta(e))} 298 </div> 299 </div> 300 </div> 301 </div> 302 </section> 303 </div> 304 </div> 305 `}renderHeroContextRail(e,a){return r` 306 <aside class="seo-context-rail seo-reveal" data-marketing-context-rail> 307 <div class="seo-rail-header"> 308 <div class="seo-rail-kicker">${e.kicker}</div> 309 <h2 class="seo-rail-title">${e.title}</h2> 310 <p class="seo-rail-body">${e.body}</p> 311 </div> 312 <div class="seo-rail-grid"> 313 ${a.map(o=>r` 314 <article class="seo-rail-card"> 315 ${o.label?r`<span class="seo-card-label">${o.label}</span>`:i} 316 <strong class="seo-rail-card-title">${o.title}</strong> 317 <p class="seo-rail-card-copy">${o.body}</p> 318 </article> 319 `)} 320 </div> 321 </aside> 322 `}renderHeroCopy(){return r` 323 <div class="seo-hero-copy"> 324 <div class="seo-eyebrow seo-fade-step" style=${"--enter-delay: 40ms"}>
325 <span>${this.page.kicker}</span> 326 <span>kontour.ai</span> 327 </div> 328 <h1 class="seo-hero-title seo-fade-step" style=${"--enter-delay: 140ms"}>${this.page.heroTitle}</h1> 329 <p class="seo-hero-body seo-fade-step" style=${"--enter-delay: 220ms"}>${this.page.heroBody}</p> 330 ${this.page.heroFootnote?r`<p class="seo-hero-note seo-fade-step" style=${"--enter-delay: 300ms"}>${this.page.heroFootnote}</p>`:i} 331 <div class="cta-row seo-fade-step" style=${"--enter-delay: 380ms"}> 332 ${this.page.ctas.map(e=>this.renderCta(e))} 333 </div> 334 <div class="seo-hero-proof seo-fade-step" style=${"--enter-delay: 460ms"}> 335 ${this.getHeroProofPills().map(e=>r`<span class="seo-proof-pill">${e}</span>`)} 336 </div> 337 </div> 338 `}renderProductHero(){return this.renderHeroContextRail(this.getHeroRailCopy(),this.getHeroRailCards())}renderExploreHero(){const e=this.getHeroRailCards().slice(0,3);return r` 339 <aside class="seo-journey-panel seo-reveal" data-marketing-context-rail> 340 <div class="seo-rail-header"> 341 <div class="seo-rail-kicker">Travel brief</div> 342 <h2 class="seo-rail-title">Shape the route before locking the details.</h2> 343 <p class="seo-journey-note"> 344 Use destination pages and trip ideas to define pace, neighborhood mix, and what deserves a place in the final itinerary. 345 </p> 346 </div> 347 <div class="seo-mini-list"> 348 ${e.map(a=>r` 349 <div class="seo-mini-row"> 350 <span class="seo-mini-label">${a.label||"Planning lens"}</span> 351 <span class="seo-mini-value">${a.title}</span> 352 <p class="seo-journey-note">${a.body}</p> 353 </div> 354 `)} 355 </div> 356 </aside> 357 `}renderPlatformHero(){const e=this.getHeroRailCards().slice(0,4);return r` 358 <aside class="seo-platform-panel seo-reveal" data-marketing-context-rail> 359 <div class="seo-rail-header"> 360 <div class="seo-rail-kicker">Capability ledger</div> 361 <h2 class="seo-rail-title">Operational detail should still feel legible.</h2> 362 <p class="seo-rail-body"> 363 These pages explain the planning system, so the hero should show what the capability is, why it matters, and how it enters the live workflow. 364 </p> 365 </div> 366 <div class="seo-ledger-grid"> 367 ${e.map(a=>r` 368 <article class="seo-ledger-item"> 369 ${a.label?r`<span class="seo-card-label">${a.label}</span>`:i} 370 <strong class="seo-rail-card-title">${a.title}</strong> 371 <p class="seo-rail-card-copy">${a.body}</p> 372 </article> 373 `)} 374 </div> 375 </aside> 376 `}renderCompanyHero(){const e=this.getHeroRailCards().slice(0,3);return r` 377 <aside class="seo-company-panel seo-reveal" data-marketing-context-rail> 378 <div class="seo-rail-header"> 379 <div class="seo-rail-kicker">Company route</div> 380 <h2 class="seo-rail-title">The practical signals people look for first.</h2> 381 <p class="seo-rail-body"> 382 Company pages should feel calmer and more direct than product pages: clear positioning, credible signals, and the right next conversation. 383 </p> 384 </div> 385 <div class="seo-company-points"> 386 ${e.map(a=>r` 387 <div class="seo-company-point"> 388 <span class="seo-mini-label">${a.label||"Signal"}</span> 389 <strong class="seo-mini-value">${a.title}</strong> 390 <p class="seo-journey-note">${a.body}</p> 391 </div> 392 `)} 393 </div> 394 </aside> 395 `}renderHero(){const e=this.getPageFamily(),a=e==="explore"?this.renderExploreHero():e==="platform"?this.renderPlatformHero():e==="company"?this.renderCompanyHero():this.renderProductHero();return r` 396 <section class=${`seo-hero seo-hero-${e}`}> 397 <div class="container"> 398 <div class=${`seo-hero-grid seo-hero-grid-${e}`} data-marketing-hero-grid> 399 ${this.renderHeroCopy()} 400 ${a} 401 </div> 402 </div> 403 </section> 404 `}renderFooter(){return r` 405 <footer class="seo-section seo-footer seo-reveal"> 406 <div class="container seo-footer-inner"> 407 <div class="seo-section-kicker">Explore Kontour</div> 408 <h2 class="seo-section-title">Plan with the right tools, guides, and ideas</h2> 409 <div class="seo-footer-grid"> 410 <div class="seo-card seo-footer-card seo-spotlight">
411 <span class="seo-card-label">Overview</span> 412 <h3 class="seo-card-title">Plan, fork, and share trips.</h3> 413 <p class="seo-card-body"> 414 Kontour brings together structured planning, destination research, and collaborative workflow tools for better itineraries. 415 </p> 416 </div> 417 ${M.map(e=>r` 418 <div class="seo-card seo-footer-card seo-spotlight"> 419 <span class="seo-card-label">${e.title}</span> 420 <div class="seo-footer-list"> 421 ${e.links.map(a=>r` 422 <a 423 class="seo-footer-link" 424 href=${a.href} 425 @click=${()=>this.handleTrackedClick(a.eventName||"footer_link_click",a.href)} 426 > 427 ${a.label} 428 </a> 429 `)} 430 </div> 431 </div> 432 `)} 433 </div> 434 </div> 435 </footer> 436 `}render(){if(!this.page)return i;if(this.page.kind==="home")return this.renderDesignChooserHome();if(this.page.kind==="design-lab"&&this.isActiveDesignSource(this.page.variantId))return this.renderActiveDesignExperience(this.page.variantId);if(this.page.kind==="design-lab")return this.renderHiddenFallbackPage();const e=this.getSeoAudienceTheme();return r` 437 <div 438 class=${`shell seo-shell ${this.page.variantId?`variant-${this.page.variantId}`:""}`} 439 style=${this.getSeoShellStyle(e)} 440 data-marketing-audience-theme=${e} 441 data-marketing-family=${this.getPageFamily()} 442 > 443 <div class="seo-aura seo-aura-gold" aria-hidden="true"></div> 444 <div class="seo-aura seo-aura-blue" aria-hidden="true"></div> 445 <div class="page seo-page"> 446 ${this.renderSiteHeader()} 447 448 <main class="seo-main"> 449 ${this.renderHero()} 450 ${this.page.pillars?.length?r` 451 <section class="seo-section seo-reveal"> 452 <div class="container"> 453 <div class="seo-section-frame"> 454 <div class="seo-section-head"> 455 <div class="seo-section-kicker">Core strengths</div> 456 <h2 class="seo-section-title"> 457 ${this.page.kind==="skills"?"What makes a travel skill genuinely useful":this.page.kind==="mcp"?"Capabilities that stay practical":"What strong trip planning should feel like"} 458 </h2> 459 <p class="seo-section-body"> 460 ${this.page.kind==="skills"?"Skills should help travelers move faster, make better decisions, and keep specialist planning logic easy to use.":this.page.kind==="mcp"?"MCP should feel like clear product leverage: useful actions, better workflows, and real planning value.":"Clarity, flexible structure, collaboration, and a clean path into the live planner are what make the platform useful in practice."} 461 </p> 462 </div> 463 ${this.renderCards(this.page.pillars,!0)} 464 </div> 465 </div> 466 </section> 467 `:i} 468 ${this.renderSections(this.page.sections)} 469 ${this.page.kind==="skills"?r` 470 <section class="seo-section seo-reveal"> 471 <div class="container"> 472 <div class="seo-section-frame"> 473 <div class="seo-section-layout reverse"> 474 <div class="seo-section-head"> 475 <div class="seo-section-kicker">Flagship repository</div> 476 <h2 class="seo-section-title">${p.name}</h2> 477 <p class="seo-section-body"> 478 The public site now reads from a local snapshot of the actual skill package, install command, discovery surfaces, and bundled references. 479 </p> 480 </div> 481 <div class="seo-section-aside"> 482 <div class="seo-callout-kicker">Snapshot source</div> 483 <p class="seo-callout-text"> 484 Captured on ${p.snapshotSource.capturedAt} from the skill repo and checked into this codebase so the marketing site never depends on the external project at runtime. 485 </p> 486 <div class="seo-callout-chip-row">
487 <span class="seo-callout-chip">Version ${p.version}</span> 488 <span class="seo-callout-chip">${p.license}</span> 489 <span class="seo-callout-chip">${p.runtime.bins.join(", ")}</span> 490 </div> 491 <pre class="seo-code-sample">${p.installCommand}</pre> 492 </div> 493 </div> 494 <div class="seo-card-grid seo-card-grid-four"> 495 ${p.discoveryLinks.map(a=>r` 496 <article class="seo-card seo-spotlight"> 497 <span class="seo-card-label">Discovery</span> 498 <h3 class="seo-card-title">${a.label}</h3> 499 <p class="seo-card-body">Open the live discovery or source surface for the flagship skill.</p> 500 <a class="seo-card-meta" href=${a.url} target="_blank" rel="noreferrer">${a.label}</a> 501 </article> 502 `)} 503 </div> 504 </div> 505 </div> 506 </section> 507 `:i} 508 ${this.renderFaqs(this.page.faqs)} 509 ${this.renderFooter()} 510 </main> 511 </div> 512 </div> 513 `}};g.styles=z` 514 :host { 515 display: block; 516 color: #f7f3ec; 517 --mk-bg: #05070b; 518 --mk-panel: rgba(255, 255, 255, 0.07); 519 --mk-panel-strong: rgba(255, 255, 255, 0.11); 520 --mk-border: rgba(255, 255, 255, 0.14); 521 --mk-muted: rgba(237, 228, 215, 0.72); 522 --mk-soft: rgba(255, 255, 255, 0.6); 523 --mk-accent: #d4a574; 524 --mk-accent-2: #78a6ff; 525 --mk-shadow: 0 40px 100px rgba(0, 0, 0, 0.35); 526 font-family: 'Space Grotesk', 'Google Sans Text', sans-serif; 527 } 528 529 * { 530 box-sizing: border-box; 531 } 532 533 a { 534 color: inherit; 535 text-decoration: none; 536 } 537 538 .shell { 539 position: relative; 540 min-height: 100vh; 541 overflow: hidden; 542 background: 543 radial-gradient(circle at 12% 12%, rgba(212, 165, 116, 0.2), transparent 34%), 544 radial-gradient(circle at 88% 18%, rgba(86, 129, 218, 0.2), transparent 32%), 545 linear-gradient(180deg, #05070b 0%, #0b1321 48%, #05070b 100%); 546 } 547 548 .shell-home-reset { 549 background: 550 radial-gradient(circle at 18% 18%, rgba(139, 92, 246, 0.08), transparent 28%), 551 radial-gradient(circle at 82% 14%, rgba(212, 178, 124, 0.1), transparent 30%), 552 linear-gradient(180deg, #080a0e 0%, #11151d 50%, #080a0e 100%); 553 } 554 555 .shell-home-reset::before { 556 opacity: 0.14; 557 } 558 559 .shell-home-reset::after { 560 background: radial-gradient(circle at center, transparent 0%, rgba(4, 5, 9, 0.28) 72%, rgba(4, 5, 9, 0.48) 100%); 561 } 562 563 .shell::before, 564 .shell::after { 565 content: ''; 566 position: absolute; 567 inset: 0; 568 pointer-events: none; 569 } 570 571 .shell::before { 572 background: 573 linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), 574 linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); 575 background-size: 72px 72px; 576 mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 92%); 577 opacity: 0.22; 578 } 579 580 .shell::after { 581 background: radial-gradient(circle at center, transparent 0%, rgba(4, 5, 9, 0.5) 72%, rgba(4, 5, 9, 0.88) 100%); 582 } 583 584 .variant-forked-cosmos { 585 --mk-accent: #d6af72; 586 --mk-accent-2: #89b8ff; 587 --mk-accent-3: #69d1cb; 588 } 589 590 .variant-future-souvenir-atelier { 591 --mk-accent: #c6a172; 592 --mk-accent-2: #6db6c7; 593 --mk-accent-3: #f0d3a7; 594 background: 595 radial-gradient(circle at 18% 20%, rgba(198, 161, 114, 0.18), transparent 28%), 596 radial-gradient(circle at 88% 18%, rgba(109, 182, 199, 0.16), transparent 30%), 597 linear-gradient(180deg, #0b0b0d 0%, #1a1514 42%, #090a0d 100%); 598 } 599 600 .variant-branch-palace { 601 --mk-accent: #d6b27c; 602 --mk-accent-2: #9dd5ca; 603 --mk-accent-3: #d1d7e0; 604 background: 605 radial-gradient(circle at 14% 12%, rgba(157, 213, 202, 0.16), transparent 28%), 606 radial-gradient(circle at 82% 20%, rgba(214, 178, 124, 0.18), transparent 30%), 607 linear-gradient(180deg, #050607 0%, #0b1213 48%, #050607 100%); 608 } 609 610 .page { 611 position: relative; 612 z-index: 1; 613 } 614 615 .container { 616 width: min(1240px, calc(100vw - 40px)); 617 margin: 0 auto; 618 } 619 620 .topbar { 621 position: sticky; 622 top: 0; 623 z-index: 20; 624 backdrop-filter: blur(18px); 625 background: rgba(5, 7, 11, 0.66); 626 border-bottom: 1px solid rgba(255, 255, 255, 0.08); 627 } 628 629 .topbar-inner { 630 display: flex; 631 align-items: center; 632 justify-content: space-between; 633 gap: 18px; 634 min-height: 76px; 635 } 636 637 .brand { 638 display: inline-flex; 639 align-items: center; 640 gap: 12px; 641 font-weight: 700; 642 letter-spacing: 0.04em; 643 text-transform: uppercase; 644 } 645 646 .brand-mark { 647 display: inline-flex; 648 align-items: center; 649 justify-content: center; 650 width: 34px; 651 height: 34px; 652 border-radius: 10px; 653 overflow: hidden; 654 flex: 0 0 34px; 655 } 656 657 .brand-mark img { 658 width: 100%; 659 height: 100%; 660 display: block; 661 object-fit: cover; 662 } 663 664 .nav { 665 display: flex; 666 align-items: center; 667 gap: 16px; 668 flex-wrap: wrap; 669 justify-content: center; 670 } 671 672 .nav-link { 673 color: var(--mk-muted); 674 font-size: 13px; 675 letter-spacing: 0.08em; 676 text-transform: uppercase; 677 transition: color 180ms ease, transform 180ms ease; 678 } 679 680 .nav-link:hover { 681 color: #fff; 682 transform: translateY(-1px); 683 } 684 685 .nav-cta { 686 min-height: 42px; 687 padding: 0 16px; 688 border-radius: 999px; 689 border: 1px solid rgba(255, 255, 255, 0.16); 690 background: rgba(255, 255, 255, 0.06); 691 display: inline-flex; 692 align-items: center; 693 justify-content: center; 694 font-size: 13px; 695 letter-spacing: 0.08em; 696 text-transform: uppercase; 697 } 698 699 .chooser-shell { 700 min-height: calc(100svh - 76px); 701 padding: 48px 0 36px; 702 } 703 704 .chooser-intro { 705 display: grid; 706 grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.68fr); 707 gap: 28px; 708 align-items: end; 709 margin-bottom: 28px; 710 } 711 712 .chooser-copy h1 { 713 margin: 0; 714 font-family: 'Space Grotesk', 'Google Sans Text', sans-serif; 715 font-size: clamp(3rem, 7vw, 5.8rem); 716 line-height: 0.94; 717 letter-spacing: -0.06em; 718 } 719 720 .chooser-body { 721 margin: 20px 0 0; 722 max-width: 42ch; 723 color: var(--mk-muted); 724 font-size: 1.05rem; 725 line-height: 1.74; 726 } 727 728 .chooser-note { 729 color: rgba(255, 255, 255, 0.6); 730 font-size: 0.95rem; 731 line-height: 1.6; 732 } 733
734 .chooser-grid { 735 display: grid; 736 grid-template-columns: repeat(3, minmax(0, 1fr)); 737 gap: 22px; 738 } 739 740 .chooser-card { 741 display: grid; 742 grid-template-areas: 743 'head' 744 'preview' 745 'actions'; 746 grid-template-rows: auto minmax(360px, 1fr) auto; 747 gap: 18px; 748 padding: 22px; 749 border-radius: 32px; 750 border: 1px solid rgba(255, 255, 255, 0.12); 751 background: 752 linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)), 753 rgba(5, 7, 11, 0.42); 754 box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34); 755 overflow: hidden; 756 } 757 758 .chooser-card-cosmos { 759 background: 760 radial-gradient(circle at 18% 16%, rgba(139, 92, 246, 0.16), transparent 28%), 761 radial-gradient(circle at 84% 20%, rgba(249, 115, 22, 0.12), transparent 28%), 762 linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)), 763 rgba(5, 7, 11, 0.42); 764 } 765 766 .chooser-card-palace { 767 background: 768 radial-gradient(circle at 18% 16%, rgba(212, 175, 55, 0.12), transparent 28%), 769 radial-gradient(circle at 84% 18%, rgba(157, 213, 202, 0.1), transparent 30%), 770 linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)), 771 rgba(5, 7, 11, 0.42); 772 } 773 774 .chooser-card-souvenir { 775 color: #f6f0e8; 776 background: 777 radial-gradient(circle at 16% 18%, rgba(198, 161, 114, 0.18), transparent 30%), 778 radial-gradient(circle at 82% 18%, rgba(109, 182, 199, 0.16), transparent 28%), 779 linear-gradient(180deg, rgba(38, 26, 21, 0.9), rgba(13, 10, 12, 0.92)); 780 border-color: rgba(198, 161, 114, 0.16); 781 } 782 783 .chooser-card-head { 784 grid-area: head; 785 display: grid; 786 gap: 12px; 787 } 788 789 .chooser-kicker { 790 color: rgba(255, 255, 255, 0.62); 791 font-family: 'IBM Plex Mono', monospace; 792 font-size: 11px; 793 letter-spacing: 0.16em; 794 text-transform: uppercase; 795 } 796 797 .chooser-card-title-row { 798 display: flex; 799 align-items: center; 800 justify-content: space-between; 801 gap: 16px; 802 flex-wrap: wrap; 803 } 804 805 .chooser-card h2 { 806 margin: 0; 807 font-size: clamp(1.8rem, 3.2vw, 2.8rem); 808 line-height: 1; 809 letter-spacing: -0.04em; 810 } 811 812 .chooser-card-cosmos h2 { 813 font-family: 'Syncopate', 'Space Grotesk', sans-serif; 814 text-transform: uppercase; 815 font-size: clamp(1.4rem, 2.8vw, 2.2rem); 816 line-height: 1.16; 817 letter-spacing: -0.02em; 818 } 819 820 .chooser-card-palace h2 { 821 font-family: 'Cinzel', 'Cormorant Garamond', serif; 822 font-weight: 400; 823 letter-spacing: -0.03em; 824 } 825 826 .chooser-card-souvenir h2 { 827 font-family: 'Newsreader', 'Cormorant Garamond', serif; 828 font-weight: 400; 829 letter-spacing: -0.035em; 830 font-size: clamp(1.9rem, 3vw, 2.9rem); 831 } 832 833 .chooser-card p { 834 margin: 0; 835 color: var(--mk-muted); 836 font-size: 0.98rem; 837 line-height: 1.66; 838 } 839 840 .chooser-preview { 841 grid-area: preview; 842 position: relative; 843 min-height: 390px; 844 border-radius: 24px; 845 border: 1px solid rgba(255, 255, 255, 0.1); 846 background: rgba(255, 255, 255, 0.03); 847 overflow: hidden; 848 } 849 850 .chooser-preview iframe { 851 position: absolute; 852 top: 0; 853 left: 0; 854 width: 1440px; 855 height: 980px; 856 border: 0; 857 pointer-events: none; 858 transform-origin: top left; 859 background: #05070b; 860 } 861 862 .chooser-preview-loading, 863 .design-experience-loading { 864 width: 100%; 865 height: 100%; 866 min-height: inherit; 867 display: grid; 868 place-items: center; 869 color: var(--mk-muted); 870 font-family: 'IBM Plex Mono', monospace; 871 font-size: 12px; 872 letter-spacing: 0.12em; 873 text-transform: uppercase; 874 } 875 876 .chooser-card-cosmos .chooser-preview iframe { 877 transform: scale(0.34); 878 } 879 880 .chooser-card-palace .chooser-preview iframe { 881 transform: scale(0.34); 882 } 883 884 .chooser-card-souvenir .chooser-preview iframe { 885 transform: scale(0.27); 886 background: #f2eee6; 887 } 888 889 .chooser-card-actions { 890 grid-area: actions; 891 display: flex; 892 gap: 12px; 893 flex-wrap: wrap; 894 } 895 896 .chooser-card-actions .cta { 897 min-height: 46px; 898 flex: 1 1 180px; 899 } 900 901 .chooser-route-strip { 902 display: none; 903 gap: 10px; 904 flex-wrap: wrap; 905 margin-top: 18px; 906 } 907 908 .chooser-route-link { 909 min-height: 44px; 910 padding: 0 16px; 911 border-radius: 999px; 912 border: 1px solid rgba(255, 255, 255, 0.12); 913 background: rgba(255, 255, 255, 0.05); 914 display: inline-flex; 915 align-items: center; 916 justify-content: center; 917 color: rgba(255, 255, 255, 0.86); 918 font-size: 12px; 919 font-weight: 700; 920 letter-spacing: 0.1em; 921 text-transform: uppercase; 922 } 923 924 .hero-grid-single { 925 grid-template-columns: 1fr; 926 } 927 928 .design-experience-shell { 929 position: relative; 930 min-height: 100vh; 931 background: #04060a; 932 } 933 934 .design-experience-branch-palace .design-dock { 935 left: 18px; 936 right: auto; 937 justify-content: flex-start; 938 } 939 940 .design-experience-frame { 941 display: block; 942 width: 100%; 943 height: 100vh; 944 border: 0; 945 background: #04060a; 946 } 947 948 .design-dock { 949 position: fixed; 950 top: 18px; 951 right: 18px; 952 z-index: 50; 953 display: flex; 954 gap: 10px; 955 flex-wrap: wrap; 956 justify-content: flex-end; 957 max-width: calc(100vw - 36px); 958 padding: 12px; 959 border-radius: 999px; 960 border: 1px solid rgba(255, 255, 255, 0.12); 961 background: rgba(4, 6, 10, 0.72); 962 backdrop-filter: blur(18px); 963 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26); 964 pointer-events: none; 965 } 966 967 .design-dock-link { 968 min-height: 38px; 969 padding: 0 14px; 970 border-radius: 999px; 971 border: 1px solid rgba(255, 255, 255, 0.12); 972 display: inline-flex; 973 align-items: center; 974 justify-content: center; 975 color: rgba(255, 255, 255, 0.82); 976 font-family: 'IBM Plex Mono', monospace; 977 font-size: 11px; 978 letter-spacing: 0.12em; 979 text-transform: uppercase; 980 background: rgba(255, 255, 255, 0.04); 981 pointer-events: auto; 982 } 983 984 .design-dock-link.primary { 985 color: #140d07; 986 background: linear-gradient(135deg, rgba(214, 178, 124, 0.92), rgba(236, 214, 178, 0.92)); 987 border-color: rgba(214, 178, 124, 0.26); 988 } 989 990 .seo-shell { 991 --seo-panel: rgba(255, 255, 255, 0.05); 992 --seo-panel-strong: rgba(255, 255, 255, 0.08); 993 --seo-panel-soft: rgba(255, 255, 255, 0.03); 994 --seo-border: rgba(255, 255, 255, 0.14); 995 --seo-text-soft: rgba(244, 236, 227, 0.74); 996 --seo-text-muted: rgba(221, 230, 246, 0.72); 997 --seo-text-heading: rgb(255, 250, 244); 998 --seo-cool-rgb: 120, 166, 255; 999 --seo-accent-rgb: 212, 165, 116; 1000 --seo-warm-rgb: 244, 233, 206; 1001 --seo-shell-top-rgb: 15, 23, 42; 1002 --seo-shell-mid-rgb: 24, 38, 62; 1003 --seo-shell-bottom-rgb: 11, 18, 32; 1004 --seo-vignette-rgb: 3, 6, 12; 1005 --seo-topbar-rgb: 7, 12, 22; 1006 --seo-topbar-overlay-alpha: 0.04; 1007 --seo-grid-line-alpha: 0.015; 1008 --seo-grid-dot-alpha: 0.045; 1009 --seo-font-body: 'Space Grotesk', 'Google Sans Text', sans-serif; 1010 --seo-font-display: 'Space Grotesk', 'Google Sans Display', sans-serif; 1011 --seo-font-label: 'IBM Plex Mono', monospace; 1012 --seo-cta-primary-ink: #17110b; 1013 --seo-cta-secondary-ink: rgba(243, 247, 255, 0.96); 1014 --seo-type-display-scale: 1.04; 1015 --seo-type-body-scale: 1; 1016 --seo-type-label-scale: 0.95; 1017 --seo-type-micro-scale: 0.94; 1018 --seo-type-button-scale: 0.98; 1019 --seo-space-scale: 1.14; 1020 --seo-container-width: 1280px; 1021 --seo-hero-copy-width: 800px; 1022 --seo-section-copy-width: 64ch; 1023 --seo-accent-soft: #ecdcc1; 1024 --seo-accent-deep: #8e6f4d; 1025 --seo-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); 1026 --seo-ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1); 1027 position: relative; 1028 min-height: 100vh; 1029 overflow: clip; 1030 color: var(--seo-text-heading); 1031 font-family: var(--seo-font-body); 1032 font-size-adjust: from-font; 1033 background:
1034 radial-gradient(1200px 720px at 6% 4%, rgba(var(--seo-accent-rgb), 0.24), transparent 64%), 1035 radial-gradient(960px 620px at 92% 14%, rgba(var(--seo-cool-rgb), 0.19), transparent 62%), 1036 linear-gradient( 1037 180deg, 1038 rgb(var(--seo-shell-top-rgb)) 0%, 1039 rgb(var(--seo-shell-mid-rgb)) 48%, 1040 rgb(var(--seo-shell-bottom-rgb)) 100% 1041 ); 1042 } 1043 1044 .seo-shell .container { 1045 width: min(var(--seo-container-width), calc(100vw - 40px)); 1046 } 1047 1048 .seo-shell::before, 1049 .seo-shell::after { 1050 content: ''; 1051 position: absolute; 1052 inset: 0; 1053 pointer-events: none; 1054 } 1055 1056 .seo-shell::before { 1057 background: 1058 linear-gradient(90deg, rgba(255, 255, 255, var(--seo-grid-line-alpha)) 1px, transparent 1px), 1059 linear-gradient(rgba(255, 255, 255, var(--seo-grid-line-alpha)) 1px, transparent 1px), 1060 radial-gradient(circle at center, rgba(255, 255, 255, var(--seo-grid-dot-alpha)) 0 1px, transparent 1px); 1061 background-size: 88px 88px, 88px 88px, 22px 22px; 1062 mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 92%); 1063 opacity: 0.25; 1064 } 1065 1066 .seo-shell::after { 1067 background: 1068 radial-gradient(circle at center, transparent 34%, rgba(var(--seo-vignette-rgb), 0.22) 72%, rgba(var(--seo-vignette-rgb), 0.76) 100%), 1069 linear-gradient(180deg, rgba(var(--seo-vignette-rgb), 0.06), rgba(var(--seo-vignette-rgb), 0.18) 38%, rgba(var(--seo-vignette-rgb), 0.56) 100%); 1070 } 1071 1072 .seo-aura { 1073 position: absolute; 1074 border-radius: 999px; 1075 filter: blur(96px); 1076 opacity: 0.58; 1077 pointer-events: none; 1078 animation: seo-drift 18s ease-in-out 1 both; 1079 z-index: 0; 1080 } 1081 1082 .seo-aura-gold { 1083 width: min(40vw, 520px); 1084 height: min(28vw, 360px); 1085 top: 84px; 1086 left: -100px; 1087 background: rgba(var(--seo-accent-rgb), 0.2); 1088 } 1089 1090 .seo-aura-blue { 1091 width: min(38vw, 500px); 1092 height: min(26vw, 320px); 1093 top: 240px; 1094 right: -110px; 1095 background: rgba(var(--seo-cool-rgb), 0.18); 1096 animation-delay: -13s; 1097 } 1098 1099 .seo-page { 1100 position: relative; 1101 z-index: 1; 1102 } 1103 1104 .seo-shell .topbar { 1105 backdrop-filter: blur(18px); 1106 background: 1107 linear-gradient(180deg, rgba(var(--seo-topbar-rgb), 0.84), rgba(var(--seo-topbar-rgb), 0.62)), 1108 rgba(var(--seo-accent-rgb), var(--seo-topbar-overlay-alpha)); 1109 border-bottom-color: var(--seo-border); 1110 box-shadow: 0 12px 40px rgba(3, 6, 14, 0.24); 1111 } 1112 1113 .seo-shell .brand-mark { 1114 border-color: transparent; 1115 background: transparent; 1116 box-shadow: none; 1117 } 1118 1119 .seo-shell .nav-link, 1120 .seo-shell .nav-cta { 1121 font-family: var(--seo-font-label); 1122 transition: 1123 color 180ms var(--seo-ease-standard), 1124 transform 180ms var(--seo-ease-standard), 1125 border-color 180ms var(--seo-ease-standard), 1126 background 180ms var(--seo-ease-standard); 1127 } 1128 1129 .seo-shell .nav-link:hover { 1130 color: #fff; 1131 } 1132 1133 .seo-shell .nav-link.is-active, 1134 .seo-shell .nav-link[aria-current="page"] { 1135 color: var(--seo-text-heading); 1136 border-bottom: 1px solid rgba(var(--seo-accent-rgb), 0.34); 1137 padding-bottom: 3px; 1138 } 1139 1140 .seo-shell .nav-cta { 1141 min-height: 44px; 1142 padding: 0 18px; 1143 border-color: rgba(var(--seo-accent-rgb), 0.22); 1144 background: 1145 linear-gradient(135deg, rgba(24, 31, 47, 0.92), rgba(40, 48, 66, 0.86)), 1146 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.12), rgba(255, 255, 255, 0.04)); 1147 color: rgba(246, 239, 230, 0.94); 1148 box-shadow: 1149 inset 0 1px 0 rgba(255, 255, 255, 0.1), 1150 0 14px 34px rgba(2, 6, 14, 0.2); 1151 } 1152 1153 .seo-shell .nav-cta:hover { 1154 transform: translateY(-1px); 1155 border-color: rgba(var(--seo-accent-rgb), 0.34); 1156 background: 1157 linear-gradient(135deg, rgba(30, 38, 58, 0.96), rgba(54, 63, 84, 0.9)), 1158 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.2), rgba(255, 255, 255, 0.06)); 1159 box-shadow: 1160 inset 0 1px 0 rgba(255, 255, 255, 0.12), 1161 0 18px 40px rgba(2, 6, 14, 0.24); 1162 } 1163 1164 .seo-main { 1165 padding-bottom: calc(56px * var(--seo-space-scale)); 1166 } 1167 1168 .seo-hero {
1169 padding: calc(54px * var(--seo-space-scale)) 0 calc(36px * var(--seo-space-scale)); 1170 } 1171 1172 .seo-hero-grid { 1173 display: grid; 1174 grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr); 1175 gap: calc(30px * var(--seo-space-scale)); 1176 align-items: stretch; 1177 } 1178 1179 .seo-hero-copy { 1180 display: flex; 1181 flex-direction: column; 1182 justify-content: center; 1183 min-height: 100%; 1184 max-width: var(--seo-hero-copy-width); 1185 } 1186 1187 .seo-fade-step { 1188 opacity: 0; 1189 transform: translateY(26px); 1190 animation: seo-fade-up 700ms var(--seo-ease-emphasis) forwards; 1191 animation-delay: var(--enter-delay, 0ms); 1192 } 1193 1194 .seo-eyebrow { 1195 display: inline-flex; 1196 align-items: center; 1197 gap: 10px; 1198 width: fit-content; 1199 padding: calc(10px * var(--seo-space-scale)) calc(14px * var(--seo-space-scale)); 1200 border-radius: 999px; 1201 border: 1px solid rgba(var(--seo-accent-rgb), 0.22); 1202 background: 1203 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.14), rgba(255, 255, 255, 0.04)), 1204 rgba(255, 255, 255, 0.03); 1205 color: rgba(248, 240, 228, 0.92); 1206 font-family: var(--seo-font-label); 1207 font-size: calc(12px * var(--seo-type-label-scale)); 1208 letter-spacing: 0.14em; 1209 text-transform: uppercase; 1210 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); 1211 } 1212 1213 .seo-hero-title { 1214 margin: calc(20px * var(--seo-space-scale)) 0 0; 1215 color: var(--seo-text-heading); 1216 font-family: var(--seo-font-display); 1217 font-size: calc(clamp(3.2rem, 7vw, 6.4rem) * var(--seo-type-display-scale)); 1218 line-height: 0.92; 1219 letter-spacing: -0.055em; 1220 max-width: 12ch; 1221 } 1222 1223 .seo-hero-body { 1224 margin: calc(22px * var(--seo-space-scale)) 0 0; 1225 max-width: 42rem; 1226 color: var(--seo-text-muted); 1227 font-size: calc(clamp(1.04rem, 1.55vw, 1.22rem) * var(--seo-type-body-scale)); 1228 line-height: 1.7; 1229 } 1230 1231 .seo-hero-note { 1232 margin: calc(18px * var(--seo-space-scale)) 0 0; 1233 max-width: 38rem; 1234 color: var(--seo-text-soft); 1235 font-size: calc(0.98rem * var(--seo-type-body-scale)); 1236 line-height: 1.65; 1237 } 1238 1239 .seo-shell .cta-row { 1240 display: flex; 1241 flex-wrap: wrap; 1242 gap: calc(14px * var(--seo-space-scale)); 1243 margin-top: calc(30px * var(--seo-space-scale)); 1244 } 1245 1246 .seo-shell .cta { 1247 position: relative; 1248 overflow: hidden; 1249 min-height: calc(52px * var(--seo-space-scale)); 1250 padding: 0 calc(24px * var(--seo-space-scale)); 1251 border-radius: 999px; 1252 border: 1px solid rgba(255, 255, 255, 0.12); 1253 display: inline-flex; 1254 align-items: center; 1255 justify-content: center; 1256 gap: 10px; 1257 font-family: var(--seo-font-label); 1258 font-size: calc(13px * var(--seo-type-button-scale)); 1259 font-weight: 700; 1260 letter-spacing: 0.1em; 1261 text-transform: uppercase; 1262 box-shadow: 1263 inset 0 1px 0 rgba(255, 255, 255, 0.12), 1264 0 18px 46px rgba(2, 6, 14, 0.18); 1265 transition: 1266 transform 220ms var(--seo-ease-standard), 1267 border-color 220ms var(--seo-ease-standard), 1268 background 220ms var(--seo-ease-standard), 1269 box-shadow 220ms var(--seo-ease-standard); 1270 } 1271 1272 .seo-shell .cta::after { 1273 content: ''; 1274 position: absolute; 1275 inset: 0; 1276 background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.32), transparent 70%); 1277 transform: translateX(-120%); 1278 animation: seo-shimmer 6s linear 1 both; 1279 pointer-events: none; 1280 } 1281 1282 .seo-shell .cta:hover { 1283 transform: translateY(-2px); 1284 } 1285 1286 .seo-shell .cta-primary { 1287 border-color: rgba(var(--seo-accent-rgb), 0.38); 1288 background: 1289 linear-gradient(135deg, rgba(var(--seo-warm-rgb), 0.98), rgba(var(--seo-accent-rgb), 0.88) 60%, rgba(var(--seo-accent-rgb), 0.68) 100%); 1290 color: var(--seo-cta-primary-ink); 1291 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); 1292 box-shadow: 1293 inset 0 1px 0 rgba(255, 255, 255, 0.18), 1294 0 24px 70px rgba(var(--seo-accent-rgb), 0.28); 1295 } 1296 1297 .seo-shell .cta-primary:hover { 1298 box-shadow: 1299 inset 0 1px 0 rgba(255, 255, 255, 0.22), 1300 0 28px 82px rgba(var(--seo-accent-rgb), 0.34); 1301 } 1302 1303 .seo-shell .cta-secondary { 1304 border-color: rgba(var(--seo-cool-rgb), 0.3); 1305 background: 1306 linear-gradient(135deg, rgba(var(--seo-cool-rgb), 0.26), rgba(var(--seo-cool-rgb), 0.4) 52%, rgba(var(--seo-topbar-rgb), 0.94) 100%), 1307 linear-gradient(180deg, rgba(var(--seo-cool-rgb), 0.14), rgba(255, 255, 255, 0.04)); 1308 color: var(--seo-cta-secondary-ink); 1309 } 1310 1311 .seo-shell .cta-secondary:hover { 1312 border-color: rgba(var(--seo-cool-rgb), 0.4); 1313 box-shadow: 1314 inset 0 1px 0 rgba(255, 255, 255, 0.14), 1315 0 24px 64px rgba(var(--seo-cool-rgb), 0.2); 1316 } 1317 1318 .seo-shell .cta-ghost { 1319 border-color: rgba(255, 255, 255, 0.12); 1320 background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)); 1321 color: var(--seo-text-soft); 1322 } 1323 1324 .seo-hero-proof { 1325 display: flex; 1326 flex-wrap: wrap; 1327 gap: calc(10px * var(--seo-space-scale)); 1328 margin-top: calc(26px * var(--seo-space-scale)); 1329 } 1330 1331 .seo-proof-pill { 1332 padding: calc(10px * var(--seo-space-scale)) calc(14px * var(--seo-space-scale)); 1333 border-radius: 999px; 1334 border: 1px solid rgba(255, 255, 255, 0.1); 1335 background: 1336 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.08), rgba(255, 255, 255, 0.03)), 1337 rgba(255, 255, 255, 0.02); 1338 color: rgba(240, 232, 224, 0.9); 1339 font-family: var(--seo-font-label); 1340 font-size: calc(12px * var(--seo-type-label-scale)); 1341 letter-spacing: 0.08em; 1342 text-transform: uppercase; 1343 } 1344 1345 .seo-context-rail { 1346 position: relative; 1347 padding: calc(26px * var(--seo-space-scale)); 1348 border-radius: calc(32px * var(--seo-space-scale)); 1349 border: 1px solid var(--seo-border); 1350 background: 1351 radial-gradient(circle at top right, rgba(var(--seo-cool-rgb), 0.12), transparent 34%), 1352 linear-gradient(180deg, var(--seo-panel-strong), var(--seo-panel-soft)), 1353 rgba(var(--seo-topbar-rgb), 0.56); 1354 box-shadow: 1355 0 36px 110px rgba(2, 6, 14, 0.3), 1356 inset 0 1px 0 rgba(255, 255, 255, 0.08); 1357 backdrop-filter: blur(22px); 1358 overflow: hidden; 1359 } 1360 1361 .seo-context-rail::before { 1362 content: ''; 1363 position: absolute; 1364 inset: -1px; 1365 background: 1366 linear-gradient(135deg, rgba(var(--seo-accent-rgb), 0.18), transparent 36%, transparent 64%, rgba(var(--seo-cool-rgb), 0.16)); 1367 mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); 1368 mask-composite: exclude; 1369 padding: 1px; 1370 opacity: 0.78; 1371 pointer-events: none; 1372 } 1373 1374 .seo-journey-panel, 1375 .seo-platform-panel, 1376 .seo-company-panel { 1377 position: relative; 1378 padding: calc(26px * var(--seo-space-scale)); 1379 border-radius: calc(32px * var(--seo-space-scale)); 1380 border: 1px solid var(--seo-border); 1381 background: 1382 radial-gradient(circle at top right, rgba(var(--seo-cool-rgb), 0.1), transparent 34%), 1383 linear-gradient(180deg, var(--seo-panel-strong), var(--seo-panel-soft)), 1384 rgba(var(--seo-topbar-rgb), 0.56); 1385 box-shadow: 1386 0 30px 88px rgba(2, 6, 14, 0.24), 1387 inset 0 1px 0 rgba(255, 255, 255, 0.08); 1388 backdrop-filter: blur(20px); 1389 } 1390 1391 .seo-journey-panel { 1392 display: grid; 1393 gap: calc(18px * var(--seo-space-scale)); 1394 align-content: start; 1395 } 1396 1397 .seo-journey-stack { 1398 display: grid; 1399 gap: calc(12px * var(--seo-space-scale)); 1400 } 1401 1402 .seo-journey-note { 1403 margin: 0; 1404 color: var(--seo-text-soft); 1405 font-size: calc(0.98rem * var(--seo-type-body-scale)); 1406 line-height: 1.68; 1407 } 1408 1409 .seo-mini-list { 1410 display: grid; 1411 gap: calc(12px * var(--seo-space-scale)); 1412 } 1413 1414 .seo-mini-row { 1415 display: grid; 1416 gap: 6px; 1417 padding: calc(14px * var(--seo-space-scale)); 1418 border-radius: calc(20px * var(--seo-space-scale)); 1419 border: 1px solid rgba(var(--seo-accent-rgb), 0.14); 1420 background: rgba(255, 255, 255, 0.04); 1421 } 1422 1423 .seo-mini-label { 1424 color: rgba(255, 255, 255, 0.62); 1425 font-family: var(--seo-font-label); 1426 font-size: calc(10px * var(--seo-type-micro-scale)); 1427 letter-spacing: 0.14em; 1428 text-transform: uppercase; 1429 } 1430 1431 .seo-mini-value { 1432 color: var(--seo-text-heading); 1433 font-family: var(--seo-font-display); 1434 font-size: calc(1.05rem * var(--seo-type-body-scale)); 1435 line-height: 1.2; 1436 letter-spacing: -0.02em; 1437 } 1438 1439 .seo-platform-panel { 1440 display: grid; 1441 gap: calc(16px * var(--seo-space-scale)); 1442 } 1443 1444 .seo-ledger-grid { 1445 display: grid; 1446 grid-template-columns: repeat(2, minmax(0, 1fr)); 1447 gap: calc(12px * var(--seo-space-scale)); 1448 } 1449 1450 .seo-ledger-item { 1451 padding: calc(16px * var(--seo-space-scale)); 1452 border-radius: calc(20px * var(--seo-space-scale)); 1453 border: 1px solid rgba(var(--seo-accent-rgb), 0.16); 1454 background: rgba(255, 255, 255, 0.04); 1455 display: grid; 1456 gap: 8px; 1457 } 1458 1459 .seo-company-panel { 1460 display: grid; 1461 gap: calc(18px * var(--seo-space-scale)); 1462 align-content: start; 1463 } 1464 1465 .seo-company-points { 1466 display: grid; 1467 gap: calc(12px * var(--seo-space-scale)); 1468 } 1469 1470 .seo-company-point { 1471 display: grid; 1472 gap: 6px; 1473 padding-bottom: calc(12px * var(--seo-space-scale)); 1474 border-bottom: 1px solid rgba(var(--seo-accent-rgb), 0.12); 1475 } 1476 1477 .seo-company-point:last-child { 1478 border-bottom: none; 1479 padding-bottom: 0; 1480 } 1481 1482 .seo-company-cta-stack { 1483 display: flex; 1484 flex-wrap: wrap; 1485 gap: calc(12px * var(--seo-space-scale)); 1486 } 1487 1488 @media (max-width: 1024px) { 1489 .seo-ledger-grid, 1490 .seo-rail-grid { 1491 grid-template-columns: 1fr; 1492 } 1493 } 1494 1495 .seo-rail-header { 1496 display: grid; 1497 gap: calc(8px * var(--seo-space-scale)); 1498 margin-bottom: calc(18px * var(--seo-space-scale)); 1499 position: relative; 1500 z-index: 1; 1501 } 1502 1503 .seo-rail-kicker { 1504 color: rgba(255, 255, 255, 0.66); 1505 font-family: var(--seo-font-label); 1506 font-size: calc(11px * var(--seo-type-micro-scale)); 1507 letter-spacing: 0.14em; 1508 text-transform: uppercase; 1509 } 1510 1511 .seo-rail-title { 1512 margin: 0; 1513 color: var(--seo-text-heading); 1514 font-family: var(--seo-font-display); 1515 font-size: calc(clamp(1.3rem, 1.9vw, 1.72rem) * var(--seo-type-body-scale)); 1516 line-height: 1.1; 1517 letter-spacing: -0.04em; 1518 } 1519 1520 .seo-rail-body { 1521 margin: 0; 1522 color: var(--seo-text-soft); 1523 font-size: calc(0.96rem * var(--seo-type-body-scale)); 1524 line-height: 1.62; 1525 } 1526 1527 .seo-rail-grid { 1528 position: relative; 1529 z-index: 1; 1530 display: grid; 1531 grid-template-columns: repeat(2, minmax(0, 1fr)); 1532 gap: calc(14px * var(--seo-space-scale)); 1533 } 1534 1535 .seo-rail-card { 1536 min-height: calc(160px * var(--seo-space-scale)); 1537 padding: calc(18px * var(--seo-space-scale)); 1538 border-radius: calc(22px * var(--seo-space-scale)); 1539 border: 1px solid var(--seo-border); 1540 background: 1541 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.08), var(--seo-panel-soft)), 1542 var(--seo-panel); 1543 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); 1544 } 1545 1546 .seo-rail-card-title { 1547 display: block; 1548 margin: calc(14px * var(--seo-space-scale)) 0 calc(8px * var(--seo-space-scale)); 1549 color: var(--seo-text-heading); 1550 font-family: var(--seo-font-display); 1551 font-size: calc(1.02rem * var(--seo-type-body-scale)); 1552 line-height: 1.18; 1553 letter-spacing: -0.03em; 1554 } 1555 1556 .seo-rail-card-copy { 1557 margin: 0; 1558 color: var(--seo-text-soft); 1559 font-size: calc(0.92rem * var(--seo-type-body-scale)); 1560 line-height: 1.55; 1561 } 1562 1563 .seo-section { 1564 padding: calc(20px * var(--seo-space-scale)) 0 calc(34px * var(--seo-space-scale)); 1565 } 1566 1567 .seo-section-frame { 1568 padding: calc(28px * var(--seo-space-scale)); 1569 border-radius: calc(34px * var(--seo-space-scale)); 1570 border: 1px solid var(--seo-border); 1571 background: 1572 linear-gradient(180deg, var(--seo-panel-strong), var(--seo-panel-soft)), 1573 rgba(var(--seo-topbar-rgb), 0.5); 1574 box-shadow: 1575 0 28px 100px rgba(2, 6, 14, 0.24), 1576 inset 0 1px 0 rgba(255, 255, 255, 0.06); 1577 backdrop-filter: blur(18px); 1578 } 1579 1580 .seo-section-layout { 1581 display: grid; 1582 grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr); 1583 gap: calc(24px * var(--seo-space-scale)); 1584 align-items: start; 1585 } 1586 1587 .seo-section-layout.reverse .seo-section-aside { 1588 order: -1; 1589 } 1590 1591 .seo-section-head { 1592 max-width: var(--seo-section-copy-width); 1593 } 1594 1595 .seo-section-kicker { 1596 color: rgba(255, 255, 255, 0.68); 1597 font-family: var(--seo-font-label); 1598 font-size: calc(12px * var(--seo-type-label-scale)); 1599 letter-spacing: 0.14em; 1600 text-transform: uppercase; 1601 margin-bottom: calc(12px * var(--seo-space-scale)); 1602 } 1603 1604 .seo-section-title { 1605 margin: 0; 1606 color: var(--seo-text-heading); 1607 font-family: var(--seo-font-display); 1608 font-size: calc(clamp(2.05rem, 3.9vw, 3.55rem) * var(--seo-type-display-scale)); 1609 line-height: 0.98; 1610 letter-spacing: -0.045em; 1611 max-width: 14ch; 1612 } 1613 1614 .seo-section-body { 1615 margin: calc(18px * var(--seo-space-scale)) 0 0; 1616 color: var(--seo-text-muted); 1617 font-size: calc(1rem * var(--seo-type-body-scale)); 1618 line-height: 1.72; 1619 max-width: var(--seo-section-copy-width); 1620 } 1621 1622 .seo-section-quote { 1623 margin-top: calc(18px * var(--seo-space-scale)); 1624 font-family: var(--seo-font-display); 1625 font-size: calc(clamp(1.5rem, 2.85vw, 2.4rem) * var(--seo-type-display-scale)); 1626 line-height: 1.1; 1627 color: rgba(248, 238, 222, 0.96); 1628 max-width: 20ch; 1629 } 1630 1631 .seo-section-aside { 1632 padding: calc(22px * var(--seo-space-scale)); 1633 border-radius: calc(24px * var(--seo-space-scale)); 1634 border: 1px solid var(--seo-border); 1635 background: 1636 linear-gradient(180deg, rgba(var(--seo-cool-rgb), 0.08), var(--seo-panel-soft)), 1637 var(--seo-panel); 1638 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); 1639 } 1640 1641 .seo-callout-kicker { 1642 display: inline-flex; 1643 margin-bottom: calc(12px * var(--seo-space-scale)); 1644 color: rgba(255, 255, 255, 0.66); 1645 font-family: var(--seo-font-label); 1646 font-size: calc(11px * var(--seo-type-micro-scale)); 1647 letter-spacing: 0.14em; 1648 text-transform: uppercase; 1649 } 1650 1651 .seo-callout-text { 1652 margin: 0; 1653 color: var(--seo-text-soft); 1654 line-height: 1.68; 1655 } 1656 1657 .seo-callout-list { 1658 margin: 0; 1659 padding-left: 18px; 1660 color: var(--seo-text-soft); 1661 line-height: 1.72; 1662 } 1663 1664 .seo-callout-list li + li { 1665 margin-top: 10px; 1666 } 1667 1668 .seo-callout-stack { 1669 display: grid; 1670 gap: calc(12px * var(--seo-space-scale)); 1671 } 1672 1673 .seo-callout-item { 1674 display: grid; 1675 gap: 5px; 1676 padding: calc(14px * var(--seo-space-scale)) calc(16px * var(--seo-space-scale)); 1677 border-radius: calc(18px * var(--seo-space-scale)); 1678 border: 1px solid var(--seo-border); 1679 background: var(--seo-panel); 1680 } 1681 1682 .seo-callout-item strong { 1683 font-size: calc(1rem * var(--seo-type-body-scale)); 1684 line-height: 1.25; 1685 letter-spacing: -0.03em; 1686 } 1687 1688 .seo-callout-item span:last-child { 1689 color: var(--seo-text-soft); 1690 font-size: calc(0.92rem * var(--seo-type-body-scale)); 1691 line-height: 1.55; 1692 } 1693 1694 .seo-callout-chip-row { 1695 display: flex; 1696 flex-wrap: wrap; 1697 gap: calc(8px * var(--seo-space-scale)); 1698 margin-top: calc(16px * var(--seo-space-scale)); 1699 } 1700 1701 .seo-callout-chip { 1702 padding: calc(8px * var(--seo-space-scale)) calc(11px * var(--seo-space-scale)); 1703 border-radius: 999px; 1704 border: 1px solid var(--seo-border); 1705 background: var(--seo-panel); 1706 color: rgba(255, 255, 255, 0.86); 1707 font-family: var(--seo-font-label); 1708 font-size: calc(11
1708px * var(--seo-type-micro-scale)); 1709 letter-spacing: 0.08em; 1710 text-transform: uppercase; 1711 } 1712 1713 .seo-code-sample { 1714 margin: 0; 1715 padding: calc(16px * var(--seo-space-scale)) calc(18px * var(--seo-space-scale)); 1716 border-radius: calc(18px * var(--seo-space-scale)); 1717 border: 1px solid rgba(var(--seo-accent-rgb), 0.18); 1718 background: var(--seo-panel); 1719 color: rgba(255, 255, 255, 0.92); 1720 font-family: var(--seo-font-label); 1721 font-size: calc(0.88rem * var(--seo-type-body-scale)); 1722 overflow-x: auto; 1723 white-space: pre-wrap; 1724 word-break: break-word; 1725 } 1726 1727 .seo-card-grid, 1728 .seo-faq-grid, 1729 .seo-footer-grid { 1730 display: grid; 1731 gap: calc(18px * var(--seo-space-scale)); 1732 } 1733 1734 .seo-card-grid { 1735 grid-template-columns: repeat(3, minmax(0, 1fr)); 1736 margin-top: calc(24px * var(--seo-space-scale)); 1737 } 1738 1739 .seo-card-grid.seo-card-grid-four { 1740 grid-template-columns: repeat(4, minmax(0, 1fr)); 1741 } 1742 1743 .seo-card { 1744 position: relative; 1745 padding: calc(22px * var(--seo-space-scale)); 1746 min-height: calc(208px * var(--seo-space-scale)); 1747 border-radius: calc(24px * var(--seo-space-scale)); 1748 border: 1px solid var(--seo-border); 1749 background: 1750 linear-gradient(180deg, var(--seo-panel-strong), var(--seo-panel-soft)), 1751 rgba(255, 255, 255, 0.02); 1752 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); 1753 overflow: hidden; 1754 transition: 1755 transform 260ms var(--seo-ease-standard), 1756 border-color 260ms var(--seo-ease-standard), 1757 background 260ms var(--seo-ease-standard), 1758 box-shadow 260ms var(--seo-ease-standard); 1759 } 1760 1761 .seo-card::before { 1762 content: ''; 1763 position: absolute; 1764 inset: -1px; 1765 background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--seo-accent-rgb), 0.16), transparent 60%); 1766 opacity: 0; 1767 transition: opacity 220ms var(--seo-ease-standard); 1768 pointer-events: none; 1769 } 1770 1771 .seo-card:hover, 1772 .seo-card.is-active { 1773 transform: translateY(-4px); 1774 border-color: rgba(var(--seo-accent-rgb), 0.24); 1775 background: 1776 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.08), var(--seo-panel-strong)), 1777 rgba(255, 255, 255, 0.04); 1778 box-shadow: 1779 0 24px 70px rgba(2, 6, 14, 0.22), 1780 inset 0 1px 0 rgba(255, 255, 255, 0.08); 1781 } 1782 1783 .seo-card:hover::before, 1784 .seo-card.is-active::before { 1785 opacity: 1; 1786 } 1787 1788 .seo-card-label { 1789 display: inline-flex; 1790 margin-bottom: calc(14px * var(--seo-space-scale)); 1791 color: rgba(255, 255, 255, 0.66); 1792 font-family: var(--seo-font-label); 1793 font-size: calc(11px * var(--seo-type-micro-scale)); 1794 letter-spacing: 0.14em; 1795 text-transform: uppercase; 1796 } 1797 1798 .seo-card-title { 1799 margin: 0 0 calc(10px * var(--seo-space-scale)); 1800 color: var(--seo-text-heading); 1801 font-family: var(--seo-font-display); 1802 font-size: calc(1.18rem * var(--seo-type-body-scale)); 1803 line-height: 1.26; 1804 letter-spacing: -0.03em; 1805 } 1806 1807 .seo-card-body { 1808 margin: 0; 1809 color: var(--seo-text-soft); 1810 font-size: calc(0.97rem * var(--seo-type-body-scale)); 1811 line-height: 1.68; 1812 } 1813 1814 .seo-card-meta { 1815 display: block; 1816 margin-top: calc(16px * var(--seo-space-scale)); 1817 color: rgba(255, 255, 255, 0.52); 1818 font-family: var(--seo-font-label); 1819 font-size: calc(11px * var(--seo-type-micro-scale)); 1820 line-height: 1.6; 1821 word-break: break-word; 1822 } 1823 1824 .seo-faq-grid { 1825 grid-template-columns: repeat(3, minmax(0, 1fr)); 1826 margin-top: calc(24px * var(--seo-space-scale)); 1827 } 1828 1829 .seo-faq-card { 1830 min-height: 220px; 1831 } 1832 1833 .seo-footer { 1834 padding-top: calc(12px * var(--seo-space-scale)); 1835 } 1836 1837 .seo-footer-inner { 1838 padding: calc(28px * var(--seo-space-scale)); 1839 border-radius: calc(34px * var(--seo-space-scale)); 1840 border: 1px solid var(--seo-border); 1841 background: 1842 radial-gradient(circle at top left, rgba(var(--seo-accent-rgb), 0.08), transparent 32%), 1843 linear-gradient(180deg, var(--seo-panel-strong), var(--seo-panel-soft)), 1844 rgba(var(--seo-topbar-rgb), 0.48); 1845 box-shadow: 1846 0 30px 110px rgba(2, 6, 14, 0.24), 1847 inset 0 1px 0 rgba(255, 255, 255, 0.06); 1848 backdrop-filter: blur(18px); 1849 } 1850 1851 .seo-footer-grid { 1852 grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); 1853 margin-top: calc(22px * var(--seo-space-scale)); 1854 } 1855 1856 .seo-footer-card { 1857 min-height: calc(152px * var(--seo-space-scale)); 1858 } 1859 1860 .seo-footer-list { 1861 display: grid; 1862 gap: calc(10px * var(--seo-space-scale)); 1863 margin-top: calc(14px * var(--seo-space-scale)); 1864 } 1865 1866 .seo-footer-link { 1867 color: var(--seo-text-soft); 1868 font-size: calc(0.95rem * var(--seo-type-body-scale)); 1869 line-height: 1.5; 1870 transition: color 180ms var(--seo-ease-standard), transform 180ms var(--seo-ease-standard); 1871 } 1872 1873 .seo-footer-link:hover { 1874 color: #fff; 1875 transform: translateX(2px); 1876 } 1877 1878 .seo-shell[data-marketing-audience-theme="sapiens"] { 1879 color: #1a1917; 1880 background: 1881 radial-gradient(960px 560px at 8% 4%, rgba(var(--seo-accent-rgb), 0.2), transparent 62%), 1882 radial-gradient(800px 520px at 92% 14%, rgba(var(--seo-cool-rgb), 0.18), transparent 62%), 1883 linear-gradient(180deg, rgb(var(--seo-shell-top-rgb)) 0%, rgb(var(--seo-shell-mid-rgb)) 48%, rgb(var(--seo-shell-bottom-rgb)) 100%); 1884 } 1885 1886 .seo-shell[data-marketing-audience-theme="sapiens"]::before { 1887 background: 1888 linear-gradient(90deg, rgba(63, 51, 35, 0.028) 1px, transparent 1px), 1889 linear-gradient(rgba(63, 51, 35, 0.028) 1px, transparent 1px), 1890 radial-gradient(circle at center, rgba(99, 81, 54, 0.065
1890) 0 1px, transparent 1px); 1891 opacity: 0.42; 1892 mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88), transparent 92%); 1893 } 1894 1895 .seo-shell[data-marketing-audience-theme="sapiens"]::after { 1896 background: 1897 radial-gradient(circle at center, transparent 34%, rgba(var(--seo-vignette-rgb), 0.08) 74%, rgba(var(--seo-vignette-rgb), 0.22) 100%), 1898 linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 22%, rgba(var(--seo-vignette-rgb), 0.05) 76%, rgba(var(--seo-vignette-rgb), 0.18) 100%); 1899 } 1900 1901 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-aura { 1902 opacity: 0.34; 1903 filter: blur(84px); 1904 } 1905 1906 .seo-shell[data-marketing-audience-theme="sapiens"] .topbar { 1907 background: 1908 linear-gradient(180deg, rgba(250, 246, 239, 0.94), rgba(240, 234, 224, 0.88)), 1909 rgba(var(--seo-accent-rgb), 0.06); 1910 border-bottom-color: rgba(var(--seo-accent-rgb), 0.16); 1911 box-shadow: 0 18px 52px rgba(87, 71, 48, 0.08); 1912 } 1913 1914 .seo-shell[data-marketing-audience-theme="sapiens"] .brand, 1915 .seo-shell[data-marketing-audience-theme="sapiens"] .nav-link, 1916 .seo-shell[data-marketing-audience-theme="sapiens"] .nav-cta { 1917 color: rgba(45, 36, 29, 0.84); 1918 } 1919 1920 .seo-shell[data-marketing-audience-theme="sapiens"] .brand-mark { 1921 border-color: transparent; 1922 background: transparent; 1923 box-shadow: none; 1924 } 1925 1926 .seo-shell[data-marketing-audience-theme="sapiens"] .nav-link:hover { 1927 color: #1a1917; 1928 } 1929 1930 .seo-shell[data-marketing-audience-theme="sapiens"] .nav-cta { 1931 border-color: rgba(var(--seo-accent-rgb), 0.18); 1932 background: 1933 linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(244, 237, 226, 0.92)), 1934 rgba(var(--seo-accent-rgb), 0.08); 1935 box-shadow: 1936 inset 0 1px 0 rgba(255, 255, 255, 0.98), 1937 0 14px 30px rgba(87, 71, 48, 0.08); 1938 } 1939 1940 .seo-shell[data-marketing-audience-theme="sapiens"] .nav-cta:hover { 1941 border-color: rgba(var(--seo-accent-rgb), 0.28); 1942 background: 1943 linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(246, 239, 228, 0.96)), 1944 rgba(var(--seo-accent-rgb), 0.12); 1945 box-shadow: 1946 inset 0 1px 0 rgba(255, 255, 255, 0.98), 1947 0 18px 36px rgba(87, 71, 48, 0.11); 1948 } 1949 1950 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-eyebrow, 1951 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-proof-pill, 1952 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-chip, 1953 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-item, 1954 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-code-sample { 1955 color: rgba(51, 43, 35, 0.84); 1956 } 1957 1958 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-eyebrow { 1959 border-color: rgba(var(--seo-accent-rgb), 0.22); 1960 background: 1961 linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(242, 236, 226, 0.88)), 1962 rgba(var(--seo-accent-rgb), 0.06); 1963 box-shadow: 1964 inset 0 1px 0 rgba(255, 255, 255, 0.98), 1965 0 14px 34px rgba(87, 71, 48, 0.08); 1966 } 1967 1968 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-hero-title, 1969 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-title, 1970 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-rail-title, 1971 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card-title { 1972 letter-spacing: -0.035em; 1973 line-height: 0.96; 1974 } 1975 1976 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-hero-body, 1977 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-body, 1978 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-rail-body, 1979 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card-body, 1980 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-text, 1981 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-list { 1982 color: rgba(76, 71, 64, 0.9); 1983 } 1984 1985 .seo-shell[data-marketing-audience-theme="sapiens"] .cta, 1986 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-context-rail, 1987 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-frame, 1988 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-footer-inner, 1989 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card, 1990 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-rail-card, 1991 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-aside { 1992 box-shadow: 1993 inset 0 1px 0 rgba(255, 255, 255, 0.98), 1994 0 22px 64px rgba(87, 71, 48, 0.1); 1995 } 1996 1997 .seo-shell[data-marketing-audience-theme="sapiens"] .cta, 1998 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-context-rail, 1999 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-frame, 2000 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-footer-inner { 2001 border-radius: calc(26px * var(--seo-space-scale)); 2002 } 2003 2004 .seo-shell[data-marketing-audience-theme="sapiens"] .cta { 2005 border-color: rgba(var(--seo-accent-rgb), 0.16); 2006 color: rgba(45, 36, 29, 0.92); 2007 text-shadow: none; 2008 background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(244, 237, 226, 0.88)); 2009 } 2010 2011 .seo-shell[data-marketing-audience-theme="sapiens"] .cta::after { 2012 background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.62), transparent 72%); 2013 } 2014 2015 .seo-shell[data-marketing-audience-theme="sapiens"] .cta-primary { 2016 border-color: rgba(var(--seo-accent-rgb), 0.28); 2017 background: 2018 linear-gradient(180deg, rgba(250, 241, 224, 0.98), rgba(var(--seo-accent-rgb), 0.7)), 2019 rgba(var(--seo-accent-rgb), 0.16); 2020 color: #241912; 2021 box-shadow: 2022 inset 0 1px 0 rgba(255, 255, 255, 0.98), 2023 0 22px 58px rgba(176, 136, 74, 0.18); 2024 } 2025 2026 .seo-shell[data-marketing-audience-theme="sapiens"] .cta-secondary { 2027 border-color: rgba(var(--seo-cool-rgb), 0.18); 2028 background: 2029 linear-gradient(180deg, rgba(250, 252, 251, 0.94), rgba(232, 241, 241, 0.88)), 2030 rgba(var(--seo-cool-rgb), 0.08); 2031 color: #273033; 2032 } 2033 2034 .seo-shell[data-marketing-audience-theme="sapiens"] .cta-ghost { 2035 background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 237, 226, 0.7)); 2036 color: rgba(61, 54, 47, 0.84); 2037 } 2038 2039 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-proof-pill, 2040 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-chip, 2041 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-item, 2042 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-code-sample { 2043 border-color: rgba(var(--seo-accent-rgb), 0.16); 2044 background: 2045 linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(244, 237, 226, 0.76)), 2046 rgba(var(--seo-accent-rgb), 0.04); 2047 } 2048 2049 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-context-rail, 2050 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-frame, 2051 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-footer-inner { 2052 border-color: rgba(var(--seo-accent-rgb), 0.18); 2053 background: 2054 radial-gradient(circle at top right, rgba(var(--seo-cool-rgb), 0.12), transparent 34%), 2055 linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(244, 237, 226, 0.84)), 2056 rgba(255, 255, 255, 0.78); 2057 } 2058 2059 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-context-rail::before { 2060 background: 2061 linear-gradient(135deg, rgba(var(--seo-accent-rgb), 0.16), transparent 34%, transparent 66%, rgba(var(--seo-cool-rgb), 0.16)); 2062 opacity: 0.54; 2063 } 2064 2065 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-rail-kicker, 2066 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-kicker, 2067 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-callout-kicker, 2068 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card-label { 2069 color: rgba(89, 74, 54, 0.68); 2070 } 2071 2072 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card, 2073 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-rail-card, 2074 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-section-aside { 2075 border-color: rgba(var(--seo-accent-rgb), 0.14); 2076 background: 2077 linear-gradient(180deg, rgba(255, 252, 248, 0.92), rgba(247, 242, 234, 0.82)), 2078 rgba(255, 255, 255, 0.78); 2079 } 2080 2081 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card::before {
2082 background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--seo-accent-rgb), 0.11), transparent 62%); 2083 } 2084 2085 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card:hover, 2086 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card.is-active { 2087 border-color: rgba(var(--seo-accent-rgb), 0.24); 2088 background: 2089 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.08), rgba(255, 249, 241, 0.94)), 2090 rgba(255, 255, 255, 0.84); 2091 box-shadow: 2092 inset 0 1px 0 rgba(255, 255, 255, 0.98), 2093 0 26px 72px rgba(87, 71, 48, 0.12); 2094 } 2095 2096 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-card-meta, 2097 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-hero-note, 2098 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-footer-link { 2099 color: rgba(92, 86, 79, 0.8); 2100 } 2101 2102 .seo-shell[data-marketing-audience-theme="sapiens"] .seo-footer-link:hover { 2103 color: #1a1917; 2104 } 2105 2106 .seo-shell[data-marketing-audience-theme="ai"] { 2107 background: 2108 radial-gradient(980px 620px at 10% 6%, rgba(var(--seo-accent-rgb), 0.24), transparent 64%), 2109 radial-gradient(820px 540px at 88% 14%, rgba(var(--seo-cool-rgb), 0.18), transparent 60%), 2110 linear-gradient(180deg, rgb(var(--seo-shell-top-rgb)) 0%, rgb(var(--seo-shell-mid-rgb)) 46%, rgb(var(--seo-shell-bottom-rgb)) 100%); 2111 } 2112 2113 .seo-shell[data-marketing-audience-theme="ai"] .seo-aura { 2114 filter: blur(94px); 2115 opacity: 0.56; 2116 } 2117 2118 .seo-shell[data-marketing-audience-theme="ai"] .seo-aura-gold { 2119 background: rgba(var(--seo-accent-rgb), 0.22); 2120 } 2121 2122 .seo-shell[data-marketing-audience-theme="ai"] .seo-aura-blue { 2123 background: rgba(var(--seo-cool-rgb), 0.2); 2124 } 2125 2126 .seo-shell[data-marketing-audience-theme="ai"] .topbar { 2127 border-bottom-color: rgba(var(--seo-cool-rgb), 0.14); 2128 box-shadow: 0 18px 54px rgba(3, 8, 18, 0.38); 2129 } 2130 2131 .seo-shell[data-marketing-audience-theme="ai"] .brand-mark { 2132 border-color: transparent; 2133 background: transparent; 2134 box-shadow: none; 2135 } 2136 2137 .seo-shell[data-marketing-audience-theme="ai"] .nav-link { 2138 color: rgba(220, 229, 255, 0.74); 2139 } 2140 2141 .seo-shell[data-marketing-audience-theme="ai"] .nav-link:hover { 2142 color: rgba(255, 255, 255, 0.98); 2143 text-shadow: 0 0 28px rgba(var(--seo-cool-rgb), 0.22); 2144 } 2145 2146 .seo-shell[data-marketing-audience-theme="ai"] .nav-cta, 2147 .seo-shell[data-marketing-audience-theme="ai"] .cta { 2148 border-radius: calc(18px * var(--seo-space-scale)); 2149 } 2150 2151 .seo-shell[data-marketing-audience-theme="ai"] .nav-cta { 2152 border-color: rgba(var(--seo-accent-rgb), 0.26); 2153 background: 2154 linear-gradient(135deg, rgba(24, 31, 59, 0.98), rgba(26, 39, 82, 0.92)), 2155 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.14), rgba(var(--seo-cool-rgb), 0.08)); 2156 box-shadow: 2157 inset 0 1px 0 rgba(255, 255, 255, 0.12), 2158 0 18px 42px rgba(3, 8, 18, 0.3); 2159 } 2160 2161 .seo-shell[data-marketing-audience-theme="ai"] .seo-eyebrow { 2162 border-color: rgba(var(--seo-cool-rgb), 0.18); 2163 background: 2164 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.15), rgba(var(--seo-cool-rgb), 0.08)), 2165 rgba(15, 21, 40, 0.68); 2166 box-shadow: 2167 inset 0 1px 0 rgba(255, 255, 255, 0.12), 2168 0 16px 40px rgba(3, 8, 18, 0.18); 2169 } 2170 2171 .seo-shell[data-marketing-audience-theme="ai"] .seo-hero-title { 2172 line-height: 0.98; 2173 letter-spacing: -0.028em; 2174 } 2175 2176 .seo-shell[data-marketing-audience-theme="ai"] .seo-context-rail, 2177 .seo-shell[data-marketing-audience-theme="ai"] .seo-section-frame, 2178 .seo-shell[data-marketing-audience-theme="ai"] .seo-footer-inner { 2179 border-radius: calc(28px * var(--seo-space-scale)); 2180 border-color: rgba(var(--seo-cool-rgb), 0.16); 2181 background: 2182 radial-gradient(circle at top right, rgba(var(--seo-accent-rgb), 0.14), transparent 30%), 2183 linear-gradient(180deg, rgba(18, 23, 42, 0.88), rgba(12, 16, 31, 0.82)), 2184 rgba(7, 11, 22, 0.74); 2185 box-shadow: 2186 0 32px 104px rgba(3, 8, 18, 0.36), 2187 inset 0 1px 0 rgba(255, 255, 255, 0.08); 2188 } 2189 2190 .seo-shell[data-marketing-audience-theme="ai"] .seo-context-rail::before { 2191 background: 2192 linear-gradient(135deg, rgba(var(--seo-accent-rgb), 0.24), transparent 30%, transparent 70%, rgba(var(--seo-cool-rgb), 0.22)); 2193 opacity: 0.82; 2194 } 2195 2196 .seo-shell[data-marketing-audience-theme="ai"] .seo-rail-card, 2197 .seo-shell[data-marketing-audience-theme="ai"] .seo-card, 2198 .seo-shell[data-marketing-audience-theme="ai"] .seo-section-aside { 2199 border-color: rgba(var(--seo-cool-rgb), 0.12); 2200 border-radius: calc(20px * var(--seo-space-scale)); 2201 background: 2202 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.08), rgba(15, 21, 40, 0.86)), 2203 rgba(10, 14, 28, 0.74); 2204 box-shadow: 2205 inset 0 1px 0 rgba(255, 255, 255, 0.08), 2206 0 20px 48px rgba(3, 8, 18, 0.18); 2207 } 2208 2209 .seo-shell[data-marketing-audience-theme="ai"] .seo-card::before {
2210 background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--seo-cool-rgb), 0.16), transparent 60%); 2211 } 2212 2213 .seo-shell[data-marketing-audience-theme="ai"] .seo-card:hover, 2214 .seo-shell[data-marketing-audience-theme="ai"] .seo-card.is-active { 2215 border-color: rgba(var(--seo-accent-rgb), 0.3); 2216 background: 2217 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.12), rgba(var(--seo-cool-rgb), 0.06)), 2218 rgba(12, 18, 34, 0.9); 2219 box-shadow: 2220 0 28px 72px rgba(3, 8, 18, 0.32), 2221 inset 0 1px 0 rgba(255, 255, 255, 0.1); 2222 } 2223 2224 .seo-shell[data-marketing-audience-theme="pro"] { 2225 background: 2226 radial-gradient(920px 540px at 8% 4%, rgba(var(--seo-accent-rgb), 0.16), transparent 62%), 2227 radial-gradient(760px 460px at 90% 16%, rgba(var(--seo-cool-rgb), 0.12), transparent 62%), 2228 linear-gradient(180deg, rgb(var(--seo-shell-top-rgb)) 0%, rgb(var(--seo-shell-mid-rgb)) 48%, rgb(var(--seo-shell-bottom-rgb)) 100%); 2229 } 2230 2231 .seo-shell[data-marketing-audience-theme="pro"] .seo-aura { 2232 opacity: 0.46; 2233 filter: blur(92px); 2234 } 2235 2236 .seo-shell[data-marketing-audience-theme="pro"] .topbar { 2237 background: 2238 linear-gradient(180deg, rgba(12, 14, 18, 0.92), rgba(9, 11, 14, 0.8)), 2239 rgba(var(--seo-accent-rgb), 0.04); 2240 border-bottom-color: rgba(var(--seo-accent-rgb), 0.16); 2241 box-shadow: 0 18px 56px rgba(1, 4, 7, 0.34); 2242 } 2243 2244 .seo-shell[data-marketing-audience-theme="pro"] .brand-mark { 2245 border-radius: 10px; 2246 border-color: transparent; 2247 background: transparent; 2248 box-shadow: none; 2249 } 2250 2251 .seo-shell[data-marketing-audience-theme="pro"] .nav-link { 2252 color: rgba(241, 235, 227, 0.72); 2253 } 2254 2255 .seo-shell[data-marketing-audience-theme="pro"] .nav-link:hover { 2256 color: rgba(247, 240, 234, 0.98); 2257 } 2258 2259 .seo-shell[data-marketing-audience-theme="pro"] .nav-cta, 2260 .seo-shell[data-marketing-audience-theme="pro"] .cta { 2261 border-radius: calc(22px * var(--seo-space-scale)); 2262 } 2263 2264 .seo-shell[data-marketing-audience-theme="pro"] .nav-cta { 2265 border-color: rgba(var(--seo-accent-rgb), 0.22); 2266 background: 2267 linear-gradient(180deg, rgba(36, 31, 27, 0.92), rgba(19, 17, 15, 0.92)), 2268 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.12), rgba(255, 255, 255, 0.03)); 2269 } 2270 2271 .seo-shell[data-marketing-audience-theme="pro"] .seo-eyebrow { 2272 border-color: rgba(var(--seo-accent-rgb), 0.18); 2273 background: 2274 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.08), rgba(255, 255, 255, 0.02)), 2275 rgba(17, 16, 14, 0.7); 2276 color: rgba(241, 235, 227, 0.9); 2277 } 2278 2279 .seo-shell[data-marketing-audience-theme="pro"] .seo-hero-title, 2280 .seo-shell[data-marketing-audience-theme="pro"] .seo-section-title, 2281 .seo-shell[data-marketing-audience-theme="pro"] .seo-rail-title, 2282 .seo-shell[data-marketing-audience-theme="pro"] .seo-card-title { 2283 letter-spacing: -0.024em; 2284 line-height: 1.02; 2285 } 2286 2287 .seo-shell[data-marketing-audience-theme="pro"] .cta-primary { 2288 background: 2289 linear-gradient(180deg, rgba(242, 227, 199, 0.96), rgba(var(--seo-accent-rgb), 0.82)), 2290 rgba(var(--seo-accent-rgb), 0.14); 2291 box-shadow: 2292 inset 0 1px 0 rgba(255, 255, 255, 0.2), 2293 0 26px 70px rgba(var(--seo-accent-rgb), 0.18); 2294 } 2295 2296 .seo-shell[data-marketing-audience-theme="pro"] .cta-secondary { 2297 border-color: rgba(var(--seo-cool-rgb), 0.2); 2298 background: 2299 linear-gradient(135deg, rgba(var(--seo-cool-rgb), 0.16), rgba(24, 27, 25, 0.92) 58%, rgba(12, 14, 15, 0.98) 100%), 2300 rgba(var(--seo-accent-rgb), 0.04); 2301 } 2302 2303 .seo-shell[data-marketing-audience-theme="pro"] .seo-context-rail, 2304 .seo-shell[data-marketing-audience-theme="pro"] .seo-section-frame, 2305 .seo-shell[data-marketing-audience-theme="pro"] .seo-footer-inner { 2306 border-radius: calc(30px * var(--seo-space-scale)); 2307 border-color: rgba(var(--seo-accent-rgb), 0.14); 2308 background: 2309 radial-gradient(circle at top right, rgba(var(--seo-accent-rgb), 0.12), transparent 32%), 2310 linear-gradient(180deg, rgba(24, 22, 20, 0.9), rgba(12, 13, 14, 0.88)), 2311 rgba(7, 10, 12, 0.74); 2312 box-shadow: 2313 0 34px 108px rgba(1, 4, 7, 0.34), 2314 inset 0 1px 0 rgba(255, 255, 255, 0.06); 2315 } 2316 2317 .seo-shell[data-marketing-audience-theme="pro"] .seo-context-rail::before { 2318 background: 2319 linear-gradient(135deg, rgba(var(--seo-accent-rgb), 0.18), transparent 34%, transparent 66%, rgba(var(--seo-cool-rgb), 0.14)); 2320 } 2321 2322 .seo-shell[data-marketing-audience-theme="pro"] .seo-rail-card, 2323 .seo-shell[data-marketing-audience-theme="pro"] .seo-card, 2324 .seo-shell[data-marketing-audience-theme="pro"] .seo-section-aside, 2325 .seo-shell[data-marketing-audience-theme="pro"] .seo-callout-item { 2326 border-color: rgba(var(--seo-accent-rgb), 0.12); 2327 background: 2328 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.06), rgba(16, 18, 19, 0.92)), 2329 rgba(9, 11, 12, 0.76); 2330 box-shadow: 2331 inset 0 1px 0 rgba(255, 255, 255, 0.06), 2332 0 18px 46px rgba(1, 4, 7, 0.16); 2333 } 2334 2335 .seo-shell[data-marketing-audience-theme="pro"] .seo-card::before { 2336 background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--seo-accent-rgb), 0.14), transparent 60%); 2337 } 2338 2339 .seo-shell[data-marketing-audience-theme="pro"] .seo-card:hover, 2340 .seo-shell[data-marketing-audience-theme="pro"] .seo-card.is-active { 2341 border-color: rgba(var(--seo-accent-rgb), 0.24); 2342 background: 2343 linear-gradient(180deg, rgba(var(--seo-accent-rgb), 0.1), rgba(21, 19, 17, 0.94)), 2344 rgba(9, 11, 12, 0.84); 2345 box-shadow: 2346 0 24px 68px rgba(1, 4, 7, 0.28), 2347 inset 0 1px 0 rgba(255, 255, 255, 0.08); 2348 } 2349 2350 .seo-reveal { 2351 opacity: 0; 2352 transform: translateY(34px); 2353 transition: 2354 opacity 620ms ease-out, 2355 transform 620ms ease-out; 2356 } 2357 2358 .seo-reveal.is-visible { 2359 opacity: 1; 2360 transform: translateY(0); 2361 } 2362
2363 @keyframes seo-fade-up { 2364 from { 2365 opacity: 0; 2366 transform: translateY(26px); 2367 } 2368 to { 2369 opacity: 1; 2370 transform: translateY(0); 2371 } 2372 } 2373 2374 @keyframes seo-drift { 2375 0%, 100% { 2376 transform: translate3d(0, 0, 0) scale(1); 2377 } 2378 50% { 2379 transform: translate3d(18px, -16px, 0) scale(1.05); 2380 } 2381 } 2382 2383 @keyframes seo-shimmer { 2384 0% { 2385 transform: translateX(-120%); 2386 } 2387 100% { 2388 transform: translateX(120%); 2389 } 2390 } 2391 2392 .hidden-fallback-panel { 2393 max-width: 720px; 2394 padding: 28px; 2395 border-radius: 28px; 2396 border: 1px solid rgba(255, 255, 255, 0.12); 2397 background: rgba(255, 255, 255, 0.04); 2398 } 2399 2400 .hero { 2401 padding: 44px 0 46px; 2402 } 2403 2404 .hero-grid { 2405 display: grid; 2406 grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr); 2407 gap: 28px; 2408 align-items: center; 2409 } 2410 2411 .eyebrow { 2412 display: inline-flex; 2413 gap: 10px; 2414 align-items: center; 2415 padding: 10px 14px; 2416 border-radius: 999px; 2417 background: rgba(255, 255, 255, 0.06); 2418 border: 1px solid rgba(255, 255, 255, 0.12); 2419 color: rgba(255, 255, 255, 0.82); 2420 font-size: 12px; 2421 letter-spacing: 0.14em; 2422 text-transform: uppercase; 2423 margin-bottom: 20px; 2424 width: fit-content; 2425 } 2426 2427 .hero h1 { 2428 margin: 0; 2429 font-family: 'Space Grotesk', 'Google Sans Text', sans-serif; 2430 font-size: clamp(3.3rem, 7.6vw, 6.8rem); 2431 line-height: 0.94; 2432 letter-spacing: -0.05em; 2433 } 2434 2435 .hero-body { 2436 margin: 22px 0 0; 2437 max-width: 700px; 2438 color: var(--mk-muted); 2439 font-size: clamp(1.02rem, 2vw, 1.28rem); 2440 line-height: 1.65; 2441 } 2442 2443 .hero-note { 2444 margin: 20px 0 0; 2445 color: rgba(255, 255, 255, 0.58); 2446 font-size: 0.98rem; 2447 line-height: 1.6; 2448 max-width: 640px; 2449 } 2450 2451 .cta-row { 2452 display: flex; 2453 flex-wrap: wrap; 2454 gap: 14px; 2455 margin-top: 30px; 2456 } 2457 2458 .cta { 2459 position: relative; 2460 overflow: hidden; 2461 min-height: 48px; 2462 padding: 0 20px; 2463 border-radius: 999px; 2464 border: 1px solid transparent; 2465 display: inline-flex; 2466 align-items: center; 2467 justify-content: center; 2468 gap: 10px; 2469 font-size: 13px; 2470 font-weight: 700; 2471 letter-spacing: 0.08em; 2472 text-transform: uppercase; 2473 transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; 2474 } 2475 2476 .cta::after { 2477 content: ''; 2478 position: absolute; 2479 inset: 0; 2480 background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.25), transparent 70%); 2481 transform: translateX(-120%); 2482 animation: shimmer 6s linear 1 both; 2483 pointer-events: none; 2484 } 2485 2486 .cta:hover { 2487 transform: translateY(-2px); 2488 } 2489 2490 .cta-primary { 2491 background: linear-gradient(135deg, rgba(214, 178, 124, 0.92), rgba(236, 214, 178, 0.92)); 2492 color: #140d07; 2493 box-shadow: 0 20px 60px rgba(214, 178, 124, 0.22); 2494 } 2495 2496 .cta-secondary { 2497 border-color: rgba(255, 255, 255, 0.16); 2498 background: rgba(255, 255, 255, 0.08); 2499 } 2500 2501 .cta-ghost { 2502 border-color: rgba(255, 255, 255, 0.12); 2503 background: rgba(255, 255, 255, 0.03); 2504 color: var(--mk-muted); 2505 } 2506 2507 .hero-proof { 2508 margin-top: 22px; 2509 display: flex; 2510 flex-wrap: wrap; 2511 gap: 10px; 2512 } 2513 2514 .return-panel { 2515 margin-top: 22px; 2516 padding: 18px; 2517 display: grid; 2518 grid-template-columns: minmax(0, 1fr) auto; 2519 gap: 18px; 2520 align-items: center; 2521 border-radius: 24px; 2522 border: 1px solid rgba(255, 255, 255, 0.12); 2523 background: 2524 linear-gradient(135deg, rgba(214, 178, 124, 0.12), rgba(137, 184, 255, 0.08)), 2525 rgba(255, 255, 255, 0.04); 2526 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); 2527 } 2528 2529 .return-kicker { 2530 color: rgba(255, 255, 255, 0.62); 2531 font-size: 12px; 2532 letter-spacing: 0.14em; 2533 text-transform: uppercase; 2534 } 2535 2536 .return-title { 2537 margin: 6px 0 0; 2538 font-size: 1.1rem; 2539 line-height: 1.35; 2540 } 2541 2542 .return-body { 2543 margin: 8px 0 0; 2544 color: var(--mk-muted); 2545 font-size: 0.96rem; 2546 line-height: 1.6; 2547 } 2548 2549 .return-link { 2550 min-height: 46px; 2551 padding: 0 18px; 2552 border-radius: 999px; 2553 background: rgba(255, 255, 255, 0.08); 2554 border: 1px solid rgba(255, 255, 255, 0.16); 2555 display: inline-flex; 2556 align-items: center; 2557 justify-content: center; 2558 font-size: 13px; 2559 font-weight: 700; 2560 letter-spacing: 0.08em; 2561 text-transform: uppercase; 2562 white-space: nowrap; 2563 } 2564 2565 .proof-pill { 2566 padding: 10px 14px; 2567 border-radius: 999px; 2568 background: rgba(255, 255, 255, 0.04); 2569 border: 1px solid rgba(255, 255, 255, 0.1); 2570 color: rgba(255, 255, 255, 0.76); 2571 font-size: 12px; 2572 letter-spacing: 0.06em; 2573 text-transform: uppercase; 2574 } 2575 2576 .hero-scene { 2577 position: relative; 2578 min-height: 620px; 2579 border-radius: 34px; 2580 border: 1px solid rgba(255, 255, 255, 0.14); 2581 background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); 2582 box-shadow: var(--mk-shadow); 2583 overflow: hidden; 2584 backdrop-filter: blur(24px); 2585 } 2586 2587 .hero-scene::before { 2588 content: ''; 2589 position: absolute; 2590 inset: 0; 2591 background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%, rgba(255, 255, 255, 0.03)); 2592 pointer-events: none; 2593 } 2594 2595 .scene-card, 2596 .floating-card, 2597 .metric-card, 2598 .section-card,
2599 .footer-card { 2600 border-radius: 24px; 2601 border: 1px solid rgba(255, 255, 255, 0.14); 2602 background: rgba(8, 11, 18, 0.58); 2603 backdrop-filter: blur(18px); 2604 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 2605 } 2606 2607 .scene-card { 2608 position: absolute; 2609 padding: 18px; 2610 min-width: 170px; 2611 max-width: 220px; 2612 } 2613 2614 .scene-chip { 2615 display: inline-flex; 2616 margin-bottom: 10px; 2617 padding: 6px 10px; 2618 border-radius: 999px; 2619 font-size: 10px; 2620 letter-spacing: 0.14em; 2621 text-transform: uppercase; 2622 color: rgba(255, 255, 255, 0.78); 2623 background: rgba(255, 255, 255, 0.08); 2624 border: 1px solid rgba(255, 255, 255, 0.1); 2625 } 2626 2627 .scene-title { 2628 display: block; 2629 font-size: 1rem; 2630 font-weight: 700; 2631 line-height: 1.3; 2632 } 2633 2634 .scene-meta { 2635 display: block; 2636 margin-top: 8px; 2637 color: rgba(255, 255, 255, 0.62); 2638 font-size: 12px; 2639 line-height: 1.5; 2640 } 2641 2642 .section { 2643 padding: 22px 0 82px; 2644 } 2645 2646 .section-head { 2647 max-width: 760px; 2648 margin-bottom: 28px; 2649 } 2650 2651 .section-kicker { 2652 color: rgba(255, 255, 255, 0.72); 2653 font-size: 12px; 2654 letter-spacing: 0.14em; 2655 text-transform: uppercase; 2656 margin-bottom: 12px; 2657 } 2658 2659 .section-title { 2660 margin: 0; 2661 font-size: clamp(2rem, 4vw, 3.8rem); 2662 line-height: 0.98; 2663 letter-spacing: -0.04em; 2664 } 2665 2666 .section-body { 2667 margin: 18px 0 0; 2668 color: var(--mk-muted); 2669 font-size: 1rem; 2670 line-height: 1.75; 2671 } 2672 2673 .stats-grid, 2674 .card-grid, 2675 .faq-grid, 2676 .footer-grid { 2677 display: grid; 2678 gap: 18px; 2679 } 2680 2681 .stats-grid { 2682 grid-template-columns: repeat(4, minmax(0, 1fr)); 2683 padding-bottom: 18px; 2684 } 2685 2686 .metric-card { 2687 padding: 22px; 2688 min-height: 180px; 2689 } 2690 2691 .metric-value { 2692 display: block; 2693 font-size: 1.6rem; 2694 line-height: 1; 2695 letter-spacing: -0.04em; 2696 margin-bottom: 14px; 2697 } 2698 2699 .metric-label { 2700 display: block; 2701 font-size: 0.92rem; 2702 font-weight: 700; 2703 margin-bottom: 10px; 2704 } 2705 2706 .metric-note { 2707 color: var(--mk-muted); 2708 font-size: 0.95rem; 2709 line-height: 1.6; 2710 } 2711 2712 .card-grid { 2713 grid-template-columns: repeat(3, minmax(0, 1fr)); 2714 } 2715 2716 .card-grid.card-grid-four { 2717 grid-template-columns: repeat(4, minmax(0, 1fr)); 2718 } 2719 2720 .section-card { 2721 padding: 22px; 2722 min-height: 210px; 2723 } 2724 2725 .card-label { 2726 display: inline-flex; 2727 margin-bottom: 14px; 2728 color: rgba(255, 255, 255, 0.64); 2729 font-size: 11px; 2730 letter-spacing: 0.14em; 2731 text-transform: uppercase; 2732 } 2733 2734 .card-title { 2735 margin: 0 0 10px; 2736 font-size: 1.18rem; 2737 line-height: 1.24; 2738 } 2739 2740 .card-body { 2741 color: var(--mk-muted); 2742 font-size: 0.97rem; 2743 line-height: 1.68; 2744 margin: 0; 2745 } 2746 2747 .card-meta { 2748 display: block; 2749 margin-top: 16px; 2750 color: rgba(255, 255, 255, 0.52); 2751 font-family: 'IBM Plex Mono', monospace; 2752 font-size: 11px; 2753 line-height: 1.6; 2754 word-break: break-word; 2755 } 2756 2757 .copy-grid { 2758 display: grid; 2759 grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); 2760 gap: 20px; 2761 align-items: start; 2762 } 2763 2764 .copy-block { 2765 padding: 26px; 2766 border-radius: 28px; 2767 border: 1px solid rgba(255, 255, 255, 0.12); 2768 background: rgba(255, 255, 255, 0.04); 2769 } 2770 2771 .copy-block ul { 2772 margin: 18px 0 0; 2773 padding-left: 18px; 2774 color: var(--mk-muted); 2775 line-height: 1.7; 2776 } 2777 2778 .quote { 2779 margin-top: 18px; 2780 font-family: 'Cormorant Garamond', serif; 2781 font-size: clamp(1.6rem, 3vw, 2.7rem); 2782 line-height: 1.08; 2783 color: rgba(248, 238, 222, 0.94); 2784 } 2785 2786 .code-sample { 2787 margin-top: 18px; 2788 padding: 16px 18px; 2789 border-radius: 18px; 2790 border: 1px solid rgba(255, 255, 255, 0.12); 2791 background: rgba(255, 255, 255, 0.04); 2792 font-family: 'IBM Plex Mono', monospace; 2793 font-size: 0.88rem; 2794 color: rgba(255, 255, 255, 0.9); 2795 overflow-x: auto; 2796 } 2797 2798 .faq-grid { 2799 grid-template-columns: repeat(3, minmax(0, 1fr)); 2800 } 2801 2802 .faq-card { 2803 padding: 22px; 2804 border-radius: 24px; 2805 border: 1px solid rgba(255, 255, 255, 0.12); 2806 background: rgba(255, 255, 255, 0.04); 2807 } 2808 2809 .faq-card h3 { 2810 margin: 0 0 12px; 2811 font-size: 1rem; 2812 line-height: 1.35; 2813 } 2814 2815 .faq-card p { 2816 margin: 0; 2817 color: var(--mk-muted); 2818 line-height: 1.72; 2819 } 2820 2821 .footer { 2822 padding: 0 0 46px; 2823 } 2824 2825 .footer-inner { 2826 padding: 28px; 2827 border-radius: 30px; 2828 border: 1px solid rgba(255, 255, 255, 0.12); 2829 background: rgba(255, 255, 255, 0.04); 2830 } 2831 2832 .footer-grid { 2833 grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); 2834 margin-top: 22px; 2835 } 2836 2837 .footer-card { 2838 padding: 18px; 2839 min-height: 150px; 2840 } 2841 2842 .footer-list { 2843 display: grid; 2844 gap: 10px; 2845 margin-top: 14px; 2846 } 2847 2848 .footer-list a { 2849 color: var(--mk-muted); 2850 font-size: 0.95rem; 2851 } 2852 2853 .variant-tabs { 2854 display: flex; 2855 flex-wrap: wrap; 2856 gap: 12px; 2857 margin-bottom: 22px; 2858 } 2859 2860 .variant-tab { 2861 display: inline-flex; 2862 align-items: center; 2863 gap: 10px; 2864 padding: 11px 14px; 2865 border-radius: 999px; 2866 border: 1px solid rgba(255, 255, 255, 0.12); 2867 background: rgba(255, 255, 255, 0.04); 2868 color: var(--mk-muted); 2869 font-size: 12px; 2870 letter-spacing: 0.08em; 2871 text-transform: uppercase; 2872 } 2873 2874 .variant-tab.current { 2875 color: #101118; 2876 background: linear-gradient(135deg, rgba(214, 178, 124, 0.92), rgba(236, 214, 178, 0.92)); 2877 } 2878 2879 .scene-cosmos { 2880 background: 2881 radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 38%), 2882 linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); 2883 } 2884 2885 .scene-cosmos .starfield { 2886 position: absolute; 2887 inset: 0; 2888 background-image: 2889 radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.64) 0 1px, transparent 1px), 2890 radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1px), 2891 radial-gradient(circle at 24% 76%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px), 2892 radial-gradient(circle at 84% 62%, rgba(255, 255, 255, 0.46) 0 1px, transparent 1px), 2893 radial-gradient(circle at 52% 28%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px), 2894 radial-gradient(circle at 60% 82%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px); 2895 opacity: 0.7; 2896 } 2897 2898 .scene-cosmos .aura { 2899 position: absolute; 2900 border-radius: 999px; 2901 filter: blur(64px); 2902 opacity: 0.6; 2903 animation: drift 16s ease-in-out 2 both; 2904 } 2905 2906 .scene-cosmos .aura-a { 2907 width: 240px; 2908 height: 180px; 2909 background: rgba(214, 178, 124, 0.2); 2910 top: 12%; 2911 left: 10%; 2912 } 2913 2914 .scene-cosmos .aura-b { 2915 width: 220px; 2916 height: 170px; 2917 background: rgba(137, 184, 255, 0.2); 2918 bottom: 15%; 2919 right: 12%; 2920 animation-delay: -12s; 2921 } 2922 2923 .orbit { 2924 position: absolute; 2925 border-radius: 999px; 2926 border: 1px solid rgba(255, 255, 255, 0.12); 2927 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset; 2928 } 2929 2930 .orbit-a { 2931 inset: 92px 84px 92px 84px; 2932 animation: rotateOrbit 18s linear 1 both; 2933 } 2934 2935 .orbit-b { 2936 inset: 150px 138px 150px 138px; 2937 border-style: dashed; 2938 animation: rotateOrbitReverse 16s linear 1 both; 2939 } 2940 2941 .cosmos-core { 2942 position: absolute; 2943 left: 50%; 2944 top: 50%; 2945 transform: translate(-50%, -50%); 2946 width: min(62%, 330px); 2947 padding: 26px; 2948 border-radius: 28px; 2949 border: 1px solid rgba(255, 255, 255, 0.16); 2950 background: radial-gradient(circle at top left, rgba(214, 178, 124, 0.16), rgba(255, 255, 255, 0.02)); 2951 backdrop-filter: blur(18px); 2952 text-align: center; 2953 } 2954 2955 .cosmos-core strong { 2956 display: block; 2957 margin-top: 10px; 2958 font-size: clamp(1.4rem, 2.2vw, 2.1rem); 2959 line-height: 1.05; 2960 letter-spacing: -0.04em; 2961 } 2962 2963 .cosmos-core p { 2964 margin: 14px 0 0; 2965 color: rgba(255, 255, 255, 0.68); 2966 line-height: 1.66; 2967 } 2968 2969 .cosmos-card-a { top: 88px; left: 48px; } 2970 .cosmos-card-b { top: 120px; right: 48px; } 2971 .cosmos-card-c { bottom: 112px; left: 62px; } 2972 .cosmos-card-d { bottom: 86px; right: 62px; } 2973 2974 .route-line { 2975 position: absolute; 2976 height: 1px; 2977 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); 2978 transform-origin: left center; 2979 animation: routePulse 3.2s ease-in-out 2 both; 2980 } 2981 2982 .route-line-a { 2983 top: 33%; 2984 left: 20%; 2985 width: 52%; 2986 transform: rotate(8deg); 2987 } 2988 2989 .route-line-b { 2990 bottom: 30%; 2991 left: 24%; 2992 width: 44%; 2993 transform: rotate(-10deg); 2994 animation-delay: -2s; 2995 } 2996 2997 .scene-atelier { 2998 background: 2999 radial-gradient(circle at top left, rgba(198, 161, 114, 0.12), transparent 28%), 3000 linear-gradient(180deg, rgba(29, 22, 20, 0.84), rgba(8, 10, 13, 0.78)); 3001 } 3002 3003 .atelier-grain { 3004 position: absolute; 3005 inset: 0; 3006 background-image: 3007 linear-gradient(0deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015)), 3008 radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.035), transparent 32%); 3009 mix-blend-mode: screen; 3010 } 3011 3012 .atelier-board { 3013 position: absolute; 3014 inset: 24px; 3015 border-radius: 28px; 3016 } 3017 3018 .artifact { 3019 position: absolute; 3020 padding: 18px; 3021 border-radius: 24px; 3022 border: 1px solid rgba(255, 255, 255, 0.12); 3023 box-shadow: var(--mk-shadow); 3024 } 3025 3026 .artifact-paper { 3027 background: linear-gradient(180deg, rgba(248, 236, 216, 0.94), rgba(212, 187, 157, 0.86)); 3028 color: #21160f; 3029 } 3030 3031 .artifact-glass { 3032 background: rgba(255, 255, 255, 0.08); 3033 backdrop-filter: blur(16px); 3034 } 3035 3036 .artifact-stamp { 3037 background: linear-gradient(180deg, rgba(101, 158, 170, 0.24), rgba(255, 255, 255, 0.06)); 3038 backdrop-filter: blur(14px); 3039 } 3040 3041 .artifact h3, 3042 .artifact h4 { 3043 margin: 0 0 10px; 3044 line-height: 1.1; 3045 } 3046 3047 .artifact p { 3048 margin: 0; 3049 line-height: 1.56; 3050 } 3051 3052 .artifact-meta { 3053 display: block; 3054 margin-bottom: 10px; 3055 font-size: 11px; 3056 letter-spacing: 0.14em; 3057 text-transform: uppercase; 3058 opacity: 0.72; 3059 } 3060 3061 .atelier-a { top: 12px; left: 10px; width: 220px; transform: rotate(-6deg); } 3062 .atelier-b { top: 26px; right: 12px; width: 188px; transform: rotate(5deg); } 3063 .atelier-c { left: 46px; bottom: 56px; width: 220px; transform: rotate(4deg); } 3064 .atelier-d { right: 28px; bottom: 24px; width: 220px; transform: rotate(-5deg); } 3065 .atelier-core { 3066 left: 50%; 3067 top: 50%; 3068 width: min(62%, 340px); 3069 transform: translate(-50%, -50%); 3070 background: linear-gradient(180deg, rgba(13, 14, 18, 0.9), rgba(23, 18, 18, 0.82)); 3071 } 3072 3073 .atelier-thread { 3074 position: absolute; 3075 height: 2px; 3076 background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(240, 211, 167, 0.76), rgba(255, 255, 255, 0)); 3077 animation: drift 12s ease-in-out 2 both; 3078 } 3079 3080 .atelier-thread-a { 3081 top: 34%; 3082 left: 18%; 3083 width: 60%; 3084 transform: rotate(-12deg); 3085 } 3086 3087 .atelier-thread-b { 3088 top: 56%; 3089 left: 16%; 3090 width: 66%; 3091 transform: rotate(9deg); 3092 animation-delay: -8s; 3093 } 3094 3095 .scene-palace { 3096 background: 3097 linear-gradient(180deg, rgba(8, 12, 13, 0.82), rgba(6, 7, 9, 0.88)), 3098 radial-gradient(circle at top left, rgba(157, 213, 202, 0.12), transparent 30%); 3099 } 3100 3101 .palace-rails { 3102 position: absolute; 3103 inset: 18px; 3104 border-radius: 28px; 3105 border: 1px solid rgba(255, 255, 255, 0.08); 3106 background: 3107 linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), 3108 linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px); 3109 background-size: 96px 96px; 3110 } 3111 3112 .branch-root { 3113 position: absolute; 3114 left: 50%; 3115 top: 16%; 3116 transform: translateX(-50%); 3117 padding: 14px 16px; 3118 min-width: 220px; 3119 text-align: center; 3120 border-radius: 18px; 3121 border: 1px solid rgba(255, 255, 255, 0.14); 3122 background: rgba(255, 255, 255, 0.08); 3123 font-size: 1rem; 3124 font-weight: 700; 3125 } 3126 3127 .branch-connector { 3128 position: absolute; 3129 background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); 3130 width: 2px; 3131 border-radius: 999px; 3132 } 3133 3134 .connector-main { 3135 left: calc(50% - 1px); 3136 top: 108px; 3137 height: 180px; 3138 } 3139 3140 .connector-arm-left, 3141 .connector-arm-right { 3142 height: 2px; 3143 background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); 3144 top: 276px; 3145 width: 150px; 3146 } 3147 3148 .connector-arm-left { left: calc(50% - 150px); } 3149 .connector-arm-right { 3150 right: calc(50% - 150px); 3151 transform: scaleX(-1); 3152 } 3153 3154 .branch-node { 3155 position: absolute; 3156 width: 220px; 3157 padding: 18px; 3158 border-radius: 24px; 3159 border: 1px solid rgba(255, 255, 255, 0.14); 3160 background: rgba(255, 255, 255, 0.06); 3161 backdrop-filter: blur(16px); 3162 } 3163 3164 .node-left { top: 246px; left: 46px; } 3165 .node-right { top: 246px; right: 46px; } 3166 .node-bottom-left { bottom: 56px; left: 86px; } 3167 .node-bottom-right { bottom: 56px; right: 86px; } 3168 3169 .palace-pane { 3170 position: absolute; 3171 padding: 16px; 3172 border-radius: 20px; 3173 border: 1px solid rgba(255, 255, 255, 0.14); 3174 background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); 3175 backdrop-filter: blur(14px); 3176 font-size: 0.92rem; 3177 line-height: 1.55; 3178 color: var(--mk-muted); 3179 } 3180 3181 .pane-a { top: 28px; left: 26px; width: 160px; } 3182 .pane-b { top: 28px;
3182 right: 26px; width: 160px; } 3183 .pane-c { bottom: 26px; left: calc(50% - 95px); width: 190px; text-align: center; } 3184 3185 @keyframes shimmer { 3186 0% { transform: translateX(-120%); } 3187 100% { transform: translateX(120%); } 3188 } 3189 3190 @keyframes rotateOrbit { 3191 from { transform: rotate(0deg); } 3192 to { transform: rotate(360deg); } 3193 } 3194 3195 @keyframes rotateOrbitReverse { 3196 from { transform: rotate(360deg); } 3197 to { transform: rotate(0deg); } 3198 } 3199 3200 @keyframes drift { 3201 0%, 100% { transform: translate3d(0, 0, 0); } 3202 50% { transform: translate3d(14px, -16px, 0); } 3203 } 3204 3205 @keyframes routePulse { 3206 0%, 100% { 3207 opacity: 0.35; 3208 filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); 3209 } 3210 50% { 3211 opacity: 1; 3212 filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.42)); 3213 } 3214 } 3215 3216 @media (max-width: 1120px) { 3217 .chooser-intro, 3218 .hero-grid, 3219 .copy-grid, 3220 .footer-grid { 3221 grid-template-columns: 1fr; 3222 } 3223 3224 .chooser-grid { 3225 grid-template-columns: repeat(2, minmax(0, 1fr)); 3226 } 3227 3228 .stats-grid { 3229 grid-template-columns: repeat(2, minmax(0, 1fr)); 3230 } 3231 3232 .card-grid, 3233 .faq-grid { 3234 grid-template-columns: repeat(2, minmax(0, 1fr)); 3235 } 3236 3237 .seo-hero-grid, 3238 .seo-section-layout, 3239 .seo-footer-grid { 3240 grid-template-columns: 1fr; 3241 } 3242 3243 .seo-hero-title { 3244 max-width: 14ch; 3245 } 3246 3247 .seo-rail-grid, 3248 .seo-card-grid, 3249 .seo-faq-grid { 3250 grid-template-columns: repeat(2, minmax(0, 1fr)); 3251 } 3252 3253 .seo-card-grid.seo-card-grid-four { 3254 grid-template-columns: repeat(2, minmax(0, 1fr)); 3255 } 3256 3257 .hero-scene { 3258 min-height: 560px; 3259 } 3260 3261 .chooser-preview { 3262 min-height: 300px; 3263 } 3264 3265 .chooser-card-cosmos .chooser-preview iframe, 3266 .chooser-card-palace .chooser-preview iframe, 3267 .chooser-card-souvenir .chooser-preview iframe { 3268 transform: scale(0.29); 3269 } 3270 3271 .topbar-inner { 3272 min-height: 72px; 3273 } 3274 3275 .nav { 3276 margin-left: auto; 3277 justify-content: flex-end; 3278 } 3279 3280 .nav-link { 3281 display: none; 3282 } 3283 3284 .chooser-shell { 3285 min-height: calc(100svh - 72px); 3286 padding-top: 32px; 3287 } 3288 3289 .chooser-intro { 3290 gap: 20px; 3291 margin-bottom: 22px; 3292 } 3293 3294 .chooser-note { 3295 max-width: 52ch; 3296 font-size: 0.92rem; 3297 } 3298 3299 .chooser-route-strip { 3300 display: flex; 3301 } 3302 3303 .design-experience-shell { 3304 display: flex; 3305 flex-direction: column; 3306 min-height: 100svh; 3307 } 3308 3309 .design-dock { 3310 position: sticky; 3311 top: 14px; 3312 right: auto; 3313 left: auto; 3314 margin: 14px 20px 0; 3315 max-width: none; 3316 justify-content: flex-start; 3317 } 3318 3319 .design-experience-frame { 3320 flex: 1 1 auto; 3321 height: calc(100svh - 94px); 3322 } 3323 } 3324 3325 @media (max-width: 760px) { 3326 .container { 3327 width: min(100vw - 28px, 100%); 3328 } 3329 3330 .chooser-grid { 3331 grid-template-columns: 1fr; 3332 } 3333 3334 .topbar-inner { 3335 min-height: 68px; 3336 padding: 10px 0; 3337 align-items: center; 3338 } 3339 3340 .nav { 3341 gap: 0; 3342 flex: none; 3343 } 3344 3345 .brand { 3346 min-width: 0; 3347 } 3348 3349 .brand-mark { 3350 width: 32px; 3351 height: 32px; 3352 } 3353 3354 .hero { 3355 padding-top: 28px; 3356 } 3357 3358 .chooser-shell { 3359 min-height: calc(100svh - 68px); 3360 padding-top: 22px; 3361 padding-bottom: 22px; 3362 } 3363 3364 .chooser-intro { 3365 gap: 16px; 3366 margin-bottom: 18px; 3367 } 3368 3369 .chooser-body { 3370 margin-top: 16px; 3371 font-size: 0.98rem; 3372 } 3373 3374 .chooser-note { 3375 font-size: 0.88rem; 3376 line-height: 1.55; 3377 } 3378 3379 .chooser-intro > div:last-child { 3380 display: none; 3381 } 3382 3383 .hero-proof { 3384 gap: 8px; 3385 } 3386 3387 .proof-pill { 3388 padding: 9px 12px; 3389 font-size: 11px; 3390 } 3391 3392 .seo-main { 3393 padding-bottom: 40px; 3394 } 3395 3396 .seo-hero { 3397 padding-top: 30px; 3398 } 3399 3400 .seo-hero-title { 3401 font-size: clamp(2.7rem, 11vw, 4.4rem); 3402 } 3403 3404 .seo-hero-body { 3405 font-size: 1rem; 3406 } 3407 3408 .seo-shell .cta-row { 3409 gap: 10px; 3410 } 3411 3412 .seo-shell .cta { 3413 flex: 1 1 calc(50% - 5px); 3414 } 3415 3416 .seo-context-rail, 3417 .seo-section-frame, 3418 .seo-footer-inner { 3419 padding: 22px; 3420 border-radius: 28px; 3421 } 3422 3423 .seo-rail-grid, 3424 .seo-card-grid, 3425 .seo-card-grid.seo-card-grid-four, 3426 .seo-faq-grid, 3427 .seo-footer-grid { 3428 grid-template-columns: 1fr; 3429 } 3430 3431 .seo-card, 3432 .seo-faq-card { 3433 min-height: 0; 3434 } 3435 3436 .chooser-card { 3437 grid-template-areas: 3438 'head' 3439 'actions' 3440 'preview'; 3441 grid-template-rows: auto auto minmax(238px, 1fr); 3442 padding: 18px; 3443 border-radius: 24px; 3444 } 3445 3446 .chooser-card-head { 3447 gap: 10px; 3448 } 3449 3450 .chooser-card-title-row { 3451 align-items: flex-start; 3452 } 3453 3454 .chooser-card p { 3455 font-size: 0.92rem; 3456 line-height: 1.58; 3457 } 3458 3459 .chooser-preview { 3460 min-height: 238px; 3461 } 3462 3463 .chooser-preview iframe { 3464 width: 1320px; 3465 height: 920px; 3466 } 3467 3468 .chooser-card-cosmos .chooser-preview iframe, 3469 .chooser-card-palace .chooser-preview iframe, 3470 .chooser-card-souvenir .chooser-preview iframe { 3471 transform: scale(0.22); 3472 } 3473 3474 .chooser-card-actions { 3475 gap: 10px; 3476 } 3477 3478 .chooser-card-actions .cta { 3479 flex-basis: 100%; 3480 } 3481 3482 .chooser-route-link { 3483 flex: 1 1 calc(50% - 5px); 3484 } 3485 3486 .hero-scene { 3487 min-height: 520px; 3488 } 3489 3490 .return-panel { 3491 grid-template-columns: 1fr; 3492 } 3493 3494 .stats-grid, 3495 .card-grid, 3496 .faq-grid { 3497 grid-template-columns: 1fr; 3498 } 3499 3500 .scene-card, 3501 .branch-node, 3502 .artifact { 3503 transform: none !important; 3504 } 3505 3506 .cosmos-card-a, 3507 .cosmos-card-b { 3508 top: 28px; 3509 } 3510 3511 .cosmos-card-a { left: 20px; } 3512 .cosmos-card-b { right: 20px; } 3513 .cosmos-card-c { left: 20px; bottom: 28px; } 3514 .cosmos-card-d { right: 20px; bottom: 28px; } 3515 3516 .orbit-a { inset: 118px 34px 118px 34px; } 3517 .orbit-b { inset: 170px 78px 170px 78px; } 3518 3519 .atelier-core { 3520 width: calc(100% - 64px); 3521 } 3522 3523 .atelier-a, 3524 .atelier-b, 3525 .atelier-c, 3526 .atelier-d { 3527 width: calc(50% - 28px); 3528 } 3529 3530 .palace-pane, 3531 .branch-node { 3532 width: calc(50% - 34px); 3533 } 3534 3535 .node-left { left: 18px; } 3536 .node-right { right: 18px; } 3537 .node-bottom-left { left: 18px; } 3538 .node-bottom-right { right: 18px; } 3539 .pane-a { left: 18px; width: 42%; } 3540 .pane-b { right: 18px; width: 42%; } 3541 3542 .design-dock { 3543 top: 12px; 3544 right: auto; 3545 bottom: auto; 3546 left: auto; 3547 margin: 12px 14px 0; 3548 gap: 8px; 3549 padding: 10px; 3550 border-radius: 24px; 3551 justify-content: stretch; 3552 } 3553 3554 .design-dock-link { 3555 min-height: 44px; 3556 flex: 1 1 calc(50% - 4px); 3557 padding: 0 12px; 3558 } 3559 3560 .design-dock-link.primary { 3561 flex-basis: 100%; 3562 } 3563 } 3564 3565 @media (max-width: 560px) { 3566 .topbar-inner { 3567 min-height: 64px; 3568 } 3569 3570 .brand { 3571 gap: 10px; 3572 } 3573 3574 .brand-mark { 3575 width: 30px; 3576 height: 30px; 3577 border-radius: 9px; 3578 font-size: 12px; 3579 } 3580 3581 .nav-cta { 3582 min-height: 44px; 3583 padding: 0 14px; 3584 font-size: 12px; 3585 } 3586 3587 .chooser-shell { 3588 min-height: calc(100svh - 64px); 3589 } 3590 3591 .chooser-route-link { 3592 flex-basis: 100%; 3593 } 3594 3595 .chooser-copy h1 { 3596 font-size: clamp(2.6rem, 13vw, 4.1rem); 3597 } 3598 3599 .chooser-preview { 3600 min-height: 210px; 3601 } 3602 3603 .chooser-preview iframe { 3604 width: 1280px; 3605 height: 900px; 3606 } 3607 3608 .hero h1 { 3609 font-size: clamp(2.6rem, 11vw, 4.4rem); 3610 } 3611 3612 .seo-shell .cta { 3613 flex-basis: 100%; 3614 } 3615 3616 .seo-proof-pill, 3617 .seo-callout-chip { 3618 width: 100%; 3619 justify-content: center; 3620 text-align: center; 3621 } 3622 3623 .seo-context-rail, 3624 .seo-section-frame, 3625 .seo-footer-inner { 3626 padding: 20px; 3627 } 3628 3629 .hero-scene { 3630 min-height: 680px; 3631 } 3632 3633 .scene-card, 3634 .branch-node, 3635 .artifact, 3636 .palace-pane { 3637 width: calc(100% - 40px); 3638 left: 20px !important; 3639 right: auto !important; 3640 } 3641 3642 .cosmos-card-a { top: 24px; } 3643 .cosmos-card-b { top: 150px; } 3644 .cosmos-card-c { bottom: 180px; } 3645 .cosmos-card-d { bottom: 42px; } 3646 3647 .cosmos-core { 3648 width: calc(100% - 64px); 3649 } 3650 3651 .atelier-a { top: 20px; } 3652 .atelier-b { top: 154px; } 3653 .atelier-core { top: 51%; } 3654 .atelier-c { bottom: 190px; } 3655 .atelier-d { bottom: 40px; } 3656 3657 .branch-root { 3658 width: calc(100% - 40px); 3659 min-width: 0; 3660 } 3661 3662 .connector-arm-left, 3663 .connector-arm-right { 3664 display: none; 3665 } 3666 3667 .connector-main { 3668 height: 130px; 3669 } 3670 3671 .node-left { top: 196px; } 3672 .node-right { top: 322px; } 3673 .node-bottom-left { top: 448px; bottom: auto; } 3674 .node-bottom-right { top: 574px; bottom: auto; } 3675 .pane-a { top: 18px; } 3676 .pane-b { top: 88px; } 3677 .pane-c { width: calc(100% - 40px); left: 20px !important; transform: none; bottom: 18px; } 3678 3679 .design-dock-link.primary { 3680 order: 3; 3681 } 3682 3683 .design-dock-link:not(.primary) { 3684 flex-basis: 100%; 3685 } 3686 } 3687 3688 @media (prefers-reduced-motion: reduce) { 3689 .cta::after, 3690 .aura, 3691 .orbit, 3692 .route-line, 3693 .atelier-thread { 3694 animation: none !important; 3695 } 3696 3697 .cta, 3698 .nav-link { 3699 transition: none !important; 3700 } 3701 3702 .seo-fade-step, 3703 .seo-reveal { 3704 opacity: 1 !important; 3705 transform: none !important; 3706 animation: none !important; 3707 transition: none !important; 3708 } 3709 3710 .seo-aura, 3711 .seo-shell .cta::after { 3712 animation: none !important; 3713 } 3714 } 3715 `;m([C({attribute:!1})],g.prototype,"page",2);m([u()],g.prototype,"returningPlannerVisitor",2);m([u()],g.prototype,"designDocuments",2);m([u()],g.prototype,"previewDocuments",2);
3715g=m([P("marketing-app")],g);export{g as MarketingApp};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.