/* Inter self-host: variable 400–800, cyrillic+latin (лицензия SIL OFL) */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/inter-cyr.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/inter-lat.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ --bg:#08080E; --bg-2:#0D0C15; --ink:#F5F4FB; --muted:#A8A6BE; --muted-2:#787690; --accent:#7F77DD; --accent-2:#378ADD; --grad:linear-gradient(100deg,#534AB7,#378ADD); --grad-soft:linear-gradient(120deg,rgba(127,119,221,.16),rgba(55,138,221,.16)); --grad-text:linear-gradient(100deg,#AFA9EC,#85B7EB); --surface:#13121F; --surface-2:#1A1828; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15); --sage:#5FC0A1; --alert:#EC7361; --money:#E8B65C; --radius:22px; --maxw:1120px; --shadow:0 40px 90px -40px rgba(0,0,0,.85); --nav-bg:rgba(8,8,14,.6); } /* ===== СВЕТЛАЯ ТЕМА (дефолт через data-theme="light" на ; тёмная база ниже не тронута) ===== */ [data-theme="light"]{ --bg:#F7F6FB; --bg-2:#FFFFFF; --ink:#191823; --muted:#5B5A6E; --muted-2:#67657E; --accent:#534AB7; --accent-2:#378ADD; --grad:linear-gradient(100deg,#534AB7,#378ADD); --grad-soft:linear-gradient(120deg,rgba(83,74,183,.10),rgba(55,138,221,.10)); --grad-text:linear-gradient(110deg,#534AB7 20%,#7FA7F2 40%,#378ADD 60%,#534AB7 80%); --surface:#FFFFFF; --surface-2:#F3F2FA; --line:rgba(25,24,35,.10); --line-2:rgba(25,24,35,.16); --sage:#2E8C6A; --alert:#C8503C; --money:#A97A17; --shadow:0 30px 70px -38px rgba(63,58,140,.35); --nav-bg:rgba(247,246,251,.78); } [data-theme="light"] .shimmer{background:linear-gradient(110deg,#534AB7 20%,#7FA7F2 40%,#378ADD 60%,#534AB7 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text} [data-theme="light"] .btn{box-shadow:0 14px 30px -14px rgba(83,74,183,.65)} [data-theme="light"] .btn:hover{box-shadow:0 20px 44px -14px rgba(83,74,183,.78)} [data-theme="light"] .btn.ghost{background:#fff;box-shadow:none} [data-theme="light"] .btn.ghost:hover{background:var(--grad-soft)} [data-theme="light"] .badge.b{background:rgba(25,24,35,.05)} [data-theme="light"] .plan-inc span{background:rgba(25,24,35,.04)} [data-theme="light"] .mcell{background:var(--surface-2)} [data-theme="light"] .todoist{background:rgba(25,24,35,.03)} [data-theme="light"] .cw{background:rgba(25,24,35,.03)} [data-theme="light"] .ill::after{background:linear-gradient(rgba(25,24,35,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(25,24,35,.05) 1px,transparent 1px)} [data-theme="light"] .gridlines{background:linear-gradient(rgba(25,24,35,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(25,24,35,.04) 1px,transparent 1px)} [data-theme="light"] .glow.g1{background:radial-gradient(closest-side,rgba(83,74,183,.14),transparent 70%)} [data-theme="light"] .glow.g2{background:radial-gradient(closest-side,rgba(55,138,221,.12),transparent 70%)} /* mesh-полотно: единый живой фон всей страницы (утверждено 04.08) */ [data-theme="light"] #mesh{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} [data-theme="light"] .page{background:transparent} [data-theme="light"] .section[style]{background:transparent!important} [data-theme="light"] .gridlines{display:none} [data-theme="light"] .prow:hover{box-shadow:0 26px 54px -34px rgba(63,58,140,.3)} [data-theme="light"] .method{background:radial-gradient(90% 100% at 50% 0%,rgba(83,74,183,.07),transparent 62%),var(--surface);box-shadow:0 24px 60px -40px rgba(63,58,140,.25)} [data-theme="light"] .consult{background:radial-gradient(90% 130% at 12% 0%,rgba(83,74,183,.08),transparent 58%),var(--surface)} [data-theme="light"] .prod.hot{background:linear-gradient(180deg,rgba(83,74,183,.07),var(--bg-2))} [data-theme="light"] .about .port{box-shadow:0 30px 70px -40px rgba(63,58,140,.45)} [data-theme="light"] .about .port::after{background:radial-gradient(70% 45% at 50% -5%,rgba(83,74,183,.10),transparent 60%)} [data-theme="light"] .step .k{box-shadow:0 10px 22px -10px rgba(83,74,183,.55)} /* финальный CTA — всегда тёмная вставка (решение А) */ [data-theme="light"] .final{ --ink:#F5F4FB;--muted:#A8A6BE;--muted-2:#787690;--accent:#8E86EA; --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15); background:#0D0C15;border-color:rgba(255,255,255,.08);color:var(--ink); } *{box-sizing:border-box} html{scroll-behavior:smooth} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .page{ margin:0;background:var(--bg);color:var(--ink); font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip; } a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 20px} .eyebrow::before{content:"";width:24px;height:1.5px;background:var(--accent)} h2.title{font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:700;margin:0 0 16px;text-wrap:balance} .section{padding:clamp(64px,9vw,130px) 0;position:relative} .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:16px 32px;border-radius:999px;border:0;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .3s;box-shadow:0 14px 34px -12px rgba(83,74,183,.85);overflow:hidden} .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease} .btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 50px -12px rgba(83,74,183,1)} .btn:hover::after{transform:translateX(120%)} .btn.sm{padding:12px 24px;font-size:14.5px} .btn.ghost{background:rgba(255,255,255,.03);border:1px solid var(--line-2);box-shadow:none;color:var(--ink)} .btn.ghost::after{display:none} .btn.ghost:hover{border-color:var(--accent);background:var(--grad-soft);transform:translateY(-1px)} /* NAV */ .nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)} .nav-right{display:flex;align-items:center;gap:12px} .theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;transition:border-color .2s,transform .18s} .theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{line-height:1;text-decoration:none} .brand .hey{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;color:#AFA9EC;text-transform:uppercase} .brand .name{display:block;font-size:24px;font-weight:800;letter-spacing:-.01em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} /* HERO */ .hero{position:relative;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(64px,9vw,120px);overflow:clip} .glow{position:absolute;pointer-events:none;will-change:transform} .glow.g1{width:70vw;height:70vw;max-width:900px;max-height:900px;right:-18vw;top:-28vw;background:radial-gradient(closest-side,rgba(83,74,183,.34),transparent 68%)} .glow.g2{width:50vw;height:50vw;max-width:640px;max-height:640px;left:-16vw;top:18%;background:radial-gradient(closest-side,rgba(55,138,221,.22),transparent 70%)} .gridlines{position:absolute;inset:0;pointer-events:none;opacity:.5; background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(75% 60% at 50% 30%,#000 30%,transparent 100%); mask-image:radial-gradient(75% 60% at 50% 30%,#000 30%,transparent 100%)} #mesh{display:none} .hero .grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,72px);align-items:center} .hero h1{font-size:clamp(40px,5.8vw,68px);line-height:1.02;letter-spacing:-.028em;font-weight:800;margin:0 0 24px} .hero h1 .line{display:block;overflow:hidden} .hero h1 .line>span{display:block;transform:translateY(110%);animation:lineUp .9s cubic-bezier(.16,.8,.24,1) forwards} .hero h1 .line:nth-child(1)>span{animation-delay:.08s} .hero h1 .line:nth-child(2)>span{animation-delay:.18s} .hero h1 .line:nth-child(3)>span{animation-delay:.28s} @keyframes lineUp{to{transform:none}} .shimmer{background:linear-gradient(110deg,#AFA9EC 20%,#EEEDFE 40%,#85B7EB 60%,#AFA9EC 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5.5s linear infinite} @keyframes shine{to{background-position:-220% 0}} .hero .sub{font-size:clamp(17px,1.8vw,21px);color:var(--muted);max-width:29em;margin:0 0 34px} .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:20px} .note{font-size:14px;color:var(--muted);max-width:32em;margin:0} .note b{color:var(--ink);font-weight:600} .fade{opacity:0;transform:translateY(16px);animation:fade .8s cubic-bezier(.2,.7,.2,1) forwards} .fade.d1{animation-delay:.1s}.fade.d2{animation-delay:.45s}.fade.d3{animation-delay:.6s}.fade.d4{animation-delay:.75s} @keyframes fade{to{opacity:1;transform:none}} /* PHONE + CHAT */ .demo{width:100%;max-width:400px;justify-self:center;perspective:1200px} .phone{position:relative;border-radius:44px;padding:12px;background:linear-gradient(160deg,#2A2840,#131220);border:1px solid var(--line-2);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.09);transform-style:preserve-3d;transition:transform .25s ease-out;opacity:0;animation:phoneIn 1s cubic-bezier(.16,.8,.24,1) .35s forwards} @keyframes phoneIn{from{opacity:0;transform:translateY(36px) rotateX(8deg) scale(.96)}to{opacity:1;transform:none}} .phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:34%;height:26px;background:#08080E;border-radius:0 0 18px 18px;z-index:3} /* экран чата — тёмный в обеих темах (продукт-акцент на светлой странице) */ .screen{border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#1A1828,#13121F);color:#F5F4FB; --ink:#F5F4FB;--muted:#A8A6BE;--muted-2:#787690;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15); --sage:#5FC0A1;--alert:#EC7361;--money:#E8B65C;--grad-soft:linear-gradient(120deg,rgba(127,119,221,.16),rgba(55,138,221,.16)); --grad-text:linear-gradient(100deg,#AFA9EC,#85B7EB)} [data-theme="light"] .phone{border-color:rgba(25,24,35,.22)} .card-head{display:flex;align-items:center;gap:12px;padding:38px 18px 14px;border-bottom:1px solid var(--line)} .avatar{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none;overflow:hidden;box-shadow:0 0 0 0 rgba(127,119,221,.5);animation:pulse 3s ease-out 1.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,119,221,.45)}45%{box-shadow:0 0 0 12px rgba(127,119,221,0)}100%{box-shadow:0 0 0 0 rgba(127,119,221,0)}} .avatar svg{width:22px;height:22px} .avatar img{width:100%;height:100%;object-fit:cover;display:block} .who{display:flex;flex-direction:column;line-height:1.25} .who .n{font-weight:700;font-size:15px} .who .s{font-size:12.5px;color:var(--sage);font-weight:600} .time{margin-left:auto;font-size:12.5px;color:var(--muted-2);font-variant-numeric:tabular-nums} .cbody{padding:18px 16px 22px;display:flex;flex-direction:column;gap:12px;min-height:352px} .msg{opacity:0;transform:translateY(12px) scale(.98)} .msg.show{animation:msgIn .5s cubic-bezier(.2,.8,.25,1) forwards} @keyframes msgIn{to{opacity:1;transform:none}} .bubble{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:6px 16px 16px 16px;padding:13px 15px;font-size:14.5px} .typing{display:inline-flex;gap:5px;padding:14px 16px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:6px 16px 16px 16px;width:max-content} .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:tp 1s ease-in-out infinite} .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s} @keyframes tp{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}} .stats{display:flex;gap:8px;flex-wrap:wrap} .chip{display:inline-flex;align-items:baseline;gap:6px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums} .chip b{font-size:15px} .chip.warn,.chip.warn b{color:var(--alert)} .chip.money,.chip.money b{color:var(--money)} .verdict{font-weight:600} .tlist{list-style:none;margin:0;padding:13px 15px;display:flex;flex-direction:column;gap:11px} .tlist li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.35} .num{flex:none;width:23px;height:23px;border-radius:50%;background:var(--grad-soft);color:var(--accent);font-weight:700;font-size:13px;display:grid;place-items:center;margin-top:1px} .tlist .meta{color:var(--muted-2);font-size:12.5px} .acts{display:flex;gap:9px} .pill{flex:1;text-align:center;font-size:13.5px;font-weight:700;padding:11px;border-radius:11px} .pill.solid{background:var(--grad-soft);color:var(--accent)} .pill.gho{color:var(--muted);border:1px solid var(--line)} /* reveal on scroll */ .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.8,.24,1)} .rv.in{opacity:1;transform:none} /* PROBLEMS */ .lead-sub{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:36em;margin:0} .prob{display:flex;flex-direction:column;gap:clamp(18px,3vw,28px);margin-top:44px} .prow{display:grid;grid-template-columns:1fr .78fr;gap:clamp(24px,4vw,52px);align-items:center;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3.4vw,46px);transition:border-color .3s,transform .3s,box-shadow .3s} .prow:hover{border-color:rgba(127,119,221,.35);transform:translateY(-3px);box-shadow:0 30px 60px -35px rgba(83,74,183,.45)} .prow:nth-child(even){grid-template-columns:.78fr 1fr} .prow:nth-child(even) .ill{order:-1} .prow h3{font-size:clamp(20px,2.3vw,27px);line-height:1.18;margin:0 0 12px;letter-spacing:-.015em} .prow p{margin:0 0 16px;color:var(--muted);font-size:15.5px} .solve{display:flex;gap:11px;align-items:flex-start;background:var(--grad-soft);border:1px solid rgba(127,119,221,.26);border-radius:14px;padding:14px 16px;font-size:14.5px} .solve .tag{flex:none;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:13px;letter-spacing:.04em} .ill{position:relative;background:radial-gradient(90% 90% at 60% 20%,rgba(83,74,183,.22),transparent 62%),var(--bg);border:1px solid var(--line);border-radius:18px;min-height:180px;display:grid;place-items:center;padding:22px;text-align:center;overflow:hidden} .ill::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent)} .ill .big{position:relative;font-size:clamp(30px,3.4vw,40px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;letter-spacing:-.02em;z-index:1} .ill .lbl{position:relative;margin-top:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;font-size:11px;color:var(--muted-2);z-index:1} /* STEPS */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .step{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:transform .3s,border-color .3s} .step:hover{transform:translateY(-4px);border-color:rgba(127,119,221,.35)} .step .k{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-weight:800;color:#fff;margin-bottom:18px;font-size:16px;box-shadow:0 10px 24px -8px rgba(120,110,240,.7)} .step h3{margin:0 0 8px;font-size:18.5px} .step p{margin:0;color:var(--muted);font-size:14.5px} .todoist{margin-top:24px;display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14.5px;border:1px solid var(--line);border-radius:16px;padding:16px 20px;background:rgba(255,255,255,.02)} .todoist b{color:var(--ink);font-weight:600} .todoist-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--grad-soft);display:grid;place-items:center} .todoist-ic svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* PRODUCTS */ .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch} .prod{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .3s,border-color .3s} .prod:hover{transform:translateY(-4px)} .prod.hot{position:relative;background:linear-gradient(180deg,rgba(83,74,183,.13),var(--bg-2));border:1px solid transparent;background-clip:padding-box} .prod.hot::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);padding:1px;background:conic-gradient(from var(--ang,210deg),rgba(175,169,236,.9),rgba(55,138,221,.28),rgba(175,169,236,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .prod.hot:hover::before{animation:spin 5s linear infinite} @property --ang{syntax:"";initial-value:210deg;inherits:false} @keyframes spin{from{--ang:210deg}to{--ang:570deg}} .badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:18px} .badge.a{background:var(--grad);color:#fff} .badge.b{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line)} .badge.c{background:transparent;color:var(--accent);border:1px solid rgba(127,119,221,.4)} .prod h3{margin:0 0 10px;font-size:21px} .prod p{margin:0 0 22px;color:var(--muted);font-size:14.5px;flex:1} .prod .btn{width:100%} .plan-sub{color:var(--muted);font-size:clamp(15px,1.5vw,17px);max-width:40em;margin:0 0 4px} .plan-inc{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto} .plan-inc span{font-size:12px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:5px 11px} .plan-inc span.hl{color:var(--ink);background:var(--grad-soft);border:1.5px solid var(--accent);font-weight:700;box-shadow:0 0 0 3px rgba(127,119,221,.14)} .plan-note{text-align:center;color:var(--muted);font-size:14.5px;max-width:46em;margin:28px auto 0;line-height:1.65} .plan-note b{color:var(--ink);font-weight:600} .plans-more-title{margin:60px 0 22px;font-size:clamp(19px,2.2vw,25px);font-weight:700;letter-spacing:-.01em;text-align:center} .prods.two{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto} .mode-label{display:inline-flex;align-items:center;gap:11px;margin:56px 0 30px;padding:11px 24px;border-radius:999px;background:var(--grad-soft);border:1px solid rgba(127,119,221,.45);box-shadow:0 0 0 4px rgba(127,119,221,.08);font-size:15px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} .mode-label::after{content:none} .mode-label em{font-style:normal;color:#151021;font-weight:800;font-size:10.5px;letter-spacing:.1em;background:linear-gradient(100deg,#AFA9EC,#85B7EB);border-radius:999px;padding:3px 9px} .consult{position:relative;background:radial-gradient(90% 130% at 12% 0%,rgba(83,74,183,.18),transparent 58%),linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:clamp(32px,4.5vw,56px)} .consult .eyebrow{margin-bottom:16px} .consult-h{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em;margin:0 0 14px;font-weight:700} .consult-lead{color:var(--muted);font-size:clamp(16px,1.6vw,18px);max-width:40em;margin:0 0 26px} .consult-weeks{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cw{border:1px solid var(--line);border-radius:16px;padding:22px;background:rgba(255,255,255,.02)} .cw-k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .cw b{display:block;font-size:17px;margin-bottom:8px} .cw p{margin:0;color:var(--muted);font-size:14.5px} .consult .btn{margin-top:26px} /* единое центрирование секций (стиль Apple): заголовки-интро по центру, тело карточек — слева */ .section .wrap{text-align:center} .section .wrap .prod,.section .wrap .cw,.section .wrap .mcell, .section .wrap .step,.section .wrap .prow,.section .wrap details, .section .wrap .todoist,.section .wrap.about,.section .wrap .plan-inc{text-align:left} .plan-sub,.consult-lead{margin-left:auto;margin-right:auto} .mode-label::before{content:none} /* METHOD */ .method{position:relative;background:radial-gradient(90% 100% at 50% 0%,rgba(83,74,183,.17),transparent 62%),linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:clamp(32px,4.5vw,58px);text-align:center;overflow:hidden} .method .soon{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .method h2{font-size:clamp(24px,3.2vw,36px);margin:0 0 14px;letter-spacing:-.02em} .method p{color:var(--muted);max-width:40em;margin:0 auto 22px;font-size:16px} .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 8px} .mgrid.four{grid-template-columns:repeat(4,1fr)} .method-rule{color:var(--ink);font-weight:600;font-size:16px;margin:20px auto 6px;max-width:40em} .method-count{font-weight:800;font-size:15px;letter-spacing:.06em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin:2px auto 10px} .method-soon{color:var(--muted-2);font-size:13.5px;margin:0 auto 4px} .mcell{border:1px solid var(--line);border-radius:16px;padding:20px;text-align:left;color:var(--muted-2);font-size:13.5px;background:rgba(255,255,255,.02);transition:border-color .3s} .mcell:hover{border-color:rgba(127,119,221,.3)} .mcell b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px} /* ABOUT */ .about{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(28px,5vw,64px);align-items:center} .about .port{position:relative;aspect-ratio:1;border-radius:calc(var(--radius) + 6px);overflow:hidden;border:1px solid var(--line-2);box-shadow:0 34px 80px -34px rgba(83,74,183,.5)} .about .port img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block} .about .port::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 45% at 50% -5%,rgba(127,119,221,.22),transparent 60%),linear-gradient(to bottom,transparent 48%,rgba(8,8,14,.35) 80%,var(--bg) 100%)} .about .port .init{font-size:64px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .about p{color:var(--muted);font-size:15.5px;margin:0 0 15px} .about p b{color:var(--ink)} .about .links{display:flex;gap:12px;margin-top:24px} /* FAQ */ .faq{display:flex;flex-direction:column;gap:12px;margin-top:44px;max-width:820px} details{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .3s} details[open]{border-color:rgba(127,119,221,.35)} summary{list-style:none;cursor:pointer;padding:21px 24px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px} summary::-webkit-details-marker{display:none} summary .plus{flex:none;width:24px;height:24px;position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1)} summary .plus::before,summary .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)} summary .plus::before{width:15px;height:2px} summary .plus::after{width:2px;height:15px;transition:opacity .25s} details[open] summary .plus{transform:rotate(135deg)} details p{margin:0;padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:1.65} /* FINAL CTA */ .final{position:relative;text-align:center;border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);padding:clamp(44px,6.5vw,80px) clamp(24px,4vw,48px);overflow:hidden;background:var(--bg-2)} .final .fglow{position:absolute;width:120%;height:200%;left:-10%;top:-60%;background:radial-gradient(45% 45% at 50% 50%,rgba(83,74,183,.35),transparent 70%);animation:drift 9s ease-in-out infinite alternate;pointer-events:none} @keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}} .final h2{position:relative;font-size:clamp(30px,4vw,48px);margin:0 0 16px;letter-spacing:-.025em} .final p{position:relative;color:var(--muted);max-width:38em;margin:0 auto 32px;font-size:16.5px} .final .btn{position:relative} .lead{position:relative;display:flex;flex-direction:column;gap:12px;max-width:460px;margin:0 auto;text-align:left} .lead .frow{display:flex;gap:12px} .lead input,.lead select,.lead textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:13px;padding:14px 16px;color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s,background .2s} .lead input::placeholder,.lead textarea::placeholder{color:var(--muted-2)} .lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06)} .lead select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat} .lead select option{background:var(--surface);color:var(--ink)} .lead textarea{resize:vertical;min-height:76px} .lead .btn{width:100%;margin-top:4px} .or{position:relative;color:var(--muted);font-size:14px;margin:16px 0 0} .or a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap} .or a:hover{text-decoration:underline} .thanks{position:relative;background:var(--grad-soft);border:1px solid rgba(127,119,221,.3);border-radius:16px;padding:26px 24px;max-width:460px;margin:0 auto;font-size:16px;line-height:1.5} .thanks b{color:var(--ink)} @media (max-width:520px){.lead .frow{flex-direction:column}} /* FOOTER */ footer{border-top:1px solid var(--line);padding:42px 0} footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center} .fnav{display:flex;gap:24px;flex-wrap:wrap} .fnav a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s} .fnav a:hover{color:var(--ink)} .copy{color:var(--muted-2);font-size:13px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rv,.fade,.msg,.phone,.hero h1 .line>span{opacity:1!important;transform:none!important} } /* iPad */ @media (max-width:1024px){ .steps,.prods{grid-template-columns:repeat(3,1fr)} } /* phone / small tablet */ @media (max-width:900px){ .hero .grid{grid-template-columns:1fr;gap:48px} .demo{order:2;max-width:380px} .prow,.prow:nth-child(even){grid-template-columns:1fr} .prow:nth-child(even) .ill{order:0} .steps,.prods,.prods.two,.mgrid,.mgrid.four,.consult-weeks{grid-template-columns:1fr} .about{grid-template-columns:1fr} .about .port{max-width:280px;justify-self:center} } /* --- header menu (Фаза 1.1) --- */ .nav-menu{display:flex;align-items:center;gap:26px} .nav-link{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:.01em;position:relative;transition:color .2s} .nav-link:hover{color:var(--ink)} .nav-link.active{color:var(--ink)} .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--grad)} .nav-actions{display:flex;align-items:center;gap:12px;margin-left:16px} .nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0} .nav-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s} .nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.nav-open .nav-burger span:nth-child(2){opacity:0} .nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:940px){ .nav-burger{display:flex} /* фон сплошной: backdrop-filter внутри .nav (у него свой filter) не срабатывает */ .nav-menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(8,8,14,.35);flex-direction:column;align-items:flex-start;gap:20px;padding:22px 24px 26px} .nav.nav-open .nav-menu{display:flex} .nav-link{font-size:16px} .nav-link.active::after{bottom:-5px} .nav-actions{margin-left:0;flex-wrap:wrap;gap:12px} } /* --- CALM book (Фаза 1.2: раздел /calm) --- */ .book-wrap{max-width:880px;margin:0 auto;padding:0 clamp(20px,4vw,44px)} .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted-2);margin:0 0 28px} .crumbs a{color:var(--muted);text-decoration:none;transition:color .2s} .crumbs a:hover{color:var(--ink)} .crumbs .sep{opacity:.55} .book-hero{padding:clamp(44px,6vw,76px) 0 clamp(10px,2vw,20px)} .book-hero h1{font-size:clamp(34px,4.8vw,52px);line-height:1.07;letter-spacing:-.025em;font-weight:800;margin:0 0 18px;text-wrap:balance} .book-lead{font-size:clamp(17px,2vw,19px);line-height:1.62;color:var(--muted);max-width:46em;margin:0} .book-lead strong{color:var(--ink)} .book-meta{display:flex;gap:8px 18px;flex-wrap:wrap;margin:22px 0 0;font-size:13px;color:var(--muted-2)} .book-meta b{color:var(--muted);font-weight:600} .prose{padding:clamp(10px,2vw,18px) 0 clamp(48px,6vw,64px)} .prose h2{font-size:clamp(23px,3vw,31px);line-height:1.15;letter-spacing:-.02em;margin:clamp(40px,5.5vw,58px) 0 14px} .prose h3{font-size:19px;margin:30px 0 10px} .prose p{color:var(--muted);margin:0 0 15px;max-width:46em;line-height:1.66} .prose p strong,.prose li strong{color:var(--ink)} .prose ul,.prose ol{color:var(--muted);padding-left:1.25em;margin:0 0 16px;max-width:44em} .prose li{margin:0 0 9px;line-height:1.6} .prose li::marker{color:var(--accent);font-weight:700} .prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s} .prose a:hover{border-color:var(--accent)} .prose a.btn{color:#fff;border-bottom:0} .prose .book-nav a,.prose .hub-grid a{border-bottom:0} .canon-phrase{margin:24px 0 26px;padding:20px 26px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line);font-weight:700;color:var(--ink);font-size:17px;line-height:1.5;letter-spacing:-.01em;max-width:44em} .canon-phrase.center{text-align:center} .aside-frame{margin:22px 0 26px;padding:18px 22px;border-radius:14px;border:1px dashed var(--line-2);background:var(--surface);max-width:46em} .aside-frame .af-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} .aside-frame p{margin:0;font-size:15px} .tbl-scroll{overflow-x:auto;margin:20px 0 26px;border:1px solid var(--line);border-radius:14px;background:var(--surface)} table.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:540px} .tbl th{text-align:left;padding:12px 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top;line-height:1.55} .tbl tr:last-child td{border-bottom:0} .tbl td b,.tbl td strong{color:var(--ink)} .val{display:inline-block;padding:2px 11px;border-radius:999px;background:var(--grad-soft);border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap} .matrix{display:grid;grid-template-columns:96px 1fr 1fr;gap:10px;margin:24px 0 26px;max-width:620px} .mx-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-weight:700;align-self:center;padding:4px 2px} .mx-h.col{text-align:center} .mx-cell{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;min-height:58px;position:relative} .mx-cell .n{position:absolute;top:10px;right:12px;font-size:13px;color:var(--muted-2)} .mx-cell .t{display:block;font-size:13.5px;color:var(--muted);line-height:1.45;margin:2px 0;padding-right:22px} .mx-cell .t b{color:var(--ink);font-weight:600} .mx-cell.empty{border-style:dashed;background:transparent} .mx-cell.empty .e{font-size:12.5px;color:var(--muted-2)} .tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:1px;margin-right:6px} .tag.f{background:var(--grad);color:#fff} .tag.b{background:var(--grad-soft);color:var(--accent);border:1px solid var(--line)} .tag.x{background:transparent;color:var(--muted-2);border:1px solid var(--line-2)} .hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0 10px} .hub-card{display:block;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:22px 24px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .3s;position:relative} .hub-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 20px 44px -28px rgba(63,58,140,.4)} .hub-card .hc-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;font-size:13.5px;font-weight:700;margin-bottom:12px} .hub-card h3{margin:0 0 8px;font-size:17.5px;color:var(--ink);letter-spacing:-.01em} .hub-card p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55} .hub-card .hc-go{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--accent)} .hub-roadmap{font-size:14px;color:var(--muted-2);margin:6px 0 0;max-width:46em} .book-product{margin:clamp(40px,5.5vw,58px) 0 0;padding:24px 28px;border-radius:16px;background:var(--grad-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .book-product p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.55;max-width:34em} .book-nav{display:flex;gap:14px;justify-content:space-between;margin:clamp(36px,5vw,52px) 0 0;flex-wrap:wrap} .book-nav a{flex:1;min-width:230px;border:1px solid var(--line);border-radius:16px;padding:16px 20px;text-decoration:none;background:var(--surface);transition:border-color .2s,transform .2s} .book-nav a:hover{border-color:var(--accent);transform:translateY(-2px)} .book-nav .dir{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px} .book-nav .bn-t{color:var(--ink);font-weight:600;font-size:15.5px} .book-nav a.next{text-align:right;margin-left:auto} @media (max-width:700px){ .hub-grid{grid-template-columns:1fr} .matrix{grid-template-columns:76px 1fr 1fr;gap:8px} .mx-cell{padding:10px 10px;min-height:48px} .mx-cell .t{padding-right:16px} .book-product{flex-direction:column;align-items:flex-start} } /* --- CALM book: канон, глоссарий, промпт --- */ .prose pre.code{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.62;color:var(--muted);margin:20px 0 26px;white-space:pre-wrap} .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--grad-soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)} .prose pre.code code{background:none;border:0;padding:0;color:inherit} .prose hr{border:0;border-top:1px solid var(--line);margin:clamp(32px,4.5vw,48px) 0} .prose blockquote{margin:20px 0 24px;padding:16px 24px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 12px 12px 0;max-width:46em} .prose blockquote p{margin:0 0 8px} .prose blockquote p:last-child{margin-bottom:0} .prose h4{font-size:16.5px;margin:24px 0 8px} .glossary h3{scroll-margin-top:96px;padding-top:4px} .glossary h3+p{margin-bottom:22px} .method-soon a{color:var(--accent);text-decoration:none;font-weight:600} .method-soon a:hover{text-decoration:underline} .plan-inc .hl a{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor} /* --- переработка главной (замечания 04.08) --- */ .prob-lead{color:var(--muted);font-size:clamp(16px,1.9vw,18.5px);line-height:1.65;max-width:44em;margin:0 auto 26px} .prob-lead strong,.prob-answer strong{color:var(--ink)} .prob-answer{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:44em;margin:14px auto 0} .solve-lines{display:flex;flex-direction:column;gap:6px} .solve-lines b{color:var(--ink)} .cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 10px;text-align:left} .cyc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px} .cyc .cyc-k{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .cyc b{display:block;font-size:16.5px;margin-bottom:6px} .cyc p{margin:0;color:var(--muted);font-size:14px;line-height:1.5} .cycle-note{color:var(--muted-2);font-size:14px;max-width:44em;margin:0 auto 26px} .mcell .mletter{display:block;font-size:clamp(34px,4vw,46px);font-weight:800;line-height:1.1;margin-bottom:6px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .method p{text-wrap:balance} .consult-weeks.four{grid-template-columns:repeat(4,1fr)} .founder-label{font-weight:600;color:var(--ink);margin-bottom:8px} @media (max-width:900px){ .cycle{grid-template-columns:1fr} .consult-weeks.four{grid-template-columns:1fr} } /* --- аудит 04.08: доступность, контраст, канон --- */ [data-theme="light"] .brand .hey{color:var(--accent)} .section,#early{scroll-margin-top:84px} .btn:focus-visible,.nav-link:focus-visible,summary:focus-visible,button:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px} .canon-toc{margin:6px 0 30px;padding:16px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13.5px;line-height:2;color:var(--muted)} .canon-toc b{color:var(--ink);margin-right:6px} .canon-toc a{color:var(--accent);text-decoration:none;white-space:nowrap} .canon-toc a:hover{text-decoration:underline} .prose h2[id],.prose h3[id],.prose h4[id]{scroll-margin-top:96px} .hub-card.wide{grid-column:1/-1;background:var(--grad-soft)} .g-more{font-size:12.5px;white-space:nowrap;color:var(--accent);text-decoration:none;margin-left:6px} .g-more:hover{text-decoration:underline} .book-faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 18px;margin:0 0 10px;max-width:46em} .book-faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none} .book-faq summary::-webkit-details-marker{display:none} .book-faq summary::after{content:"+";float:right;color:var(--accent);font-weight:700} .book-faq details[open] summary::after{content:"–"} .book-faq details p{margin:10px 0 2px;color:var(--muted);line-height:1.6} .lead-note{font-size:13.5px;color:var(--muted-2);margin:10px 0 0} .lead-note a{color:var(--accent)} .impl-who{display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px 22px;margin:22px 0} .impl-who img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0} .impl-who p{margin:0;font-size:14.5px} /* --- значения осей: семантические метки вместо эмодзи --- */ .val{position:relative;padding-left:20px} .val::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--muted-2)} .val.v-grow::before{background:var(--sage)} .val.v-stay::before{background:var(--muted-2)} .val.v-work::before{background:var(--accent-2)} .val.v-life::before{background:#E0729B} .val.v-key::before{background:var(--alert)} .val.v-imp::before{background:var(--money)} .val.v-reg::before{background:var(--muted-2)} .val.v-do::before{background:var(--accent)} .val.v-deleg::before{background:var(--accent-2)} .val.v-wait::before{background:var(--muted-2);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line-2)} .muted-s{font-size:12.5px;color:var(--muted-2)} /* --- секция «Твой контекст»: накопление слоёв --- */ .ctx-lead{color:var(--muted);font-size:clamp(16px,1.9vw,18px);line-height:1.62;max-width:44em;margin:0 auto 34px} .ctx-lead strong{color:var(--ink)} .ctx{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left;position:relative} .ctx-item{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px 22px;overflow:hidden} .ctx-item::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);opacity:.25;transform-origin:left;transition:opacity .3s} .ctx-item:nth-child(1)::before{transform:scaleX(.25)} .ctx-item:nth-child(2)::before{transform:scaleX(.5)} .ctx-item:nth-child(3)::before{transform:scaleX(.75);opacity:.5} .ctx-item:nth-child(4)::before{transform:scaleX(1);opacity:.8} .ctx-item:hover::before{opacity:1} .ctx-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px} .ctx-when{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .ctx-st{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2)} .ctx-st.on{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 45%,transparent)} .ctx-st.soon{color:var(--muted-2)} .ctx-item b{display:block;font-size:16.5px;margin-bottom:8px;letter-spacing:-.01em} .ctx-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.55} .ctx-note{color:var(--muted);font-size:16px;line-height:1.65;max-width:46em;margin:30px auto 0} .ctx-note strong{color:var(--ink)} .ctx-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s} .ctx-note a:hover{border-color:var(--accent)} @media (max-width:900px){ .ctx{grid-template-columns:1fr} .ctx-item::before{transform:scaleX(1)!important} } .tbl td.yes{color:var(--sage);font-weight:600} .tbl td.no{color:var(--muted-2)} /* ===== РЕВИЗИЯ ДИЗАЙНА 04.08: фундамент ===== */ /* 1. Глубина карточек — двухслойные тени (было box-shadow:none везде) */ :root{--elev-1:0 1px 2px rgba(0,0,0,.35),0 14px 30px -20px rgba(0,0,0,.7); --elev-2:0 2px 6px rgba(0,0,0,.45),0 28px 56px -28px rgba(0,0,0,.8)} [data-theme="light"]{--elev-1:0 1px 2px rgba(25,24,35,.05),0 10px 24px -16px rgba(63,58,140,.22); --elev-2:0 2px 6px rgba(25,24,35,.07),0 26px 52px -26px rgba(63,58,140,.34)} .prow,.step,.prod,.cyc,.cw,.todoist,.hub-card,.ctx-item,.impl-who,.tbl-scroll,.book-faq details,.faq details{box-shadow:var(--elev-1)} .prow:hover,.step:hover,.prod:hover,.hub-card:hover,.cyc:hover,.ctx-item:hover{box-shadow:var(--elev-2)} .step,.cyc,.cw{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s} .step:hover,.cyc:hover{transform:translateY(-3px);border-color:rgba(127,119,221,.4)} /* 2. FAQ: блок был прижат влево (max-width без margin auto) */ .faq{max-width:860px;margin:44px auto 0} /* 3. Ghost-кнопка внутри .prose была невидимой (белый текст на белом) */ .prose a.btn.ghost{color:var(--ink)} [data-theme="light"] .btn.ghost{background:#fff;box-shadow:none;color:var(--ink)} /* 4. Mesh — только герой, тело страницы нейтральное (было залито на 11000px) */ [data-theme="light"] .page{position:relative;background:linear-gradient(180deg,#F7F6FB 0,#FAFAFC 900px,#F8F8FC 100%)} [data-theme="light"] #mesh{position:absolute;top:0;left:0;width:100%;height:min(1250px,140vh); -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%)} /* 5. Вертикальный ритм: было ~290px пустоты между секциями */ .section{padding:clamp(56px,6.5vw,96px) 0} /* 6. Длина строки: было 88–95 знаков (46em при 16px) */ .book-wrap{--measure:38em} .prose p,.prose blockquote,.aside-frame,.canon-phrase,.book-faq,.book-faq details,.hub-roadmap{max-width:var(--measure)} .prose ul,.prose ol{max-width:calc(var(--measure) - .5em)} .prose p{line-height:1.7} .book-lead{max-width:42em} /* 7. Плитки-иллюстрации: градиентный текст обесценивал фирменный градиент */ .ill{min-height:150px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px} .ill .big{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink); -webkit-text-fill-color:currentColor;font-size:clamp(21px,2.1vw,27px);letter-spacing:-.02em} .ill .lbl{color:var(--muted)} @media(max-width:700px){.ill{min-height:0;padding:18px}.ill .big{font-size:20px}} /* 8. Матрица: клетки выглядели как пустые поля ввода */ .mx-cell{min-height:72px;display:flex;flex-direction:column;gap:6px;padding:12px 14px} .mx-cell .n{position:static;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--grad-soft);border:1px solid var(--line);color:var(--accent);font-size:12px;font-weight:700;flex:none} .mx-cell .t{padding-right:0;display:flex;gap:7px;align-items:flex-start} .mx-cell .t .tag{flex:none;margin-right:0;margin-top:1px} .mx-h{color:var(--muted);font-size:12.5px} .mx-lab{font-size:12px;color:var(--muted-2);letter-spacing:.01em} /* 9. Канон-фразы: два лавандовых бруска встык — в акцентную цитату */ .canon-phrase{margin:28px 0 30px;padding:2px 0 2px 22px;border:0;border-left:3px solid var(--accent); border-radius:0;background:none;font-size:19px;font-weight:700;line-height:1.45;letter-spacing:-.015em;color:var(--ink)} .canon-phrase.center{text-align:left} .canon-phrase + .canon-phrase{margin-top:-16px} /* 10. Таблицы: подсказки прокрутки + компактный режим на мобиле */ .tbl-scroll{background:var(--surface); background-image:linear-gradient(to right,var(--surface),rgb(255 255 255/0)), linear-gradient(to left,var(--surface),rgb(255 255 255/0)), linear-gradient(to right,rgb(25 24 35/.10),rgb(25 24 35/0)), linear-gradient(to left,rgb(25 24 35/.10),rgb(25 24 35/0)); background-position:0 0,100% 0,0 0,100% 0;background-repeat:no-repeat; background-size:34px 100%,34px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll} @media (max-width:640px){ table.tbl.stack2{min-width:0;display:block} .tbl.stack2 thead{display:none} .tbl.stack2 tbody,.tbl.stack2 tr,.tbl.stack2 td{display:block;width:100%} .tbl.stack2 tr{padding:14px 16px;border-bottom:1px solid var(--line)} .tbl.stack2 tr:last-child{border-bottom:0} .tbl.stack2 td{padding:0;border:0} .tbl.stack2 td:first-child{margin-bottom:6px;color:var(--ink);font-size:15px;font-weight:600} .tbl.stack2 td+td{font-size:14.5px;color:var(--muted)} } /* 11. Строка CALM в таблице сравнения — это пуант, а выглядела как все */ .tbl tr.is-calm td{background:var(--grad-soft);color:var(--ink)} .tbl tr.is-calm td:first-child{position:relative} .tbl tr.is-calm td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)} /* 12. Полоса глав — единство книги CALM */ .book-steps{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 0;font-size:13px} .book-steps a{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 9px;border-radius:999px; color:var(--muted);text-decoration:none;border:1px solid var(--line);background:var(--surface);transition:all .2s} .book-steps a:hover{color:var(--ink);border-color:var(--accent)} .book-steps a.is-cur{color:var(--ink);border-color:rgba(127,119,221,.45);background:var(--grad-soft);font-weight:600} .book-steps i{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%; background:var(--grad-soft);border:1px solid var(--line);font-style:normal;font-size:11px;font-weight:700;color:var(--accent)} .book-steps a.is-cur i{background:var(--grad);border-color:transparent;color:#fff} @media (max-width:760px){ .book-steps{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none} .book-steps::-webkit-scrollbar{display:none} .book-steps a{flex:none} } .ac-badge{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--accent); background:var(--grad-soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px} .impl-who img{width:88px;height:88px;border-radius:18px} .impl-who{gap:22px;align-items:flex-start} /* 13. Плавное раскрытие аккордеонов (прогрессивное улучшение) */ :root{interpolate-size:allow-keywords} .faq details,.book-faq details{overflow:hidden;transition:border-color .3s,box-shadow .3s} .faq details[open],.book-faq details[open]{border-color:rgba(127,119,221,.35)} details::details-content{block-size:0;overflow:clip; transition:block-size .38s cubic-bezier(.2,.7,.2,1),content-visibility .38s allow-discrete} details[open]::details-content{block-size:auto} /* 14. Полоса прогресса чтения — длинные главы читаются как документ */ .readbar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none; transform:scaleX(0);transform-origin:0 50%;background:var(--grad);will-change:transform} /* 15. Цикл Утро→Вечер→Неделя: показать замкнутость */ .cycle{position:relative} .cyc:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:9px;height:9px;margin-top:-5px; border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);opacity:.45} @media (max-width:900px){.cyc:not(:last-child)::after{right:50%;top:auto;bottom:-11px;margin:0;transform:rotate(135deg)}} /* 16. Магнитная кнопка больше не съедает hover-подъём (был баг) */ .btn{transform:translate(var(--mx,0px),var(--my,0px))} .btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px)) scale(1.02)} .final .btn{transition:transform .12s linear,box-shadow .3s} /* 17. Вечные анимации — только когда видно */ .avatar{animation:pulse 3s ease-out 1.6s 3} .final .fglow{animation:none} .final.live .fglow{animation:drift 9s ease-in-out infinite alternate} /* 18. /implementation — герой с доказательствами, таймлайн, карточки */ .impl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 22px} .is-c{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px 18px;box-shadow:var(--elev-1)} .is-c b{display:block;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;margin-bottom:4px; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .is-c span{font-size:13px;color:var(--muted);line-height:1.45} .impl-hero-cta{margin-top:4px} .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .impl-flow{list-style:none;padding:0;margin:22px 0 28px;max-width:none;counter-reset:none} .impl-flow li{position:relative;display:flex;gap:16px;padding:0 0 22px 0;margin:0} .impl-flow li::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--line)} .impl-flow li:last-child::before{display:none} .impl-flow li::marker{content:none} .impl-flow .k{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:var(--grad);color:#fff;font-weight:700;font-size:15px;box-shadow:0 10px 22px -10px rgba(83,74,183,.55);z-index:1} .impl-flow b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:3px} .impl-flow .dur{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:7px} .impl-flow p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:38em} .prose .impl-prods{margin:22px 0 8px} .prose .impl-prods .prod p{max-width:none;margin:0 0 14px} .prose .impl-why{margin:22px 0 30px;text-align:left} .prose .impl-why .cw p{max-width:none} .book-product.compact{margin:20px 0 26px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .book-product.compact p{font-size:15px;max-width:38em} @media (max-width:760px){.impl-stats{grid-template-columns:1fr}} /* ===== ЖИВОЙ ФОН + АНИМАЦИИ (04.08) ===== */ /* 19. Mesh снова на всю страницу — но мягче, чтобы контраст держался */ [data-theme="light"] .page{background:var(--bg)} [data-theme="light"] #mesh{position:fixed;top:0;left:0;width:100%;height:100%;opacity:.62; -webkit-mask-image:none;mask-image:none} /* книжная колонка получает лёгкую «бумагу» — текст читается поверх цвета */ .book-wrap{position:relative;z-index:0} [data-theme="light"] .book-wrap::before{content:"";position:absolute;z-index:-1; inset:-20px clamp(-36px,-3vw,-14px);background:rgba(255,255,255,.42);border-radius:26px;pointer-events:none} /* 20. Матрица дня: подсветка порядка чтения ① → ⑥ */ .matrix.seq .mx-cell{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s,background .45s} .matrix.seq .mx-cell .n{transition:background .35s,color .35s,border-color .35s,transform .35s} .matrix.seq .mx-cell.read{border-color:rgba(127,119,221,.55);background:var(--grad-soft); transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(83,74,183,.6)} .matrix.seq .mx-cell.read .n{background:var(--grad);border-color:transparent;color:#fff;transform:scale(1.14)} .matrix.seq .mx-cell.is-focus{border-color:rgba(127,119,221,.45);background:var(--grad-soft)} .matrix.seq .mx-cell.is-focus .n{background:var(--grad);border-color:transparent;color:#fff} .mx-hint{display:block;font-size:12.5px;color:var(--muted-2);margin:-14px 0 26px} /* 21. Буквы C·A·L·M — последовательный блик */ .mletter{position:relative;display:inline-block} .mletter::after{content:attr(data-l);position:absolute;inset:0; background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:260% 100%;background-position:180% 0;opacity:0;pointer-events:none} .mletter.lit::after{opacity:1;animation:sweep 1.1s cubic-bezier(.3,.6,.3,1) forwards} @keyframes sweep{from{background-position:180% 0}to{background-position:-80% 0}} /* 22. Цикл: мягкая пульсация такта по кругу */ .cyc.beat{border-color:rgba(127,119,221,.5);box-shadow:0 20px 42px -26px rgba(83,74,183,.5);transform:translateY(-3px)} .cyc .cyc-k{transition:color .3s} .cyc.beat .cyc-k{color:var(--accent-2)} /* 23. «План принят» — визуальное подтверждение закрытого дня */ .acts .pill.solid{position:relative} .acts.ok .pill.solid::after{content:"";position:absolute;inset:-3px;border-radius:999px; border:2px solid var(--sage);opacity:0;animation:okring .9s ease-out .1s 1} @keyframes okring{0%{opacity:.9;transform:scale(.94)}100%{opacity:0;transform:scale(1.1)}} /* 24. Полоски накопления контекста заполняются по очереди */ .ctx-item::before{transform:scaleX(0)!important;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s} .ctx-item.fill:nth-child(1)::before{transform:scaleX(.25)!important} .ctx-item.fill:nth-child(2)::before{transform:scaleX(.5)!important} .ctx-item.fill:nth-child(3)::before{transform:scaleX(.75)!important} .ctx-item.fill:nth-child(4)::before{transform:scaleX(1)!important} @media (prefers-reduced-motion:reduce){ .matrix.seq .mx-cell,.mletter.lit::after,.cyc.beat,.acts.ok .pill.solid::after{animation:none!important;transition:none!important} .ctx-item::before{transition:none} .ctx-item:nth-child(1)::before{transform:scaleX(.25)!important} .ctx-item:nth-child(2)::before{transform:scaleX(.5)!important} .ctx-item:nth-child(3)::before{transform:scaleX(.75)!important} .ctx-item:nth-child(4)::before{transform:scaleX(1)!important} } /* 25. Живой фон — в обеих темах, ярче */ #mesh{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85} [data-theme="light"] #mesh{opacity:.9;-webkit-mask-image:none;mask-image:none} .page{background:transparent} [data-theme="light"] .page{background:transparent} [data-theme="light"] .book-wrap::before{background:rgba(255,255,255,.3)} html{background:var(--bg)} /* 26. Уточнение имени и паспорт метода */ .hatnote{margin:0 0 30px;padding:14px 20px;border-left:3px solid var(--muted-2);background:var(--surface-2); border-radius:0 12px 12px 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:var(--measure)} .hatnote b{color:var(--ink)} .hatnote a{color:var(--accent)} .passport{display:grid;gap:1px;margin:20px 0 30px;border:1px solid var(--line);border-radius:14px; overflow:hidden;background:var(--line);max-width:var(--measure)} .passport>div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:14px;background:var(--surface);padding:12px 18px} .passport dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin:0} .passport dd{margin:0;font-size:14.5px;color:var(--ink);line-height:1.5} .passport a{color:var(--accent);text-decoration:none} @media (max-width:620px){.passport>div{grid-template-columns:1fr;gap:4px}} /* 27. Постоянные ссылки на разделы */ .prose h2 .anchor{margin-left:8px;font-weight:400;font-size:.8em;color:var(--muted-2);text-decoration:none;opacity:0;transition:opacity .15s} .prose h2:hover .anchor,.prose h2 .anchor:focus-visible{opacity:1} @media (hover:none){.prose h2 .anchor{opacity:.4}} /* 28. Карточка автора */ .author-card{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;margin:0 0 34px} .author-card img{width:200px;height:200px;border-radius:18px;object-fit:cover;box-shadow:var(--elev-2)} .author-card .passport{margin:0} @media (max-width:680px){.author-card{grid-template-columns:1fr;gap:20px} .author-card img{width:150px;height:150px}} .prose pre.code{background:var(--surface-2);border:1px solid var(--line);border-radius:12px; padding:14px 18px;overflow-x:auto;font-size:13.5px;line-height:1.6;margin:0 0 18px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-word} .prose pre.code i{color:var(--muted);font-style:italic}