/* Problem / solution storytelling. Local, original illustrations; no client claims. */
:root { --solution-mint:#d9eee3; --solution-peach:#f9ddc9; --solution-lilac:#e9e2f7; --solution-orange:#d17b42; }
[data-theme="dark"] { --solution-mint:#203e32; --solution-peach:#493528; --solution-lilac:#35304b; --solution-orange:#f4ae7a; }
.button { position:relative; overflow:hidden; isolation:isolate; transition:background .35s,color .35s,box-shadow .35s,transform .3s; }
.button-dark:hover,.button-dark:focus-visible { background:#d5eab3; color:#172322; box-shadow:0 8px 28px #88b58338; }
.button-white:hover,.button-white:focus-visible { background:#f3bf98; color:#172322; }
.button>span[aria-hidden] { transition:transform .3s; }
.button:hover>span[aria-hidden],.button:focus-visible>span[aria-hidden] { transform:translate(3px,-3px) rotate(8deg); }
.phase-mini { transition:background .4s,transform .3s,box-shadow .3s; }
.phase-mini:nth-child(1):hover { background:var(--solution-mint); }.phase-mini:nth-child(2):hover { background:var(--solution-peach); }.phase-mini:nth-child(3):hover { background:var(--solution-lilac); }
.mini-icon,.platform-symbol { animation:icon-breathe 5s ease-in-out infinite; transition:background .35s,color .35s,rotate .35s; }
.phase-mini:nth-child(2) .mini-icon { animation-delay:-1.7s; }.phase-mini:nth-child(3) .mini-icon { animation-delay:-3.3s; }
.mini-icon svg { width:21px; height:21px; }
.phase-mini:hover .mini-icon { rotate:-12deg; background:var(--ink); color:var(--paper); }
.platform-card:hover .platform-symbol { background:#d2ac82; color:#172322; rotate:12deg; }
.hero-note { max-width:340px; }
.intro-layout h2 em,.solution-copy h3 em,.result-story h3 em { font-style:normal; color:var(--green); }
.ecosystem { padding-top:20px; padding-bottom:50px; }
.ecosystem-shell { border:1px solid var(--line); border-radius:42px; padding:70px 55px 38px; background:linear-gradient(145deg,var(--surface),var(--paper)); box-shadow:0 20px 55px #18382b08; }
.ecosystem-heading { text-align:center; max-width:720px; margin:auto; }
.ecosystem-heading .eyebrow { margin-bottom:25px; }.ecosystem-heading h2 { font-size:clamp(3.1rem,5vw,5rem); }.ecosystem-heading>p { margin:24px auto 0; max-width:510px; font-size:18px; }
.solution-timeline { position:relative; margin-top:65px; }
.solution-timeline::before { content:""; position:absolute; left:50%; top:35px; bottom:35px; width:1px; background:linear-gradient(var(--peach),var(--mint),#b7a0d6); }
.solution-row { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; min-height:380px; padding:34px 0; }
.solution-row::after { content:""; position:absolute; left:50%; top:50%; width:13px; height:13px; border-radius:50%; background:var(--surface); border:2px solid var(--solution-orange); translate:-6px -6px; box-shadow:0 0 0 7px var(--paper); }
.solution-copy { max-width:430px; }.solution-number { display:block; font-size:10px; letter-spacing:1.8px; color:var(--solution-orange); font-weight:650; margin-bottom:20px; }
.solution-copy h3 { font-size:clamp(1.9rem,2.7vw,2.6rem); line-height:1.13; }.solution-copy>p { font-size:15px; line-height:1.8; margin-top:22px; }.solution-copy .text-link { margin-top:20px; font-size:13px; }
.solution-row:nth-child(even) .solution-copy { grid-column:2; grid-row:1; }.solution-row:nth-child(even) .solution-visual { grid-column:1; grid-row:1; }
.solution-visual { position:relative; min-width:0; min-height:315px; border-radius:25px; }
.constellation { background:radial-gradient(ellipse,var(--solution-mint),transparent 70%); display:grid; place-items:center; }
.constellation-ring { width:270px; height:210px; border:1px solid var(--line); border-radius:50%; position:absolute; rotate:-26deg; }.ring-b { rotate:45deg; width:260px; height:185px; }
.constellation-ring::after { content:""; width:8px; height:8px; background:var(--solution-orange); border-radius:50%; position:absolute; top:31px; left:29px; box-shadow:0 0 18px #d49865a0; }
.ring-a { animation:constellation-turn 32s linear infinite; }.ring-b { animation:constellation-turn 38s linear infinite reverse; }
.company-core { position:relative; z-index:1; width:122px; height:122px; border-radius:32px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); box-shadow:0 18px 35px #17392b18,inset 0 1px 2px #fff5; animation:core-float 6s ease-in-out infinite; }
.core-spark { font-size:34px; color:var(--solution-orange); line-height:1; margin-bottom:7px; }.company-core strong { font-size:14px; line-height:1.2; font-weight:550; }
.orbit-label { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:13px; background:var(--surface); border:1px solid var(--line); font-size:12px; box-shadow:0 5px 16px #14291d0a; animation:label-float 5s ease-in-out infinite; transition:background .3s,box-shadow .3s; }.orbit-label span { font-size:20px; line-height:1; color:var(--green); }.orbit-label:hover { background:var(--solution-peach); box-shadow:0 8px 28px #14291d20; }
.label-chatgpt { left:3%; top:15%; }.label-gemini { right:0; top:19%; animation-delay:-1s; }.label-perplexity { left:0; bottom:16%; animation-delay:-2s; }.label-claude { right:2%; bottom:12%; animation-delay:-3s; }
.value-visual { display:grid; place-items:center; background:radial-gradient(ellipse,var(--solution-peach),transparent 72%); padding:20px; }
.value-window { width:100%; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 20px 35px #57362212; transform:rotate(-3deg); animation:value-drift 7s ease-in-out infinite; }
.window-bar { display:flex; gap:5px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); }.window-bar i { width:6px; height:6px; background:#dfa092; border-radius:50%; }.window-bar i:nth-child(2) { background:#dfc398; }.window-bar i:nth-child(3) { background:#99bda8; }.window-bar>span { font-size:9px; margin-left:auto; color:var(--muted); }
.value-window-body { padding:25px; }.value-symbol { display:block; color:var(--solution-orange); font-size:26px; margin-bottom:15px; }.value-window-body>strong { display:block; font-size:25px; line-height:1.13; letter-spacing:-1px; font-weight:550; }.value-line { height:5px; border-radius:4px; width:86%; margin-top:16px; background:var(--line); }.value-line.short { width:55%; margin-top:6px; }.value-chip { display:flex; justify-content:space-between; gap:5px; background:var(--solution-mint); color:var(--ink); font-size:10px; padding:10px; border-radius:6px; margin-top:18px; }
.floating-note { position:absolute; bottom:5px; right:0; border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:13px 18px; font-size:12px; box-shadow:0 8px 22px #57362218; animation:label-float 5s ease-in-out infinite reverse; }.floating-note i { font-style:normal; margin-right:8px; color:var(--green); }
.presence-visual { padding:29px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(130deg,var(--solution-lilac),var(--surface)); border:1px solid var(--line); box-shadow:0 12px 30px #33235b0a; }
.presence-top { font-size:11px; display:flex; align-items:center; gap:10px; }.presence-path { display:flex; justify-content:space-between; position:relative; margin:39px 7px; }.presence-path::before { content:""; position:absolute; top:5px; height:1px; width:100%; background:var(--muted); opacity:.3; }.presence-path i { width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--surface); z-index:1; animation:signal-pulse 4s ease-in-out infinite; }.presence-path i:nth-child(2) { animation-delay:.7s; }.presence-path i:nth-child(3) { animation-delay:1.4s; }.presence-path i:nth-child(4) { animation-delay:2.1s; }.presence-path i:nth-child(5) { animation-delay:2.8s; }
.presence-message { display:flex; align-items:center; gap:15px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:18px; animation:label-float 6s ease-in-out infinite; }.presence-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--solution-mint); color:var(--green); font-size:22px; flex-shrink:0; }.presence-message small { font-size:7px; letter-spacing:1px; color:var(--muted); display:block; }.presence-message strong { font-size:24px; font-weight:550; letter-spacing:-1px; }.presence-message p { font-size:10px; }.illustration-caption { font-size:9px; color:var(--muted); margin-top:23px; }
.ecosystem-close { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:35px; padding-top:32px; }.ecosystem-close p { font-size:14px; }.ecosystem-close strong { font-weight:550; color:var(--ink); }
.results-stories { padding-top:70px; }.results-stories .section-heading>p { max-width:310px; }.result-stack { display:grid; gap:24px; }.result-story { position:sticky; top:130px; border-radius:30px; border:1px solid var(--line); padding:38px 45px; box-shadow:0 -8px 26px #22352708; min-height:360px; }.result-story:nth-child(2) { top:152px; }.result-story:nth-child(3) { top:174px; }.story-mint { background:var(--solution-mint); }.story-peach { background:var(--solution-peach); }.story-lilac { background:var(--solution-lilac); }.story-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:29px; font-size:10px; letter-spacing:1.6px; }.story-icon { font-size:33px; line-height:1; animation:icon-breathe 6s ease-in-out infinite; }.result-story h3 { font-size:clamp(2.1rem,4vw,3.5rem); line-height:1.12; max-width:950px; }.result-story>p { margin-top:23px; font-size:16px; }.story-bottom { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-top:28px; margin-top:27px; border-top:1px solid #62716430; }.story-bottom>span { font-size:12px; color:var(--muted); }.story-bottom a { display:grid; place-items:center; border:1px solid #62716455; border-radius:50%; width:43px; height:43px; font-size:22px; transition:background .3s,rotate .3s; flex-shrink:0; }.story-bottom a:hover { background:var(--surface); rotate:10deg; }.results-context { font-size:11px; line-height:1.8; max-width:790px; margin-top:28px; }.results-context a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.project-showcase { position:relative; overflow:hidden; padding:70px 0 65px; background:radial-gradient(ellipse at 22% 80%,var(--solution-peach),transparent 56%),radial-gradient(ellipse at 75% 60%,var(--solution-mint),transparent 60%); }
.project-showcase-heading { text-align:center; }.project-showcase-heading .section-label { justify-content:center; }.project-showcase-heading h2 { font-size:clamp(2.7rem,5.5vw,5.6rem); line-height:1.05; }.project-showcase-heading p { margin-top:27px; font-size:16px; }
.project-gallery { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; gap:20px; min-height:470px; padding-block:65px 35px; perspective:1200px; }
.project-preview { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:17px; overflow:hidden; box-shadow:0 25px 55px #23403620; }.preview-left { transform:rotate(-9deg) rotateY(15deg) translateX(20px); }.preview-right { transform:rotate(9deg) rotateY(-15deg) translateX(-20px); }.preview-center { position:relative; z-index:2; animation:showcase-float 8s ease-in-out infinite; }
.project-wireframe { position:relative; height:250px; padding:30px; }.project-wireframe>span { display:block; width:35%; height:8px; border-radius:3px; background:var(--line); }.project-wireframe>div { height:70px; margin-top:25px; border-radius:8px; background:var(--solution-peach); }.preview-right .project-wireframe>div { background:var(--solution-mint); }.project-wireframe>i { display:inline-block; height:40px; width:42%; margin-top:20px; background:var(--surface-soft); border-radius:6px; }.project-wireframe>i+i { margin-left:10%; }.project-wireframe>b { position:absolute; right:22px; bottom:8px; font-size:50px; opacity:.12; font-weight:500; }
.project-placeholder { text-align:center; padding:28px 28px 34px; }.project-placeholder-icon { display:grid; place-items:center; width:47px; height:47px; border-radius:15px; margin:0 auto 20px; font-size:27px; background:var(--solution-mint); color:var(--green); }.project-placeholder .section-label { justify-content:center; font-size:9px; margin-bottom:18px; }.project-placeholder h3 { font-size:30px; }.project-placeholder p { font-size:12px; margin:17px auto; max-width:250px; }.project-placeholder .tag { font-size:9px; }
.first-contact-card { border:1px solid var(--line); border-radius:28px; padding:38px; background:var(--surface); display:flex; flex-direction:column; justify-content:center; box-shadow:0 15px 45px #1836260a; }.contact-card-symbol { display:grid; place-items:center; width:62px; height:62px; background:var(--solution-mint); color:var(--green); border-radius:20px; font-size:33px; margin-bottom:30px; animation:icon-breathe 6s ease-in-out infinite; }.first-contact-card h3 { font-size:35px; line-height:1.1; }.first-contact-card>p { font-size:15px; margin-top:22px; line-height:1.8; }.first-contact-card .button { margin-top:28px; }.first-contact-card .text-link { margin-top:15px; justify-content:center; }.first-contact-card .contact-card-note { font-size:11px; margin-top:20px; text-align:center; }.contact-card-note a { text-decoration:underline; text-underline-offset:3px; }
.solution-strip { margin-top:25px; display:flex; gap:10px; flex-wrap:wrap; }.solution-strip span { font-size:11px; background:var(--solution-mint); color:var(--ink); padding:7px 12px; border-radius:20px; }
@keyframes icon-breathe { 0%,100% { scale:1; filter:hue-rotate(0deg); } 50% { scale:1.1; filter:hue-rotate(25deg); } }
@keyframes constellation-turn { to { rotate:334deg; } }
@keyframes label-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@keyframes value-drift { 0%,100% { transform:rotate(-3deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-6px); } }
@keyframes showcase-float { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }
@media (max-width:1100px) { .ecosystem-shell { padding:55px 35px 32px; }.solution-row { gap:60px; }.solution-copy h3 { font-size:30px; }.solution-copy>p { font-size:14px; }.label-chatgpt,.label-perplexity { left:0; }.orbit-label { padding:9px 10px; font-size:10px; }.constellation-ring { width:230px; height:185px; }.first-contact-card { padding:30px; } }
@media (max-width:740px) { .ecosystem-shell { padding:38px 23px 28px; border-radius:27px; }.ecosystem-heading h2 { font-size:44px; }.ecosystem-heading>p { font-size:15px; }.ecosystem-heading .eyebrow { font-size:8px; }.solution-timeline { margin-top:35px; }.solution-timeline::before { left:0; top:0; bottom:0; }.solution-row { grid-template-columns:1fr; gap:24px; padding:25px 0 30px 22px; }.solution-row::after { left:0; top:34px; width:10px; height:10px; translate:-4px 0; box-shadow:0 0 0 5px var(--paper); }.solution-copy,.solution-row:nth-child(even) .solution-copy { grid-column:1; grid-row:auto; max-width:none; }.solution-visual,.solution-row:nth-child(even) .solution-visual { grid-column:1; grid-row:auto; min-height:290px; }.solution-copy h3 { font-size:31px; }.solution-copy>p { margin-top:16px; }.solution-number { margin-bottom:15px; }.solution-copy .text-link { margin-top:15px; }.solution-visual { max-width:450px; width:100%; margin:auto; }.company-core { width:110px; height:110px; }.constellation-ring { width:220px; height:190px; }.orbit-label { font-size:11px; }.value-visual { padding:15px 10px 25px 0; }.floating-note { bottom:10px; font-size:11px; }.presence-visual { padding:24px 18px; }.presence-message { gap:10px; padding:15px 11px; }.presence-message strong { font-size:22px; }.presence-message small { font-size:6px; }.ecosystem-close { display:block; margin-top:15px; padding-top:25px; }.ecosystem-close .button { margin-top:24px; }.result-story { position:relative; top:auto!important; padding:28px 25px; min-height:350px; border-radius:23px; }.result-story h3 { font-size:32px; }.result-story>p { font-size:14px; }.story-meta { font-size:9px; margin-bottom:28px; }.story-bottom { padding-top:22px; margin-top:23px; }.story-bottom>span { font-size:11px; max-width:240px; }.results-context { font-size:10px; }.project-showcase { padding:45px 0; }.project-showcase-heading h2 { font-size:42px; }.project-showcase-heading p { font-size:14px; max-width:320px; margin:22px auto 0; }.project-gallery { grid-template-columns:1fr; padding:40px 0 5px; min-height:0; }.preview-left,.preview-right { display:none; }.preview-center { width:100%; max-width:420px; margin:auto; }.project-placeholder { padding:25px 24px 30px; }.first-contact-card { padding:29px; border-radius:24px; }.first-contact-card h3 { font-size:32px; }.first-contact-card>p { font-size:14px; } }
@media (max-width:370px) { .ecosystem-shell { padding-inline:17px; }.solution-row { padding-left:18px; }.solution-copy h3 { font-size:27px; }.orbit-label { padding:8px; font-size:9px; gap:4px; }.orbit-label span { font-size:15px; }.company-core { width:91px; height:105px; }.constellation-ring { width:175px; height:175px; }.presence-avatar { display:none; }.presence-message small { letter-spacing:.5px; }.result-story h3 { font-size:29px; }.project-showcase-heading h2 { font-size:35px; }.first-contact-card { padding:23px; } }
:root[data-motion="off"] .result-story { position:relative; top:auto; }
:root[data-motion="off"] :is(.button,.phase-mini,.platform-card):hover { transform:none; }
@media (prefers-reduced-motion:reduce) { .result-story { position:relative; top:auto!important; } }
@media print { .result-story { position:relative; top:auto!important; break-inside:avoid; }.project-showcase { display:none; }.ecosystem-shell { padding:25px; }.solution-row { break-inside:avoid; }.first-contact-card { break-inside:avoid; } }