
/* CAELION 05 | Final UI & contrast system. Lilac / ultravoilet only. */
:root{
 --night:#0a0812; --night2:#151027; --night3:#22183b;
 --cream:#faf9ff; --ivory:#f3f0ff; --ink:#181128;
 --line:#e9e3ff; --muted:#716985;
 --lime:#8956ff; --lime2:#5f27ed; --aqua:#ae93ff;
 --brand-grad:linear-gradient(116deg,#ba9cff 0%,#8651ff 44%,#5b1aff 100%);
 --brand-soft:#c3aaff; --brand-deep:#5420e9;--brand-mid:#8352ff;
 --brand-glow:0 18px 48px rgba(103,58,222,.27)
}
body{background:#0a0812;color:#f9f6ff;font-feature-settings:'kern' 1;text-rendering:optimizeLegibility}
.dark{background:#0a0812;color:#f8f6ff}
.surface-cream{background:#faf9ff;color:#181128}
.site-header.is-scrolled{background:rgba(10,8,18,.93);border-bottom:1px solid rgba(196,170,255,.16)}
.site-header,.footer,.footer-bottom{border-color:rgba(185,158,255,.14)}
.site-header .nav{min-height:88px}
.nav-links{gap:33px;font-size:14px;color:#dbd3f1}
.nav-links a:hover{color:#fff}
.brand-logo{height:44px;width:auto;object-fit:contain;filter:drop-shadow(0 7px 20px rgba(106,59,227,.28))}
.brand-rich{min-width:156px}
.button{letter-spacing:-.025em;font-size:14px;font-weight:750}
.button-lime,.form-submit,.footer-main-cta{background:var(--brand-grad);color:#fff;border-color:rgba(227,215,255,.14);box-shadow:0 14px 36px rgba(97,37,224,.25);position:relative;isolation:isolate;overflow:hidden}
.button-lime:after,.form-submit:after{content:'';position:absolute;inset:-180% auto -180% -35%;width:42%;transform:rotate(22deg) translateX(-220%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transition:transform .75s ease;pointer-events:none;z-index:-1}
.button-lime:hover:after,.form-submit:hover:after{transform:rotate(22deg) translateX(560%)}
.button-lime:hover,.form-submit:hover{background:linear-gradient(118deg,#c4adff,#9164ff 47%,#6933ff);box-shadow:0 22px 65px rgba(108,59,245,.34)}
.button-stroke,.button-ghost{color:#faf8ff;border-color:rgba(191,170,255,.24);background:rgba(255,255,255,.04)}
.button-stroke:hover,.button-ghost:hover{border-color:#a888ff;color:#fff;background:rgba(132,87,255,.13)}
.circle-arrow{background:#fff;color:#642aff}
.progress-bar{height:3px;background:linear-gradient(90deg,#c3a6ff,#6b27ff)}
.hero{background:radial-gradient(ellipse 54% 78% at 87% 42%,rgba(107,66,255,.35) 0%,rgba(37,22,79,.32) 48%,transparent 78%),#0b0815}
.hero:before{opacity:.27;background-image:radial-gradient(rgba(194,175,255,.5) 1px,transparent 1px)}
.hero h1{font-size:clamp(70px,8.5vw,139px);line-height:.94;letter-spacing:-.087em;font-weight:690;max-width:820px}
.hero h1 .text-underline{color:#b796ff;background:none!important}
.hero h1 .text-underline:after{background:linear-gradient(90deg,#c2a8ff,#6d2cff);height:4px}
.hero-itself{white-space:normal}
.hero-description{font-size:18px;line-height:1.75;color:#cfc8df;max-width:590px}
.hero-bottom,.hero-proof-row .proof-chip span{color:#b6acce;font-size:13px}
.hero-bottom-bar{font-size:12px;letter-spacing:.045em;color:#a69cc2}
.hero-art .art-glow{background:radial-gradient(circle at 55% 46%,rgba(124,75,250,.38),transparent 54%),radial-gradient(circle at 77% 53%,rgba(168,125,255,.22),transparent 49%)}
.hero-art .brain-icon{background:radial-gradient(circle at 28% 23%,#f1eaff,#bd9fff 31%,#733bfa 91%);color:#211044;box-shadow:0 0 80px rgba(130,78,255,.37)}
.hero-art .floating-pill{background:rgba(24,17,45,.92);border:1px solid rgba(189,167,255,.22);box-shadow:0 24px 70px rgba(6,3,22,.40)}
.hero-art .floating-pill strong{font-size:13px;color:#f9f6ff}
.hero-art .floating-pill small{font-size:11px;color:#bbb1dc}
.hero-art .pill-icon{background:#b999ff;color:#2b1454}
.hero-art .pill-ok{color:#cab2ff}
.hero-art .system-label,.hero-art .core-caption,.hero-art .art-coordinates{color:#c2b4e6}
.hero-art .core-caption strong{color:#eadfff}
.hero-art .orbit{border-color:rgba(193,169,255,.25)}
.hero-art .ring-one{box-shadow:inset 0 0 48px rgba(131,73,245,.18),0 0 48px rgba(132,72,247,.17)}
.hero-art .grid-mesh{background-image:linear-gradient(rgba(175,140,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(175,140,255,.08) 1px,transparent 1px)}
.live-spark,.system-blink,.stage-mode i{background:#9d74ff;box-shadow:0 0 16px rgba(157,116,255,.62)}
.hero-proof-row .proof-chip{background:rgba(43,25,82,.37);border-color:rgba(202,179,255,.16)}
.hero-proof-row .proof-chip strong{color:#f5f0ff}
.hero-proof-row{position:relative;z-index:7}
.eyebrow,.section-tag,.service-number,.work-kicker,.work-card-top,.stage-overline,.break-meta,.mini-kicker,.spotlight-kicker,.calc-result-label,.form-head,.demo-label,.footer-col h4{font-size:13px!important;letter-spacing:.055em!important;line-height:1.5;font-weight:750}
.system-label,.core-caption,.art-coordinates{letter-spacing:.065em!important}
.hero-eyebrow{color:#d4c7f9}
.section-tag{color:#71618f;white-space:normal}
.tag-light,.tag-light span{color:#c7b8ee}
.section-tag>span:last-child{letter-spacing:.01em;color:#9487b4}
.tag-dot{background:#8a55ff;box-shadow:0 0 14px rgba(139,85,255,.2)}
.statement-sub,.section-intro{font-size:16px;line-height:1.8;color:#827991}
.dark .section-intro,.dark .statement-sub{color:#b9adcf}
.section-heading{font-size:clamp(52px,5.9vw,91px);letter-spacing:-.065em;line-height:1.08}
.dark .section-heading,.dark .contact-heading,.dark .work-card h3,.dark .step-card h3,.dark .spotlight-card h3{color:#f7f3ff!important}
.dark .section-heading span{color:#bba0ff}
.surface-cream .section-heading,.surface-cream .statement-heading{color:#201631}
.surface-cream .section-heading span{color:#7964ad}
.eyebrow-line{background:rgba(193,167,255,.43)}
.motion-section:before{background:radial-gradient(circle,rgba(136,82,255,.16),transparent 70%)}
.motion-section:after{background:radial-gradient(circle,rgba(165,128,255,.12),transparent 70%)}
.workflow,.how,.our-work,.contact,.break-section{background:#0d0a19;color:#faf7ff}
.workflow .workflow-stage{background:#141025;border-color:rgba(178,151,255,.18);box-shadow:0 22px 85px rgba(5,2,24,.3)}
.workflow .stage-top{background:#211936;border-bottom-color:rgba(198,178,255,.16);color:#c0b3de}
.workflow .stage-content,.workflow .stage-main,.workflow .stage-side{background:#17112a;color:#f8f4ff}
.workflow .stage-heading h3,.workflow .flow-node strong{color:#f8f5ff}
.workflow .stage-heading p,.workflow .stage-microcopy,.workflow .log-item span,.workflow .flow-node small{color:#bcb1d7}
.workflow .flow-node{background:#1f1936;border:1px solid #423362}
.workflow .flow-node.is-active,.workflow .flow-node.is-done{background:#2d2154;border-color:#9163ff}
.workflow .node-icon{background:#34225f;color:#c4a5ff}
.workflow .run-button{background:linear-gradient(125deg,#9a74ff,#6a32f2);color:#fff;box-shadow:0 9px 30px rgba(82,36,209,.25)}
.workflow .stage-side{border-left-color:#41335a}
.workflow .side-top,.workflow .side-bottom{background:#201935;border-color:#41335a;color:#e8dcff}
.workflow .status-pill{color:#d2c0ff;border-color:#7552b0;background:#30224e}
.workflow .status-pill.done{color:#edddff;background:#42316a}
.workflow .workflow-tab{color:#bcb1d9;border-color:#403158}
.workflow .workflow-tab.is-active{background:#9a72ff;color:#180b2f}
.services-grid .service-card{border-color:#e7e0f4}
.service-card h3{color:#171027}
.service-card:hover{border-color:#b899ff;box-shadow:0 30px 80px rgba(70,33,147,.14)}
.service-card .service-chips span{border-color:#d9caef}
.agency-marquee{background:#100a20;border-top-color:rgba(176,148,255,.15);border-bottom-color:rgba(176,148,255,.15)}
.marquee-track{color:#e9dcff;font-size:25px}
.marquee-track span:after{color:#9f74ff}
.our-work{background:radial-gradient(circle at 90% 0%,rgba(118,64,255,.16),transparent 52%),#100c21}
.our-work .work-card{background:linear-gradient(156deg,rgba(75,45,119,.24),rgba(27,19,50,.95));border-color:rgba(181,154,255,.24)}
.our-work .work-card:hover{border-color:#9874ed;box-shadow:0 30px 90px rgba(81,43,164,.2)}
.our-work .case-blocks div{background:rgba(174,138,255,.065);border-color:rgba(174,138,255,.17)}
.our-work .case-blocks small{color:#b8a4dd;font-size:12px;letter-spacing:.035em}
.our-work .case-blocks strong{color:#f6f2ff}
.our-work .work-card p{color:#d0c7df}
.our-work .work-state{background:rgba(135,90,255,.18);border-color:rgba(178,142,255,.35);color:#e0d1ff}
.our-work .case-link{color:#d6c1ff}
.our-work .case-link span{color:#aa8aff}
.our-work .work-visual{border-color:rgba(175,142,255,.22);background:rgba(165,115,255,.05)}
.our-work .work-visual span{background:linear-gradient(160deg,#d1b5ff,#7945ff)}
.impact .calculator{box-shadow:0 30px 85px rgba(50,22,100,.09)}
.impact .calc-inputs{background:#fff;color:#1c1632}
.impact .calc-result{background:radial-gradient(ellipse at 80% 20%,rgba(126,81,255,.24),transparent 65%),#18112e;color:#fff}
.impact .calc-amount{color:#fff;text-shadow:0 10px 40px rgba(126,81,255,.2)}
.impact input[type=range]{accent-color:#8252ff}
.credibility .cred-card{border-color:#ece5fd;box-shadow:0 17px 50px rgba(45,23,91,.07)}
.credibility .cred-card:hover{border-color:#bb9cff;box-shadow:0 22px 60px rgba(92,50,170,.14)}
.credibility .cred-no{background:linear-gradient(135deg,#31105d,#7e46ff);color:#fff}
.credibility .cred-highlight{background:linear-gradient(120deg,#170d2d,#261647 55%,#1d103b);border-color:rgba(171,137,255,.26)}
.credibility .cred-highlight h3{color:#fff}
.credibility .cred-highlight p{color:#c9bee3}
.testimonials .testimonial-card{border-color:#e9e1fa;background:#fff;box-shadow:0 15px 55px rgba(46,22,100,.07)}
.testimonials .testimonial-card.alt{background:#f4efff}
.testimonials .quote-mark{color:#8e61ff}
.testimonials .testimonial-card blockquote{color:#20162e}
.testimonials .spotlight-card{background:linear-gradient(135deg,#171029,#2a174d);border-color:#39255b}
.testimonials .spotlight-card blockquote{color:#fff}
.testimonials .spotlight-card p{color:#c6bbdc}
.testimonials .spotlight-kicker{color:#bfa8ff}
.testimonials .spotlight-kicker:before{background:#9c72ff}
.faq .faq-item{border-color:#e7def4}
.faq .faq-item summary{font-size:17px;line-height:1.5}
.faq .faq-item p{font-size:15px;line-height:1.8}
.contact{background:radial-gradient(ellipse at 3% 70%,rgba(118,65,255,.17),transparent 55%),#0e0a1a}
.contact .contact-heading{font-size:clamp(56px,7vw,104px);line-height:1.02}
.contact .contact-heading em{color:#bb9fff}
.contact .contact-left>p{color:#c5b9d8}
.form-card{background:#fff;color:#181128;border:1px solid rgba(215,203,248,.33)}
.form-card h3{color:#1a1130;font-size:35px}
.form-card label,.form-card label span{font-size:13px;color:#554769}
.form-card input:not([type=checkbox]),.form-card textarea,.form-card select{font-size:14px;color:#231832;background:#fbf9ff;border-color:#e3d9f3;min-height:50px}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:#8c5bff;box-shadow:0 0 0 3px rgba(140,91,255,.14)}
.form-card .form-head{color:#6e47cb}
.form-card .form-feedback{color:#594b79}
.footer{background:linear-gradient(180deg,#0d091b,#110b22 55%,#090814)}
.footer-col h4{color:#f5ecff}
.footer-col a{color:#d7cdec}
.footer-intro p,.footer-cta-col p{color:#b7abcd}
.footer-badges span{background:rgba(113,67,255,.18);border:1px solid rgba(181,150,255,.27);color:#d4c1ff}
.footer-bottom{font-size:12px;letter-spacing:0;color:#a59abf}
.footer-logo{height:52px}
/* brand fidelity: SVGs and motion can remain decorative, but never green */
.floating-pill,.hero-art .pill-icon,.hero-art .pill-ok{color:#cfbcff}
/* motion: every section has subtle purple movement and detail, never blocks copy */
.motion-section:before,.motion-section:after{pointer-events:none}
.service-card .service-mini,.service-card .chat-visual,.service-card .ops-art{animation:float 7s ease-in-out infinite}
.service-card:nth-child(2) .chat-visual{animation-delay:-2s}
.service-card:nth-child(3) .ops-art{animation-delay:-4s}
.work-card .work-visual span{animation:softPulse 3s ease-in-out infinite}
.work-card .work-visual span:nth-child(2n){animation-delay:-1.4s}
.cred-card .cred-no{animation:softFloat 5s ease-in-out infinite}
.testimonial-card .quote-mark{animation:softFloat 5.4s ease-in-out infinite}
.contact-art .contact-ring{border-color:rgba(162,120,255,.22)}
.faq-item summary .faq-plus{transition:transform .35s ease}
.faq-item[open] summary .faq-plus{transform:rotate(45deg);color:#8956ff}
@keyframes softPulse{50%{opacity:.65;filter:brightness(1.2);transform:scale(1.08)}}
@keyframes softFloat{50%{transform:translateY(-7px)}}
@media (max-width:1180px){.hero h1{font-size:clamp(65px,8.3vw,105px)}.brand-logo{height:40px}}
@media (max-width:900px){.hero h1{font-size:clamp(62px,10.5vw,107px)}.brand-logo{height:37px}}
@media (max-width:640px){
 .site-header .nav{min-height:72px}.brand-logo{height:34px}
 .hero h1{font-size:clamp(55px,12.5vw,78px);line-height:1;letter-spacing:-.075em}
 .hero-description{font-size:16px}
 .hero-art .floating-pill strong{font-size:11px}.hero-art .floating-pill small{font-size:10px}
 .eyebrow,.section-tag,.service-number,.work-kicker,.work-card-top,.stage-overline,.break-meta,.mini-kicker,.spotlight-kicker,.demo-label{font-size:12px!important;letter-spacing:.03em!important}
 .section-heading{font-size:clamp(41px,10vw,64px)}
 .section-intro,.statement-sub{font-size:15px}
 .workflow .workflow-tab,.workflow .workflow-tab span{font-size:12px}
 .footer-logo{height:46px}
 .contact .contact-heading{font-size:clamp(48px,11.2vw,76px)}
 .nav-links{background:#0d091d}
}
@media(prefers-reduced-motion:reduce){.motion-section:before,.motion-section:after,.service-card .service-mini,.service-card .chat-visual,.service-card .ops-art,.work-card .work-visual span,.cred-card .cred-no,.testimonial-card .quote-mark{animation:none!important}}
