/* * One Step Studio — Liquid Glass comparison theme * Activated only when has class="liquid-glass". * The sales copy and page structure remain unchanged. */ html.liquid-glass{ --lg-ink:#11182f; --lg-muted:#4f5d7b; --lg-blue:#5068f2; --lg-violet:#9466ed; --lg-pink:#e675b4; --lg-cyan:#62c3e8; --lg-mint:#75d8c4; --lg-surface:rgba(255,255,255,.58); --lg-surface-strong:rgba(255,255,255,.76); --lg-surface-soft:rgba(255,255,255,.42); --lg-stroke:rgba(255,255,255,.82); --lg-stroke-blue:rgba(116,135,225,.28); --lg-shadow:0 28px 80px rgba(40,53,110,.14),inset 0 1px 0 rgba(255,255,255,.92); --lg-shadow-soft:0 16px 42px rgba(40,53,110,.09),inset 0 1px 0 rgba(255,255,255,.82); background:#eef3ff; } html.liquid-glass body{ color:var(--lg-ink); background:transparent; } html.liquid-glass body::before{ content:""; position:fixed; z-index:-2; inset:0; pointer-events:none; background: radial-gradient(920px 720px at 6% 8%,rgba(118,176,255,.30),transparent 66%), radial-gradient(780px 640px at 92% 18%,rgba(226,129,193,.24),transparent 67%), radial-gradient(900px 760px at 55% 82%,rgba(148,102,237,.20),transparent 69%), linear-gradient(155deg,#f9fbff 0%,#eef4ff 44%,#f9f1ff 100%); background-size:auto; animation:liquidAmbient 18s ease-in-out infinite alternate; } html.liquid-glass body::after{ content:""; position:fixed; z-index:-1; left:50%; top:45%; width:72vw; height:72vw; min-width:680px; min-height:680px; border-radius:44% 56% 62% 38% / 48% 41% 59% 52%; background:linear-gradient(135deg,rgba(113,198,234,.12),rgba(137,109,239,.11) 48%,rgba(240,133,184,.12)); filter:blur(48px); transform:translate(-50%,-50%) rotate(-8deg); pointer-events:none; animation:liquidBlob 22s ease-in-out infinite alternate; } @keyframes liquidAmbient{ 0%{background-position:0 0,100% 0,50% 100%,0 0} 100%{background-position:4% 5%,96% 7%,56% 94%,0 0} } @keyframes liquidBlob{ 0%{border-radius:44% 56% 62% 38% / 48% 41% 59% 52%;transform:translate(-52%,-50%) rotate(-8deg) scale(1)} 100%{border-radius:58% 42% 38% 62% / 40% 58% 42% 60%;transform:translate(-48%,-46%) rotate(9deg) scale(1.08)} } html.liquid-glass section{ isolation:isolate; } html.liquid-glass .section-title{ color:var(--lg-ink); text-wrap:balance; } html.liquid-glass .section-lead, html.liquid-glass .on-stage .section-lead{ color:var(--lg-muted); } html.liquid-glass .grad-text{ background:linear-gradient(105deg,#4666e9 0%,#7d62e7 48%,#ce69a9 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } html.liquid-glass .eyebrow::before, html.liquid-glass .on-stage .eyebrow::before{ color:#4e61d3; border:1px solid rgba(255,255,255,.78); background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(232,237,255,.54)); box-shadow:0 8px 24px rgba(61,78,155,.08),inset 0 1px 0 #fff; backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35); } /* Floating functional layer */ html.liquid-glass header{ inset:14px 0 auto; width:min(1420px,calc(100% - 36px)); margin-inline:auto; border:1px solid rgba(255,255,255,.82); border-radius:999px; background: linear-gradient(110deg,rgba(255,255,255,.76),rgba(244,247,255,.52) 54%,rgba(250,239,255,.48)); box-shadow:0 18px 55px rgba(37,50,103,.14),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(116,135,225,.10); backdrop-filter:blur(32px) saturate(1.55); -webkit-backdrop-filter:blur(32px) saturate(1.55); } html.liquid-glass header::before{ content:""; position:absolute; left:7%; right:7%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent); pointer-events:none; } html.liquid-glass #progress{ background:transparent; } html.liquid-glass #progress i{ background:linear-gradient(90deg,#5f7bf5,#9a6bee,#e77fb7); box-shadow:0 0 20px rgba(111,111,240,.52); } html.liquid-glass .brand-mark{ border:1px solid rgba(255,255,255,.76); background:linear-gradient(145deg,rgba(88,112,244,.96),rgba(147,100,238,.90)); box-shadow:0 12px 30px rgba(75,91,205,.28),inset 0 1px 0 rgba(255,255,255,.54); } html.liquid-glass nav a{ color:#4f5b78; } /* Glass controls */ html.liquid-glass .btn{ position:relative; border:1px solid rgba(255,255,255,.62); box-shadow:0 14px 34px rgba(40,53,110,.13),inset 0 1px 0 rgba(255,255,255,.54); backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); } html.liquid-glass .btn-primary{ color:#fff; background:linear-gradient(120deg,rgba(73,101,235,.96),rgba(129,91,227,.93) 56%,rgba(201,99,177,.88)); } html.liquid-glass .btn-primary:hover{ box-shadow:0 20px 46px rgba(79,91,211,.30),inset 0 1px 0 rgba(255,255,255,.64); } html.liquid-glass .btn-line{ color:#fff; border-color:rgba(255,255,255,.56); background:linear-gradient(120deg,rgba(86,104,213,.96),rgba(112,96,201,.94)); background-size:180% 180%; box-shadow:0 15px 36px rgba(66,78,164,.25),inset 0 1px 0 rgba(255,255,255,.56); } html.liquid-glass .btn-line:hover{ background:linear-gradient(120deg,rgba(76,94,199,.98),rgba(101,84,187,.96)); background-size:180% 180%; box-shadow:0 19px 44px rgba(66,78,164,.30),inset 0 1px 0 rgba(255,255,255,.62); } html.liquid-glass .btn-ghost{ color:#253150; border-color:rgba(255,255,255,.82); background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(244,247,255,.46)); } html.liquid-glass .btn:hover{ transform:translateY(-3px) scale(1.008); } /* Hero: content remains crisp, controls and video frame become glass */ html.liquid-glass #hero{ background-color:#eef3ff; background-image: linear-gradient(108deg,rgba(248,251,255,.97) 0%,rgba(246,249,255,.78) 48%,rgba(239,232,255,.27) 100%), radial-gradient(520px 420px at 88% 9%,rgba(238,124,187,.24),transparent 70%), url("../assets/onestep-hero-pastel-studio.webp"); background-size:cover,auto,cover; background-position:center,center,center top; } html.liquid-glass #hero::before{ background: radial-gradient(500px 360px at 12% 68%,rgba(78,112,239,.18),transparent 72%), radial-gradient(420px 330px at 80% 18%,rgba(234,112,180,.21),transparent 72%), radial-gradient(360px 300px at 62% 76%,rgba(87,197,226,.15),transparent 70%); } html.liquid-glass #hero::after{ border:1px solid rgba(255,255,255,.82); border-radius:42% 58% 54% 46% / 44% 42% 58% 56%; background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(104,128,242,.18) 46%,rgba(232,120,184,.20)); box-shadow:0 30px 80px rgba(73,91,185,.15),inset 0 1px 0 rgba(255,255,255,.9),inset -12px -16px 32px rgba(109,100,221,.10); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); animation:heroGlassFloat 8s ease-in-out infinite alternate; } @keyframes heroGlassFloat{ from{transform:translate3d(0,0,0) rotate(-4deg)} to{transform:translate3d(-18px,16px,0) rotate(6deg)} } html.liquid-glass #hero .hero-kicker, html.liquid-glass #hero .hero-points li{ border:1px solid rgba(255,255,255,.88); background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(236,241,255,.44)); box-shadow:0 12px 32px rgba(45,59,117,.09),inset 0 1px 0 #fff; backdrop-filter:blur(20px) saturate(1.45); -webkit-backdrop-filter:blur(20px) saturate(1.45); } html.liquid-glass #hero h1{ color:#10182f; text-shadow:0 1px 0 rgba(255,255,255,.78); } html.liquid-glass .hero-highlight{ border:1px solid rgba(255,255,255,.88); background:linear-gradient(135deg,rgba(229,235,255,.86),rgba(241,223,255,.72)); box-shadow:0 13px 36px rgba(73,82,170,.10),inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } html.liquid-glass .phone-cta{ border:1px solid rgba(255,255,255,.86); background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(238,243,255,.48)); box-shadow:0 16px 42px rgba(37,51,107,.13),inset 0 1px 0 #fff; backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); } html.liquid-glass #hero .studio-window{ border:1px solid rgba(255,255,255,.90); background: linear-gradient(145deg,rgba(255,255,255,.77),rgba(235,241,255,.49) 58%,rgba(248,230,255,.44)); box-shadow:0 42px 120px rgba(32,47,106,.24),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(99,118,210,.10); backdrop-filter:blur(34px) saturate(1.52); -webkit-backdrop-filter:blur(34px) saturate(1.52); } html.liquid-glass #hero .studio-window::before{ background:radial-gradient(ellipse,rgba(97,129,244,.23),rgba(222,121,192,.10) 42%,transparent 70%); } html.liquid-glass #hero .studio-window::after{ border:1px solid rgba(255,255,255,.48); background:linear-gradient(135deg,rgba(20,31,73,.72),rgba(68,54,128,.56)); box-shadow:0 14px 34px rgba(15,24,67,.22),inset 0 1px 0 rgba(255,255,255,.24); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); } html.liquid-glass #hero .hero-video{ border:1px solid rgba(255,255,255,.78); outline:1px solid rgba(72,90,166,.16); box-shadow:0 24px 68px rgba(24,36,87,.24),0 0 0 8px rgba(255,255,255,.16); } html.liquid-glass #hero .studio-top, html.liquid-glass #hero .studio-pipeline{ color:#4d5a78; } /* Dynamic Liquid Glass: original, lightweight WebGL atmosphere */ html.liquid-glass.dynamic-liquid{ overflow-x:hidden; } html.liquid-glass.dynamic-liquid #hero::before, html.liquid-glass.dynamic-liquid #hero::after{ z-index:0; } html.liquid-glass.dynamic-liquid #hero .hero-grid{ z-index:1; } html.liquid-glass.dynamic-liquid #hero .dynamic-liquid-canvas{ position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; opacity:0; filter:saturate(1.2) contrast(1.02); pointer-events:none; transform:translateZ(0); transition:opacity 1.1s ease; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 20%,#000 57%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 20%,#000 57%,#000 100%); } html.liquid-glass.dynamic-liquid-ready #hero .dynamic-liquid-canvas{ opacity:.92; } html.liquid-glass.dynamic-liquid #hero .hero-copy, html.liquid-glass.dynamic-liquid #hero .hero-conversion{ text-shadow:0 1px 0 rgba(255,255,255,.42); } html.liquid-glass.dynamic-liquid #hero .studio-window{ transition:transform .5s cubic-bezier(.2,.75,.25,1),box-shadow .5s ease; } html.liquid-glass.dynamic-liquid #hero .studio-window:hover{ transform:translateY(-6px); box-shadow:0 48px 128px rgba(32,47,106,.27),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(99,118,210,.10); } /* Editorial type treatment inspired by high-end interactive portfolios */ html.liquid-glass.dynamic-liquid .section-head.liquid-editorial{ position:relative; z-index:1; isolation:isolate; } html.liquid-glass.dynamic-liquid .section-head.liquid-editorial::after{ content:attr(data-liquid-scene); position:absolute; z-index:-1; right:-.08em; top:-.7em; max-width:94vw; overflow:hidden; color:rgba(79,103,224,.032); font-family:'Outfit','Noto Sans JP',sans-serif; font-size:clamp(76px,12.5vw,182px); font-weight:800; line-height:.9; letter-spacing:-.055em; white-space:nowrap; -webkit-text-stroke:1px rgba(91,110,213,.11); text-transform:uppercase; pointer-events:none; transform:translate3d(6%,18px,0); transition:transform 1.15s cubic-bezier(.18,.78,.22,1),opacity 1s ease; } html.liquid-glass.dynamic-liquid .section-head.liquid-editorial.in::after{ opacity:1; transform:translate3d(0,0,0); } html.liquid-glass.dynamic-liquid .section-head.reveal .eyebrow, html.liquid-glass.dynamic-liquid .section-head.reveal .section-title, html.liquid-glass.dynamic-liquid .section-head.reveal .section-lead{ transition:opacity .75s ease,transform .9s cubic-bezier(.18,.78,.22,1),clip-path .95s cubic-bezier(.18,.78,.22,1); } html.liquid-glass.dynamic-liquid .section-head.reveal .eyebrow{ opacity:0; transform:translateY(12px); } html.liquid-glass.dynamic-liquid .section-head.reveal .section-title{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(24px); transition-delay:.06s; } html.liquid-glass.dynamic-liquid .section-head.reveal .section-lead{ opacity:0; transform:translateY(18px); transition-delay:.18s; } html.liquid-glass.dynamic-liquid .section-head.reveal.in .eyebrow, html.liquid-glass.dynamic-liquid .section-head.reveal.in .section-title, html.liquid-glass.dynamic-liquid .section-head.reveal.in .section-lead{ opacity:1; clip-path:inset(0 0 0 0); transform:none; } /* Section color rhythm: each chapter keeps the brand palette but gains a clear accent */ html.liquid-glass.dynamic-liquid main section:not(#hero):not(#final){ --section-accent-a:#5269e8; --section-accent-b:#9a66e8; --section-accent-soft:rgba(82,105,232,.12); --section-accent-stroke:rgba(82,105,232,.25); --section-accent-shadow:rgba(82,105,232,.18); --section-ghost:rgba(82,105,232,.035); --section-ghost-stroke:rgba(82,105,232,.12); } html.liquid-glass.dynamic-liquid #results, html.liquid-glass.dynamic-liquid #details-hub, html.liquid-glass.dynamic-liquid #faq{ --section-accent-a:#3977df; --section-accent-b:#4fbfdc; --section-accent-soft:rgba(57,119,223,.12); --section-accent-stroke:rgba(57,119,223,.25); --section-accent-shadow:rgba(57,119,223,.18); --section-ghost:rgba(57,119,223,.035); --section-ghost-stroke:rgba(57,119,223,.12); } html.liquid-glass.dynamic-liquid #free-trial, html.liquid-glass.dynamic-liquid #demo{ --section-accent-a:#e56d82; --section-accent-b:#ae65df; --section-accent-soft:rgba(229,109,130,.12); --section-accent-stroke:rgba(229,109,130,.25); --section-accent-shadow:rgba(208,93,143,.18); --section-ghost:rgba(208,93,143,.034); --section-ghost-stroke:rgba(208,93,143,.12); } html.liquid-glass.dynamic-liquid #problem, html.liquid-glass.dynamic-liquid #cost{ --section-accent-a:#dc7652; --section-accent-b:#eaa64d; --section-accent-soft:rgba(220,118,82,.12); --section-accent-stroke:rgba(220,118,82,.25); --section-accent-shadow:rgba(220,118,82,.17); --section-ghost:rgba(220,118,82,.032); --section-ghost-stroke:rgba(220,118,82,.12); } html.liquid-glass.dynamic-liquid #transformation, html.liquid-glass.dynamic-liquid #capabilities, html.liquid-glass.dynamic-liquid #workflow, html.liquid-glass.dynamic-liquid #plans{ --section-accent-a:#5168eb; --section-accent-b:#9565e7; --section-accent-soft:rgba(81,104,235,.12); --section-accent-stroke:rgba(81,104,235,.25); --section-accent-shadow:rgba(81,104,235,.18); --section-ghost:rgba(81,104,235,.035); --section-ghost-stroke:rgba(81,104,235,.12); } html.liquid-glass.dynamic-liquid #engine, html.liquid-glass.dynamic-liquid #benefit-ai-suite, html.liquid-glass.dynamic-liquid #multilingual{ --section-accent-a:#7761df; --section-accent-b:#4eafd8; --section-accent-soft:rgba(119,97,223,.12); --section-accent-stroke:rgba(119,97,223,.25); --section-accent-shadow:rgba(102,100,220,.18); --section-ghost:rgba(102,100,220,.035); --section-ghost-stroke:rgba(102,100,220,.12); } html.liquid-glass.dynamic-liquid #benefit-sns{ --section-accent-a:#269d8e; --section-accent-b:#43acd4; --section-accent-soft:rgba(38,157,142,.12); --section-accent-stroke:rgba(38,157,142,.25); --section-accent-shadow:rgba(38,157,142,.17); --section-ghost:rgba(38,157,142,.032); --section-ghost-stroke:rgba(38,157,142,.12); } html.liquid-glass.dynamic-liquid #benefit-templates, html.liquid-glass.dynamic-liquid #partner-recruitment{ --section-accent-a:#e17661; --section-accent-b:#b45fd3; --section-accent-soft:rgba(225,118,97,.12); --section-accent-stroke:rgba(225,118,97,.25); --section-accent-shadow:rgba(210,100,112,.17); --section-ghost:rgba(210,100,112,.032); --section-ghost-stroke:rgba(210,100,112,.12); } html.liquid-glass.dynamic-liquid main section:not(#hero):not(#final) .section-head .eyebrow, html.liquid-glass.dynamic-liquid #engine .engine-copy .eyebrow, html.liquid-glass.dynamic-liquid #multilingual .language-copy .eyebrow, html.liquid-glass.dynamic-liquid #partner-recruitment .partner-recruitment-copy .eyebrow{ color:var(--section-accent-a); } html.liquid-glass.dynamic-liquid main section:not(#hero):not(#final) .section-head .eyebrow::before, html.liquid-glass.dynamic-liquid #engine .engine-copy .eyebrow::before, html.liquid-glass.dynamic-liquid #multilingual .language-copy .eyebrow::before, html.liquid-glass.dynamic-liquid #partner-recruitment .partner-recruitment-copy .eyebrow::before{ color:var(--section-accent-a); border-color:var(--section-accent-stroke); background:linear-gradient(145deg,rgba(255,255,255,.84),var(--section-accent-soft)); box-shadow:0 10px 26px var(--section-accent-shadow),inset 0 1px 0 rgba(255,255,255,.96); } html.liquid-glass.dynamic-liquid main section:not(#hero):not(#final) .section-head .grad-text, html.liquid-glass.dynamic-liquid #engine .engine-copy .grad-text, html.liquid-glass.dynamic-liquid #multilingual .language-copy .grad-text, html.liquid-glass.dynamic-liquid #partner-recruitment .partner-recruitment-copy .grad-text{ background:linear-gradient(105deg,var(--section-accent-a),var(--section-accent-b)); -webkit-background-clip:text; background-clip:text; color:transparent; } html.liquid-glass.dynamic-liquid .section-head.liquid-editorial::after{ color:var(--section-ghost); -webkit-text-stroke-color:var(--section-ghost-stroke); } html.liquid-glass.dynamic-liquid main section:not(#hero):not(#final) .section-head .section-title::after, html.liquid-glass.dynamic-liquid #engine .engine-copy .section-title::after, html.liquid-glass.dynamic-liquid #multilingual .language-copy h2::after, html.liquid-glass.dynamic-liquid #partner-recruitment .partner-recruitment-copy h2::after{ content:""; display:block; width:74px; height:4px; margin-top:22px; border-radius:999px; background:linear-gradient(90deg,var(--section-accent-a),var(--section-accent-b)); box-shadow:0 8px 22px var(--section-accent-shadow); } html.liquid-glass.dynamic-liquid main section:not(#hero):not(#final) .section-head.center .section-title::after{ margin-inline:auto; } /* Flowmap-inspired reflective response on proof and feature surfaces */ html.liquid-glass.dynamic-liquid .liquid-reactive{ --liquid-x:50%; --liquid-y:50%; --liquid-shift-x:0px; --liquid-shift-y:0px; position:relative; isolation:isolate; overflow:hidden; } html.liquid-glass.dynamic-liquid .liquid-reactive::before, html.liquid-glass.dynamic-liquid .liquid-reactive::after{ content:""; position:absolute; z-index:5; inset:-28%; opacity:0; pointer-events:none; transition:opacity .35s ease,transform .45s cubic-bezier(.18,.78,.22,1); } html.liquid-glass.dynamic-liquid .liquid-reactive::before{ background: radial-gradient(circle at var(--liquid-x) var(--liquid-y),rgba(255,255,255,.72) 0%,rgba(128,208,242,.24) 10%,rgba(148,106,237,.14) 21%,transparent 39%); filter:blur(9px) saturate(1.35); mix-blend-mode:screen; } html.liquid-glass.dynamic-liquid .liquid-reactive::after{ inset:-38%; background:linear-gradient(112deg,transparent 35%,rgba(255,255,255,.30) 47%,rgba(129,203,239,.18) 51%,transparent 63%); filter:blur(4px); transform:translate3d(var(--liquid-shift-x),var(--liquid-shift-y),0) rotate(-4deg); mix-blend-mode:screen; } html.liquid-glass.dynamic-liquid .liquid-reactive.is-liquid-active::before{ opacity:.76; } html.liquid-glass.dynamic-liquid .liquid-reactive.is-liquid-active::after{ opacity:.58; } html.liquid-glass.dynamic-liquid .liquid-reactive .video-lite img{ transform:scale(1.035) translate3d(var(--liquid-shift-x),var(--liquid-shift-y),0); transition:transform .32s cubic-bezier(.2,.7,.25,1),filter .35s ease; } html.liquid-glass.dynamic-liquid .liquid-reactive:not(.is-liquid-active) .video-lite img{ transform:scale(1); } /* Section atmosphere */ html.liquid-glass #results{ background:radial-gradient(760px 520px at 8% 8%,rgba(101,178,242,.25),transparent 70%),linear-gradient(145deg,rgba(239,246,255,.82),rgba(244,240,255,.68)); } html.liquid-glass #free-trial{ background:radial-gradient(680px 500px at 92% 10%,rgba(255,177,155,.29),transparent 72%),linear-gradient(145deg,rgba(255,250,247,.78),rgba(245,241,255,.70)); } html.liquid-glass #problem{ background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(245,248,255,.48)); } html.liquid-glass #transformation{ background:radial-gradient(620px 440px at 88% 14%,rgba(108,190,235,.23),transparent 72%),linear-gradient(145deg,rgba(239,245,255,.68),rgba(247,239,255,.68)); } html.liquid-glass #benefit-ai-suite, html.liquid-glass #plans, html.liquid-glass #faq{ background:rgba(255,255,255,.52); } html.liquid-glass #capabilities{ background: radial-gradient(720px 520px at 8% 20%,rgba(49,118,232,.22),transparent 72%), radial-gradient(680px 520px at 92% 72%,rgba(168,80,219,.2),transparent 72%), linear-gradient(145deg,#07112e 0%,#0d1941 52%,#151342 100%); } html.liquid-glass #workflow{ color:var(--lg-ink); background:radial-gradient(720px 480px at 82% 78%,rgba(74,193,225,.24),transparent 68%),radial-gradient(620px 430px at 18% 8%,rgba(151,110,236,.20),transparent 66%),rgba(235,245,255,.65); } html.liquid-glass #engine{ background:radial-gradient(620px 500px at 9% 44%,rgba(104,209,195,.18),transparent 72%),linear-gradient(145deg,rgba(244,249,255,.68),rgba(244,237,255,.68)); } html.liquid-glass #benefit-sns{ background:radial-gradient(580px 400px at 90% 8%,rgba(91,216,188,.25),transparent 72%),linear-gradient(145deg,rgba(237,251,248,.72),rgba(238,245,255,.68)); } html.liquid-glass #benefit-templates{ background:radial-gradient(580px 410px at 8% 12%,rgba(255,176,151,.27),transparent 72%),linear-gradient(145deg,rgba(255,248,244,.74),rgba(248,241,255,.68)); } html.liquid-glass #multilingual{ background:linear-gradient(145deg,rgba(243,239,255,.72),rgba(233,246,255,.70)); } html.liquid-glass #details-hub{ background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(237,244,255,.62)); } html.liquid-glass #partner-recruitment{ background:linear-gradient(145deg,rgba(239,246,255,.68),rgba(255,241,236,.65)); } html.liquid-glass #cost{ background:radial-gradient(600px 420px at 92% 8%,rgba(255,180,156,.24),transparent 70%),rgba(255,250,247,.68); } html.liquid-glass #demo{ background:linear-gradient(145deg,rgba(234,250,245,.72),rgba(237,242,255,.68)); } /* Reusable glass content surfaces */ html.liquid-glass .video-card, html.liquid-glass .ab-card, html.liquid-glass .trial-shell, html.liquid-glass .pain-card, html.liquid-glass .flow-card, html.liquid-glass .style-card, html.liquid-glass .workflow-step, html.liquid-glass .engine-card, html.liquid-glass .compare-wrap, html.liquid-glass .merit-flow, html.liquid-glass .merit-step, html.liquid-glass .merit-card, html.liquid-glass .language-panel, html.liquid-glass .details-card, html.liquid-glass .partner-recruitment-panel, html.liquid-glass .partner-recruitment-routes article, html.liquid-glass .cost-card, html.liquid-glass .fixed-example, html.liquid-glass .calc, html.liquid-glass .program-step, html.liquid-glass .plan-card, html.liquid-glass .faq-list details{ border:1px solid var(--lg-stroke); background:linear-gradient(145deg,var(--lg-surface-strong),var(--lg-surface-soft)); box-shadow:var(--lg-shadow-soft); backdrop-filter:blur(24px) saturate(1.42); -webkit-backdrop-filter:blur(24px) saturate(1.42); } html.liquid-glass .video-card:hover, html.liquid-glass .style-card:hover, html.liquid-glass .details-card:hover{ border-color:rgba(255,255,255,.98); box-shadow:0 30px 76px rgba(38,53,111,.17),inset 0 1px 0 #fff; transform:translateY(-7px); } html.liquid-glass .video-meta, html.liquid-glass .ab-label, html.liquid-glass .merit-label{ color:var(--lg-ink); background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(241,245,255,.50)); } html.liquid-glass .video-meta b, html.liquid-glass .ab-block-head h3, html.liquid-glass .on-stage .merit-closing, html.liquid-glass .workflow-step h3, html.liquid-glass .engine-card h3{ color:var(--lg-ink); } html.liquid-glass .video-meta span, html.liquid-glass .ab-block-head p, html.liquid-glass .workflow-step p, html.liquid-glass .engine-card p{ color:var(--lg-muted); } html.liquid-glass .pain-card:nth-child(1), html.liquid-glass .pain-card:nth-child(2), html.liquid-glass .pain-card:nth-child(3), html.liquid-glass .details-card:nth-child(n), html.liquid-glass .plan-card:nth-child(n), html.liquid-glass .merit-suite .merit-card:nth-child(n){ background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(239,244,255,.44)); } html.liquid-glass .pain-card:nth-child(1){box-shadow:0 18px 50px rgba(225,119,88,.10),inset 0 1px 0 #fff} html.liquid-glass .pain-card:nth-child(2){box-shadow:0 18px 50px rgba(76,118,215,.10),inset 0 1px 0 #fff} html.liquid-glass .pain-card:nth-child(3){box-shadow:0 18px 50px rgba(143,95,213,.10),inset 0 1px 0 #fff} html.liquid-glass .pain-conclusion{ color:var(--lg-ink); border:1px solid rgba(255,255,255,.82); background:linear-gradient(120deg,rgba(232,239,255,.75),rgba(247,235,255,.60)); box-shadow:var(--lg-shadow-soft); backdrop-filter:blur(22px) saturate(1.35); -webkit-backdrop-filter:blur(22px) saturate(1.35); } html.liquid-glass .pain-conclusion p{color:var(--lg-muted)} html.liquid-glass .flow-card.after{ color:var(--lg-ink); border:1px solid rgba(167,178,239,.48); background:linear-gradient(145deg,rgba(231,238,255,.74),rgba(247,237,255,.58)); } html.liquid-glass .after .flow-list li, html.liquid-glass .after-metrics div, html.liquid-glass .flow-list li{ color:#45516f; border-color:rgba(255,255,255,.86); background:rgba(255,255,255,.60); box-shadow:inset 0 1px 0 rgba(255,255,255,.88); } html.liquid-glass .after-metrics b{color:#5067df} html.liquid-glass .after-metrics small{color:#697594} html.liquid-glass .trial-shell, html.liquid-glass .language-panel, html.liquid-glass .partner-recruitment-panel, html.liquid-glass .calc{ box-shadow:var(--lg-shadow); } html.liquid-glass .template-body, html.liquid-glass .script-wrap textarea, html.liquid-glass .trial-field input, html.liquid-glass .field input, html.liquid-glass .field select{ color:var(--lg-ink); border:1px solid rgba(255,255,255,.92); background:rgba(255,255,255,.68); box-shadow:0 10px 28px rgba(37,51,104,.07),inset 0 1px 0 #fff; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } html.liquid-glass .workflow-media, html.liquid-glass .language-visual{ border:1px solid rgba(255,255,255,.90); background:linear-gradient(125deg,rgba(255,218,224,.78),rgba(209,228,255,.76) 50%,rgba(225,211,255,.76)); box-shadow:0 34px 92px rgba(40,57,117,.15),inset 0 1px 0 #fff; } html.liquid-glass .engine-number{ border:1px solid rgba(255,255,255,.88); background:radial-gradient(circle at 50% 40%,rgba(143,115,235,.28),transparent 54%),linear-gradient(145deg,rgba(255,255,255,.72),rgba(228,237,255,.50)); box-shadow:var(--lg-shadow); backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4); } html.liquid-glass .compare-table, html.liquid-glass .compare-table th, html.liquid-glass .compare-table td{ border-color:rgba(217,225,244,.82); } html.liquid-glass .compare-table{background:rgba(255,255,255,.62)} html.liquid-glass .compare-table th{background:rgba(244,247,255,.76)} html.liquid-glass .compare-table th:last-child{color:#fff;background:linear-gradient(125deg,#5068f2,#9567ed)} html.liquid-glass .compare-table td:last-child{background:rgba(233,238,255,.68)} html.liquid-glass .merit-suite-flow{ border:1px solid rgba(255,255,255,.88); background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(235,241,255,.48)); box-shadow:var(--lg-shadow-soft); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); } html.liquid-glass .merit-suite-flow span{ border:1px solid rgba(255,255,255,.92); background:rgba(255,255,255,.64); box-shadow:0 10px 28px rgba(38,51,105,.07),inset 0 1px 0 #fff; } html.liquid-glass .merit-suite-flow span.core{ color:#fff; border-color:rgba(255,255,255,.36); background:linear-gradient(135deg,rgba(54,72,163,.94),rgba(111,77,203,.91)); } html.liquid-glass .merit-template .thumb{ background:linear-gradient(145deg,rgba(213,229,255,.88),rgba(238,214,255,.80) 55%,rgba(255,215,205,.84)); } html.liquid-glass .partner-recruitment-routes article:nth-child(n){ background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(239,244,255,.48)); } /* Pricing: the recommended plan gets the thickest glass */ html.liquid-glass .cost-card.featured{ color:var(--lg-ink); border:1px solid rgba(148,164,237,.48); background:linear-gradient(145deg,rgba(226,235,255,.76),rgba(245,235,255,.58)); box-shadow:0 22px 58px rgba(73,88,179,.13),inset 0 1px 0 #fff; } html.liquid-glass .cost-card.featured span, html.liquid-glass .cost-card.featured p{color:var(--lg-muted)} html.liquid-glass .calc-box{ border:1px solid rgba(255,255,255,.88); background:rgba(255,255,255,.56); box-shadow:0 10px 28px rgba(36,50,103,.06),inset 0 1px 0 #fff; } html.liquid-glass .calc-box.primary{ color:#fff; border-color:rgba(255,255,255,.44); background:linear-gradient(125deg,rgba(73,102,236,.94),rgba(132,91,226,.92) 58%,rgba(202,99,176,.88)); box-shadow:0 18px 48px rgba(82,86,201,.22),inset 0 1px 0 rgba(255,255,255,.42); } html.liquid-glass .standard-plan{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.96); background: radial-gradient(520px 360px at 92% 5%,rgba(229,117,184,.19),transparent 64%), linear-gradient(145deg,rgba(255,255,255,.82),rgba(225,235,255,.60) 54%,rgba(244,229,255,.55)); box-shadow:0 42px 110px rgba(64,78,167,.22),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(113,128,219,.12); backdrop-filter:blur(34px) saturate(1.5); -webkit-backdrop-filter:blur(34px) saturate(1.5); } html.liquid-glass .standard-plan::before{ content:""; position:absolute; z-index:0; left:4%; right:4%; top:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.98) 30%,rgba(210,222,255,.95) 70%,transparent); pointer-events:none; } html.liquid-glass .standard-plan>*, html.liquid-glass .standard-plan>ul{position:relative;z-index:1} html.liquid-glass .standard-list li{ border:1px solid rgba(255,255,255,.86); background:rgba(255,255,255,.54); box-shadow:inset 0 1px 0 rgba(255,255,255,.90); } html.liquid-glass .plan-badge{ border:1px solid rgba(255,255,255,.48); background:linear-gradient(125deg,rgba(79,105,238,.94),rgba(148,97,231,.91),rgba(225,103,177,.88)); box-shadow:0 12px 30px rgba(112,83,195,.22),inset 0 1px 0 rgba(255,255,255,.45); } html.liquid-glass .price-old::after{ border-color:rgba(255,255,255,.52); background:linear-gradient(135deg,rgba(80,104,242,.96),rgba(145,100,237,.92)); box-shadow:0 10px 28px rgba(70,86,190,.26),inset 0 1px 0 rgba(255,255,255,.55); } html.liquid-glass .campaign-price{ text-shadow:0 8px 26px rgba(64,87,214,.16); } /* Conversion surfaces */ html.liquid-glass .line-panel{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.28); background: radial-gradient(360px 250px at 88% 5%,rgba(231,117,187,.30),transparent 66%), linear-gradient(145deg,rgba(38,58,145,.94),rgba(91,71,190,.91) 58%,rgba(137,73,178,.88)); box-shadow:0 36px 92px rgba(62,60,158,.30),inset 0 1px 0 rgba(255,255,255,.30); backdrop-filter:blur(26px) saturate(1.35); -webkit-backdrop-filter:blur(26px) saturate(1.35); } html.liquid-glass .line-panel::before{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); } html.liquid-glass .panel-phone-link, html.liquid-glass .phone-cta-final{ border:1px solid rgba(255,255,255,.30); background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(12,21,65,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); } html.liquid-glass #final{ background: radial-gradient(620px 450px at 12% 18%,rgba(84,191,230,.30),transparent 70%), radial-gradient(680px 470px at 88% 82%,rgba(222,105,185,.30),transparent 70%), linear-gradient(135deg,#13265d,#293f93 54%,#6646af); } html.liquid-glass #mobile-cta{ border:1px solid rgba(255,255,255,.88); background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(235,241,255,.62)); box-shadow:0 20px 55px rgba(29,43,103,.25),inset 0 1px 0 #fff; backdrop-filter:blur(24px) saturate(1.45); -webkit-backdrop-filter:blur(24px) saturate(1.45); } html.liquid-glass footer{ background:linear-gradient(145deg,#101937,#172554 62%,#2a286b); } /* Responsive and accessibility fallbacks */ @media(max-width:820px){ html.liquid-glass.dynamic-liquid #hero .dynamic-liquid-canvas{display:none} html.liquid-glass.dynamic-liquid .section-head.liquid-editorial::after{ right:0; top:-.35em; max-width:100%; font-size:clamp(64px,17vw,112px); } html.liquid-glass.dynamic-liquid .liquid-reactive::before, html.liquid-glass.dynamic-liquid .liquid-reactive::after{display:none} html.liquid-glass.dynamic-liquid .liquid-reactive .video-lite img, html.liquid-glass.dynamic-liquid .liquid-reactive:not(.is-liquid-active) .video-lite img{transform:none} html.liquid-glass.dynamic-liquid #hero .studio-window:hover{transform:none} html.liquid-glass header{ inset:8px 0 auto; width:calc(100% - 18px); border-radius:24px; } html.liquid-glass nav{ border:1px solid rgba(255,255,255,.88); background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(237,242,255,.82)); box-shadow:0 22px 58px rgba(29,43,94,.17),inset 0 1px 0 #fff; backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); } html.liquid-glass #hero::after{opacity:.6} } @media(max-width:560px){ html.liquid-glass body::after{display:none} html.liquid-glass .video-card, html.liquid-glass .ab-card, html.liquid-glass .trial-shell, html.liquid-glass .pain-card, html.liquid-glass .flow-card, html.liquid-glass .style-card, html.liquid-glass .workflow-step, html.liquid-glass .engine-card, html.liquid-glass .merit-flow, html.liquid-glass .merit-step, html.liquid-glass .merit-card, html.liquid-glass .language-panel, html.liquid-glass .details-card, html.liquid-glass .partner-recruitment-panel, html.liquid-glass .cost-card, html.liquid-glass .calc, html.liquid-glass .program-step, html.liquid-glass .plan-card, html.liquid-glass .faq-list details{ background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(239,244,255,.74)); backdrop-filter:blur(15px) saturate(1.25); -webkit-backdrop-filter:blur(15px) saturate(1.25); } html.liquid-glass #hero .studio-window{ background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(235,241,255,.72)); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); } } @media(prefers-reduced-motion:reduce){ html.liquid-glass body::before, html.liquid-glass body::after, html.liquid-glass #hero::after{animation:none} html.liquid-glass .btn:hover{transform:none} html.liquid-glass.dynamic-liquid #hero .dynamic-liquid-canvas{display:none} html.liquid-glass.dynamic-liquid #hero .studio-window:hover{transform:none} html.liquid-glass.dynamic-liquid .section-head.liquid-editorial::after, html.liquid-glass.dynamic-liquid .section-head.reveal .eyebrow, html.liquid-glass.dynamic-liquid .section-head.reveal .section-title, html.liquid-glass.dynamic-liquid .section-head.reveal .section-lead{ opacity:1; clip-path:none; transform:none; transition:none; } html.liquid-glass.dynamic-liquid .liquid-reactive::before, html.liquid-glass.dynamic-liquid .liquid-reactive::after{display:none} } @media(prefers-reduced-transparency:reduce){ html.liquid-glass.dynamic-liquid #hero .dynamic-liquid-canvas{display:none} html.liquid-glass header, html.liquid-glass nav, html.liquid-glass .studio-window, html.liquid-glass .trial-shell, html.liquid-glass .language-panel, html.liquid-glass .partner-recruitment-panel, html.liquid-glass .calc, html.liquid-glass .standard-plan, html.liquid-glass .line-panel{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; } html.liquid-glass .line-panel{color:#fff;background:#384aab} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html.liquid-glass header, html.liquid-glass nav, html.liquid-glass .studio-window, html.liquid-glass .trial-shell, html.liquid-glass .language-panel, html.liquid-glass .partner-recruitment-panel, html.liquid-glass .calc, html.liquid-glass .standard-plan{ background:rgba(248,250,255,.96); } } /* Hero 10-minute edition: keep the new commercial art direction intact */ html.liquid-glass #hero.hero-10min{ background-color:#eef6ff; background-image: linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 27%,rgba(247,251,255,.52) 49%,rgba(234,244,255,.08) 76%), linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(238,246,255,.08) 54%,#eef6ff 69%,#eef6ff 100%), url("../assets/hero/onestep-hero-10min-bg-v1.jpg"); background-repeat:no-repeat; background-size:max(100%,1480px) auto,max(100%,1480px) 1050px,max(100%,1480px) auto; background-position:center top,center top,center top; } html.liquid-glass #hero.hero-10min::before{ background: radial-gradient(480px 350px at 51% 42%,rgba(71,142,255,.12),transparent 72%), linear-gradient(180deg,transparent 65%,rgba(238,246,255,.96) 100%); } html.liquid-glass #hero.hero-10min::after{display:none} html.liquid-glass #hero.hero-10min .hero-kicker-10min{ border:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } html.liquid-glass.dynamic-liquid #hero.hero-10min .dynamic-liquid-canvas{display:none} @media(max-width:980px){ html.liquid-glass #hero.hero-10min{ background-image: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 44%,rgba(240,248,255,.44) 72%), linear-gradient(180deg,rgba(255,255,255,0) 0%,#eef6ff 65%,#eef6ff 100%), url("../assets/hero/onestep-hero-10min-bg-v1.jpg"); background-size:1320px auto,1320px 1000px,1320px auto; background-position:58% top,center top,58% top; } } @media(max-width:680px){ html.liquid-glass #hero.hero-10min{ background-image: linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.89) 37%,rgba(238,246,255,.92) 59%,#eef6ff 72%), url("../assets/hero/onestep-hero-10min-bg-v1.jpg"); background-size:100% 890px,1120px auto; background-position:center top,64% top; } }