/* Shared material and motion language for the public website. */
:root {
    --liquid-paper: #f5f5f7;
    --liquid-ink: #1d1d1f;
    --liquid-muted: #626873;
    --liquid-blue: #0066cc;
    --liquid-edge: rgba(255,255,255,.88);
    --liquid-shadow: 0 24px 70px -32px rgba(35,55,90,.24), 0 2px 8px rgba(35,55,90,.035);
    --liquid-ease: cubic-bezier(.22,1,.36,1);
}
body { background: var(--liquid-paper); color: var(--liquid-ink); }
body.story-home { --story-paper: var(--liquid-paper); --story-ink: var(--liquid-ink); --story-muted: var(--liquid-muted); }
.site-header, .story-home .site-header {
    background: rgba(250,250,252,.76);
    border-bottom: 1px solid rgba(120,130,150,.13);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
}
.brand, .story-home .brand { font-weight: 600; }
#site-nav a, .nav-contact { transition: color .2s; }
.btn, .story-home .btn {
    border-radius: 100px;
    background: var(--liquid-blue);
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px -9px #0066cc;
    transition: background .2s, box-shadow .3s, transform .3s var(--liquid-ease);
}
.btn:hover, .story-home .btn:hover { background: #005bb7; box-shadow: 0 8px 22px -10px #0066cc88; }
.btn:active, .story-home .btn:active { transform: scale(.97); }
.btn.outline, .story-home .btn.outline { background: rgba(255,255,255,.7); border-color: #ccd5e1; color: #005bb7; }
.btn:disabled, .story-home .btn:disabled { background: #e8edf5; color: #64748b; box-shadow: none; transform: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #0066cc; outline-offset: 5px; }
.story-stage {
    isolation: isolate;
    background: linear-gradient(180deg,#f9fafc,#f5f5f7 94%);
}
.story-stage:before {
    content: ''; position: absolute; z-index: -1; width: min(860px,90vw); height: 430px;
    left: 50%; top: 5%; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(ellipse,#ffffffd9,transparent 70%); pointer-events: none;
}
.story-topline { color: #596475; }
.story-topline>span { padding: 8px 13px; border: 1px solid #ffffffc9; border-radius: 100px; background: #ffffff73; }
.story-wordmark { font-weight: 600; color: #202630; letter-spacing: -7px; text-shadow: 0 3px 1px #fff8; }
.story-wordmark>span { color: #0066cc; }
.story-wordmark small { color: #586b85; letter-spacing: 2px; font-size: 12px; }
.story-frame h1, .story-frame h2 { font-size: clamp(42px,4.8vw,74px); font-weight: 600; letter-spacing: -2.5px; line-height: 1.19; color: var(--liquid-ink); }
.story-frame h1 span, .story-frame h2 span { color: #0865ce; background: linear-gradient(110deg,#0066cc 12%,#4076de 65%,#6256ba); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.story-frame p { color: #596475; font-size: 16px; line-height: 1.85; margin-top: 24px; }
.story-actions .btn { padding: 14px 26px; font-size: 14px; }
.story-contact { color: #005bb7; font-size: 13px; }
.story-chapters { gap: 5px; padding: 5px; border: 1px solid #fff; border-radius: 100px; background: #ffffffa6; box-shadow: 0 5px 24px #30466a0a; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.story-chapters button { border: 0; border-radius: 100px; padding: 10px 16px; min-height: 44px; color: #535f71; transition: background .3s, color .3s; }
.story-chapters button[aria-current] { color: #005bb7; background: #e7effb; box-shadow: inset 0 0 0 1px #d9e6f7; }
.story-chapters button b { color: #5d6e84; }
.story-bottom { bottom: 20px; }
.glass-orbit {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg,#ffffffd9,#ffffff80); border: 1px solid #fff;
    box-shadow: 0 18px 50px -20px #35578244, inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-radius: 21px; padding: 16px 19px; text-align: right;
    transform: perspective(900px) rotateY(var(--tilt-y, -9deg)) rotateX(var(--tilt-x, 5deg));
    transition: transform .55s var(--liquid-ease); pointer-events: none;
}
.orbit-pickup { top: 44%; right: -26%; }
.orbit-delivery { top: 70%; left: -24%; transform: perspective(900px) rotateY(10deg) rotateX(5deg); }
.glass-orbit small { display: block; font-size: 10px; color: #596475; margin-bottom: 3px; }
.glass-orbit strong { display: block; font-weight: 500; font-size: 14px; color: #28364b; }
.orbit-icon, .orbit-check { display: grid; place-items: center; width: 39px; height: 42px; background: #e7f0ff; color: #0066cc; border-radius: 12px; }
.orbit-icon svg { width: 25px; height: 25px; }
.orbit-check { background: #e2f4eb; color: #23704e; font-size: 22px; }
.orbit-dot { width: 6px; height: 6px; border-radius: 50%; background: #32865b; margin-inline-start: 7px; }
.story-home .connected-section { padding-top: 110px; padding-bottom: 40px; }
.story-home .section-intro h2, .story-home .faq-section h2 { color: var(--liquid-ink); font-weight: 600; font-size: clamp(34px,3.8vw,52px); letter-spacing: -1.6px; }
.story-home h2 em { color: #6e7480; }
.story-home .section-intro>p { font-size: 15px; color: #626873; }
.story-home .connected-demo { border: 1px solid #fff; border-radius: 28px; box-shadow: var(--liquid-shadow); background: #fff; }
.story-home .connected-demo-head { padding: 26px 30px; background: linear-gradient(120deg,#fafbff,#fff); }
.story-home .proof-pane { background: linear-gradient(160deg,#fff,#fafbfd); padding: 30px; }
.story-home .proof-pane header>strong { color: #242e3b; }
.story-home .proof-explanation { background: #eff4fb; color: #3b5576; }
.story-home .proof-tabs { border-radius: 100px; padding: 5px; margin: 16px; background: #eff1f5; }
.story-home .proof-tabs button { border-radius: 100px; min-height: 44px; }
.story-home .proof-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 2px 8px #20345014; color: #005bb7; }
.workspace-details { background: #ffffff8c; border: 1px solid #fff; padding-inline: 28px; border-radius: 24px; box-shadow: 0 8px 32px -24px #21385c30; }
.workspace-toggle { background: #fff; border: 1px solid #e3e7ed; color: #0066cc; }
.operations-board { border-radius: 20px; }
.story-pricing { margin-block: 35px 25px; padding: 40px; border: 1px solid #fff; border-radius: 28px; background: linear-gradient(120deg,#e8eef9,#f4f3fc); }
.story-pricing h2 { font-weight: 600; color: #242e3b; }
.story-pricing>a { color: #005bb7; min-height: 44px; }
.story-home .faq-section { padding-block: 85px; border-top: 0; }
.story-home .faq-list details { background: #ffffffb3; border: 1px solid #fff; border-radius: 16px; margin-bottom: 10px; padding-inline: 22px; }
.story-home .faq-list summary { font-size: 15px; font-weight: 500; padding-block: 22px; }
.story-home .faq-list p { font-size: 14px; color: #626873; padding-bottom: 20px; }
.story-home .contact-section { overflow: hidden; position: relative; padding: 64px; border-radius: 32px; border: 1px solid #fff; background: radial-gradient(ellipse at 20% 60%,#d8e8ff,transparent 65%),linear-gradient(130deg,#eef0fa,#fafbff); box-shadow: var(--liquid-shadow); }
.story-home .contact-section h2 { color: #242e3b; font-weight: 600; font-size: clamp(34px,4vw,50px); }
.contact-signature img { filter: drop-shadow(0 18px 22px #3366b333); transform: perspective(700px) rotateY(-14deg) rotateX(8deg); }
.pricing-hero h1 { letter-spacing: -2px; font-weight: 600; }
.plan { border: 1px solid #fff; border-radius: 26px; background: #ffffffc9; box-shadow: var(--liquid-shadow); transition: box-shadow .35s, transform .45s var(--liquid-ease); }
.plan.recommended { border-color: #b0c9ef; background: linear-gradient(150deg,#fff,#eff5ff); }
.plan-recommender, .pricing-context, .signature-panel { border-radius: 22px; }
@media (hover:hover) and (pointer:fine) {
    .plan:hover { transform: perspective(1400px) translateY(-5px) rotateX(1deg); box-shadow: 0 28px 60px -30px #27446c40; }
    .story-contact:hover, .story-pricing>a:hover { text-decoration: underline; text-underline-offset: 5px; }
}
@media (max-width:1200px) {
    .orbit-pickup { right: -10%; top: 52%; }
    .orbit-delivery { left: -10%; top: 72%; }
    .glass-orbit { padding: 12px; gap: 9px; }
}
@media (max-width:900px) {
    .glass-orbit { display: none; }
    .story-home .proof-pane { padding: 24px 20px; }
}
@media (max-width:760px) {
    .story-frame h1, .story-frame h2 { font-size: clamp(32px,8.4vw,49px); letter-spacing: -1.2px; line-height: 1.25; }
    .story-frame p { font-size: 14px; margin-top: 18px; max-width: 340px; }
    .story-topline { font-size: 10px; left: 18px; right: 18px; gap: 12px; }
    .story-topline>span { padding: 6px 9px; }
    .story-wordmark { letter-spacing: -4px; }
    .story-wordmark small { font-size: 11px; letter-spacing: 1px; }
    .story-actions { gap: 15px; }
    .story-actions .btn { padding: 12px 18px; font-size: 12px; }
    .story-contact { font-size: 11px; }
    .story-chapters { gap: 2px; padding: 3px; }
    .story-chapters button { padding: 6px 12px; min-width: 44px; }
    .story-home .connected-section { padding-top: 65px; }
    .story-home .connected-demo { border-radius: 22px; }
    .story-home .connected-demo-head { padding: 22px 20px; }
    .workspace-details { padding-inline: 16px; border-radius: 20px; }
    .workspace-details>summary>span:first-child { display: flex; flex-direction: column; align-items: flex-start; }
    .story-pricing { margin-block: 24px; padding: 28px 24px; border-radius: 22px; }
    .story-home .faq-section { padding-block: 45px; }
    .story-home .contact-section { padding: 34px 26px; border-radius: 26px; }
    .story-home #site-nav.open { background: #fafafcf5; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 18px 35px #23365114; }
    .story-home #site-nav a, .menu-toggle { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .proof-interactive .proof-pane:not([hidden]) { animation: viewpoint-enter .4s var(--liquid-ease) both; }
}
@keyframes viewpoint-enter {
    from { opacity: .4; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-transparency:reduce) {
    .site-header, .story-home .site-header, .glass-orbit, .story-chapters { background: #f9fafc; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .plan:hover, .glass-orbit, .orbit-delivery, .contact-signature img { transform: none; }
}

/* Decorative atmosphere has its own clipped stacking layer; text never transforms. */
.story-atmosphere{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;contain:layout paint}
.story-orb-rotor{position:absolute;inset:-22%;transform:rotate(var(--orb-angle,0deg)) scale(var(--orb-breath,1));transform-origin:50% 42%;will-change:transform}
.story-blob{position:absolute;display:block;border-radius:50%;pointer-events:none}
.blob-blue{width:70%;height:70%;left:-5%;top:-10%;background:radial-gradient(ellipse,#d4e6ffb0,transparent 68%)}
.blob-violet{width:69%;height:65%;right:-6%;top:1%;background:radial-gradient(ellipse,#e2dff8a6,transparent 68%)}
.blob-ice{width:65%;height:61%;left:15%;bottom:-13%;background:radial-gradient(ellipse,#daedf58c,transparent 68%)}
@media(max-width:760px){.story-orb-rotor{inset:-12%;opacity:.8}}
@media(prefers-reduced-motion:reduce){.story-orb-rotor{transform:none!important;will-change:auto}}