*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Golos Text,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,ui-monospace,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.left-\[-5px\]{left:-5px}.top-0{top:0}.top-1\.5{top:.375rem}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.-mt-1{margin-top:-.25rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-14{height:3.5rem}.h-\[9px\]{height:9px}.h-px{height:1px}.min-h-\[100svh\]{min-height:100svh}.w-1\.5{width:.375rem}.w-14{width:3.5rem}.w-6{width:1.5rem}.w-\[9px\]{width:9px}.w-full{width:100%}.min-w-0{min-width:0}.max-w-\[16ch\]{max-width:16ch}.max-w-\[17ch\]{max-width:17ch}.max-w-\[19ch\]{max-width:19ch}.max-w-\[24ch\]{max-width:24ch}.max-w-\[34ch\]{max-width:34ch}.max-w-\[36ch\]{max-width:36ch}.max-w-\[38ch\]{max-width:38ch}.max-w-\[42ch\]{max-width:42ch}.max-w-\[44ch\]{max-width:44ch}.max-w-\[54ch\]{max-width:54ch}.flex-1{flex:1 1 0%}.flex-none{flex:none}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-px{gap:1px}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.875rem*var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem*var(--tw-space-y-reverse))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-\[\#1E1E1E\]{--tw-border-opacity:1;border-color:rgb(30 30 30/var(--tw-border-opacity,1))}.border-line{--tw-border-opacity:1;border-color:rgb(36 36 36/var(--tw-border-opacity,1))}.bg-ink{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-lime{--tw-bg-opacity:1;background-color:rgb(189 255 0/var(--tw-bg-opacity,1))}.bg-line{--tw-bg-opacity:1;background-color:rgb(36 36 36/var(--tw-bg-opacity,1))}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-12{padding-bottom:3rem}.pb-8{padding-bottom:2rem}.pl-6{padding-left:1.5rem}.pt-1{padding-top:.25rem}.pt-28{padding-top:7rem}.pt-7{padding-top:1.75rem}.text-center{text-align:center}.text-\[10\.5px\]{font-size:10.5px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[15\.5px\]{font-size:15.5px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}.text-\[22px\]{font-size:22px}.text-\[clamp\(1\.15rem\2c 2\.2vw\2c 1\.6rem\)\]{font-size:clamp(1.15rem,2.2vw,1.6rem)}.text-\[clamp\(1\.2rem\2c 2\.4vw\2c 1\.7rem\)\]{font-size:clamp(1.2rem,2.4vw,1.7rem)}.text-\[clamp\(1\.3rem\2c 2\.9vw\2c 2\.2rem\)\]{font-size:clamp(1.3rem,2.9vw,2.2rem)}.text-\[clamp\(1\.3rem\2c 3\.4vw\2c 2\.4rem\)\]{font-size:clamp(1.3rem,3.4vw,2.4rem)}.text-\[clamp\(1\.4rem\2c 2\.4vw\2c 1\.9rem\)\]{font-size:clamp(1.4rem,2.4vw,1.9rem)}.text-\[clamp\(1\.6rem\2c 3\.2vw\2c 2\.4rem\)\]{font-size:clamp(1.6rem,3.2vw,2.4rem)}.text-\[clamp\(1\.8rem\2c 4\.2vw\2c 2\.8rem\)\]{font-size:clamp(1.8rem,4.2vw,2.8rem)}.text-\[clamp\(2rem\2c 7vw\2c 4\.5rem\)\]{font-size:clamp(2rem,7vw,4.5rem)}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[1\.55\]{line-height:1.55}.leading-\[1\.6\]{line-height:1.6}.leading-\[1\.7\]{line-height:1.7}.leading-none{line-height:1}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[-0\.03em\]{letter-spacing:-.03em}.tracking-\[-0\.045em\]{letter-spacing:-.045em}.tracking-\[-0\.04em\]{letter-spacing:-.04em}.tracking-\[-0\.05em\]{letter-spacing:-.05em}.tracking-\[\.14em\]{letter-spacing:.14em}.tracking-\[\.18em\]{letter-spacing:.18em}.tracking-\[\.2em\]{letter-spacing:.2em}.text-\[\#7E7E7E\]{--tw-text-opacity:1;color:rgb(126 126 126/var(--tw-text-opacity,1))}.text-\[\#8A8A8A\]{--tw-text-opacity:1;color:rgb(138 138 138/var(--tw-text-opacity,1))}.text-bone{--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.text-lime{--tw-text-opacity:1;color:rgb(189 255 0/var(--tw-text-opacity,1))}.text-mute{--tw-text-opacity:1;color:rgb(138 138 138/var(--tw-text-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-\[\#1A1A1A\]:hover{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.hover\:text-lime:hover{--tw-text-opacity:1;color:rgb(189 255 0/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:mb-14{margin-bottom:3.5rem}.md\:mb-20{margin-bottom:5rem}.md\:mt-11{margin-top:2.75rem}.md\:mt-12{margin-top:3rem}.md\:mt-14{margin-top:3.5rem}.md\:block{display:block}.md\:grid{display:grid}.md\:hidden{display:none}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:items-baseline{align-items:baseline}.md\:gap-5{gap:1.25rem}.md\:gap-8{gap:2rem}.md\:border-l-0{border-left-width:0}.md\:p-10{padding:2.5rem}.md\:p-9{padding:2.25rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-12{padding-bottom:3rem}.md\:pl-0{padding-left:0}.md\:text-right{text-align:right}.md\:text-\[17px\]{font-size:17px}}@media (min-width:1024px){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:justify-end{justify-content:flex-end}.lg\:gap-14{gap:3.5rem}.lg\:gap-16{gap:4rem}}


  :root{ --shell:1280px; --gut:20px; }
  @media (min-width:768px){ :root{ --gut:40px; } }
  @media (min-width:1280px){ :root{ --gut:60px; } }

  *{ -webkit-tap-highlight-color:transparent; }
  html{ scroll-behavior:smooth; }
  body{ background:#0A0A0A; color:#F5F5F5; font-family:'Golos Text',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  body.locked{ overflow:hidden; }
  ::selection{ background:#BDFF00; color:#0A0A0A; }
  .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

  .d{ font-family:'Onest',sans-serif; letter-spacing:-0.035em; }
  .mono{ font-family:'JetBrains Mono',monospace; }
  .lower{ text-transform:lowercase; }
  .t-hero{ font-family:'Onest',sans-serif; font-weight:700; font-size:clamp(2.4rem,7vw,6.4rem); line-height:.94; letter-spacing:-0.045em; }
  .t-sec { font-family:'Onest',sans-serif; font-weight:600; font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:1.03; letter-spacing:-0.04em; }
  .t-big { font-family:'Onest',sans-serif; font-weight:700; font-size:clamp(2.5rem,8.6vw,7.6rem); line-height:.9; letter-spacing:-0.05em; }
  .t-card{ font-family:'Onest',sans-serif; font-weight:600; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.15; letter-spacing:-0.03em; }
  .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#8A8A8A; }
  .lime-txt{ color:#BDFF00; }
  .mark{ background:linear-gradient(180deg,transparent 62%, rgba(189,255,0,.3) 62%); }

  /* Прелоадер */
  #pre{ position:fixed; inset:0; z-index:100; background:#0A0A0A; display:flex; align-items:flex-end; }
  #pre .bar{ position:absolute; left:0; bottom:0; height:2px; width:0%; background:#BDFF00; }
  #preNum{ font-variant-numeric:tabular-nums; }

  /* Курсор */
  #cur,#curDot{ position:fixed; top:0; left:0; z-index:95; pointer-events:none; border-radius:999px; opacity:0; }
  #cur{ width:40px; height:40px; border:1px solid rgba(245,245,245,.45); margin:-20px 0 0 -20px; }
  #curDot{ width:5px; height:5px; background:#BDFF00; margin:-2.5px 0 0 -2.5px; }
  #curLbl{ position:fixed; z-index:96; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.6);
    background:#BDFF00; color:#0A0A0A; border-radius:999px; padding:.65rem 1rem; font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
  @media (hover:none),(max-width:1023px){ #cur,#curDot,#curLbl{ display:none; } }

  #prog{ position:fixed; top:0; left:0; height:2px; width:0%; background:#BDFF00; z-index:70; }

  /* Точечная навигация */
  #dotnav{ position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60; display:none; flex-direction:column; gap:14px; }
  @media (min-width:1280px){ #dotnav{ display:flex; } }
  #dotnav a{ position:relative; width:7px; height:7px; border-radius:99px; background:#333; transition:background-color .3s ease, transform .3s ease; }
  #dotnav a:hover{ transform:scale(1.5); background:#666; }
  #dotnav a.on{ background:#BDFF00; transform:scale(1.4); }
  #dotnav a span{ position:absolute; right:18px; top:50%; transform:translateY(-50%) translateX(6px); opacity:0; pointer-events:none;
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#F5F5F5;
    background:#161616; border:1px solid #262626; padding:.3rem .55rem; border-radius:6px; white-space:nowrap; transition:all .3s ease; }
  #dotnav a:hover span{ opacity:1; transform:translateY(-50%) translateX(0); }

  /* 3D-сцена */
  #scene{ position:absolute; inset:0; z-index:1; }
  #scene canvas{ display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
  #scene canvas.grabbing{ cursor:grabbing; }
  .hero-content{ pointer-events:none; }
  .hero-content a,.hero-content button,.hero-content .pe{ pointer-events:auto; }
  .orb{ position:absolute; border-radius:999px; pointer-events:none; will-change:transform; }
  .orb-lime{ background:radial-gradient(circle at 34% 30%, #C6D98A, #93B82E 46%, #465C12 100%); }
  .orb-dark{ background:radial-gradient(circle at 34% 30%, #3A3D42, #1C1F24 52%, #0B0C0E 100%); }
  .orb-blur{ filter:blur(2px); opacity:.9; }

  /* Кнопки */
  .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:1.05rem 1.9rem;
    border-radius:999px; font-family:'Onest',sans-serif; font-weight:500; font-size:.9rem; text-transform:lowercase;
    letter-spacing:-0.01em; overflow:hidden; isolation:isolate; transition:color .35s ease,border-color .35s ease; will-change:transform; }
  .btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:999px; transform:translateY(101%); transition:transform .5s cubic-bezier(.65,0,.35,1); }
  .btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
  .btn-lime{ background:#BDFF00; color:#0A0A0A; }
  .btn-lime::before{ background:#F5F5F5; }
  .btn-ghost{ border:1px solid #2C2C2C; color:#F5F5F5; }
  .btn-ghost::before{ background:#BDFF00; }
  .btn-ghost:hover{ color:#0A0A0A; border-color:#BDFF00; }
  .btn-sm{ padding:.7rem 1.25rem; font-size:.82rem; }
  .btn .ic{ transition:transform .45s cubic-bezier(.65,0,.35,1); }
  .btn:hover .ic{ transform:translate(3px,-3px); }

  /* Навигация */
  .navlink{ position:relative; color:#8A8A8A; font-size:14px; text-transform:lowercase; transition:color .3s ease; }
  .navlink::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:100%; background:#BDFF00; transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.65,0,.35,1); }
  .navlink:hover{ color:#F5F5F5; } .navlink:hover::after{ transform:scaleX(1); transform-origin:left; }
  /* Как на «Разработке»: шапка не прячется при скролле и не меняет фон */
  #hdr, #hdr.stuck, #hdr.hide{ background:rgba(10,10,10,.85); border-bottom:1px solid rgba(189,255,0,.15); transform:none; }
  #menu{ position:fixed; inset:0; z-index:80; background:#0A0A0A; clip-path:inset(0 0 100% 0); visibility:hidden; }
  .menu-item{ font-family:'Onest',sans-serif; font-weight:600; letter-spacing:-0.04em; text-transform:lowercase; font-size:clamp(2rem,10vw,3.4rem); line-height:1.1; display:block; }

  .lm{ display:block; overflow:hidden; padding-bottom:.08em; }
  .li{ display:block; will-change:transform; }
  .wm{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; }
  .wi{ display:inline-block; will-change:transform; }
  .rot{ display:inline-grid; vertical-align:bottom; overflow:hidden; height:1.15em; }
  .rot span{ grid-area:1/1; display:block; color:#BDFF00; }

  /* Тост об отправке заявки: в этом бандле стилей не было — блок рендерился
     обычным текстом в самом верху страницы. Логика показа (.on) — как на остальных страницах. */
  .toast{
    position:fixed; bottom:36px; left:50%;
    transform:translateX(-50%) translateY(80px);
    background:#101010; border:1px solid rgba(40,200,64,.4);
    border-radius:12px; padding:14px 28px;
    display:flex; align-items:center; gap:12px;
    color:#F5F5F5; font-family:'Onest',sans-serif; font-weight:600; font-size:.95rem;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    z-index:99990; opacity:0; pointer-events:none; white-space:nowrap;
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    transition:transform .5s cubic-bezier(.65,0,.35,1),opacity .5s;
  }
  .toast.on{ transform:translateX(-50%) translateY(0); opacity:1; }
  .toast-dot{ width:8px; height:8px; border-radius:50%; background:#28c840; box-shadow:0 0 10px #28c840; flex-shrink:0; }
  @media (max-width:480px){
    .toast{ white-space:normal; width:calc(100% - 32px); flex-direction:column; gap:8px; text-align:center; }
  }

  .mq-wrap{ overflow:hidden; }
  .mq{ display:flex; width:max-content; will-change:transform; }
  .mq-set{ display:flex; align-items:center; }
  .mq-set > *{ padding-right:clamp(1.4rem,3.4vw,2.6rem); display:flex; align-items:center; gap:clamp(1.4rem,3.4vw,2.6rem); }

  /* Карточки */
  .card{ position:relative; overflow:hidden; isolation:isolate; background:#101010; border:1px solid #1E1E1E; border-radius:22px;
    will-change:transform; transition:border-color .45s ease; }
  .card::before{ content:""; position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .45s ease;
    background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(189,255,0,.13), transparent 62%); }
  .card:hover{ border-color:#3A3A3A; } .card:hover::before{ opacity:1; }
  .card > *{ position:relative; z-index:1; }
  .card-ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; border:1px solid #262626; background:#161616; color:#F5F5F5;
    transition:background-color .4s ease,color .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1); }
  .card:hover .card-ic{ background:#BDFF00; color:#0A0A0A; border-color:#BDFF00; transform:translateY(-4px) rotate(-6deg); }
  .card-ic svg{ width:20px; height:20px; }

  /* Обычно / у нас */
  .cmp{ display:grid; gap:0; border-top:1px solid #1E1E1E; transition:background-color .4s ease; }
  @media (min-width:768px){ .cmp{ grid-template-columns:1fr 1fr; } }
  .cmp:hover{ background:rgba(189,255,0,.03); }
  .cmp > div{ padding:1.35rem 1.2rem; display:flex; gap:.85rem; align-items:flex-start; font-size:14.5px; line-height:1.55; }
  .cmp .bad{ color:#8A8A8A; }
  .cmp .bad em{ font-style:normal; color:#8A8A8A; }
  @media (min-width:768px){ .cmp .good{ border-left:1px solid #1E1E1E; } }
  .ic-x,.ic-v{ width:19px; height:19px; border-radius:99px; flex:none; display:grid; place-items:center; margin-top:1px; }
  .ic-x{ background:#1C1C1C; color:#8A8A8A; } .ic-v{ background:#BDFF00; color:#0A0A0A; }
  .ic-x svg,.ic-v svg{ width:11px; height:11px; }

  /* Компетенции */
  .skill{ position:relative; overflow:hidden; padding:1.9rem 1.5rem; border:1px solid #1E1E1E; border-radius:18px; background:#0D0D0D; isolation:isolate; }
  .skill::before{ content:""; position:absolute; inset:0; z-index:-1; background:#BDFF00; transform:translateY(100%); transition:transform .55s cubic-bezier(.65,0,.35,1); }
  .skill:hover::before{ transform:translateY(0); }
  .skill:hover,.skill:hover .sk-num,.skill:hover p{ color:#0A0A0A; }
  .skill:hover{ border-color:#BDFF00; }
  .sk-num{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; color:#7E7E7E; transition:color .4s ease; }
  .skill p{ transition:color .4s ease; }

  /* Тарифы */
  .price{ position:relative; display:flex; flex-direction:column; padding:1.8rem; border-radius:22px; background:#101010; border:1px solid #1E1E1E;
    overflow:hidden; isolation:isolate; transition:transform .5s cubic-bezier(.34,1.2,.64,1),border-color .4s ease; }
  .price:hover{ transform:translateY(-8px); border-color:#3A3A3A; }
  .price.hot{ background:#BDFF00; border-color:#BDFF00; color:#0A0A0A; }
  .price.hot .p-sub,.price.hot .p-from{ color:rgba(10,10,10,.62); }
  .price .p-sub{ color:#8A8A8A; }
  .price .p-from{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7E7E7E; }
  .tag-hot{ position:absolute; top:1.1rem; right:1.1rem; background:#0A0A0A; color:#BDFF00; font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.14em; padding:.35rem .6rem; border-radius:999px; text-transform:uppercase; }

  /* Проекты */
  .proj{ position:relative; display:grid; gap:.4rem; padding:1.8rem 0; border-top:1px solid #1E1E1E; transition:padding-left .55s cubic-bezier(.65,0,.35,1); }
  .proj:hover{ padding-left:1.1rem; }
  .proj .bar{ position:absolute; left:0; top:-1px; height:1px; width:0; background:#BDFF00; transition:width .6s cubic-bezier(.65,0,.35,1); }
  .proj:hover .bar{ width:100%; }
  .proj h3{ transition:color .4s ease; } .proj:hover h3{ color:#BDFF00; }
  #peek{ position:fixed; z-index:40; width:300px; height:210px; border-radius:16px; overflow:hidden; pointer-events:none; opacity:0;
    will-change:transform; transform:translate(-50%,-50%) scale(.85); }
  #peek .pv{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .3s ease; padding:1.5rem; text-align:center; }
  #peek .pv.on{ opacity:1; }
  #peek .pv span{ font-family:'Onest',sans-serif; font-weight:600; font-size:15px; color:#0A0A0A; letter-spacing:-0.02em; }
  @media (hover:none),(max-width:1023px){ #peek{ display:none; } }

  /* Процесс */
  .rail{ position:relative; height:1px; background:#1E1E1E; }
  .rail .fill{ position:absolute; inset:0; width:0%; background:#BDFF00; }
  .dot{ width:11px; height:11px; border-radius:99px; background:#0A0A0A; border:1px solid #333; transition:all .35s ease; }
  .dot.on{ background:#BDFF00; border-color:#BDFF00; box-shadow:0 0 0 6px rgba(189,255,0,.14); }

  /* Калькулятор и квиз */
  .opt{ position:relative; display:flex; flex-direction:column; gap:.2rem; padding:.95rem 1.05rem; border:1px solid #242424; border-radius:14px;
    background:#0D0D0D; cursor:pointer; text-align:left; transition:border-color .3s ease,background-color .3s ease; }
  .opt:hover{ border-color:#3D3D3D; }
  .opt.sel{ border-color:#BDFF00; background:rgba(189,255,0,.07); }
  .opt .o-t{ font-family:'Onest',sans-serif; font-weight:500; font-size:14px; }
  .opt .o-s{ font-size:12px; color:#8A8A8A; }
  .opt.sel .o-s{ color:#A6C95E; }
  .chk{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border:1px solid #242424; border-radius:12px; background:#0D0D0D;
    cursor:pointer; font-size:13.5px; text-align:left; transition:border-color .3s ease; }
  .chk .box{ width:17px; height:17px; border-radius:5px; border:1px solid #3A3A3A; flex:none; display:grid; place-items:center; transition:all .25s ease; }
  .chk .box svg{ width:11px; height:11px; opacity:0; color:#0A0A0A; transition:opacity .2s ease; }
  .chk.sel{ border-color:#BDFF00; } .chk.sel .box{ background:#BDFF00; border-color:#BDFF00; } .chk.sel .box svg{ opacity:1; }

  .qstep{ display:none; } .qstep.on{ display:block; }
  .qbar{ height:2px; background:#242424; border-radius:2px; overflow:hidden; }
  .qbar span{ display:block; height:100%; width:33%; background:#BDFF00; transition:width .5s cubic-bezier(.65,0,.35,1); }

  /* FAQ */
  .faq{ border-top:1px solid #1E1E1E; }
  .faq button{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:1.45rem 0; text-align:left; }
  .faq .q{ font-family:'Onest',sans-serif; font-weight:500; font-size:clamp(1rem,1.7vw,1.15rem); letter-spacing:-0.02em; transition:color .3s ease; }
  .faq:hover .q{ color:#BDFF00; }
  .faq .sign{ position:relative; width:16px; height:16px; flex:none; margin-top:.3rem; }
  .faq .sign::before,.faq .sign::after{ content:""; position:absolute; background:#BDFF00; transition:transform .4s cubic-bezier(.65,0,.35,1); }
  .faq .sign::before{ inset:7px 0 auto 0; height:1.5px; }
  .faq .sign::after{ inset:0 7px auto auto; width:1.5px; height:16px; left:7px; }
  .faq.open .sign::after{ transform:rotate(90deg); }
  .faq .a{ overflow:hidden; height:0; }
  .faq .a p{ padding-bottom:1.5rem; color:#8A8A8A; font-size:14.5px; line-height:1.7; max-width:64ch; }

  /* Форма */
  .field{ position:relative; padding-top:1.5rem; }
  .field label{ position:absolute; top:0; left:0; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.18em;
    text-transform:uppercase; color:#8A8A8A; transition:color .3s ease; }
  .field input,.field textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid #2A2A2A; padding:.5rem 0 .8rem;
    color:#F5F5F5; font-size:1rem; font-family:'Golos Text',sans-serif; outline:none; resize:none; transition:border-color .35s ease; }
  .field input::placeholder,.field textarea::placeholder{ color:#767676; }
  .field input:focus,.field textarea:focus{ border-bottom-color:#BDFF00; }
  .field:focus-within label{ color:#BDFF00; }
  .field.err input,.field.err textarea{ border-bottom-color:#FF5F45; }
  .field .msg{ display:none; margin-top:.45rem; font-size:.76rem; color:#FF7A63; }
  .field.err .msg{ display:block; }

  #sticky{ position:fixed; left:0; right:0; bottom:0; z-index:65; padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(10,10,10,.94); backdrop-filter:blur(14px); border-top:1px solid #1C1C1C; transform:translateY(120%); }
  @media (min-width:1024px){ #sticky{ display:none; } }

  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid #BDFF00; outline-offset:3px; border-radius:4px; }
  .skip{ position:absolute; left:-9999px; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip:focus{ left:16px; top:16px; z-index:110; background:#BDFF00; color:#0A0A0A; padding:.6rem 1rem; border-radius:8px; }

  /* ================= ФОН ВСЕЙ СТРАНИЦЫ ================= */
  #bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:#0A0A0A; }
  #bg .spot{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease;
    background:radial-gradient(560px circle at var(--sx,50%) var(--sy,50%), #BDFF0016, #BDFF0008 42%, transparent 68%); }
  @media (hover:hover) and (min-width:1024px){ #bg .spot{ opacity:1; } }
  #bg .grain{ position:absolute; inset:-50%; opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
  section{ position:relative; }

  /* ============ ШАРЫ ПО КРАЯМ ЭКРАНА ============ */
  #edgeOrbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  #edgeOrbs b{ position:absolute; top:0; left:0; border-radius:999px; display:block; will-change:transform;
    box-shadow:inset -6px -8px 18px rgba(0,0,0,.55), inset 4px 5px 12px rgba(255,255,255,.05); }
  @media (max-width:767px){ #edgeOrbs{ display:none; } }

  /* завеса под текстом первого экрана — чтобы шары не съедали читаемость */
  .hero-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(115% 78% at 22% 52%, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 34%, rgba(10,10,10,0) 72%),
      linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,0) 62%, rgba(10,10,10,.9) 100%); }

  /* ================= 3D-CTA В ФУТЕРЕ ================= */
  #cta3d{ perspective:1100px; padding:1rem 0 .5rem; display:block; }
  #cta3d .stage{ transform-style:preserve-3d; will-change:transform; display:grid; place-items:center; }
  #cta3d .layer{ grid-area:1/1; font-family:'Onest',sans-serif; font-weight:700; text-transform:lowercase;
    font-size:clamp(2.3rem,9.4vw,8.2rem); line-height:.9; letter-spacing:-0.05em; white-space:nowrap;
    color:#1E2A00; user-select:none; }
  #cta3d .layer.front{
    background-image:linear-gradient(100deg,#7BA800 0%,#BDFF00 22%,#F4FFD4 38%,#BDFF00 54%,#8FBF00 74%,#BDFF00 100%);
    background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 26px rgba(189,255,0,.35)); animation:shine 7s linear infinite; }
  @keyframes shine{ from{ background-position:0% 50%; } to{ background-position:280% 50%; } }
  #cta3d .hint{ display:block; text-align:center; margin-top:1.4rem; }
  @media (prefers-reduced-motion: reduce){ #cta3d .layer.front{ animation:none; } }

  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition-duration:.01ms !important; } }


/* ============================================================
   SOLITON — страница «Сайты» (/ru/sites, /en/sites)
   Дополнения к авторским стилям: замена инлайновых стилей,
   общий каркас сайта в исходной палитре, правки и мобильная вёрстка.
   ============================================================ */

/* ---------- Локальные шрифты вместо Google Fonts ---------- */

@font-face { font-family:'Onest'; font-style:normal; font-weight:300; font-display:swap; src:url('../../fonts/onest-cyrillic-300-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:300; font-display:swap; src:url('../../fonts/onest-latin-300-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/onest-cyrillic-400-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/onest-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/onest-cyrillic-500-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/onest-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap; src:url('../../fonts/onest-cyrillic-600-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap; src:url('../../fonts/onest-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap; src:url('../../fonts/onest-cyrillic-700-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap; src:url('../../fonts/onest-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap; src:url('../../fonts/onest-cyrillic-800-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap; src:url('../../fonts/onest-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }

@font-face { font-family:'Golos Text'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/golos-text-cyrillic-400-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Golos Text'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/golos-text-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Golos Text'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/golos-text-cyrillic-500-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Golos Text'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/golos-text-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }

/* ---------- Замена инлайновых стилей (CSP: style-src 'self') ---------- */

.orb-p1 { width: 90px;  height: 90px;  top: 18%; left: 7%; }
.orb-p2 { width: 150px; height: 150px; top: 62%; left: 3%; }
.orb-p3 { width: 46px;  height: 46px;  top: 74%; left: 46%; }
.orb-p4 { width: 200px; height: 200px; top: 10%; right: 5%; }
.orb-p5 { width: 64px;  height: 64px;  top: 58%; right: 13%; }

.pv-g0 { background: linear-gradient(135deg, #BDFF00, #7BA800); }
.pv-g1 { background: linear-gradient(135deg, #E9FF8A, #BDFF00); }
.pv-g2 { background: linear-gradient(135deg, #D6FF4D, #8FBF00); }
.pv-g3 { background: linear-gradient(135deg, #BDFF00, #5C7F00); }

/* ---------- Строка «Делаем …»: варианту нужно больше места ---------- */

.rot-line { display: block; margin-bottom: .12em; }
.rot { min-width: 15ch; }
@media (max-width: 640px) {
    .rot span { white-space: nowrap; }
}

/* ---------- Условия оплаты ---------- */

.terms {
    position: relative;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid #1E1E1E;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(189, 255, 0, .07), rgba(189, 255, 0, .02)), #101010;
    overflow: hidden;
}
.terms::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #BDFF00;
}
.terms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .terms-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .terms-grid { grid-template-columns: 1fr; } }
.term {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px; border-radius: 14px;
    background: rgba(10, 10, 10, .55); border: 1px solid #1E1E1E;
}
.term b {
    display: block; font-family: 'Onest', sans-serif; font-weight: 600;
    font-size: 1rem; letter-spacing: -.02em; color: #F5F5F5; text-transform: lowercase;
}
.term span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #8A8A8A; }
.term .ic-v { margin-top: 2px; }

/* ---------- Точки справа: подпись текущего блока видна всегда ---------- */

#dotnav.labelled a.on span {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    border-color: #BDFF00;
    color: #BDFF00;
}

/* ---------- Объёмная надпись «обсудить проект» ---------- */

.cta3d-band { padding: clamp(40px, 6vw, 90px) 0 clamp(24px, 3vw, 48px); }

/* ============================================================
   ОБЩИЙ КАРКАС САЙТА В ИСХОДНОЙ ПАЛИТРЕ
   Разметка шапки, меню, подвала, куки и контактов — как на
   остальных страницах, оформление — под эту страницу.
   ============================================================ */

.sl-skip { position: absolute; left: -9999px; top: 0; z-index: 120; background: #BDFF00; color: #0A0A0A; padding: .6rem 1rem; border-radius: 8px; font-size: 14px; }
.sl-skip:focus { left: 16px; top: 16px; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }

/* ---------- Курсор: свой, системный скрыт как на остальных страницах ---------- */

* { cursor: none; }
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
    * { cursor: auto !important; }
    #cur, #curDot, #curLbl, #peek { display: none !important; }
}

/* ---------- Выделение текста отключено, в полях ввода — работает ---------- */

body {
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

/* ---------- Шапка: 1 в 1 со страницей «Разработка» (/ru/prog), палитра — текущей страницы ---------- */

/* Ширина и поля контейнера шапки повторяют шкалу --sl-maxw / --sl-gutter со страницы «Разработка».
   Переменные объявлены на самой шапке, чтобы не задеть остальную вёрстку страницы. */
header[role="banner"] { --hdr-maxw: 1400px; --hdr-gut: 40px; }
@media (max-width: 1280px) { header[role="banner"] { --hdr-maxw: 1180px; --hdr-gut: 32px; } }
@media (max-width: 1024px) { header[role="banner"] { --hdr-maxw: 100%;   --hdr-gut: 24px; } }
@media (max-width: 768px)  { header[role="banner"] { --hdr-gut: 18px; } }
@media (max-width: 600px)  { header[role="banner"] { --hdr-gut: 16px; } }
@media (max-width: 400px)  { header[role="banner"] { --hdr-gut: 14px; } }
@media (min-width: 1600px) { header[role="banner"] { --hdr-maxw: 1560px; --hdr-gut: 56px; } }
@media (min-width: 1920px) { header[role="banner"] { --hdr-maxw: 1680px; } }
@media (min-width: 2400px) { header[role="banner"] { --hdr-maxw: 1800px; --hdr-gut: 64px; } }
@media (min-width: 3000px) { header[role="banner"] { --hdr-maxw: 1960px; } }

header[role="banner"] {
    position: fixed; inset: 0 0 auto 0; z-index: 9900; height: 80px;
    background: rgba(10, 10, 10, .85);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(189, 255, 0, .15);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    header[role="banner"] { border-bottom-width: .5px; }
}
@media (display-mode: standalone) {
    header[role="banner"] { padding-top: env(safe-area-inset-top); height: auto; }
}

header[role="banner"] .container {
    max-width: var(--hdr-maxw);
    padding-inline: max(var(--hdr-gut), env(safe-area-inset-left))
                    max(var(--hdr-gut), env(safe-area-inset-right));
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 10px; }
.nav-inner > * { min-width: 0; }

/* Логотип — цветной, как на «Разработке»; свечение переведено в лаймовую палитру */
.logo { display: inline-flex; align-items: center; line-height: 0; flex: none; transition: .3s; }
.sl-logo-img {
    display: block; width: auto; height: clamp(21px, 2.1vw, 28px);
    filter: drop-shadow(0 0 14px rgba(189, 255, 0, .28));
    transition: filter .35s, transform .35s cubic-bezier(.23, 1, .32, 1);
}
a.sl-logo:hover .sl-logo-img,
a.sl-logo:focus-visible .sl-logo-img {
    filter: drop-shadow(0 0 20px rgba(189, 255, 0, .5));
    transform: translateY(-1px);
}
#mmenu .sl-logo-img { height: 24px; }
#mmenu .mmenu-header .logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
#mmenu .mmenu-header .sl-logo-img { max-width: 100%; height: auto; }
@media (max-width: 400px) { .sl-logo-img { height: 19px; } }
@media (pointer: coarse) { .sl-logo { min-height: 44px; } }

.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a {
    position: relative; font-family: 'Onest', sans-serif;
    font-size: .85rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #8A8A8A; white-space: nowrap; transition: .3s;
}
.nav-links a:hover, .nav-links a.active { color: #BDFF00; text-shadow: 0 0 10px rgba(189, 255, 0, .5); }

.nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Onest', sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #F5F5F5; padding: 10px 22px; border-radius: 8px; white-space: nowrap;
    border: 1.5px solid rgba(189, 255, 0, .4);
    transition: background .3s, border-color .3s, box-shadow .3s, color .3s, transform .3s cubic-bezier(.23, 1, .32, 1);
}
.nav-cta:hover {
    background: #BDFF00; border-color: #BDFF00; color: #0A0A0A;
    box-shadow: 0 0 24px rgba(189, 255, 0, .4); transform: translateY(-1px);
}

.lang-switcher {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
    background: rgba(245, 245, 245, .05); border: 1px solid rgba(245, 245, 245, .1);
    border-radius: 20px; padding: 3px; margin-left: 10px;
}
.lang-switcher a {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 28px; border-radius: 16px;
    font-family: 'Onest', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .5px;
    color: #8A8A8A; transition: all .2s ease;
}
.lang-switcher a::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px);
}
.lang-switcher a.active { background: #BDFF00; color: #0A0A0A; box-shadow: 0 2px 10px rgba(189, 255, 0, .35); }
.lang-switcher a:not(.active):hover { color: #F5F5F5; background: rgba(245, 245, 245, .08); }

.burger {
    display: none; position: relative; z-index: 2;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 8px; width: 40px; height: 40px;
    min-width: 44px; min-height: 44px; margin-left: 4px;
    background: none; border: 0;
}
.burger::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.burger span {
    display: block; width: 22px; height: 1.5px; background: #F5F5F5; border-radius: 1px;
    transition: transform .35s cubic-bezier(.23, 1, .32, 1), opacity .25s, width .3s;
}
.burger span:nth-child(3) { width: 14px; }
.burger:hover span:nth-child(3) { width: 22px; }
body.mopen .burger { z-index: 9960; }
body.mopen .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.mopen .burger span:nth-child(2) { opacity: 0; }
body.mopen .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 22px; }

@media (min-width: 951px) and (max-width: 1340px) {
    .nav-links { gap: clamp(10px, 1.6vw, 24px); }
    .nav-links a { font-size: .76rem; letter-spacing: .5px; }
    .nav-cta { padding: 12px 20px; font-size: .76rem; }
}
@media (max-width: 1024px) {
    .lang-switcher { margin-left: auto; }
    .lang-switcher a { width: 38px; height: 30px; font-size: .74rem; }
}
@media (max-width: 950px) {
    .nav-links, .nav-cta { display: none !important; }
    .burger { display: flex; }
    .lang-switcher { margin-left: auto; }
}
@media (max-width: 400px) {
    .lang-switcher { padding: 2px; margin-left: 6px; }
    .lang-switcher a { width: 34px; height: 28px; font-size: .72rem; }
    #mmenu .lang-switcher a { width: 28px; height: 22px; font-size: .64rem; }
}
/* ---------- Меню разделов справа: как на остальных страницах ---------- */

.side-nav {
    position: fixed; right: 40px; top: 50%; transform: translateY(-50%);
    z-index: 60; display: flex; flex-direction: column; gap: 20px;
}
.side-nav-item {
    position: relative; display: flex; align-items: center; justify-content: flex-end;
    width: 30px; height: 20px;
}
.side-nav-item span {
    display: block; width: 8px; height: 8px; border-radius: 50%; background: #333;
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
}
.side-nav-item::before {
    content: attr(data-tooltip); position: absolute; right: 25px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    color: #F5F5F5; opacity: 0; transform: translateX(10px); pointer-events: none;
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
}
.side-nav-item:hover::before, .side-nav-item.active::before { opacity: 1; transform: translateX(0); }
.side-nav-item.active::before { color: #BDFF00; }
.side-nav-item.active span { background: #BDFF00; transform: scale(1.6); box-shadow: 0 0 14px rgba(189, 255, 0, .55); }
.side-nav-item:hover span { background: #BDFF00; transform: scale(1.4); }
@media (max-width: 1279px) { .side-nav { display: none !important; } }

/* ---------- Всплывающая форма ---------- */

#cur, #curDot { z-index: 200; }
#curLbl { z-index: 201; }

.sl-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.sl-modal[hidden] { display: none; }
.sl-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 5, .82); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.sl-modal.sl-in .sl-modal-backdrop { opacity: 1; }
.sl-modal-box {
    position: relative; width: min(720px, 100%); max-height: calc(100svh - 40px);
    overflow-y: auto; overscroll-behavior: contain;
    background: #101010; border: 1px solid #242424; border-radius: 22px;
    padding: clamp(22px, 3vw, 38px);
    opacity: 0; transform: translateY(18px) scale(.98);
    transition: opacity .35s cubic-bezier(.65, 0, .35, 1), transform .35s cubic-bezier(.65, 0, .35, 1);
}
.sl-modal.sl-in .sl-modal-box { opacity: 1; transform: none; }
.sl-modal-slot > .card { background: none; border: 0; padding: 0; }
body.sl-modal-open { overflow: hidden; }
@media (max-width: 640px) {
    .sl-modal { padding: 0; }
    .sl-modal-box { width: 100%; max-height: 100svh; height: 100svh; border-radius: 0; border: 0; }
}

/* Приглашение открыть форму */
.form-invite { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Строка «Делаем …» ----------
   Было: коробка высотой 1.15em с выравниванием по нижнему краю строки,
   а текст внутри жил в строке высотой 1.6em — из-за этого зелёная
   надпись опускалась ниже базовой линии слова «Делаем».
   Стало: высота коробки равна межстрочному интервалу родителя,
   выравнивание по верху — базовые линии совпадают точно. */

.rot {
    height: 1.6em;
    line-height: 1.6em;
    vertical-align: top;
    min-width: 0;
}
.rot span { line-height: 1.6em; }


/* Мобильное меню */
#mmenu {
    position: fixed; inset: 0; z-index: 80;
    background: #0A0A0A;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease, visibility .35s;
    padding-bottom: env(safe-area-inset-bottom);
}
#mmenu.open { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 1024px) { #mmenu { display: none !important; } }
.mmenu-header {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; padding-inline: var(--gut); flex: none;
    border-bottom: 1px solid #1C1C1C;
}
.mmenu-header-right { display: flex; align-items: center; gap: 8px; }
.mmenu-close {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 0; color: #F5F5F5; cursor: pointer;
}
.mmenu-nav {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2px; padding: 20px var(--gut);
}
.mmenu-nav a {
    font-family: 'Onest', sans-serif; font-weight: 600; letter-spacing: -.04em;
    text-transform: lowercase; font-size: clamp(1.8rem, 9vw, 3rem); line-height: 1.15;
    color: #F5F5F5; padding: 6px 0; transition: color .3s ease;
}
.mmenu-nav a.active, .mmenu-nav a:hover { color: #BDFF00; }
.mmenu-cta {
    flex: none; margin: 0 var(--gut) 16px; text-align: center;
    padding: 1rem 1.9rem; border-radius: 999px; background: #BDFF00; color: #0A0A0A;
    font-family: 'Onest', sans-serif; font-weight: 500; font-size: .9rem; text-transform: lowercase;
}
.mmenu-footer {
    flex: none; text-align: center; padding: 0 var(--gut) 18px;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: .12em; color: #4A4A4A;
}

/* Подвал */
footer[role="contentinfo"] { border-top: 1px solid #161616; padding: clamp(40px, 5vw, 72px) 0 32px; }
footer[role="contentinfo"] .foot-top {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-bottom: 48px;
}
footer[role="contentinfo"] .foot-brand { max-width: 320px; }
footer[role="contentinfo"] .foot-brand .sl-logo-img { width: auto; height: 26px; margin-bottom: 18px; filter: brightness(0) invert(1); }
footer[role="contentinfo"] .foot-brand p { font-size: 14px; line-height: 1.65; color: #8A8A8A; }
.foot-links { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.foot-links a { font-size: 14px; color: #8A8A8A; transition: color .3s ease; }
.foot-links a:hover { color: #BDFF00; }
footer[role="contentinfo"] h4 {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: #8A8A8A; margin-bottom: 18px; font-weight: 400;
}
footer[role="contentinfo"] ul { display: flex; flex-direction: column; gap: 10px; }
footer[role="contentinfo"] ul a { font-size: 14px; color: #8A8A8A; text-transform: lowercase; transition: color .3s ease; }
footer[role="contentinfo"] ul a:hover { color: #BDFF00; }
footer[role="contentinfo"] ul a.active { color: #BDFF00; }

.sl-legal { border-top: 1px solid #161616; padding-top: 26px; }
.sl-legal-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 20px; }
.sl-legal-links a { font-size: 12.5px; color: #8A8A8A; transition: color .3s ease; }
.sl-legal-links a:hover { color: #BDFF00; }
.sl-legal-req { max-width: 900px; font-size: 12.5px; line-height: 1.75; color: #8A8A8A; }
.sl-legal-req a { color: #8A8A8A; text-decoration: underline; }
.sl-legal-note { margin-top: 14px; max-width: 900px; font-size: 11.5px; line-height: 1.7; color: #6E6E6E; }
.sl-legal-copy {
    margin-top: 20px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7E7E7E;
}

/* Согласие на обработку данных */
.sl-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding-block: 4px; }
.sl-consent input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; position: relative; flex: none;
    width: 18px; height: 18px; margin-top: 1px; border: 1px solid #3A3A3A; border-radius: 5px;
    background: #0D0D0D; cursor: pointer; transition: border-color .25s ease, background .25s ease;
}
.sl-consent input[type="checkbox"]:hover { border-color: #BDFF00; }
.sl-consent input[type="checkbox"]:checked { background: #BDFF00; border-color: #BDFF00; }
.sl-consent input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; border: solid #0A0A0A; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sl-consent-text { font-size: 11.5px; line-height: 1.55; color: #8A8A8A; }
.sl-consent-text a { color: #BDFF00; text-decoration: underline; text-underline-offset: 2px; }
.sl-consent.sl-nope input[type="checkbox"] { border-color: #FF5F45; box-shadow: 0 0 0 3px rgba(255, 95, 69, .2); }
.sl-consent.sl-nope .sl-consent-text { color: #FF8A7A; }
button[data-sl-locked="1"] { opacity: .5; }

/* Сообщения формы */
.sl-invalid { border-color: #FF5F45 !important; }
.sl-err { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #FF8A7A; }
.sl-note {
    display: block; margin-top: 16px; padding: 12px 14px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.5; border: 1px solid transparent;
}
.sl-note a { color: inherit; text-decoration: underline; }
.sl-note--ok { background: rgba(189, 255, 0, .1); border-color: rgba(189, 255, 0, .45); color: #D6FF6B; }
.sl-note--warn { background: rgba(255, 193, 7, .1); border-color: rgba(255, 193, 7, .45); color: #FFD666; }
.sl-note--err { background: rgba(255, 95, 69, .1); border-color: rgba(255, 95, 69, .45); color: #FF9A88; }

/* Куки */
.sl-cookie {
    position: fixed; z-index: 85;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    padding: 16px 20px; border: 1px solid #242424; border-radius: 18px;
    background: rgba(16, 16, 16, .96); backdrop-filter: blur(16px);
    transform: translateY(20px); opacity: 0; transition: transform .4s ease, opacity .4s ease;
}
.sl-cookie.sl-on { transform: none; opacity: 1; }
.sl-cookie[hidden] { display: none; }
.sl-cookie-text { flex: 1 1 320px; font-size: 12.5px; line-height: 1.55; color: #8A8A8A; }
.sl-cookie-text b { display: block; margin-bottom: 4px; font-size: 13.5px; color: #F5F5F5; }
.sl-cookie-text a { color: #BDFF00; text-decoration: underline; }
.sl-cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.sl-btn {
    padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    font-family: 'Onest', sans-serif; font-size: 12.5px; font-weight: 500; text-transform: lowercase;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.sl-btn-primary { background: #BDFF00; color: #0A0A0A; }
.sl-btn-primary:hover { background: #F5F5F5; }
.sl-btn-ghost { border-color: #2C2C2C; color: #8A8A8A; }
.sl-btn-ghost:hover { border-color: #BDFF00; color: #F5F5F5; }

/* Плавающие контакты */
.sfab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sfab-list {
    display: flex; flex-direction: column; gap: 10px;
    opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.sfab.open .sfab-list { opacity: 1; transform: none; pointer-events: auto; }
.sfab-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    width: 250px; max-width: calc(100vw - 44px); box-sizing: border-box;
    border: 1px solid #242424; border-radius: 14px; background: rgba(16, 16, 16, .96);
    backdrop-filter: blur(14px); transition: border-color .3s ease, transform .3s ease;
}
.sfab-item:hover { border-color: #BDFF00; transform: translateX(-3px); }
.sfab-item svg { width: 19px; height: 19px; flex: none; color: #BDFF00; }
.sfab-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sfab-tx b { font-family: 'Onest', sans-serif; font-size: 13.5px; font-weight: 600; color: #F5F5F5; }
.sfab-tx span { font-size: 11.5px; color: #8A8A8A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfab-btn {
    width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
    background: #BDFF00; color: #0A0A0A; display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .3s ease;
}
.sfab-btn:hover { transform: scale(1.06); }
.sfab-btn svg { width: 24px; height: 24px; }
.sfab-btn .x { display: none; }
.sfab.open .sfab-btn .x { display: block; }
.sfab.open .sfab-btn .c { display: none; }

/* Липкая панель, куки и контакты не должны спорить за низ экрана */
@media (max-width: 1023px) {
    .sfab { bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); right: 14px; }
    .sl-cookie { bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); }
}
body.sl-cookie-shown #sticky { transform: translateY(120%) !important; }

/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА
   ============================================================ */

@media (max-width: 1023px) {
    #hero { padding-top: 108px; min-height: auto; padding-bottom: 56px; }
}

@media (max-width: 767px) {
    .t-hero { font-size: clamp(2rem, 9vw, 3rem); }
    #hero .grid.lg\:grid-cols-12 { gap: 24px; }

    /* «Как бывает / как у нас»: колонки идут друг под другом — подписываем */
    .cmp > div { padding: 14px 0; flex-wrap: wrap; }
    .cmp > div::before {
        content: attr(data-label);
        flex: 0 0 100%;
        font-family: 'JetBrains Mono', monospace; font-size: 10px;
        letter-spacing: .18em; text-transform: uppercase; color: #6E6E6E;
        margin-bottom: 6px;
    }
    .cmp .good::before { color: #BDFF00; }
    .cmp .good { border-top: 1px dashed #1E1E1E; padding-top: 14px; }

    .proj { padding: 18px 0; }
    .proj:hover { padding-left: 0; }

    .price { padding: 22px 18px; }
    .card { border-radius: 18px; }

    /* Формы: поля во всю ширину, кнопки не сжимаются */
    .field input, .field textarea { font-size: 16px; }
    #lead .btn { width: 100%; }
    .opt { padding: 13px 14px; }
    .chk { padding: 12px 14px; }

    .cta3d-band { padding: 32px 0 24px; }
}

/* Узкие экраны: обложка Galaxy Fold и подобные */
@media (max-width: 420px) {
    #calcType, #calcSize, #calcAdd .space-y-2\.5, #qTask, #qBudget { grid-template-columns: 1fr !important; }
    #qBudget .sm\:col-span-2 { grid-column: auto; }
    .btn { padding: .95rem 1.4rem; font-size: .84rem; }
    .btn-sm { padding: .65rem 1rem; }
    #sticky .btn { padding: .7rem 1rem; }
    .mq-set > * { gap: 1rem; padding-right: 1rem; }
}

@media (max-width: 330px) {
    #sticky > div { flex-wrap: wrap; }
    #sticky .flex-1 { flex: 1 1 100%; }
    #sticky .btn { width: 100%; }
}

/* Альбомная ориентация телефона */
@media (max-width: 1023px) and (max-height: 560px) and (orientation: landscape) {
    #hero { padding-top: 92px; padding-bottom: 36px; }
    .t-hero { font-size: clamp(1.5rem, 5vw, 2.2rem); }
    #dragHint { display: none; }
    .mmenu-header { height: 56px; }
    .mmenu-nav { justify-content: flex-start; }
    .mmenu-nav a { font-size: clamp(1.1rem, 5vh, 1.6rem); padding: 5px 0; }
    .mmenu-cta { padding: .7rem 1.4rem; margin-bottom: 10px; }
    .mmenu-footer { display: none; }
}

/* Без наведения — без «прыжков», которых всё равно не видно */
@media (hover: none) {
    .price:hover, .card:hover, .skill:hover { transform: none; }
    .proj:hover { padding-left: 0; }
}

/* ---------- Системный курсор скрыт полностью ----------
   Правило `* { cursor: none }` перебивалось более точными селекторами
   (`.opt`, `.chk`, `button`, `#scene canvas`), поэтому системная стрелка
   всё равно показывалась поверх собственного курсора. */

@media (hover: hover) and (pointer: fine) {
    *, *::before, *::after,
    a, button, [role="button"], input, textarea, select, summary, label,
    .opt, .chk, .btn, .proj, .faq button, .price, .card, .skill,
    #scene canvas, #scene canvas.grabbing { cursor: none !important; }
}