:root { --brand:#3B5BEE; --brand-dark:#1E3AC8; --sidebar-bg:#07101F; --surface:#F2EFE7; --card:#FEFCF8; --text:#13110C; --muted:#6B6860; --green:#15803D; --red:#E84E4E; --accent:#B45309; --border:rgba(19,17,12,.1); --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --shadow-sm:0 8px 20px rgba(19,17,12,.06); --shadow-md:0 12px 26px rgba(19,17,12,.11); --ease:cubic-bezier(.4,0,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--surface); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.container { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
html.motion-ready [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
html.motion-ready [data-reveal="right"] { transform:translateX(18px); }
html.motion-ready [data-reveal].is-visible { opacity:1; transform:translate(0); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(242,239,231,.95); border-bottom:1px solid transparent; }
.site-header.scrolled { border-color:var(--border); }
.nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:780; letter-spacing:-.05em; }
.brand-logo { width:30px; height:30px; object-fit:contain; }
.footer-inner .brand-logo { width:27px; height:27px; }
.site-menu { display:flex; align-items:center; gap:28px; color:#555149; font-size:14px; font-weight:600; }
.site-menu > a:not(.button) { transition:color .15s var(--ease); }
.site-menu > a:not(.button):hover { color:var(--brand); }
.menu-toggle { display:none; border:0; background:transparent; color:var(--text); padding:10px; cursor:pointer; }
.menu-toggle svg { width:24px; height:24px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:var(--radius-sm); padding:10px 16px; font-size:14px; font-weight:730; cursor:pointer; transition:transform .18s var(--ease), opacity .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.button:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.button:active { transform:translateY(0); box-shadow:none; }
.button svg { width:18px; height:18px; }
.button-primary { padding:13px 20px; background:var(--brand); color:#fff; }
.button-primary:hover { background:var(--brand-dark); }
.button-small { min-height:40px; padding:9px 14px; background:var(--brand); color:#fff; }
.button-light { padding:13px 20px; background:#fff; color:var(--brand-dark); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.055em; line-height:1.05; }
h1 { max-width:680px; margin-bottom:23px; font-size:clamp(48px, 6.1vw, 78px); font-weight:800; }
h1 em { color:var(--brand); font-family:Georgia, serif; font-weight:700; }
h2 { margin-bottom:20px; font-size:clamp(34px, 4vw, 52px); font-weight:780; }
h3 { font-size:21px; font-weight:750; }
.hero { overflow:hidden; padding:68px 0 64px; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:44px; }
.hero-copy { padding:6px 0; }
.hero-fit { margin:0 0 16px; color:#56524a; font-size:18px; font-weight:650; }
.word-rotator { display:inline-block; color:var(--brand); font-weight:750; perspective:500px; vertical-align:bottom; }
.rotating-word { display:inline-block; transform-origin:center; }
.rotating-word.is-leaving { animation:word-flip-out .2s var(--ease) forwards; }
.rotating-word.is-entering { animation:word-flip-in .2s var(--ease) both; }
@keyframes word-flip-out { to { opacity:0; transform:rotateX(-85deg); } }
@keyframes word-flip-in { from { opacity:0; transform:rotateX(85deg); } to { opacity:1; transform:rotateX(0); } }
.hero-text { max-width:500px; margin-bottom:28px; color:#5e5a52; font-size:16.5px; line-height:1.62; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--brand-dark); font-size:14px; font-weight:750; }
.text-link span { font-size:18px; transition:transform .18s var(--ease); }
.hero-note { display:inline-flex; align-items:center; gap:8px; margin:24px 0 0; color:#5c5850; font-size:13px; font-weight:600; }
.hero-note-dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; display:inline-block; }
.hero-visual { position:relative; min-height:450px; }
.visual-halo { position:absolute; border-radius:50%; pointer-events:none; }
.halo-one { top:6%; right:2%; width:340px; height:340px; background:#d9defc; }
.halo-two { bottom:3%; left:3%; width:180px; height:180px; background:#e7e1d3; }
.app-window { position:absolute; top:30px; right:0; width:min(510px, 100%); min-height:360px; overflow:hidden; display:flex; border:1px solid rgba(19,17,12,.12); border-radius:18px; background:#fff; box-shadow:0 24px 48px rgba(19,17,12,.15); transform:rotate(1.5deg); animation:float-window 7s ease-in-out infinite; }
@keyframes float-window { 0%,100% { transform:rotate(1.5deg) translateY(0); } 50% { transform:rotate(1.5deg) translateY(-8px); } }
.app-sidebar { width:55px; flex:0 0 55px; display:flex; align-items:center; flex-direction:column; gap:22px; padding:16px 0; background:var(--sidebar-bg); }
.app-logo { display:grid; width:26px; height:26px; place-items:center; border-radius:7px; background:var(--brand); color:#fff; font-family:Georgia,serif; font-weight:800; }
.side-dot { width:19px; height:19px; border:1.5px solid #8090ae; border-radius:5px; opacity:.7; }
.side-dot.active { border-color:#fff; background:#3658ee; opacity:1; }
.app-main { width:100%; padding:23px; background:#f8f8f7; }
.app-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:19px; font-size:14px; }
.avatar { display:grid; width:27px; height:27px; place-items:center; border-radius:50%; background:#ecd7b4; color:#76562c; font-size:9px; font-weight:800; }
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.stat-row > div { display:flex; flex-direction:column; gap:2px; padding:13px; border:1px solid #eceae5; border-radius:10px; background:#fff; }
.stat-row span,.stat-row small { color:#77736b; font-size:9px; }
.stat-row b { font-size:23px; letter-spacing:-.06em; }
.stat-row .up { color:var(--green); font-weight:700; }
.app-card { padding:15px; border:1px solid #eceae5; border-radius:10px; background:#fff; }
.card-head { display:flex; justify-content:space-between; margin-bottom:10px; font-size:11px; }
.card-head span { color:var(--brand); font-size:9px; font-weight:700; }
.order-line { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:6px; padding:9px 0; border-top:1px solid #f0efeb; color:#494640; font-size:10px; }
.order-number { color:#8a867e; font-style:normal; }
.status { border-radius:5px; padding:3px 6px; font-size:8px; font-weight:700; }
.status.process { background:#e3e8ff; color:#3753ca; }.status.ready { background:#e3f5e7; color:#287b3b; }.status.pending { background:#f9edd6; color:#aa6b18; }
.floating-card { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid rgba(19,17,12,.08); border-radius:11px; background:#fff; box-shadow:var(--shadow-md); }
.floating-card strong,.floating-card span { display:block; }.floating-card strong { font-size:12px; }.floating-card span { color:var(--muted); font-size:10px; }
.delivery-card { top:2px; left:-4px; animation:float-card-subtle 7s ease-in-out infinite; }
.cash-card { right:-12px; bottom:15px; animation:float-card-subtle 7s ease-in-out infinite .15s; }
.cash-card strong { color:var(--green); font-size:16px; letter-spacing:-.05em; }
.icon-circle,.cash-icon { display:grid; width:31px; height:31px; place-items:center; border-radius:50%; }.icon-circle.blue { background:#e4e8ff; color:var(--brand); }.icon-circle svg { width:16px; }.cash-icon { background:#e3f5e7; color:var(--green); font-weight:800; }
.hand-note { display:inline-flex; align-items:center; gap:8px; font-family:'Caveat',cursive; font-size:21px; line-height:1.2; user-select:none; }
.hand-arrow { width:32px; height:24px; flex-shrink:0; stroke:currentColor; }
.hero-hand-note { position:absolute; bottom:-14px; right:120px; color:var(--brand); transform:rotate(-2deg); max-width:240px; z-index:10; font-size:19.5px; text-align:right; }
.how-hand-note { margin-top:24px; color:#875f28; transform:rotate(-2deg); max-width:290px; }
.price-hand-note { margin:10px 0 6px; color:#d9e0ff; font-size:22.5px; font-weight:600; transform:rotate(2deg); }
.price-hand-note .hand-arrow { width:22px; height:18px; }
.problem-section { padding:100px 0 108px; }
.split-heading { margin-bottom:44px; }
.split-heading h2 { max-width:760px; font-size:clamp(30px, 3.6vw, 44px); margin-bottom:14px; }
.split-heading p { max-width:680px; margin-bottom:0; color:var(--muted); font-size:16.5px; line-height:1.62; }
.pain-grid-asym { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.pain-block { display:flex; flex-direction:column; justify-content:center; min-height:150px; padding:28px 28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.block-wide { grid-column:span 7; }
.block-narrow { grid-column:span 5; }
.pain-block h3 { margin-bottom:8px; font-size:19.5px; line-height:1.25; letter-spacing:-.035em; color:var(--text); }
.pain-block p { margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.5; }
.benefits-section { padding:105px 0 115px; background:var(--sidebar-bg); color:#fff; border-top:1px solid rgba(255,255,255,.08); }
.benefits-intro { max-width:760px; margin-bottom:52px; }
.benefits-intro h2 { font-size:clamp(30px, 3.8vw, 44px); margin-bottom:14px; color:#fff; }
.benefits-intro p { margin:0; color:#a7b0bf; font-size:16.5px; line-height:1.62; }
.blended-table { display:grid; grid-template-columns:1fr 1fr; border-top:1px dashed rgba(255,255,255,.14); border-bottom:1px dashed rgba(255,255,255,.14); }
.table-cell { padding:44px 44px 44px 0; border-bottom:1px dashed rgba(255,255,255,.14); }
.table-cell:nth-child(odd) { padding:44px 50px 44px 0; border-right:1px dashed rgba(255,255,255,.14); }
.table-cell:nth-child(even) { padding:44px 0 44px 50px; }
.table-cell:nth-last-child(-n+2) { border-bottom:0; }
.table-cell h3 { margin-bottom:12px; font-size:21px; font-weight:780; line-height:1.25; letter-spacing:-.03em; color:#fff; }
.table-cell p { margin:0; color:#bdc5d1; font-size:14.5px; line-height:1.6; }
.how-section { padding:110px 0 120px; border-top:1px solid var(--border); }
.how-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start; }
.how-sticky-col { position:sticky; top:110px; }
.how-sticky-col h2 { font-size:clamp(32px, 3.8vw, 46px); font-weight:800; line-height:1.15; letter-spacing:-.04em; margin-bottom:18px; color:var(--text); }
.how-sticky-col p { color:#5e5a52; font-size:16.5px; line-height:1.62; max-width:460px; margin-bottom:30px; }
.how-stack-col { display:flex; flex-direction:column; gap:28px; }
.stack-card { position:sticky; top:110px; padding:38px 36px; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card); box-shadow:0 14px 34px rgba(19,17,12,.07); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.stack-card:nth-child(1) { top:110px; z-index:1; }
.stack-card:nth-child(2) { top:135px; z-index:2; }
.stack-card:nth-child(3) { top:160px; z-index:3; }
.stack-card:nth-child(4) { top:185px; z-index:4; }
.stack-num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#e6eaff; color:var(--brand-dark); font-size:12.5px; font-weight:800; margin-bottom:16px; }
.stack-card h3 { margin-bottom:10px; font-size:21px; font-weight:780; line-height:1.25; letter-spacing:-.03em; color:var(--text); }
.stack-card p { margin:0; color:#5c5850; font-size:14.5px; line-height:1.6; }
.pricing-section { padding:105px 0 115px; background:#eeebe3; border-top:1px solid var(--border); }
.pricing-heading { text-align:center; max-width:780px; margin:0 auto 48px; }
.pricing-heading h2 { margin-bottom:12px; font-size:clamp(26px, 3.2vw, 36px); letter-spacing:-.035em; }
.pricing-heading > p:last-child { color:var(--muted); font-size:16.5px; line-height:1.62; }
.pricing-horizontal-card { display:grid; grid-template-columns:1fr 1fr; max-width:880px; margin:0 auto; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
.price-main-col { padding:38px 36px; background:var(--brand); color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:20px; }
.pricing-blue-label { display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:#d9e0ff; }
.price-hero-white { display:flex; align-items:baseline; gap:3px; font-size:54px; font-weight:850; letter-spacing:-.06em; line-height:1; color:#fff; }
.price-hero-white .currency { font-size:26px; font-weight:700; align-self:flex-start; margin-top:6px; color:#fff; }
.price-hero-white small { font-size:15px; font-weight:600; letter-spacing:0; color:#d9e0ff; margin-left:4px; }
.price-hero-sub-white { margin:6px 0 0; color:#d9e0ff; font-size:13px; }
.price-setup-inset { padding:14px 16px; border-radius:var(--radius-md); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.setup-inset-label { display:block; font-size:13px; font-weight:600; color:#d9e0ff; margin-bottom:4px; }
.setup-inset-price { display:flex; align-items:baseline; gap:2px; font-size:24px; font-weight:800; color:#fff; line-height:1.1; margin-bottom:5px; }
.setup-inset-price .currency { font-size:16px; font-weight:700; }
.setup-inset-price small { font-size:12px; font-weight:600; color:#d9e0ff; margin-left:2px; }
.setup-inset-desc { margin:0; color:#d9e0ff; font-size:12px; line-height:1.4; }
.white-btn { background:#fff; color:var(--brand-dark); width:100%; justify-content:center; padding:15px; font-size:15px; }
.white-btn:hover { background:#f0f3ff; }
.price-details-col { padding:38px 36px; display:flex; flex-direction:column; justify-content:flex-start; gap:20px; }
.details-eyebrow { margin:0; font-size:18px; font-weight:750; letter-spacing:-.02em; color:var(--text); line-height:1.3; }
.features-ul { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.features-ul li { display:flex; align-items:flex-start; gap:12px; }
.features-ul li svg { width:17px; height:17px; color:var(--green); margin-top:2px; flex-shrink:0; }
.features-ul li strong { display:block; font-size:14px; font-weight:750; color:var(--text); margin-bottom:2px; line-height:1.3; }
.features-ul li p { margin:0; font-size:12.5px; color:#5c5850; line-height:1.45; }
.requirements { margin-top:20px; color:#726e66; text-align:center; font-size:13px; }
.faq-section { padding:105px 0 115px; background:var(--surface); border-top:1px solid var(--border); }
.faq-heading { text-align:center; max-width:650px; margin:0 auto 48px; }
.faq-heading h2 { margin-bottom:10px; font-size:clamp(26px, 3.2vw, 36px); letter-spacing:-.035em; }
.faq-heading p { margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.faq-container { max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq-item[open] { border-color:rgba(59,91,238,.35); box-shadow:0 6px 20px rgba(19,17,12,.04); }
.faq-summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; cursor:pointer; user-select:none; font-size:16px; font-weight:750; color:var(--text); list-style:none; }
.faq-summary::-webkit-details-marker { display:none; }
.faq-chevron { width:20px; height:20px; color:var(--muted); stroke-width:2.2; stroke:currentColor; fill:none; transition:transform .25s var(--ease), color .2s var(--ease); flex-shrink:0; }
.faq-item[open] .faq-chevron { transform:rotate(180deg); color:var(--brand); }
.faq-content { padding:0 24px 20px; color:#555149; font-size:14.5px; line-height:1.65; }
.faq-content p { margin:0; }
.site-footer { padding:85px 0 45px; background:var(--sidebar-bg); border-top:1px solid rgba(255,255,255,.08); color:#fff; }
.footer-ascii-hero { display:flex; justify-content:center; align-items:center; margin-bottom:56px; overflow:hidden; }
.ascii-canvas { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:15px; line-height:1.22; letter-spacing:.22em; color:#6b8be8; text-shadow:0 0 20px rgba(59,91,238,.45); user-select:none; pointer-events:none; text-align:center; white-space:pre; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:32px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
.footer-inner .brand { font-size:19px; }
.footer-inner .brand-logo { width:26px; height:26px; border-radius:50%; }
.footer-inner p { margin:0; color:#8e9ab0; font-size:13px; }
.footer-links { display:flex; align-items:center; gap:20px; font-size:13px; }
.footer-links a { color:#a7b0bf; transition:color .18s var(--ease); }
.footer-links a:hover { color:#fff; }
@media (max-width:850px) { .site-header { position:relative; }.menu-toggle { display:block; }.site-menu { position:absolute; top:76px; left:0; right:0; display:none; padding:18px 24px 24px; border-bottom:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); }.site-menu.open { display:grid; gap:18px; }.site-menu .button { width:100%; }.hero { padding-top:55px; }.hero-grid { grid-template-columns:1fr; }.hero-visual { max-width:560px; width:100%; margin:15px auto 0; position:relative; min-height:430px; }.hero-hand-note { position:absolute; bottom:0; right:35px; left:auto; margin:0; text-align:right; transform:rotate(-2deg); max-width:240px; font-size:18px; z-index:10; }.split-heading { grid-template-columns:1fr; }.pain-grid-asym { grid-template-columns:1fr; }.block-wide,.block-narrow { grid-column:span 1; }.blended-table { grid-template-columns:1fr; }.table-cell, .table-cell:nth-child(odd), .table-cell:nth-child(even) { padding:32px 0; border-right:0; border-bottom:1px dashed rgba(255,255,255,.14); }.table-cell:last-child { border-bottom:0; }.how-grid { grid-template-columns:1fr; gap:36px; }.how-sticky-col { position:static; }.how-stack-col { gap:20px; }.stack-card { position:sticky; top:80px; padding:28px 24px; box-shadow:0 12px 28px rgba(19,17,12,.08); }.stack-card:nth-child(1) { top:80px; z-index:1; } .stack-card:nth-child(2) { top:98px; z-index:2; } .stack-card:nth-child(3) { top:116px; z-index:3; } .stack-card:nth-child(4) { top:134px; z-index:4; }.pricing-horizontal-card { grid-template-columns:1fr; max-width:580px; }.price-main-col { padding:32px 26px; }.price-details-col { padding:30px 26px; }.site-footer { padding:65px 0 35px; }.footer-ascii-hero { margin-bottom:42px; }.ascii-canvas { font-size:13px; letter-spacing:.12em; }.trust-items { gap:14px; flex-wrap:wrap; padding:20px 0; }.trust-items span { width:100%; text-align:center; }.trust-items i { display:none; } }
@media (max-width:580px) { .container { width:min(100% - 32px, 1120px); }.nav { min-height:64px; }.site-menu { top:64px; padding-left:16px; padding-right:16px; }.hero { padding:43px 0 50px; }.hero-text { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }.button-primary { width:100%; }.hero-visual { min-height:390px; }.app-window { top:20px; min-height:270px; transform:rotate(0); animation:float-window-mobile 7s ease-in-out infinite; }.app-main { padding:15px; }.app-sidebar { width:42px; flex-basis:42px; gap:16px; }.stat-row b { font-size:20px; }.order-line { grid-template-columns:43px 1fr auto; font-size:8px; }.status { font-size:7px; }.delivery-card { left:-5px; top:2px; }.cash-card { right:-4px; bottom:40px; }.floating-card { padding:8px 9px; }.trust-strip { padding:0; }.problem-section,.how-section { padding:75px 0; }.pain-block { min-height:130px; padding:22px 20px; }.pain-block h3 { font-size:18px; }.benefits-section { padding:70px 0; }.stack-card { padding:24px 20px; }.stack-card:nth-child(1) { top:72px; } .stack-card:nth-child(2) { top:88px; } .stack-card:nth-child(3) { top:104px; } .stack-card:nth-child(4) { top:120px; }.pricing-section,.faq-section { padding:75px 0; }.pricing-horizontal-card { padding:0; }.faq-summary { padding:17px 18px; font-size:15px; }.faq-content { padding:0 18px 18px; font-size:13.5px; }.price-hero-white { font-size:46px; }.hero-hand-note { position:absolute; bottom:-6px; right:10px; left:auto; margin:0; text-align:right; transform:rotate(-2deg); max-width:215px; font-size:16px; line-height:1.15; z-index:10; }.hero-hand-note .hand-arrow { width:26px; height:20px; }.how-hand-note { font-size:18px; margin-top:16px; }.price-hand-note { font-size:17px; }.site-footer { padding:50px 0 30px; }.footer-ascii-hero { margin-bottom:30px; }.ascii-canvas { font-size:clamp(8.5px, 2.45vw, 11.5px); letter-spacing:.02em; }.footer-inner { align-items:flex-start; flex-direction:column; gap:14px; padding-top:22px; }.footer-links { flex-wrap:wrap; gap:12px; } }
@keyframes float-window-mobile { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.pain-block { transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
@media (hover:hover) { .pain-block:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }