/* 4RO Design System v3.0 — extracted from 4ro-final.html */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* ═══ DARK THEME (default) ═══ */ :root{ --bg:#07070a;--bg2:#0d0d12;--bg3:#141418;--bg4:#1d1d23; --border:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.12);--b3:rgba(255,255,255,0.2); --text:#edeae3;--muted:#5a5855;--muted2:#8f8c87; --gold:#d4a853;--gold2:#f0c87a;--goldl:rgba(212,168,83,0.15); --green:#3ecf8e;--red:#ff5757;--blue:#4ea8de; --f:'Onest',sans-serif;--m:'JetBrains Mono',monospace; --shadow:rgba(0,0,0,0.6); --canvas-line:212,168,83; --nav-bg:rgba(7,7,10,0.93); --hgrid-line:rgba(255,255,255,0.026); --covl-from:rgba(7,7,10,0.7); --code-bg:#0d0d12; } /* ═══ LIGHT THEME ═══ */ [data-theme="light"]{ --bg:#f5f3ef;--bg2:#eceae5;--bg3:#e2dfd9;--bg4:#d4d1ca; --border:rgba(0,0,0,0.08);--b2:rgba(0,0,0,0.13);--b3:rgba(0,0,0,0.22); --text:#1a1917;--muted:#8a8780;--muted2:#5c5a55; --gold:#b8891e;--gold2:#c9991f;--goldl:rgba(184,137,30,0.12); --green:#1a9e63;--red:#d63030;--blue:#2876b5; --shadow:rgba(0,0,0,0.12); --canvas-line:184,137,30; --nav-bg:rgba(245,243,239,0.93); --hgrid-line:rgba(0,0,0,0.04); --covl-from:rgba(226,223,217,0.8); --code-bg:#e2dfd9; } /* ═══ THEME TOGGLE ═══ */ .theme-toggle{ width:36px;height:36px;border-radius:50%;border:1px solid var(--b2); background:transparent;cursor:pointer;display:flex;align-items:center; justify-content:center;font-size:16px;transition:all .25s;flex-shrink:0; } .theme-toggle:hover{background:var(--bg3);border-color:var(--b3)} /* show/hide sun/moon based on theme */ .icon-moon{display:block} .icon-sun{display:none} [data-theme="light"] .icon-moon{display:none} [data-theme="light"] .icon-sun{display:block} body{font-family:var(--f);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s} a{color:inherit;text-decoration:none} /* ═══ INNER CONTAINER ═══ */ .inner{max-width:80%;margin:0 auto;width:100%} /* ═══ BG CANVAS — fixed behind everything ═══ */ #bgc{position:fixed;inset:0;z-index:0;pointer-events:none} nav,main,footer,.cur,.curR{position:relative;z-index:2} /* ═══ CURSOR ═══ */ .cur{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--gold); transform:translate(-50%,-50%);pointer-events:none;z-index:9999;transition:width .15s,height .15s} .curR{position:fixed;width:32px;height:32px;border-radius:50%;border:1px solid rgba(212,168,83,.3); transform:translate(-50%,-50%);pointer-events:none;z-index:9998} /* ═══ NAV ═══ */ nav{position:fixed!important;top:0;left:0;right:0;z-index:500!important; display:flex;align-items:center;justify-content:space-between; padding:16px 10%;border-bottom:1px solid transparent;transition:all .4s} nav.on{background:var(--nav-bg);backdrop-filter:blur(20px);border-color:var(--border)} .logo{font-family:var(--m);font-size:20px;font-weight:700;color:var(--gold2);letter-spacing:-1px} .nlinks{display:flex;gap:28px} .nlinks a{font-size:13px;color:var(--muted2);font-weight:500;transition:color .2s} .nlinks a:hover{color:var(--text)} .nbtn{background:var(--gold);color:#000;border:none;padding:9px 22px;border-radius:8px; font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s} .nbtn:hover{background:var(--gold2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(212,168,83,.3)} /* ═══ BUTTONS ═══ */ .btnP{background:var(--gold);color:#000;border:none;padding:14px 30px;border-radius:10px; font-size:14px;font-weight:700;cursor:pointer;font-family:var(--f); display:inline-flex;align-items:center;gap:9px;transition:all .25s} .btnP:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 12px 36px rgba(212,168,83,.32)} .btnO{background:transparent;color:var(--text);border:1px solid var(--b2);padding:14px 26px; border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--f);transition:all .25s} .btnO:hover{background:var(--bg3);border-color:var(--b3)} /* ═══ HERO ═══ */ .hero{position:relative;display:grid;grid-template-columns:1fr 540px; gap:56px;align-items:start;padding:88px 10% 60px;overflow:hidden;background:var(--bg)} .hgrid{position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--hgrid-line) 1px,transparent 1px), linear-gradient(90deg,var(--hgrid-line) 1px,transparent 1px); background-size:60px 60px;animation:gdrift 24s linear infinite} @keyframes gdrift{to{background-position:60px 60px}} .hglow{position:absolute;top:0;left:50%;transform:translateX(-50%); width:1000px;height:560px;pointer-events:none; background:radial-gradient(ellipse at 50% 0%,rgba(212,168,83,.07) 0%,transparent 62%)} .hcontent{position:relative;z-index:2} @keyframes hIn{from{opacity:0;transform:translateY(var(--hy,20px))}to{opacity:1;transform:none}} .hbadge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04); border:1px solid var(--border);padding:7px 16px;border-radius:100px;margin-bottom:28px; font-size:12px;color:var(--muted2);--hy:16px;animation:hIn .55s .15s ease both} .bdot{width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 8px var(--green);animation:bp 2.4s ease-in-out infinite} @keyframes bp{0%,100%{box-shadow:0 0 8px var(--green)}50%{box-shadow:0 0 2px var(--green)}} .hero h1{font-size:clamp(32px,4vw,58px);font-weight:900;line-height:1.05; letter-spacing:-2px;margin-bottom:20px;--hy:36px;animation:hIn .7s .35s ease both} .hero h1 em{font-style:normal;color:var(--gold)} .hero h1 .dim{color:var(--muted)} .hdesc{font-size:17px;color:var(--muted2);line-height:1.7;max-width:500px; margin-bottom:36px;--hy:24px;animation:hIn .6s .48s ease both} .hacts{display:flex;gap:14px;flex-wrap:wrap;--hy:20px;animation:hIn .55s .58s ease both} /* Stats: compact 4-col grid inside right column */ .hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .hs{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px; padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center} .hsn{font-size:19px;font-weight:900;letter-spacing:-.5px;color:var(--gold2);font-family:var(--m);line-height:1} .hsl{font-size:9px;color:var(--muted);margin-top:3px} /* Hero visual (iMac + stats) */ @keyframes hvisualIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .hvisual{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;animation:hvisualIn .8s .35s ease both} /* На десктопе опускаем iMac до уровня H1 (бейдж над H1 не учитываем) */ @media(min-width:961px){.hvisual{margin-top:64px}} /* Средние экраны: соразмерно уменьшаем iMac и поджимаем поля, чтобы текст не зажимался */ @media(max-width:1280px){.hero{grid-template-columns:1fr 440px;padding-left:6%;padding-right:6%;gap:40px}} @media(max-width:1080px){.hero{grid-template-columns:1fr 380px;padding-left:5%;padding-right:5%}.hvisual{margin-top:48px}} .hscroll{overflow-x:auto;overflow-y:hidden;border-radius:12px;position:relative;height:220px; cursor:grab;scrollbar-width:none;-ms-overflow-style:none;width:100%;min-width:0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)} .hscroll::-webkit-scrollbar{display:none} .hscroll.dragging{cursor:grabbing;user-select:none} .hscroll-track{display:flex;gap:10px;width:max-content;height:100%} .hcard{width:220px;height:100%;flex-shrink:0;border-radius:10px;overflow:hidden; position:relative;border:1px solid var(--border);cursor:pointer; transition:border-color .25s,transform .25s;text-decoration:none;display:block} .hcard:hover{border-color:rgba(212,168,83,.4);transform:translateY(-3px)} .hcard img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s} .hcard:hover img{transform:scale(1.04)} .hcard::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.22) 0%,rgba(0,0,0,.04) 35%,rgba(0,0,0,.72) 100%)} .hcard-lbl{position:absolute;bottom:0;left:0;right:0;padding:8px 10px 10px;z-index:2} .hcard-cat{font-size:8px;font-family:var(--m);font-weight:700;letter-spacing:1px; color:var(--gold);text-transform:uppercase;display:block;margin-bottom:2px} .hcard-title{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} /* ═══ MARQUEE ═══ */ .mwrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:15px 0;background:var(--bg2)} .mtrack{display:flex;width:max-content;animation:mq 28s linear infinite} .mtrack:hover{animation-play-state:paused} @keyframes mq{to{transform:translateX(-50%)}} .mi{display:flex;align-items:center;gap:10px;padding:0 30px;white-space:nowrap; font-size:13px;color:var(--muted2);font-weight:500} .mi span{color:var(--gold);font-size:9px} /* ═══ SECTIONS ═══ */ .sec{padding:64px 10%;background:var(--bg)} .sec.alt{background:var(--bg2)} .sdiv{height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,83,.2),transparent)} .stag{font-family:var(--m);font-size:11px;color:rgba(212,168,83,.55);letter-spacing:3px; text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px} .stag::before{content:'//';color:var(--gold)} .sh{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-2px;line-height:1.05;margin-bottom:12px} .ss{font-size:15px;color:var(--muted2);line-height:1.7;max-width:420px;margin-bottom:48px} /* ═══ BUILD ═══ */ .blay{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .blist{display:flex;flex-direction:column} .bstep{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--border);cursor:pointer} .bstep:first-child{border-top:1px solid var(--border)} .bstep.active .bnum{background:var(--gold);color:#000;border-color:var(--gold)} .bstep.done .bnum{background:rgba(62,207,142,.1);color:var(--green);border-color:var(--green)} .bnum{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--m);font-size:11px;font-weight:700;color:var(--muted);transition:all .3s} .binfo{flex:1} .binfo strong{display:block;font-size:15px;font-weight:700;margin-bottom:3px;transition:color .3s} .bstep.active .binfo strong{color:var(--gold)} .binfo p{font-size:14px;color:var(--muted);line-height:1.5} .barr{color:var(--muted);font-size:14px;align-self:center;transition:all .3s} .bstep.active .barr{color:var(--gold);transform:translateX(4px)} .cwin{background:var(--code-bg);border:1px solid var(--b2);border-radius:14px; overflow:hidden;box-shadow:0 24px 70px var(--shadow);min-height:320px} .cbar2{background:var(--bg3);padding:10px 16px;display:flex;align-items:center; gap:8px;border-bottom:1px solid var(--border)} .cfn{flex:1;font-family:var(--m);font-size:11px;color:var(--muted2);text-align:center} .cbody{padding:18px;font-family:var(--m);font-size:12px;line-height:1.85; color:var(--muted2);min-height:280px} .kw{color:#9c6dd6}.st{color:#4a8f3f}.fn2{color:#3060a0}.cm{color:var(--muted)} [data-theme="light"] .kw{color:#7c3aed} [data-theme="light"] .st{color:#1a6b2a} [data-theme="light"] .fn2{color:#1d4ed8} [data-theme="light"] .ok{color:var(--green)} [data-theme="light"] .tg{color:#1e5fa0} .ok{color:var(--green)}.tg{color:#5a9fd4} .cl{display:flex;gap:14px} .ln{color:var(--border);min-width:18px;user-select:none;opacity:.5} .tc{display:inline-block;width:6px;height:13px;background:var(--gold); animation:blink .8s step-end infinite;vertical-align:text-bottom} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} /* ═══ CASES ═══ */ .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .cc{background:var(--bg2);border:1px solid var(--border);border-radius:16px; cursor:pointer;overflow:hidden; transition:border-color .25s,transform .25s,box-shadow .25s} .cc:hover{border-color:rgba(212,168,83,.3);transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.5)} .cimg{height:180px;overflow:hidden;position:relative;background:var(--bg3)} .cimg-inner{position:absolute;inset:0;background-size:cover;background-position:center top; opacity:.72;transition:opacity .3s,transform .3s} .cc:hover .cimg-inner{opacity:1;transform:scale(1.03)} .cbdy{padding:18px 20px 20px} .ctags{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap} .ctag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase; padding:3px 8px;border-radius:4px;background:rgba(212,168,83,.12);color:var(--gold)} .ctag.muted{background:rgba(255,255,255,.05);color:var(--muted2)} .ctit{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:8px} .cdesc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px} .cmeta{display:flex;align-items:center;justify-content:space-between} .cbg{font-size:10px;padding:3px 8px;border-radius:4px;font-family:var(--m);background:var(--bg4);color:var(--muted2)} .cbg.nda{background:rgba(255,87,87,.1);color:#ff8a8a} .cbg.tm{background:rgba(78,168,222,.1);color:var(--blue)} .ctm{font-size:11px;font-family:var(--m);color:var(--blue); background:rgba(78,168,222,.08);padding:3px 8px;border-radius:4px} .carr{color:var(--gold);font-size:16px;opacity:0;transition:opacity .2s;line-height:1} .cc:hover .carr{opacity:1} .cc.wide{grid-column:span 3;display:grid;grid-template-columns:400px 1fr} .cc.wide .cimg{height:100%;min-height:200px} .cc.wide .cbdy{padding:32px 36px;display:flex;flex-direction:column;justify-content:center} .cc.wide .ctit{font-size:18px;margin-bottom:10px} /* ── Filter bar ── */ .filters-bar{display:flex;align-items:center;gap:12px} .filters-scroll{flex:1;min-width:0;overflow-x:auto} /* ── Filter buttons ── */ .filter-btn{background:rgba(255,255,255,.05);border:1px solid var(--border); color:var(--muted2);padding:7px 18px;border-radius:100px;font-size:12px;font-weight:600; font-family:var(--f);cursor:pointer;transition:all .2s} .filter-btn:hover:not(.active){background:rgba(255,255,255,.08);color:var(--text)} .filter-btn.active{background:var(--gold);color:#000;border-color:var(--gold)} /* ── Cases section header with toggle ── */ .cases-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:48px} .cases-hd .view-toggle{padding-top:8px;flex-shrink:0} /* ── View toggle ── */ .view-toggle{display:flex;gap:4px;flex-shrink:0} .view-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px; border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.04); color:var(--muted2);cursor:pointer;transition:all .2s} .view-btn:hover{background:rgba(255,255,255,.08);color:var(--text)} .view-btn.active{background:rgba(212,168,83,.15);border-color:rgba(212,168,83,.5);color:var(--gold)} .view-btn svg rect{transition:opacity .2s} .view-btn.active svg rect{opacity:1} /* ── Compact grid view ── */ .carows.view-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .carows.view-compact .carow{display:flex;flex-direction:column;min-height:unset; border-radius:14px;margin-bottom:0;direction:ltr!important} .carows.view-compact .carow.rev>*{direction:ltr} .carows.view-compact .caimg{height:190px;position:relative;flex-shrink:0} .carows.view-compact .cacont{flex:1;padding:20px; border:1px solid var(--border)!important;border-top:none!important} .carows.view-compact .caeyebrow{margin-bottom:10px} .carows.view-compact .catitle{font-size:15px;margin-bottom:8px} .carows.view-compact .cadesc{font-size:12px;margin-bottom:12px} .carows.view-compact .cameta{margin-bottom:12px} @keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes cardOut{from{opacity:1}to{opacity:0}} .cc.hiding{animation:cardOut .18s ease forwards} .cc.showing{animation:cardIn .35s ease forwards} /* ═══ CASES — ALTERNATING ROWS (V14) ═══ */ .carows{display:flex;flex-direction:column;gap:0} .carow{display:grid;grid-template-columns:55% 45%;min-height:340px; border-radius:20px;overflow:hidden;margin-bottom:16px;cursor:pointer; transition:box-shadow .3s;text-decoration:none;color:inherit} .carow:hover{box-shadow:0 20px 64px rgba(0,0,0,.5)} .carow.rev{direction:rtl} .carow.rev>*{direction:ltr} .caimg{position:relative;overflow:hidden} .caimg-in{position:absolute;inset:0;background-size:cover;background-position:center; transition:transform .5s ease} .carow:hover .caimg-in{transform:scale(1.04)} .cacont{background:var(--bg2);padding:44px 40px;display:flex;flex-direction:column; justify-content:center;border:1px solid var(--border);border-left:none} .carow.rev .cacont{border-left:1px solid var(--border);border-right:none} .caeyebrow{font-family:var(--m);font-size:11px;color:var(--gold);letter-spacing:.1em; text-transform:uppercase;margin-bottom:16px} .catitle{font-size:22px;font-weight:800;line-height:1.2;margin-bottom:12px;letter-spacing:-.02em} .cadesc{font-size:13px;color:var(--muted2);line-height:1.65;margin-bottom:20px} .cameta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px} .catag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase; padding:3px 8px;border-radius:4px;background:rgba(212,168,83,.12);color:var(--gold)} .catag.muted{background:rgba(255,255,255,.05);color:var(--muted2)} .cacta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600; color:var(--gold);transition:gap .2s} .carow:hover .cacta{gap:12px} .carow.hiding{animation:cardOut .18s ease forwards} .carow.showing{animation:cardIn .35s ease forwards} /* ═══ COMPARE ═══ */ .ctbl{border:1px solid var(--b2);border-radius:16px;overflow:hidden; max-width:920px;background:var(--bg3)} .ctblh{display:grid;grid-template-columns:2fr 1.5fr 1.5fr 1.5fr; background:var(--bg4);border-bottom:1px solid var(--border)} .ch{padding:16px 20px;font-size:13px;font-weight:700} .ch.m{color:var(--gold);background:rgba(212,168,83,.06)} .crow{display:grid;grid-template-columns:2fr 1.5fr 1.5fr 1.5fr; border-bottom:1px solid var(--border);transition:background .2s} .crow:last-child{border-bottom:none} .crow:hover{background:rgba(255,255,255,.02)} .cv{padding:14px 20px;font-size:13px;line-height:1.5;display:flex;align-items:center;gap:7px} .cv.lb{color:var(--muted2);font-size:12px} .cv.m{background:rgba(212,168,83,.04)} .bad{color:var(--red)}.good{color:var(--green)}.neu{color:var(--muted)} /* ═══ PROCESS ═══ */ .procsec{padding:56px 0;background:var(--bg2)} .prochd{padding:0 10%;margin-bottom:32px} .procov{overflow:hidden} .proctr{display:flex;gap:16px;padding:0 10%;transition:transform .55s cubic-bezier(.25,.46,.45,.94)} .pcard{flex-shrink:0;width:290px;background:var(--bg3);border:1px solid var(--border); border-radius:16px;padding:28px 24px;transition:border-color .3s,transform .3s; position:relative;overflow:hidden} .pcard::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none; background:radial-gradient(circle at 50% 0%,rgba(212,168,83,.06) 0%,transparent 60%)} .pcard.on{border-color:rgba(212,168,83,.4);transform:translateY(-4px)} .pcard.on::after{opacity:1} .pn{font-family:var(--m);font-size:11px;color:var(--muted);letter-spacing:1px; margin-bottom:18px;display:flex;align-items:center;gap:8px} .pndot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .3s} .pcard.on .pndot{background:var(--gold);box-shadow:0 0 6px var(--gold)} .pico{font-size:32px;margin-bottom:14px} .pcard h3{font-size:17px;font-weight:800;margin-bottom:9px;letter-spacing:-.4px} .pcard p{font-size:14px;color:var(--muted2);line-height:1.7;margin-bottom:18px} .pres{background:rgba(62,207,142,.07);border:1px solid rgba(62,207,142,.15); border-radius:8px;padding:9px 13px;font-size:13px;color:var(--green);line-height:1.5} .pres::before{content:'✓ ';font-weight:700} .pdots{display:flex;gap:7px;padding:24px 10% 0;justify-content:center} .pdot{width:6px;height:6px;border-radius:50%;background:var(--border);cursor:pointer;transition:all .3s} .pdot.on{background:var(--gold);width:22px;border-radius:3px} /* ═══ SERVICES ═══ */ .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sc{background:var(--bg3);border:1px solid var(--border);border-radius:14px; padding:24px 20px;display:flex;flex-direction:column; position:relative;overflow:hidden;transition:border-color .3s,transform .3s} .sc:hover{border-color:var(--b3)} .sc.pop{border-color:rgba(212,168,83,.35)} .sc.pop::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 30% 0%,rgba(212,168,83,.06) 0%,transparent 60%)} /* Featured card — full width, two columns */ .sc.featured{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:36px;border-radius:16px} .sc.featured .sc-left .sico{font-size:40px;margin-bottom:16px} .sc.featured .sc-left .sti{font-size:22px;margin-bottom:6px} .sc.featured .sc-left .sfo{font-size:15px;margin-bottom:20px} .sc.featured .sc-left .spr{font-size:28px;margin-bottom:4px} .sc.featured .sc-left .std{font-size:14px;margin-bottom:0} .sc.featured .sc-right .sft li{font-size:15px;padding:7px 0} .sc.featured .sc-right .sbtn{margin-top:20px;width:100%;text-align:center} .pbadge{position:absolute;top:0;right:24px;background:var(--gold);color:#000; font-size:10px;font-weight:700;padding:3px 10px;border-radius:0 0 7px 7px;letter-spacing:.5px} .sico{font-size:26px;margin-bottom:14px} .sti{font-size:17px;font-weight:800;margin-bottom:5px;letter-spacing:-.3px} .sfo{font-size:13px;color:var(--muted);margin-bottom:18px} .sft{flex:1;list-style:none;margin-bottom:20px} .sft li{font-size:14px;color:var(--muted2);padding:5px 0; border-bottom:1px solid var(--border);line-height:1.5; display:flex;align-items:flex-start;gap:7px} .sft li::before{content:'→';color:rgba(212,168,83,.5);flex-shrink:0;margin-top:1px} .spr{font-size:19px;font-weight:900;color:var(--gold);margin-bottom:3px;font-family:var(--m)} .std{font-size:13px;color:var(--muted);margin-bottom:14px} .sbtn{background:transparent;border:1px solid var(--b2);color:var(--text);padding:10px; border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--f); text-align:center;transition:all .2s} .sbtn:hover{background:var(--bg4);border-color:var(--b3)} .sc.pop .sbtn{background:var(--gold);color:#000;border-color:var(--gold)} .sc.pop .sbtn:hover{background:var(--gold2)} /* ═══ STACK ═══ */ .stkg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .stkc{background:var(--bg3);border:1px solid var(--border);border-radius:12px; padding:18px 20px;transition:border-color .3s,transform .3s} .stkc:hover{border-color:var(--b3);transform:translateY(-2px)} .stktop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .stkn{font-size:13px;font-weight:700} .stkp{font-family:var(--m);font-size:12px;color:var(--gold)} .stkbar{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden} .stkfil{height:100%;background:linear-gradient(90deg,rgba(212,168,83,.4),var(--gold)); border-radius:2px;width:0%;transition:width 1.4s cubic-bezier(.25,.46,.45,.94)} /* ═══ RULES — Bento Grid ═══ */ .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .ri{background:var(--bg3);border:1px solid var(--border);border-radius:14px; padding:22px 20px 20px;display:flex;flex-direction:column;gap:8px;min-height:130px; transition:border-color .2s,box-shadow .2s,background .2s} .ri:hover{border-color:var(--gold);box-shadow:0 4px 20px rgba(212,168,83,.12);background:var(--bg2)} .ri.wide{grid-column:span 2} .rn{font-family:var(--m);font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.5px} .rt{font-size:15px;font-weight:700;flex:1;line-height:1.3} .rd{font-size:13px;color:var(--muted2);line-height:1.5;margin-top:auto} .ri.wide .rt{font-size:17px} /* ═══ ABOUT ═══ */ .aboutsec{padding:96px 10%;background:var(--bg2); display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .atxt h2{font-size:34px;font-weight:900;letter-spacing:-1.5px;margin-bottom:14px} .atxt h2 em{font-style:normal;color:var(--gold)} .atxt p{font-size:15px;color:var(--muted2);line-height:1.8;margin-bottom:12px} .achips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} .achip{background:var(--bg4);border:1px solid var(--border);padding:5px 12px; border-radius:100px;font-size:11px;color:var(--muted2);font-family:var(--m)} /* About tabs */ .aav{width:100%;aspect-ratio:4/3;border-radius:16px; background:var(--bg3);border:1px solid var(--border); display:flex;flex-direction:column;overflow:hidden} .aav-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2)} .aav-tab{flex:1;padding:13px 8px;font-family:var(--m);font-size:10px;letter-spacing:.5px; text-align:center;cursor:pointer;color:var(--muted); border:none;border-bottom:2px solid transparent;background:none; transition:color .2s,border-color .2s;user-select:none} .aav-tab:hover{color:var(--text)} .aav-tab.act{color:var(--gold);border-bottom-color:var(--gold)} .aav-panels{flex:1;position:relative} .aav-panel{position:absolute;inset:0;padding:22px;display:none;flex-direction:column;gap:9px;overflow:hidden} .aav-panel.act{display:flex} /* panel: principles */ .ap-row{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:9px; border:1px solid transparent;transition:border-color .2s} .ap-row:hover{border-color:var(--border)} .ap-num{font-family:var(--m);font-size:10px;color:var(--gold);width:20px;flex-shrink:0;padding-top:1px} .ap-t{font-size:12px;font-weight:700;line-height:1.3} .ap-d{font-size:11px;color:var(--muted2);margin-top:1px} /* panel: stack */ .aav-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:22px} .aav-sitem{background:var(--bg2);border:1px solid var(--border);border-radius:9px; padding:10px 8px;text-align:center;transition:border-color .2s} .aav-sitem:hover{border-color:var(--gold)} .aav-sicon{font-size:20px;margin-bottom:4px} .aav-sname{font-family:var(--m);font-size:9px;color:var(--muted2)} /* panel: numbers */ .aav-nums{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:22px} .aav-nitem{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px} .aav-nval{font-size:30px;font-weight:900;font-family:var(--m);color:var(--gold); letter-spacing:-1.5px;line-height:1;margin-bottom:4px} .aav-nlbl{font-size:11px;color:var(--muted2)} /* ═══ FAQ ═══ */ .flist{max-width:720px} .fi{border-bottom:1px solid var(--border);overflow:hidden} .fq{display:flex;align-items:center;justify-content:space-between;padding:20px 0; cursor:pointer;font-size:16px;font-weight:600;transition:color .2s;gap:16px} .fq:hover{color:var(--gold)} .fic{width:26px;height:26px;border-radius:50%;border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0;font-size:17px;color:var(--muted2);transition:all .3s} .fi.op .fic{border-color:var(--gold);color:var(--gold);transform:rotate(45deg)} .fa{max-height:0;overflow:hidden;transition:max-height .4s ease} .fai{padding-bottom:18px;font-size:15px;color:var(--muted2);line-height:1.8} .fi.op .fa{max-height:200px} /* ═══ CTA ═══ */ .ctasec{padding:110px 10%;position:relative;overflow:hidden;background:var(--bg2);text-align:center} .ctaglow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(212,168,83,.05) 0%,transparent 70%)} .ctabox{position:relative;z-index:1;max-width:580px;margin:0 auto} .ctabox h2{font-size:clamp(30px,5vw,54px);font-weight:900;letter-spacing:-2px;line-height:1.1;margin-bottom:14px} .ctabox h2 em{font-style:normal;color:var(--gold)} .ctabox p{font-size:15px;color:var(--muted2);margin-bottom:32px;line-height:1.7} .ctabtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ═══ FOOTER ═══ */ footer{border-top:1px solid var(--border);background:var(--bg)} .footer-inner{padding:40px 10% 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr; gap:40px;align-items:start} .fcol-brand{} .flogo-wrap{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:14px} .flogo-sq{width:32px;height:32px;border-radius:8px;background:var(--gold); color:#000;font-family:var(--m);font-size:16px;font-weight:900; display:flex;align-items:center;justify-content:center;flex-shrink:0} .flogo-txt{font-family:var(--m);font-size:16px;font-weight:700;color:var(--text)} .ftag{font-size:12px;color:var(--muted);line-height:1.65;max-width:240px} .fcol h4{font-size:10px;font-weight:700;color:var(--muted2);letter-spacing:1.5px; text-transform:uppercase;margin-bottom:14px} .flinks{display:flex;flex-direction:column;gap:10px} .flinks ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .flinks a,.flink-ic{font-size:13px;color:var(--muted);transition:color .2s;text-decoration:none;display:block} .flink-ic{display:flex;align-items:center;gap:8px} .flink-ic svg{flex-shrink:0;opacity:.5} .flinks a:hover,.flink-ic:hover{color:var(--text)} .fmetrics{display:flex;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} .fmet{} .fmet-v{font-size:18px;font-weight:800;color:var(--text);font-family:var(--m);line-height:1} .fmet-l{font-size:10px;color:var(--muted);margin-top:3px} .fbot{border-top:1px solid var(--border);padding:16px 10%; display:flex;justify-content:space-between;align-items:center; font-size:11px;color:var(--muted);flex-wrap:wrap;gap:4px} /* ═══ LIGHT THEME SPECIFIC OVERRIDES ═══ */ [data-theme="light"] .hglow{ background:radial-gradient(ellipse at 50% 0%,rgba(184,137,30,.08) 0%,transparent 62%)} [data-theme="light"] .hbadge{background:rgba(0,0,0,.04)} [data-theme="light"] .hstats{background:rgba(0,0,0,.02)} [data-theme="light"] .cglines{ background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px); background-size:20px 20px} [data-theme="light"] .ctaglow{ background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(184,137,30,.06) 0%,transparent 70%)} [data-theme="light"] .sdiv{ background:linear-gradient(90deg,transparent,rgba(184,137,30,.25),transparent)} [data-theme="light"] .pcard::after{ background:radial-gradient(circle at 50% 0%,rgba(184,137,30,.07) 0%,transparent 60%)} [data-theme="light"] .sc.pop::before{ background:radial-gradient(circle at 50% 0%,rgba(184,137,30,.06) 0%,transparent 60%)} [data-theme="light"] .crow:hover{background:rgba(0,0,0,.025)} [data-theme="light"] .ri:hover .rn{color:rgba(184,137,30,.5)} /* ═══ REVEAL ═══ */ .rv{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease} .rv.in{opacity:1;transform:translateY(0)} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s} /* Cards always visible — no reveal class conflict */ .cc,.sc,.stkc,.ri{opacity:1;transform:none} /* Card hover lift */ .cc{transition:background .3s} .sc{transition:border-color .3s,transform .3s} .stkc{transition:border-color .3s,transform .3s} .ri{transition:background .2s} /* ═══ RESPONSIVE ═══ */ @media(max-width:960px){ .inner{max-width:100%;padding-left:20px;padding-right:20px} nav{padding:14px 20px}.nlinks{display:none} .hero{grid-template-columns:1fr;padding:80px 20px 36px;overflow-x:hidden;gap:20px} .hvisual{min-width:0} .hscroll{height:160px} .hstats{grid-template-columns:repeat(2,1fr)} .sec,.aboutsec,.procsec .prochd,.proctr,.pdots{padding:40px 20px} .proctr,.pdots{padding-top:0} .blay,.aboutsec{grid-template-columns:1fr;gap:36px} .cgrid{grid-template-columns:1fr} .cc.wide{grid-column:span 1;display:block} .carow,.carow.rev{grid-template-columns:1fr;direction:ltr;min-height:auto} .carow.rev>*{direction:ltr} .caimg{height:220px} .cacont{border-left:1px solid var(--border)!important;border-right:none!important; border-top:none;padding:24px 20px} /* Compact view mobile — 2 колонки, скрываем описание */ .carows.view-compact{grid-template-columns:repeat(2,1fr);gap:10px} .carows.view-compact .caimg{height:130px} .carows.view-compact .cacont{padding:14px} .carows.view-compact .cadesc{display:none} .carows.view-compact .catitle{font-size:13px} .carows.view-compact .caeyebrow{font-size:9px;margin-bottom:6px} .carows.view-compact .cameta{margin-bottom:8px} /* Toggle рядом с фильтрами — уменьшаем */ .view-toggle{gap:3px} .view-btn{width:32px;height:32px} .sgrid{grid-template-columns:1fr 1fr} .sc.featured{grid-template-columns:1fr;gap:24px;padding:28px} .rgrid{grid-template-columns:repeat(2,1fr)}.ri.wide{grid-column:span 1} footer{grid-template-columns:1fr;padding:32px 20px} .ctblh,.crow{grid-template-columns:1.5fr 1fr 1fr} .ch:nth-child(3),.cv:nth-child(3){display:none} } /* ═══ WP NAV MENU NORMALIZATION ═══ */ /* wp_nav_menu outputs