/* Caelion / final visual audit · high-contrast purple design system */
:root{--electric:#a78bff;--violet:#7140f4;--violet-deep:#371678;--light-ink:#1b1331;--light-muted:#605775;--dark-ink:#f8f4ff;--dark-muted:#c4b9db}
html{scroll-behavior:smooth;scroll-padding-top:92px}body{overflow-x:clip}
/* Section ownership of headline colors. Legacy styles forced white into ivory panels. */
.surface-cream,.surface-cream.motion-section,.statement,.solutions,.impact,.credibility,.testimonials,.faq{color:var(--light-ink)}
.surface-cream h1,.surface-cream h2,.surface-cream h3,.surface-cream h4,
.statement h1,.statement h2,.statement h3,.solutions h2,.impact h2,.credibility h2,.testimonials h2,.faq h2,
.surface-cream .section-heading,.surface-cream .statement-heading,.surface-cream .section-heading span{color:var(--light-ink)!important}
.surface-cream .section-heading span,.surface-cream .statement-heading em,.statement .shift-heading em{color:#6340a4!important}
.surface-cream p,.surface-cream .section-intro,.surface-cream .statement-sub{color:var(--light-muted)}
.dark,.dark.motion-section,.workflow,.our-work,.how,.contact,.break-section{color:var(--dark-ink)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark .section-heading,.dark .section-heading span,.dark .contact-heading,.dark .work-card h3,.dark .step-card h3{color:var(--dark-ink)!important}
.dark .section-heading span,.dark h2 em,.dark h3 em,.our-work .showcase-title em{color:#c9b5ff!important}
.dark .section-intro,.dark .hero-description,.dark .contact-left>p{color:var(--dark-muted)}
/* Contrast fixes inside text cards with their own light surfaces */
.form-card,.form-card h3,.calculator .calc-inputs,.calculator .calc-inputs h3,
.cred-card,.cred-card h3,.testimonial-card:not(.spotlight-card),.testimonial-card:not(.spotlight-card) blockquote,
.service-card:not(.service-dark),.service-card:not(.service-dark) h3{color:var(--light-ink)!important}
.form-card p,.cred-card p,.testimonial-card:not(.spotlight-card) p{color:var(--light-muted)!important}
.service-card.service-dark,.service-card.service-dark h3,.spotlight-card,.spotlight-card h3,
.calc-result,.calc-result h3{color:var(--dark-ink)!important}
/* Great typography even at very small screen */
.hero h1{font-size:clamp(62px,7.75vw,126px);line-height:1.015;letter-spacing:-.066em;overflow-wrap:normal;max-width:850px}
.section-heading{font-size:clamp(45px,5.5vw,86px);line-height:1.09;letter-spacing:-.062em}
.section-tag,.eyebrow,.showcase-kicker,.showcase-toplabel{font-size:13px!important;letter-spacing:.045em!important;font-weight:750}
.section-intro{font-size:clamp(15px,1.2vw,18px);line-height:1.75}
/* Motion-first: visible before animation. No invisible text if JS/CDN fails */
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.motion-section:before,.motion-section:after{pointer-events:none;z-index:0}
/* Work hero */
.our-work{background:radial-gradient(ellipse at 75% 3%,rgba(112,65,244,.16),transparent 44%),#0b0915;padding:128px 0 110px;isolation:isolate}
.showcase-intro{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:26px}
.showcase-toplabel{color:#cdbdff;display:flex;align-items:center;gap:12px;margin:0 0 20px;letter-spacing:.06em}
.showcase-led{display:block;width:10px;height:10px;border-radius:50%;background:#bda3ff;box-shadow:0 0 0 6px rgba(166,126,255,.12),0 0 18px #7651e7;animation:caPulse 2.8s ease-in-out infinite}
.showcase-title{color:#fff!important;font-size:clamp(52px,6.15vw,97px);font-family:var(--display);line-height:1.035;letter-spacing:-.069em;margin:0;max-width:1000px;font-weight:650}
.showcase-title em{display:inline-block;font-style:normal;background:linear-gradient(105deg,#e4d9ff,#a68aff 58%,#8252ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#c9b6ff!important}
.showcase-desc{max-width:780px;margin:24px 0 0;font-size:18px;line-height:1.8;color:#c2b7db}
.showcase-main-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:25px;color:white;font-size:15px;font-weight:750;background:linear-gradient(115deg,#ac8dff,#723bff);padding:20px 23px;border-radius:13px;box-shadow:0 18px 44px rgba(103,56,234,.25);transition:transform .2s,box-shadow .2s}
.showcase-main-cta:hover{transform:translateY(-3px);box-shadow:0 25px 60px rgba(103,56,234,.32)}
.showcase-notice{position:relative;z-index:2;display:flex;gap:11px;align-items:center;color:#c5b5e9;font-size:13px;margin:27px 0 34px}
.showcase-notice-icon{font-size:20px;color:#b296ff}.showcase-notice-line{height:1px;flex:1;background:linear-gradient(90deg,#5f467c,transparent)}
.showcase-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.showcase-card{--sc:#a58bff;position:relative;min-width:0;display:flex;flex-direction:column;overflow:hidden;min-height:440px;padding:24px;background:linear-gradient(150deg,rgba(40,32,70,.96),rgba(22,17,43,.94));border:1px solid rgba(203,174,255,.2);border-radius:20px;color:#f9f6ff;box-shadow:0 28px 70px rgba(0,0,0,.21);transition:border-color .3s,background .3s,box-shadow .3s;isolation:isolate}
.showcase-card:before{content:'';position:absolute;inset:-50% -80% auto -30%;height:330px;background:radial-gradient(ellipse,rgba(146,105,255,.2),transparent 66%);pointer-events:none;z-index:-1}
.showcase-card:hover{border-color:rgba(192,154,255,.52);background:linear-gradient(150deg,#32254f,#18132f);box-shadow:0 28px 70px rgba(56,24,109,.38)}
.showcase-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.showcase-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:rgba(169,139,255,.13);border:1px solid rgba(184,155,255,.29);color:#dac9ff}
.showcase-icon svg{width:33px;height:33px}
.showcase-num{font-size:12px;font-weight:760;letter-spacing:.055em;color:#ad9fc8}
.showcase-kicker{color:#bba0f7;margin-bottom:10px;line-height:1.5}
.showcase-card h3{font-size:clamp(23px,2vw,31px);font-family:var(--display);font-weight:650;line-height:1.13;letter-spacing:-.053em;color:#faf7ff!important;margin:0 0 12px}
.showcase-card p{font-size:13.5px;line-height:1.7;color:#c4bbd5;margin:0 0 14px}
.showcase-tools{font-size:11px;font-weight:650;color:#bca9e8;line-height:1.5;margin-top:auto;padding-bottom:18px}
.showcase-pipeline{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:5px;border-top:1px solid rgba(190,158,255,.17);border-bottom:1px solid rgba(190,158,255,.17);padding:12px 0}
.showcase-node{position:relative;display:flex;flex:1 1 0;min-width:0;align-items:center;flex-direction:column;gap:7px;text-align:center;font-size:9px;line-height:1.25;color:#9e91bb;transition:color .3s}
.showcase-dot{display:block;width:12px;height:12px;border-radius:50%;background:#5d4b7f;border:2px solid #8b72bb;transition:background .3s,box-shadow .3s,transform .3s}
.showcase-node.is-running{color:#f6efff}.showcase-node.is-running .showcase-dot{background:#be9aff;box-shadow:0 0 0 5px rgba(160,120,255,.13),0 0 16px #8055dd;transform:scale(1.15)}
.showcase-node.is-complete{color:#e3d6fb}.showcase-node.is-complete .showcase-dot{background:#a987fa;border-color:#dac8ff}
.showcase-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:17px}
.showcase-bottom a{font-size:11px;font-weight:750;color:#f0e9ff;white-space:nowrap}
.showcase-bottom a span{color:#ba9afa}
.showcase-play{border:1px solid rgba(198,166,255,.34);border-radius:9px;padding:10px;background:rgba(141,92,255,.14);color:#f8f3ff;font-size:11px;font-weight:730;white-space:nowrap;min-height:38px}
.showcase-play:hover{background:rgba(141,92,255,.3)}
.showcase-play:disabled{opacity:.55;cursor:progress}
.showcase-end{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;border-radius:16px;background:rgba(173,139,255,.07);border:1px solid rgba(200,170,255,.16);padding:24px 26px}
.showcase-end p{font-size:18px;color:#e4dcf7;margin:0}.showcase-end strong{color:white}.showcase-end-spark{color:#b99aff;font-size:25px;margin-right:10px}.showcase-end a{font-weight:750;color:#e5d6ff;white-space:nowrap}
/* Static CSS motions available offline with no dependency */
.showcase-card .showcase-icon{animation:iconFloat 5.5s ease-in-out infinite}.showcase-card:nth-child(3n) .showcase-icon{animation-delay:-1.7s}.showcase-card:nth-child(2n) .showcase-icon{animation-delay:-3s}
@keyframes iconFloat{50%{transform:translateY(-5px) rotate(2deg)}}@keyframes caPulse{50%{box-shadow:0 0 0 9px rgba(166,126,255,.035),0 0 24px #7651e7}}
/* Mobile: no clipped headings or tiny data labels */
@media(max-width:1280px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-card{min-height:420px}.showcase-intro{align-items:start;flex-direction:column;gap:22px}}
@media(max-width:720px){.our-work{padding:85px 0 80px}.showcase-grid{grid-template-columns:1fr}.showcase-intro{gap:18px}.showcase-title{font-size:clamp(44px,9.8vw,69px)}.showcase-desc{font-size:16px}.showcase-card{min-height:390px;padding:22px}.showcase-card h3{font-size:30px}.showcase-end{flex-direction:column;align-items:start}.showcase-end p{font-size:16px}.showcase-main-cta{font-size:14px;width:100%;justify-content:space-between}.hero h1{font-size:clamp(57px,12.7vw,77px)}.showcase-node{font-size:10px}}
@media(prefers-reduced-motion:reduce){.showcase-card .showcase-icon,.showcase-led{animation:none!important}.showcase-card{transition:none}.showcase-main-cta{transition:none}}

/* Agency portfolio treatment: two wide, gallery-like showcases instead of tiny tiles. */
@media(min-width:1050px){
 .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .showcase-card{min-height:395px;padding:31px 34px 27px}
 .showcase-card-top{margin-bottom:10px}
 .showcase-icon{height:64px;width:64px;border-radius:18px}
 .showcase-icon svg{height:37px;width:37px}
 .showcase-card h3{font-size:clamp(32px,2.7vw,43px);max-width:590px;line-height:1.1}
 .showcase-card p{font-size:15px;max-width:570px;line-height:1.75}
 .showcase-tools{font-size:12px;padding-bottom:16px}
 .showcase-node{font-size:12px;flex-direction:row;justify-content:center;gap:8px}
 .showcase-bottom a,.showcase-play{font-size:13px}
}
/* Controlled differentiators stay within Caelion's purple family */
.showcase-card.chat{background:radial-gradient(ellipse at 94% 8%,rgba(162,113,255,.22),transparent 48%),linear-gradient(150deg,#2a204b,#161027)}
.showcase-card.voice{background:radial-gradient(ellipse at 95% 9%,rgba(218,174,255,.17),transparent 48%),linear-gradient(150deg,#282044,#151126)}
.showcase-card.support{background:radial-gradient(ellipse at 90% 12%,rgba(139,95,253,.19),transparent 48%),linear-gradient(150deg,#251c43,#151029)}
.showcase-card.finance{background:radial-gradient(ellipse at 88% 10%,rgba(210,178,255,.15),transparent 49%),linear-gradient(150deg,#282044,#16122c)}
.showcase-card.docs{background:radial-gradient(ellipse at 90% 10%,rgba(149,109,255,.21),transparent 50%),linear-gradient(150deg,#292043,#17102a)}
.showcase-card.proposal{background:radial-gradient(ellipse at 90% 10%,rgba(181,150,255,.19),transparent 50%),linear-gradient(150deg,#30234f,#17102b)}
.showcase-card.ops{background:radial-gradient(ellipse at 90% 10%,rgba(121,80,246,.25),transparent 50%),linear-gradient(150deg,#271b47,#140e27)}
.showcase-pipeline{position:relative;isolation:isolate}
.showcase-pipeline:after{content:'';position:absolute;height:1px;left:8%;right:8%;top:50%;background:linear-gradient(90deg,transparent,rgba(180,143,255,.24),transparent);z-index:-1;pointer-events:none}
.showcase-card .showcase-dot{box-shadow:0 0 0 5px rgba(182,146,255,.045)}
.service-card.service-dark>p{color:#d4c8e8!important}
.workflow .log-item span,.workflow .stage-heading p{color:#c9c0db!important}
@media(max-width:1049px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.showcase-grid{grid-template-columns:1fr}.showcase-card{min-height:400px}.showcase-card p{font-size:15px}.showcase-kicker{font-size:13px!important}.showcase-tools{font-size:12px}.showcase-bottom a,.showcase-play{font-size:12px}}