/* === base.css === */
@font-face {
    font-family:Geist;
    src:url('../fonts/Geist-400.ttf') format('truetype');
    font-style:normal;
    font-weight:400;
    font-display:swap
}
@font-face {
    font-family:Geist;
    src:url('../fonts/Geist-500.ttf') format('truetype');
    font-style:normal;
    font-weight:500;
    font-display:swap
}
@font-face {
    font-family:Geist;
    src:url('../fonts/Geist-600.ttf') format('truetype');
    font-style:normal;
    font-weight:600;
    font-display:swap
}
@font-face {
    font-family:Geist;
    src:url('../fonts/Geist-700.ttf') format('truetype');
    font-style:normal;
    font-weight:700;
    font-display:swap
}
@font-face {
    font-family:Geist;
    src:url('../fonts/Geist-800.ttf') format('truetype');
    font-style:normal;
    font-weight:800;
    font-display:swap
}
:root {
    --white:#fff;
    --paper:#f0f2f1;
    --paper-2:#e5eae8;
    --sage:#f2f6f3;
    --sage-2:#eaf1ec;
    --line:#b8c7c0;
    --line-2:#d0dbd5;
    --line-dark:#ffffff40;
    --line-dark-strong:#ffffff66;
    --ink:#111827;
    --ink-2:#59635f;
    --ink-3:#8b938f;
    --deep:#0d1a16;
    --forest:#134236;
    --moss:#1e6b5a;
    --mint:#2fd6b2;
    --orange:#fe7700;
    --orange-lt:#ff9433;
    --orange-dk:#d96200;
    --maxw:1180px;
    --pad:clamp(1.15rem,4vw,2.4rem);
    --rad:14px;
    --rad-l:20px;
    --ease:cubic-bezier(.16,.84,.3,1);
    --peek:104px;
    --cardlift:110px;
    --grain: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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")
}
*,*::before,*::after {
    box-sizing:border-box
}
* {
    margin:0;
    padding:0
}
html {
    background:#fff;
    scroll-behavior:smooth;
    scroll-padding-top:110px;
    -webkit-text-size-adjust:100%;
    scrollbar-width:thin;
    scrollbar-color:var(--forest) transparent
}
body {
    font:400 16.5px/1.62 Geist,system-ui,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:clip
}
img,svg,video {
    display:block;
    max-width:100%
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit;
    color:inherit
}
button {
    border:0;
    background:none;
    cursor:pointer
}
:focus-visible {
    outline:2px solid var(--orange);
    outline-offset:4px;
    border-radius:4px
}
::selection {
    background:#fe770059;
    color:var(--deep)
}
h1,h2,h3,h4 {
    font-weight:700;
    line-height:1.06;
    letter-spacing:-.032em;
    color:var(--ink);
    text-wrap:pretty
}
h1 {
    font-size:clamp(2.4rem,6vw,4.3rem);
    letter-spacing:-.04em
}
h2 {
    font-size:clamp(1.85rem,4vw,2.9rem);
    letter-spacing:-.035em
}
h3 {
    font-size:clamp(1.1rem,1.8vw,1.28rem);
    line-height:1.25;
    letter-spacing:-.02em
}
h4 {
    font-size:1rem;
    line-height:1.3
}
h1 em,h2 em,h3 em {
    font-style:normal;
    color:var(--moss)
}
h2 em {
    background:linear-gradient(90deg,#fe77002e,#fe770008) 0 92%/0 .3em no-repeat;
    transition:background-size .9s var(--ease) .3s
}
.in h2 em,h2.in em {
    background-size:100% .3em
}
strong {
    font-weight:600;
    color:var(--ink)
}
.lead {
    font-size:clamp(1rem,1.5vw,1.12rem);
    color:var(--ink-2);
    max-width:60ch
}
.small {
    font-size:.9rem
}
.muted {
    color:var(--ink-2)
}
.tiny {
    font-size:.82rem;
    color:var(--ink-3)
}
.wrap {
    position:relative;
    z-index:1;
    width:100%;
    max-width:var(--maxw);
    padding-inline:var(--pad);
    margin-inline:auto
}
.wrap-narrow {
    max-width:840px
}
.sec {
    position:relative;
    z-index:6;
    isolation:isolate;
    overflow:hidden;
    padding-block:clamp(3.8rem,7.5vw,6.4rem)
}
.sec-line {
    border-top:1px solid var(--line-2)
}
.sec-head {
    max-width:64ch;
    margin-bottom:clamp(2.2rem,4.6vw,3.2rem)
}
.sec-head h2 {
    margin-bottom:1.15rem
}
.sec-head .lead+.lead {
    margin-top:.9rem
}
.sec-cream,.sec-close {
    background:var(--sage)
}
.sec-white {
    background:#fff
}
.sec::before,.cover::before,.foot::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:var(--grain);
    opacity:.045;
    z-index:0;
    mix-blend-mode:multiply
}
.sec-cream::after,.sec-close::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(40% 48% at calc(var(--flow,0)*122% - 11%) 28%,#2fd6b229,transparent 66%),radial-gradient(32% 40% at calc(114% - var(--flow,0)*112%) 76%,#fe770017,transparent 66%);
    transition:background .12s linear
}
.sec-white::before {
    inset:-25%;
    opacity:1;
    mix-blend-mode:normal;
    background:radial-gradient(34% 40% at 20% 26%,#2fd6b226,transparent 70%),radial-gradient(30% 36% at 82% 70%,#1342361a,transparent 72%),radial-gradient(26% 30% at 60% 12%,#a6f3e029,transparent 74%);
    animation:gradient-drift 30s ease-in-out infinite alternate
}
.sec-white.sec-flow::before {
    animation:none;
    background:radial-gradient(40% 52% at calc(var(--flow,0)*128% - 14%) 42%,#2fd6b238,transparent 68%),radial-gradient(30% 40% at calc(118% - var(--flow,0)*116%) 74%,#fe77002e,transparent 66%),radial-gradient(34% 44% at calc(var(--flow,0)*112% - 6%) 78%,#1342361f,transparent 70%),radial-gradient(30% 38% at calc(112% - var(--flow,0)*108%) 14%,#a6f3e033,transparent 72%);
    transition:background .12s linear
}
.sec-white::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:var(--grain);
    opacity:.035;
    mix-blend-mode:multiply
}
.sec-dark {
    color:#ffffffb8;
    background:linear-gradient(168deg,#123f34,#0c2620 55%,#0f2e27)
}
.sec-dark::before {
    opacity:.1;
    mix-blend-mode:normal
}
.sec-dark::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(46% 54% at calc(var(--flow,0)*120% - 10%) 22%,#2fd6b229,transparent 64%),radial-gradient(38% 46% at calc(116% - var(--flow,0)*112%) 82%,#fe770024,transparent 64%);
    transition:background .12s linear
}
.sec-dark h2,.sec-dark h3,.sec-dark h4 {
    color:#fff
}
.sec-dark em,.sec-dark .lbl {
    color:var(--mint)
}
.sec-dark .lead {
    color:#ffffffad
}
.sec-dark h2 em {
    background-image:linear-gradient(90deg,#fe77004d,transparent)
}
.lbl {
    display:flex;
    gap:.62rem;
    align-items:center;
    margin-bottom:.9rem;
    color:var(--moss);
    font-size:.85rem;
    font-weight:500
}
.lbl::before {
    content:'';
    width:24px;
    height:2px;
    border-radius:2px;
    flex-shrink:0;
    background:linear-gradient(90deg,var(--moss),var(--orange))
}
.sec-dark .lbl::before {
    background:linear-gradient(90deg,var(--mint),var(--orange))
}
.flowbg {
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(38% 46% at calc(var(--fl,0)*118% - 9%) 26%,#2fd6b233,transparent 66%),radial-gradient(30% 38% at calc(106% - var(--fl,0)*104%) 68%,#fe77002e,transparent 68%),radial-gradient(34% 40% at calc(var(--fl,0)*92% + 4%) 88%,#1342361c,transparent 70%),radial-gradient(28% 32% at calc(96% - var(--fl,0)*70%) 8%,#a6f3e038,transparent 72%);
    transition:background .1s linear
}
.scrollbar-top {
    position:fixed;
    inset:0 0 auto;
    z-index:200;
    height:2.5px;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--forest),var(--moss) 45%,var(--orange));
    box-shadow:0 0 12px #fe770059;
    pointer-events:none
}
.js .rv {
    opacity:0;
    translate:0 18px;
    transition:opacity .7s var(--ease),translate .8s var(--ease)
}
.js .rv.in {
    opacity:1;
    translate:0 0
}
.js .rv-left,.js .rv-right {
    opacity:0;
    transition:opacity .8s var(--ease),translate .9s var(--ease)
}
.js .rv-left {
    translate:-44px 0
}
.js .rv-right {
    translate:44px 0
}
.js .rv-left.in,.js .rv-right.in {
    opacity:1;
    translate:0 0
}
[hidden] {
    display:none!important
}
@keyframes caret {
    0%,50% {
        opacity:1
    }
    50.1%,100% {
        opacity:0
    }
}
@keyframes sweep {
    0% {
        left:-40%
    }
    55%,100% {
        left:110%
    }
}
@keyframes float {
    50% {
        translate:0 -7px
    }
}
@keyframes browser-shine {
    from { left:-45%; }
    to { left:115%; }
}
@keyframes grip-glow {
    0%,100% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
}
@keyframes gradient-drift {
    from { transform:translate3d(-2.5%,-1.5%,0) scale(1); }
    to { transform:translate3d(3.5%,2.5%,0) scale(1.09); }
}


/* === layout.css === */
/* Header and navigation */
.topbar {
    position:relative;
    z-index:70;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.75rem;
    overflow:hidden;
    padding:.6rem var(--pad);
    background:linear-gradient(100deg,var(--deep),#10241e 55%,#1a2e22);
    color:#fff;
    text-align:center;
    font-size:.88rem
}
.topbar b {
    font-weight:600
}
.tb-sub {
    color:#ffffff8c
}
.tb-arrow {
    color:var(--orange)
}
.topbar::after {
    content:'';
    position:absolute;
    inset-block:0;
    left:-40%;
    width:34%;
    background:linear-gradient(90deg,transparent,#fe77002e,transparent);
    animation:sweep 7s ease-in-out infinite;
    pointer-events:none
}
.nav {
    position:sticky;
    top:0;
    z-index:60;
    background:#ffffffb8;
    backdrop-filter:saturate(180%) blur(16px);
    border-bottom:1px solid transparent;
    transition:background .2s,box-shadow .2s
}
.nav.stuck {
    background:#ffffffd1;
    border-color:var(--line-2);
    box-shadow:0 10px 30px -26px #0d1a1680
}
.nav .wrap {
    max-width:min(var(--maxw),1560px)
}
.nav-in {
    height:68px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:1rem
}
.nav-in>.logo {
    justify-self:start
}
.nav-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1rem;
    justify-self:end
}
.logo {
    display:flex;
    gap:.62rem;
    align-items:center;
    flex-shrink:0;
    perspective:600px
}
.logo-img {
    width:auto;
    height:30px;
    flex-shrink:0;
    object-fit:contain;
    transition:transform .4s var(--ease),filter .4s
}
.logo:hover .logo-img,.logo:focus-visible .logo-img {
    transform:perspective(600px) rotateY(-5deg) scale(1.035);
    filter:drop-shadow(0 6px 16px #fe770047)
}
.logo-tag {
    font-size:.56rem;
    font-weight:500;
    letter-spacing:.19em;
    color:#a6ada9;
    text-transform:uppercase;
    white-space:nowrap
}
.nav-links {
    display:flex;
    flex-wrap:nowrap;
    gap:1.6rem;
    align-items:center;
    list-style:none
}
.nav-links li {
    flex-shrink:0
}
.nav-links a {
    position:relative;
    white-space:nowrap;
    font-size:.94rem;
    color:var(--ink-2);
    padding-bottom:2px
}
.nav-links a::after {
    content:'';
    position:absolute;
    inset:auto 0 -2px;
    height:2px;
    background:linear-gradient(90deg,var(--moss),var(--orange));
    scale:0 1;
    transform-origin:left;
    transition:scale .32s var(--ease)
}
.nav-links a:hover::after,.nav-links a.on::after {
    scale:1 1
}
.nav-cta {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.58rem 1.1rem;
    border-radius:10px;
    background:var(--forest);
    color:#fff;
    font-size:.92rem;
    font-weight:500;
    white-space:nowrap;
    transition:background .3s
}
.nav-cta:hover {
    background:var(--orange-dk)
}
.lang {
    position:relative;
    display:inline-flex;
    align-items:center;
    flex:none;
    padding:3px;
    border:1px solid var(--line);
    border-radius:100px;
    background:#ffffffb3
}
.lang::before {
    content:'';
    position:absolute;
    inset:3px auto 3px 3px;
    width:calc(50% - 3px);
    border-radius:100px;
    background:linear-gradient(125deg,var(--forest),#17564a);
    transition:translate .38s var(--ease)
}
.lang.lang-en::before {
    translate:100% 0
}
.lang button {
    position:relative;
    padding:.3rem .68rem;
    border-radius:100px;
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.05em;
    line-height:1.4;
    color:var(--ink-3)
}
.lang button[aria-pressed=true] {
    color:#fff
}
.burger {
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:40px;
    height:40px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    flex-shrink:0
}
.burger span {
    width:16px;
    height:1.6px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .22s,opacity .22s
}
.burger.open span:first-child {
    transform:translateY(5.6px) rotate(45deg)
}
.burger.open span:nth-child(2) {
    opacity:0
}
.burger.open span:last-child {
    transform:translateY(-5.6px) rotate(-45deg)
}
.mnav {
    display:none;
    padding:.5rem var(--pad) 1.4rem;
    border-bottom:1px solid var(--line);
    background:#ffffffe6
}
.mnav.open {
    display:flex;
    flex-direction:column
}
.mnav a {
    padding:.82rem 0;
    border-bottom:1px solid var(--line-2);
    color:var(--ink-2)
}
.mnav .btn {
    margin-top:1rem;
    color:#fff
}
.mnav .lang {
    align-self:start;
    margin-top:1rem
}
/* Pinned opening scene */
.stage {
    position:relative;
    height:190vh
}
.stage-sticky {
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden
}
.stage-bg {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(46% 40% at 50% 6%,#2fd6b21f,transparent 68%),radial-gradient(40% 34% at 10% 44%,#13423614,transparent 70%),radial-gradient(38% 34% at 90% 40%,#a6f3e026,transparent 72%),#fff
}
.stage-bg::after {
    content:'';
    position:absolute;
    inset:0;
    background-image:var(--grain);
    opacity:.045;
    mix-blend-mode:multiply
}
.stage-in {
    position:relative;
    height:calc(100% - var(--cardlift) - var(--peek))
}
.stage-title {
    position:absolute;
    left:50%;
    bottom:34%;
    transform:translateX(-50%);
    width:min(740px,calc(100% - 2*var(--pad)));
    text-align:center;
    z-index:2
}
.stage-title::before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:-16% -12%;
    pointer-events:none;
    background:radial-gradient(58% 56% at 50% 50%,#fffffff2, #ffffffdb 42%,#ffffff80 66%,transparent 82%)
}
.stage-title h1 {
    max-width:22ch;
    margin:0 auto .95rem;
    font-size:clamp(1.85rem,3.4vw,2.65rem)
}
.stage-title .sub {
    max-width:60ch;
    margin:auto;
    color:var(--ink-2);
    font-size:clamp(.95rem,1.4vw,1.06rem)
}
.stage-title .eta {
    display:inline-block;
    margin-top:.6rem;
    color:var(--moss);
    font-size:.92rem
}
.stage-title .btn-row {
    justify-content:center;
    margin-top:1.5rem
}
.type {
    display:block;
    color:var(--orange-dk);
    min-height:1.06em
}
.caret {
    display:inline-block;
    width:3px;
    height:.82em;
    margin-left:.07em;
    vertical-align:-.06em;
    border-radius:2px;
    background:var(--orange);
    animation:caret 1.05s steps(1) infinite
}
.orbit {
    position:absolute;
    inset:auto 0 -80px;
    height:96vh;
    z-index:1;
    pointer-events:none
}
.orbit svg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    shape-rendering:geometricPrecision
}
.perk {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    padding:.68rem 1.2rem;
    border:1px solid var(--line);
    border-radius:100px;
    background:#ffffffb8;
    backdrop-filter:blur(16px) saturate(170%);
    font-size:.95rem;
    font-weight:500;
    white-space:nowrap;
    box-shadow:0 12px 30px -18px #0d1a1673;
    will-change:transform
}
.browser {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:min(1060px,80%);
    z-index:3;
    perspective:1400px
}
.bw {
    position:relative;
    border:1px solid var(--line-dark);
    border-bottom:0;
    border-radius:18px 18px 0 0;
    overflow:hidden;
    background:linear-gradient(175deg,#16302a,#0d1a16 62%);
    box-shadow:0 -10px 70px -24px #0d1a168c;
    transform-style:preserve-3d;
    transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;
    animation:float 9s ease-in-out infinite
}
.browser:hover .bw {
    animation-play-state:paused;
    border-color:var(--orange);
    box-shadow:0 -18px 90px -30px #fe770073,0 -10px 70px -24px #0d1a168c
}
.bw::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:var(--grain);
    opacity:.08
}
.bw-bar {
    display:flex;
    align-items:center;
    gap:.8rem;
    background:#ffffff0b;
    border-bottom:1px solid var(--line-dark);
    position:relative;
    z-index:1;
    transition:background .35s
}
.browser:hover .bw-bar {
    background:#fe770012
}
.bw-dots {
    display:flex;
    gap:6px
}
.bw-dots i {
    width:11px;
    height:11px;
    border-radius:50%
}
.bw-addr {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    flex:1;
    max-width:300px;
    margin:auto;
    padding:.3rem .8rem;
    border-radius:7px;
    background:#ffffff0f;
    font-size:.75rem;
    color:#ffffff8c;
    transition:color .3s,background .3s
}
.browser:hover .bw-addr {
    color:#ffffffcc;
    background:#ffffff1a
}
.bw-body {
    position:relative;
    z-index:1;
    padding:clamp(1.7rem,3.3vw,3.3rem)
}
.bw-h {
    font-size:clamp(1.45rem,2.9vw,2.55rem);
    font-weight:700;
    letter-spacing:-.038em;
    line-height:1.14;
    color:#fff;
    margin-bottom:1.9rem
}
.bw-h em {
    font-style:normal;
    color:var(--mint);
    transition:color .35s
}
.browser:hover .bw-h em {
    color:var(--orange-lt)
}
.bw-l {
    position:relative;
    overflow:hidden;
    height:11px;
    border-radius:6px;
    background:#ffffff16;
    margin-bottom:.95rem;
    transition:width .5s var(--ease),background .35s
}
.bw-l::after {
    content:'';
    position:absolute;
    inset-block:0;
    left:-45%;
    width:45%;
    background:linear-gradient(90deg,transparent,#fe770080,transparent)
}
.browser:hover .bw-l::after {
    animation:browser-shine 1.1s ease-in-out
}
.browser:hover .bw-l:nth-of-type(2)::after {
    animation-delay:.1s
}
.browser:hover .bw-l:nth-of-type(3)::after {
    animation-delay:.2s
}
.bw-cta {
    display:flex;
    gap:.7rem;
    margin-top:2.4rem
}
.bw-cta span {
    padding:.66rem 1.3rem;
    border-radius:9px;
    background:#fff;
    color:var(--deep);
    font-size:.92rem;
    font-weight:500;
    transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s
}
.browser:hover .bw-cta span:first-child {
    transform:translateY(-2px);
    box-shadow:0 8px 20px -10px #fe770059
}
.browser:hover .bw-cta span.o {
    border-color:var(--orange);
    color:var(--orange-lt)
}
.bw-cta span.o {
    border:1px solid var(--line-dark-strong);
    background:transparent;
    color:#ffffffad
}
.cover {
    position:relative;
    z-index:5;
    margin-top:-65vh;
    border-radius:28px 28px 0 0;
    border-top:1px solid var(--line);
    background:#fcfdfdb8;
    backdrop-filter:blur(30px) saturate(150%);
    padding:clamp(3.2rem,6.5vw,5.4rem) 0 clamp(3.8rem,7.5vw,6.2rem);
    overflow:hidden
}
.cover-grip {
    position:relative;
    width:52px;
    height:4px;
    margin:0 auto clamp(1.8rem,3.5vw,2.6rem);
    border-radius:4px;
    background:linear-gradient(90deg,var(--line),var(--orange),var(--line));
    background-size:220% 100%;
    animation:grip-glow 4.5s ease-in-out infinite
}
.showcase {
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:clamp(1.6rem,3.6vw,3.6rem);
    align-items:center;
    margin-bottom:clamp(2.2rem,4.6vw,3.4rem)
}
.showcase-txt h2 {
    margin-bottom:1.1rem
}
.showcase-txt .lead {
    max-width:52ch
}
.spec {
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    background:#ffffffb3
}
.spec-col {
    padding:clamp(1.5rem,3vw,2.3rem)
}
.spec-col+.spec-col {
    border-left:1px solid var(--line);
    background:#f0f2f18c
}
.spec h3 {
    margin-bottom:1.3rem;
    max-width:34ch
}
.spec-note {
    margin-top:2rem;
    padding:1.4rem 1.6rem;
    border-left:2px solid var(--orange);
    border-radius:0 12px 12px 0;
    background:#ffffff9e;
    font-size:.97rem;
    color:var(--ink-2)
}
.spec-note p+p {
    margin-top:.8rem
}
.give {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(.85rem,1.5vw,1.3rem)
}
.steps {
    border-top:1px solid var(--line)
}
.step {
    display:grid;
    grid-template-columns:96px 1fr 1.15fr;
    gap:clamp(1rem,3vw,2.4rem);
    align-items:start;
    padding-block:clamp(1.6rem,3vw,2.2rem);
    border-bottom:1px solid var(--line)
}
.step-n {
    font-size:2.1rem;
    line-height:1;
    font-weight:700;
    letter-spacing:-.04em;
    color:#13423657;
    transition:color .3s,translate .3s
}
.step:hover .step-n {
    color:var(--orange);
    translate:3px 0
}
.step-t {
    padding-top:.3rem
}
.step-t h3 {
    max-width:22ch;
    margin-bottom:.35rem
}
.when {
    font-size:.86rem;
    color:var(--moss)
}
.step-d {
    padding-top:.3rem;
    color:var(--ink-2);
    font-size:.96rem
}
.step-d p+p {
    margin-top:.6rem
}
.step-d a {
    color:var(--moss);
    text-decoration:underline;
    text-underline-offset:3px
}
.price {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:1.1rem;
    perspective:1500px
}
.close-a {
    max-width:760px;
    margin-inline:auto;
    text-align:center
}
.close-a h2 {
    margin-bottom:1rem
}
.close-a .lead {
    margin-inline:auto
}
.close-a .lbl,.close-a .btn-row {
    justify-content:center
}
.foot {
    position:relative;
    border-top:1px solid var(--line);
    padding:clamp(2.8rem,5vw,4rem) 0 2rem;
    background:var(--sage-2)
}
.foot .wrap {
    max-width:1180px
}
.foot-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:2.4rem;
    margin-bottom:2.8rem
}
.foot-col h4 {
    font-size:.92rem;
    font-weight:600;
    margin-bottom:.9rem
}
.foot-col a,.foot-col p {
    display:block;
    font-size:.92rem;
    color:var(--ink-2);
    margin-bottom:.55rem
}
.foot-col a.logo {
    display:flex;
    margin-bottom:.9rem
}
.foot .logo-img {
    height:70px
}
.foot-col a:hover {
    color:var(--orange-dk)
}
.foot-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.8rem;
    flex-wrap:wrap;
    padding-top:1.5rem;
    border-top:1px solid var(--line);
    color:var(--ink-3);
    font-size:.85rem
}
.foot-bottom a {
    color:var(--moss)
}
.legal-page {
    min-height:60vh
}
.legal-page .wrap {
    max-width:840px
}
.legal-page h1 {
    font-size:clamp(2rem,5vw,3.2rem);
    margin-bottom:1rem
}
.legal-page section {
    margin-top:2rem
}
.legal-page section h2 {
    font-size:1.3rem;
    margin-bottom:.7rem
}
.legal-page p+p {
    margin-top:.7rem
}
.legal-page a:not(.btn) {
    text-decoration:underline;
    color:var(--moss)
}


/* === components.css === */
/* Buttons, lists and content cards */
.btn {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    padding:.92rem 1.55rem;
    border:1px solid transparent;
    border-radius:12px;
    font-size:.97rem;
    font-weight:500;
    text-align:center;
    transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s
}
.btn::after {
    content:'';
    position:absolute;
    inset-block:0;
    left:-60%;
    z-index:-1;
    width:45%;
    background:linear-gradient(90deg,transparent,#ffffff47,transparent);
    transition:left .55s var(--ease)
}
.btn:hover::after {
    left:120%
}
.btn svg {
    flex-shrink:0;
    transition:translate .28s var(--ease)
}
.btn:hover svg {
    translate:5px 0
}
.btn:hover {
    transform:translateY(-2px)
}
.btn:active {
    transform:scale(.985)
}
.btn-p {
    background:linear-gradient(125deg,var(--forest),#17564a);
    color:#fff;
    box-shadow:0 1px 2px #0d1a162e
}
.btn-p:hover {
    background:linear-gradient(125deg,var(--deep),#14332a);
    box-shadow:0 12px 26px -14px #fe770059
}
.btn-s {
    background:#fff;
    border-color:var(--line);
    color:var(--ink)
}
.btn-s:hover {
    border-color:var(--orange);
    color:var(--orange-dk)
}
.btn-mint {
    background:#fff;
    color:var(--forest);
    font-weight:600
}
.btn-mint:hover {
    color:var(--orange-dk)
}
.btn-lg {
    padding:1.02rem 1.85rem;
    font-size:1rem
}
.btn-row {
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:2rem
}
.ticklist {
    list-style:none;
    display:grid;
    gap:.8rem
}
.ticklist li {
    display:flex;
    align-items:start;
    gap:.7rem;
    font-size:.97rem;
    color:var(--ink-2);
    transition:translate .28s,color .2s
}
.ticklist li:hover {
    translate:4px 0;
    color:var(--ink)
}
.tick,.cross {
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    flex-shrink:0;
    margin-top:3px;
    border-radius:50%
}
.tick {
    background:var(--forest);
    color:#fff;
    transition:background .28s,transform .3s
}
.cross {
    background:var(--paper-2);
    color:var(--ink-3);
    transition:transform .3s var(--ease)
}
.ticklist li:hover .cross {
    transform:rotate(90deg)
}
.tick svg,.cross svg {
    width:10px;
    height:10px
}
.ticklist li:hover .tick {
    background:var(--orange);
    transform:scale(1.16) rotate(-8deg);
    box-shadow:0 0 0 4px #fe77001a
}
.give-i {
    position:relative;
    overflow:hidden;
    padding:clamp(1.35rem,2.3vw,1.9rem);
    border-radius:18px;
    border:1px solid var(--line-dark);
    background:linear-gradient(165deg,#ffffff13,#ffffff07);
    box-shadow:0 20px 44px -30px #000000b3;
    transition:transform .45s var(--ease),background .4s,box-shadow .4s,border-color .35s
}
.give-i::before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    border:0 solid transparent;
    border-right-color:var(--orange);
    transition:border-width .42s var(--ease)
}
.give-i:hover::before {
    border-width:0 26px 26px 0
}
.give-i:hover {
    transform:translateY(-7px) scale(1.035);
    border-color:var(--orange);
    background:linear-gradient(165deg,#ffffff1f,#ffffff0d);
    box-shadow:0 34px 68px -26px #000000d9
}
.give-ic {
    width:32px;
    height:32px;
    margin-bottom:1.1rem;
    color:var(--mint);
    transition:transform .4s,color .3s
}
.give-ic svg {
    width:100%;
    height:100%;
    stroke-width:1.4
}
.give-i h3 {
    margin-bottom:.45rem;
    transition:color .25s
}
.give-i p {
    color:#ffffff9e;
    font-size:.94rem
}
.give-i p+p {
    margin-top:.5rem
}
.give-i:hover h3,.give-i:hover .give-ic {
    color:var(--orange-lt)
}
.give-i:hover .give-ic {
    transform:translateY(-3px) scale(1.1) rotate(-4deg)
}
.price-card {
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:clamp(1.7rem,3vw,2.4rem);
    border:1px solid var(--line-dark);
    border-radius:20px;
    color:#fff;
    background:linear-gradient(158deg,#123f34,#0b211c 58%,#10322a);
    box-shadow:0 26px 62px -34px #0d1a169e;
    transition:filter .45s,opacity .45s,box-shadow .45s,transform .45s var(--ease),border-color .35s
}
.price-card::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(74% 76% at 100% 0%,#2fd6b229,transparent 60%),radial-gradient(66% 72% at 0% 100%,#fe770033,transparent 62%)
}
.price-card::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:var(--grain);
    opacity:.08
}
.price-card>* {
    position:relative;
    z-index:1
}
.price:hover .price-card {
    filter:brightness(.62) saturate(.8);
    opacity:.9
}
.price:hover .price-card:hover {
    filter:brightness(1.08) saturate(1.05);
    opacity:1;
    border-color:var(--orange);
    box-shadow:0 44px 88px -34px #fe770057
}
.price-k {
    font-size:.9rem;
    color:var(--mint);
    margin-bottom:1.4rem
}
.price-n {
    font-size:clamp(2.5rem,5vw,3.4rem);
    font-weight:700;
    letter-spacing:-.045em;
    line-height:1;
    color:#fff
}
.price-u {
    font-size:.95rem;
    color:#ffffff9e;
    margin:.5rem 0 1.5rem
}
.project-quote {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);
    gap:clamp(1.6rem,4vw,3rem);
    align-items:center;
    margin-bottom:1.6rem;
    padding:clamp(1.5rem,4vw,3rem);
    border:1px solid #fe770078;
    border-top:3px solid var(--orange);
    border-radius:20px;
    color:#fff;
    background:radial-gradient(ellipse at 0 0,#2fd6b22b,transparent 65%),radial-gradient(ellipse at 100% 100%,#fe770023,transparent 60%),linear-gradient(125deg,#123f34,#0d211b);
    box-shadow:0 24px 60px -34px #1342369e
}
.project-quote .lbl {
    color:var(--mint)
}
.project-quote h3 {
    max-width:22ch;
    margin-bottom:1rem;
    color:#fff;
    font-size:clamp(1.65rem,3.3vw,2.55rem);
    line-height:1.15
}
.project-quote h3 em {
    color:var(--orange-lt)
}
.project-quote p {
    color:#ffffffbf;
    font-size:.97rem;
    line-height:1.7
}
.project-quote-action {
    padding-left:clamp(1.5rem,3vw,2.5rem);
    border-left:1px solid var(--line-dark)
}
.project-quote-action strong {
    display:block;
    margin-bottom:.7rem;
    color:#fff;
    font-size:clamp(1.35rem,2.3vw,1.8rem);
    line-height:1.2;
    letter-spacing:-.035em
}
.project-quote-action .btn {
    margin-top:1.3rem;
    border-color:#ffab62;
    background:var(--orange);
    color:var(--deep);
    font-weight:600;
    box-shadow:0 8px 28px -16px #fe7700b3
}
.project-quote-action .btn:hover {
    background:var(--orange-lt);
    box-shadow:0 12px 32px -16px #fe7700cc
}
@media(max-width:760px) {
    .project-quote { grid-template-columns:1fr; gap:1.5rem; }
    .project-quote-action { padding:1.5rem 0 0; border-left:0; border-top:1px solid var(--line-dark); }
}
.price-lbl {
    font-size:.88rem;
    color:#ffffff85;
    margin-bottom:.9rem
}
.price-card .ticklist li {
    color:#ffffffc7
}
.price-card .tick {
    background:#ffffff29
}
.price-card .ticklist li:hover {
    color:#fff
}
.price-b .btn-s {
    background:transparent;
    color:#fff;
    border-color:var(--line-dark-strong)
}
.price-b .btn-s:hover {
    border-color:var(--orange);
    color:var(--orange-lt)
}
.price-note {
    margin-top:1.1rem;
    padding:1.4rem 1.6rem;
    border:1px solid var(--line);
    border-left:3px solid var(--orange);
    border-radius:14px;
    background:#fff;
    font-size:.94rem;
    color:var(--ink-2)
}
.price-note p+p {
    margin-top:.7rem
}
.price-note a,.faq-a a {
    color:var(--moss);
    text-decoration:underline;
    text-underline-offset:3px
}
/* Native details keep FAQ operable without JavaScript. */
.faq {
    border-top:1px solid var(--line)
}
.faq details {
    border-bottom:1px solid var(--line);
    transition:background .3s
}
.faq summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1.3rem 0;
    list-style:none;
    cursor:pointer;
    font-size:1.08rem;
    font-weight:600;
    letter-spacing:-.02em;
    line-height:1.3;
    transition:color .22s,padding-left .3s var(--ease)
}
.faq summary::-webkit-details-marker {
    display:none
}
.faq summary:hover {
    color:var(--orange-dk);
    padding-left:.4rem
}
.faq summary i {
    position:relative;
    flex-shrink:0;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border:1px solid var(--line);
    border-radius:50%;
    transition:background .28s,border-color .28s,transform .28s var(--ease),box-shadow .28s
}
.faq summary:hover i {
    border-color:var(--orange);
    transform:rotate(90deg)
}
.faq summary i::before,.faq summary i::after {
    content:'';
    position:absolute;
    background:var(--ink-2);
    transition:background .2s,opacity .2s
}
.faq summary i::before {
    width:11px;
    height:1.5px
}
.faq summary i::after {
    width:1.5px;
    height:11px
}
.faq details[open] summary i {
    background:var(--orange);
    border-color:var(--orange);
    transform:rotate(180deg);
    box-shadow:0 0 0 4px #fe77001a
}
.faq details[open] summary i::before {
    background:#fff
}
.faq details[open] summary i::after {
    opacity:0
}
.faq details[open] {
    background:linear-gradient(180deg,#fe77000d,transparent 60%)
}
.faq details[open]>.faq-a {
    animation:faq-in .42s var(--ease)
}
@keyframes faq-in {
    from { opacity:0; transform:translateY(-7px); }
    to { opacity:1; transform:none; }
}
.faq-a {
    max-width:74ch;
    padding-bottom:1.5rem;
    font-size:.97rem;
    color:var(--ink-2)
}
.faq-a p+p,.faq-a ul {
    margin-top:.7rem
}
.faq-a ul {
    padding-left:1.1rem
}
.faq-a li {
    margin-bottom:.25rem
}
/* Video */
.promo-status {
    margin-top:12px;
    font-size:.85rem;
    line-height:1.5;
    color:var(--deep)
}
.promo-status a {
    text-decoration:underline;
    text-underline-offset:3px
}
.promo {
    position:relative;
    margin:0;
    perspective:1200px
}
.promo-frame {
    position:relative;
    aspect-ratio:5/3;
    width:100%;
    border-radius:20px;
    overflow:hidden;
    background:var(--deep);
    box-shadow:0 34px 76px -38px #0d1a169e;
    transition:clip-path 1.15s var(--ease),transform .5s var(--ease)
}
.js .promo:not(.in) .promo-frame {
    clip-path:polygon(-30% 0,-30% 0,-62% 100%,-62% 100%)
}
.promo.in .promo-frame {
    clip-path:polygon(-30% 0,142% 0,142% 100%,-62% 100%)
}
.promo-vid {
    width:100%;
    height:100%;
    object-fit:cover;
    background:var(--deep)
}
.promo-br {
    position:absolute;
    z-index:3;
    width:26px;
    height:26px;
    border:2px solid var(--orange);
    pointer-events:none;
    transition:width .35s,height .35s
}
.promo-br.tl {
    top:14px;
    left:14px;
    border-right:0;
    border-bottom:0;
    border-radius:7px 0 0 0
}
.promo-br.tr {
    top:14px;
    right:14px;
    border-left:0;
    border-bottom:0;
    border-radius:0 7px 0 0
}
.promo-br.bl {
    bottom:14px;
    left:14px;
    border-right:0;
    border-top:0;
    border-radius:0 0 0 7px
}
.promo-br.br {
    bottom:14px;
    right:14px;
    border-left:0;
    border-top:0;
    border-radius:0 0 7px 0
}
.promo:hover .promo-br {
    width:36px;
    height:36px
}
.promo-tap {
    position:absolute;
    inset:0;
    z-index:4;
    display:grid;
    place-items:center
}
.promo-ico {
    position:relative;
    width:62px;
    height:62px;
    border-radius:50%;
    background:#fffffff0;
    box-shadow:0 12px 34px -12px #0000008c;
    transition:opacity .3s,transform .3s
}
.promo-ico::before {
    content:'';
    position:absolute;
    top:50%;
    left:53%;
    transform:translate(-50%,-50%);
    border:10px solid transparent;
    border-right:0;
    border-left:17px solid var(--forest)
}
.promo.is-playing .promo-ico {
    opacity:0;
    transform:scale(.7)
}
.promo.is-playing:hover .promo-ico,.promo-tap:focus-visible .promo-ico {
    opacity:1;
    transform:scale(1)
}
.promo.is-playing .promo-ico::before {
    border:0;
    width:14px;
    height:19px;
    left:50%;
    background:linear-gradient(to right,var(--forest) 0 5px,transparent 5px 9px,var(--forest) 9px 14px);
    box-shadow:none;
    transform:translate(-50%,-50%)
}
.promo-snd {
    position:absolute;
    z-index:5;
    right:14px;
    bottom:14px;
    display:flex;
    align-items:center;
    gap:.45rem;
    padding:.5rem .85rem;
    border-radius:100px;
    border:1px solid var(--line-dark);
    background:#0b211cb8;
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:.78rem;
    font-weight:500
}
.promo-snd::after {
    content:'Włącz dźwięk'
}
.promo.has-sound .promo-snd::after {
    content:'Wycisz'
}
html[lang=en] .promo-snd::after {
    content:'Turn on sound'
}
html[lang=en] .promo.has-sound .promo-snd::after {
    content:'Mute'
}
.snd-off {
    width:13px;
    height:13px;
    background:currentColor;
    clip-path:polygon(0 33%,28% 33%,58% 8%,58% 92%,28% 67%,0 67%)
}
.promo.has-sound .snd-off {
    background:var(--orange)
}
/* Consent UI */
.ck-bar {
    position:fixed;
    z-index:90;
    left:var(--pad);
    bottom:var(--pad);
    max-width:400px;
    padding:1.25rem 1.35rem;
    border:1px solid var(--line);
    border-top:2px solid var(--orange);
    border-radius:18px;
    background:#ffffffc7;
    backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 18px 44px #0d1a1624;
    opacity:0;
    transform:translateY(16px);
    visibility:hidden;
    transition:opacity .35s,transform .35s,visibility .35s
}
.ck-bar.in {
    opacity:1;
    transform:none;
    visibility:visible
}
.ck-bar h4 {
    margin-bottom:.4rem
}
.ck-bar p {
    font-size:.88rem;
    color:var(--ink-2);
    margin-bottom:1rem
}
.ck-acts {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem
}
.ck-btn {
    padding:.55rem 1rem;
    border-radius:9px;
    border:1px solid transparent;
    font-size:.86rem;
    font-weight:500
}
.ck-btn.p {
    background:var(--forest);
    color:#fff
}
.ck-btn.g {
    background:#ffffff99;
    border-color:var(--line)
}
.ck-btn.l {
    padding-inline:.4rem;
    color:var(--ink-3)
}
.ck-modal {
    position:fixed;
    inset:0;
    z-index:95;
    display:none;
    place-items:center;
    padding:1.2rem;
    background:#0d1a166b;
    backdrop-filter:blur(4px)
}
.ck-modal.in {
    display:grid
}
.ck-modal-card {
    max-width:520px;
    width:100%;
    max-height:88vh;
    overflow:auto;
    padding:1.9rem;
    background:#fff;
    border-radius:20px
}
.ck-cat {
    padding:1rem 0;
    border-top:1px solid var(--line-2)
}
.ck-cat-hd {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:.3rem
}
.ck-cat-hd b {
    font-size:.95rem
}
.ck-cat p {
    font-size:.86rem;
    color:var(--ink-2)
}
.ck-req {
    font-size:.8rem;
    color:var(--ink-3)
}
.sw {
    position:relative;
    width:38px;
    height:22px;
    flex-shrink:0
}
.sw input {
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0;
    cursor:pointer;
    width:100%;
    height:100%
}
.sw i {
    position:absolute;
    inset:0;
    background:var(--line);
    border-radius:100px;
    pointer-events:none;
    transition:background .2s
}
.sw i::after {
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    background:#fff;
    border-radius:50%;
    transition:translate .2s
}
.sw input:checked+i {
    background:var(--moss)
}
.sw input:checked+i::after {
    translate:16px 0
}
.sw input:focus-visible+i {
    outline:2px solid var(--orange);
    outline-offset:3px
}
/* Mock browser geometry and source content spacing, kept out of the templates. */
.bw-bar {
    padding: .85rem 1.1rem;
}
.bw-dots i:nth-child(1) { background: #ff5f57; }
.bw-dots i:nth-child(2) { background: #febc2e; }
.bw-dots i:nth-child(3) { background: #28c840; }
.bw-body > .bw-l:nth-child(2) { width: 74%; }
.bw-body > .bw-l:nth-child(3) { width: 62%; }
.bw-body > .bw-l:nth-child(4) { width: 41%; }
.showcase-txt .lead + .lead { margin-top: .9rem; }
.price-card .btn-row {
    margin-top: auto;
    padding-top: 1.8rem;
}
.ck-bar p a {
    color: var(--orange-dk);
    text-decoration: underline;
}
.ck-modal-card > h3 { margin-bottom: .5rem; }
.ck-modal-card > .ck-cat:first-of-type { margin-top: 1rem; }
.ck-modal-card > .ck-acts { margin-top: 1.4rem; }
.foot-col:first-child p { max-width: 36ch; }


/* === form.css === */
/* Company brief, shared with the site's green and orange visual language. */
.inquiry-page { padding-top:clamp(2.5rem,5vw,4.5rem); overflow:clip; }
.inquiry-layout { display:grid; grid-template-columns:.83fr 1.17fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.inquiry-intro { position:sticky; top:104px; padding-top:.4rem; }
.back-link { display:inline-block; margin-bottom:2.7rem; font-size:.9rem; color:var(--ink-2); transition:color .25s; }
.back-link:hover { color:var(--orange-dk); }
.inquiry-intro h1 { font-size:clamp(2rem,3.4vw,3.1rem); margin-bottom:1.3rem; }
.inquiry-intro .lead { font-size:1rem; }
.inquiry-steps { display:grid; gap:1.4rem; margin-top:2rem; list-style:none; }
.inquiry-steps li { display:flex; gap:.9rem; }
.inquiry-steps li>span { display:grid; place-items:center; flex:none; width:33px; height:33px; border:1px solid var(--line); border-radius:10px; background:#ffffffa6; color:var(--moss); font-size:.78rem; font-weight:600; }
.inquiry-steps h3 { font-size:1rem; line-height:1.5; letter-spacing:-.02em; }
.inquiry-steps p { max-width:36ch; margin-top:.2rem; color:var(--ink-2); font-size:.9rem; }
.inquiry-contact { margin-top:2rem; color:var(--ink-2); font-size:.9rem; }
.inquiry-contact a { color:var(--moss); text-decoration:underline; text-underline-offset:4px; }
.inquiry-card { position:relative; min-width:0; padding:clamp(1.3rem,3vw,2.5rem); border:1px solid var(--line); border-top:2px solid var(--orange); border-radius:22px; background:#ffffffeb; box-shadow:0 24px 70px -44px #13423666; }
.form-heading { margin-bottom:2rem; }
.form-heading h2 { font-size:clamp(1.5rem,2.2vw,1.9rem); margin-bottom:.55rem; }
.form-heading p { font-size:.85rem; color:var(--ink-2); }
.form-heading p>span,.form-field label>span { color:var(--orange-dk); }
.domain-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:13px 15px; margin-bottom:1.2rem; border:1px solid var(--line); border-radius:10px; background:#f5f8f6; font-size:.85rem; }
.domain-summary strong { overflow-wrap:anywhere; }
.domain-summary button { min-height:40px; padding:6px 10px; flex:none; color:var(--moss); text-decoration:underline; text-underline-offset:3px; }
.feature-suggestions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:.85rem; padding:10px 0; border-top:1px solid var(--line-2); color:var(--forest); }
.feature-suggestions strong { font-size:.86rem; color:var(--forest); }
.feature-suggestions p { margin:2px 0 0; color:var(--ink-2); font-size:.76rem; line-height:1.4; }
.feature-suggestion-actions { display:flex; align-items:center; gap:10px; }
#applyFeatureSuggestions { min-height:42px; padding:9px 14px; border:1px solid var(--forest); border-radius:8px; background:var(--forest); color:#fff; font-size:.8rem; font-weight:500; }
#applyFeatureSuggestions:hover { background:var(--deep); }
#applyFeatureSuggestions:disabled { background:#edf4ef; border-color:var(--line); color:var(--moss); cursor:default; }
#undoFeatureSuggestions { min-height:42px; padding:5px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; font-size:.78rem; }
.form-field .is-suggested .feature-tile { border-color:#648f76; background:#edf5ef; }
.feature-tile .feature-recommendation { position:absolute; top:12px; left:39px; right:34px; font-size:.61rem; line-height:18px; font-weight:600; color:#386447; white-space:nowrap; }
.feature-option input:checked+.feature-tile .feature-recommendation { color:#a7e9cc; }
.inquiry-card fieldset { border:0; min-width:0; padding:0 0 1.5rem; margin:0 0 1.5rem; border-bottom:1px solid var(--line-2); }
.inquiry-card legend { display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; font-weight:600; font-size:1rem; letter-spacing:-.02em; }
.inquiry-card legend>span { color:var(--orange-dk); font-size:.78rem; font-weight:500; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.form-field { display:flex; flex-direction:column; min-width:0; margin-bottom:1rem; }
.form-field:last-child { margin-bottom:0; }
.form-grid .form-field { margin-bottom:1rem; }
.form-field label { display:block; margin-bottom:.4rem; color:var(--ink); font-weight:500; font-size:.87rem; line-height:1.5; }
.form-field label small { font-size:.76rem; font-weight:400; color:var(--ink-3); margin-left:.2rem; }
.field-label { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; margin-bottom:.4rem; }
.field-label label { margin-bottom:0; }
.field-help-toggle { display:grid; place-items:center; flex:none; width:25px; height:25px; padding:0; border:1px solid #959ca3; border-radius:50%; background:#f6f9f7; color:var(--forest); font-size:.8rem; font-weight:600; line-height:1; cursor:help; transition:border-color .2s,background .2s,color .2s; }
.field-help-toggle:hover,.field-help-toggle[aria-expanded=true] { border-color:var(--moss); background:var(--forest); color:#fff; }
.field-tooltip { flex-basis:100%; padding:.8rem .9rem; border:1px solid var(--line); border-radius:10px; background:#f1f6f2; color:var(--ink-2); font-size:.8rem; font-weight:400; line-height:1.6; overflow-wrap:anywhere; }
.field-help-ready .field-tooltip { position:absolute; z-index:20; top:calc(100% + .4rem); left:0; width:100%; box-shadow:0 12px 30px -12px #1342364d; animation:field-help-in .16s ease-out; }
.field-help-ready .field-tooltip::before { content:""; position:absolute; inset:-8px 0 auto; height:8px; }
@keyframes field-help-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.form-field input,.form-field textarea,.form-field select { display:block; width:100%; max-width:100%; min-width:0; padding:.77rem .9rem; border:1px solid #959ca3; border-radius:10px; background:#fff; color:var(--ink); font-size:.92rem; line-height:1.5; transition:border-color .2s,box-shadow .2s,background .2s; }
.form-field input:hover,.form-field textarea:hover,.form-field select:hover { border-color:#6b737b; }
.form-field textarea { resize:vertical; min-height:100px; }
.form-field select { padding-right:.4rem; }
.form-field input::placeholder,.form-field textarea::placeholder { color:#7a8580; opacity:1; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus { outline:0; border-color:var(--moss); background:#fff; box-shadow:0 0 0 3px #1e6b5a14; }
.form-field [aria-invalid=true] { border-color:#b63e25; box-shadow:0 0 0 2px #b63e250d; }
.field-error { display:block; margin-top:.35rem; font-size:.8rem; line-height:1.4; color:#a9351e; }
.field-error:empty { display:none; }
.field-hint { margin-top:.45rem; font-size:.8rem; line-height:1.5; color:var(--ink-2); }
.location-control { position:relative; }
.location-suggestions { position:absolute; z-index:10; inset:calc(100% + 6px) 0 auto; max-height:280px; overflow-y:auto; border:1px solid #959ca3; border-radius:12px; background:#fff; box-shadow:0 16px 36px -14px #13423640; }
.location-option { padding:.65rem .85rem; cursor:pointer; border-bottom:1px solid #e5e7eb; font-size:.9rem; line-height:1.4; }
.location-option:last-child { border-bottom:0; }
.location-option[aria-selected=true],.location-option:hover { background:#edf5f0; }
.location-option strong,.location-option small { display:block; }
.location-option small { margin-top:.15rem; font-size:.75rem; color:var(--ink-2); }
.location-empty { padding:.8rem; color:var(--ink-2); font-size:.8rem; }
.location-source { margin-top:.2rem; font-size:.68rem; color:var(--ink-3); }
.location-source a { text-decoration:underline; text-underline-offset:2px; }
.field-suggestions { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.45rem; font-size:.76rem; }
.field-suggestions p { flex-basis:100%; color:var(--ink-2); line-height:1.4; }
.suggestion-chip { max-width:100%; padding:.3rem .6rem; border:1px solid #a9b4ad; border-radius:7px; background:#f6f9f7; color:var(--forest); font-size:.76rem; line-height:1.5; text-align:left; overflow-wrap:anywhere; transition:background .2s,border-color .2s; }
.suggestion-chip:hover { border-color:var(--moss); background:#eaf3ed; }
.suggestion-chip[aria-pressed=true] { background:var(--forest); border-color:var(--forest); color:#fff; }
.feature-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; }
.feature-heading h3 { font-size:.9rem; font-weight:600; line-height:1.5; letter-spacing:0; }
.feature-heading>span { color:var(--ink-3); font-size:.76rem; }
.feature-section>.field-hint { margin-top:.3rem; }
.preference-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:1rem 0; }
.form-field .feature-option { position:relative; margin:0; cursor:pointer; }
.form-field .feature-option input { position:absolute; width:1px; height:1px; min-width:0; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.form-field .feature-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:9px; min-height:78px; height:100%; padding:12px 13px; border:1px solid #d5e1da; border-radius:10px; background:#f5f8f6; color:var(--forest); transition:background .18s,border-color .18s; }
.feature-tile>i { flex:none; width:20px; font-size:18px; text-align:left; color:var(--moss); transition:color .18s; }
.feature-tile>span { max-width:100%; padding-right:2px; color:var(--forest); font-size:.82rem; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.feature-tile .feature-check { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:17px; height:17px; padding:0; border:1px solid #a9beb1; border-radius:4px; color:var(--forest); font-size:0; line-height:1; transition:background .18s,border-color .18s; }
.feature-option:hover .feature-tile { background:#edf4ef; border-color:#89aa97; }
.feature-option input:checked+.feature-tile { background:var(--forest); border-color:var(--forest); }
.feature-option input:checked+.feature-tile>span { color:#fff; }
.feature-option input:checked+.feature-tile>i { color:#81e1be; }
.feature-option input:checked+.feature-tile .feature-check { background:#81e1be; border-color:#81e1be; color:var(--forest); }
.feature-option input:checked+.feature-tile .feature-check::before { content:""; width:8px; height:4px; margin-top:-2px; border-left:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(-45deg); }
.feature-option input:focus-visible+.feature-tile { outline:2px solid var(--moss); outline-offset:3px; }
.form-field .feature-advice { display:flex; align-items:center; gap:.6rem; width:fit-content; min-height:44px; margin:0; cursor:pointer; }
.form-field .feature-advice input { flex:none; width:18px; min-width:18px; height:18px; padding:0; margin:0; accent-color:var(--forest); box-shadow:none; }
.form-field .feature-advice>span { color:var(--ink-2); font-size:.85rem; }
.form-field.expectations-field { margin-top:1.75rem; }
@media(max-width:560px) {
    .preference-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .form-field .feature-tile { min-height:76px; padding:11px 12px; gap:9px; }
}
@media(prefers-reduced-motion:reduce) {
    .form-field .feature-tile,.feature-tile>i,.feature-tile .feature-check { transition:none; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.form-consent { font-size:.86rem; line-height:1.6; }
.form-consent label { display:flex; align-items:flex-start; gap:.65rem; cursor:pointer; }
.form-consent input { flex:none; width:17px; height:17px; margin-top:.2rem; accent-color:var(--forest); }
.form-consent a { color:var(--moss); text-decoration:underline; text-underline-offset:3px; }
.form-consent [aria-invalid=true] { outline:2px solid #b63e25; outline-offset:2px; }
.form-verification { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; margin-block:1.2rem; min-width:0; }
#turnstileWidget { width:320px; max-width:100%; min-width:0; }
.verification-note { display:flex; align-items:center; gap:.55rem; font-size:.79rem; color:var(--moss); }
.verification-note svg { flex:none; }
.form-submit { width:100%; }
.form-submit:disabled { opacity:.55; cursor:wait; transform:none; box-shadow:none; }
.form-submit:disabled::after { display:none; }
.form-note { margin-top:.8rem; font-size:.78rem; line-height:1.6; color:var(--ink-2); }
.form-status { margin-bottom:1.5rem; padding:.85rem 1rem; background:#fff3ed; border:1px solid #f2c7b8; border-left:3px solid #b63e25; border-radius:10px; color:#93341e; font-size:.88rem; }
.form-trap { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; pointer-events:none; }
.form-success { padding-block:1.5rem; }
.form-success:focus { outline:none; }
.success-mark { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; margin-bottom:1.6rem; color:var(--forest); background:linear-gradient(135deg,#2fd6b233,#fe770017); }
.form-success h2 { margin-bottom:1.2rem; font-size:clamp(1.8rem,3vw,2.5rem); }
.form-success>p { color:var(--ink-2); font-size:.95rem; }
.form-success .form-reference { margin-top:1.2rem; font-size:.82rem; overflow-wrap:anywhere; }
.form-reference strong { display:block; margin-top:.2rem; color:var(--forest); font-weight:500; }
.error-page .wrap { text-align:center; }
.error-page .lbl,.error-page .btn-row { justify-content:center; }
.error-page .lead { margin-inline:auto; }
@media(max-width:1000px) {
    .inquiry-layout { grid-template-columns:1fr; gap:2rem; max-width:800px; }
    .inquiry-intro { position:static; }
    .back-link { margin-bottom:1.8rem; }
    .inquiry-steps { grid-template-columns:repeat(3,1fr); gap:1rem; }
    .inquiry-steps li { flex-direction:column; gap:.6rem; }
    .inquiry-contact { margin-top:1.3rem; }
}
@media(max-width:560px) {
    .form-grid { grid-template-columns:1fr; }
    .inquiry-intro h1 { font-size:2rem; }
    .inquiry-steps { grid-template-columns:1fr; gap:1rem; }
    .inquiry-steps li { flex-direction:row; gap:.8rem; }
    .inquiry-card { border-radius:16px; }
    .form-field input,.form-field select,.form-field textarea { font-size:1rem; }
    .inquiry-card legend { font-size:.97rem; }
}


/* === responsive.css === */
/* Breakpoints match the supplied desktop, laptop and phone compositions. */
@media(min-width:1400px) {
    :root {
        --maxw:1300px
    }
}
@media(min-width:1600px) {
    :root {
        --maxw:1450px
    }
}
@media(min-width:1900px) {
    :root {
        --maxw:1640px
    }
}
@media(min-width:2300px) {
    :root {
        --maxw:1880px
    }
}
@media(min-width:2800px) {
    :root {
        --maxw:2100px
    }
}
@media(max-width:1100px) {
    .nav-in {
        grid-template-columns:1fr auto
    }
    .nav-links,.nav-cta {
        display:none
    }
    .nav-actions {
        gap:.6rem
    }
    .burger {
        display:flex
    }
}
@media(max-width:1000px) {
    .give {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:960px) {
    .spec {
        grid-template-columns:1fr
    }
    .spec-col+.spec-col {
        border-left:0;
        border-top:1px solid var(--line)
    }
    .step {
        grid-template-columns:56px 1fr;
        gap:.9rem 1.1rem
    }
    .step-n {
        font-size:1.7rem
    }
    .step-d {
        grid-column:2;
        padding-top:.2rem
    }
    .price {
        grid-template-columns:1fr
    }
}
@media(max-width:900px) {
    .foot-grid {
        grid-template-columns:1fr;
        gap:1.8rem
    }
    .topbar .tb-sub,.topbar .tb-sep {
        display:none
    }
}
@media(max-width:860px) {
    .showcase {
        grid-template-columns:1fr;
        gap:1.6rem
    }
    .promo {
        order:-1
    }
    .promo-br {
        width:20px;
        height:20px
    }
    .promo:hover .promo-br {
        width:24px;
        height:24px
    }
}
@media(max-height:1040px) and (min-height:941px) and (min-width:761px) {
    .stage-title h1 {
        font-size:clamp(1.75rem,2.9vw,2.3rem)
    }
    .stage-title .sub {
        font-size:.98rem
    }
    .bw-body {
        padding:1.7rem 2rem
    }
    .bw-h {
        font-size:1.95rem;
        margin-bottom:1.4rem
    }
    .bw-l {
        height:10px;
        margin-bottom:.75rem
    }
    .bw-cta {
        margin-top:1.7rem
    }
}
@media(max-height:940px) and (min-height:801px) and (min-width:761px) {
    .stage-title h1 {
        font-size:clamp(1.65rem,2.9vw,2.05rem);
        margin-bottom:.7rem
    }
    .stage-title .sub {
        font-size:.93rem
    }
    .stage-title .eta {
        font-size:.86rem;
        margin-top:.45rem
    }
    .stage-title .btn-row {
        margin-top:1.1rem
    }
    .stage-title .btn-lg {
        padding:.85rem 1.5rem;
        font-size:.94rem
    }
    .bw-body {
        padding:1.25rem 1.5rem
    }
    .bw-h {
        font-size:1.5rem;
        margin-bottom:1rem
    }
    .bw-l {
        height:9px;
        margin-bottom:.55rem
    }
    .bw-cta {
        margin-top:1.1rem
    }
}
@media(max-height:800px) and (min-width:761px) {
    .stage-title h1 {
        font-size:1.55rem;
        margin-bottom:.55rem
    }
    .stage-title .sub {
        font-size:.88rem
    }
    .stage-title .eta {
        display:inline-block
    }
    .stage-title .btn-row {
        margin-top:.9rem;
        gap:.5rem
    }
    .stage-title .btn-lg {
        padding:.72rem 1.25rem;
        font-size:.9rem
    }
    .bw-bar {
        padding:.6rem .8rem!important
    }
    .bw-body {
        padding:.95rem 1.15rem
    }
    .bw-h {
        font-size:1.18rem;
        margin-bottom:.8rem
    }
    .bw-l {
        height:8px;
        margin-bottom:.45rem
    }
    .bw-cta {
        margin-top:.9rem
    }
    .bw-cta span {
        font-size:.8rem;
        padding:.45rem .9rem
    }
}
@media(max-width:760px) {
    :root {
        --peek:74px
    }
    .orbit,.browser,.hide-mob {
        display:none
    }
    h1 {
        font-size:clamp(1.6rem,7vw,2.1rem)
    }
    h2 {
        font-size:clamp(1.45rem,5.6vw,1.9rem)
    }
    h3 {
        font-size:1.05rem
    }
    .lead {
        font-size:.97rem
    }
    .sec {
        padding-block:clamp(2.6rem,9vw,3.6rem)
    }
    .stage-title {
        top:50%;
        bottom:auto;
        transform:translate(-50%,-50%)
    }
    .stage-title h1 {
        font-size:clamp(1.55rem,6.2vw,2rem);
        margin-bottom:.75rem
    }
    .stage-title .sub {
        font-size:.93rem
    }
    .stage-title .eta {
        font-size:.86rem
    }
    .stage-title .btn-row {
        margin-top:1.1rem
    }
    .cover {
        margin-top:-58vh
    }
    .give-i {
        padding:1.25rem
    }
    .give-i:hover {
        transform:none
    }
    .give-i::before {
        display:none
    }
    .price-card {
        padding:1.4rem
    }
    .price:hover .price-card {
        filter:none;
        opacity:1
    }
    .promo-frame {
        border-radius:16px
    }
    .promo-snd {
        right:10px;
        bottom:10px;
        padding:.42rem .7rem;
        font-size:.72rem
    }
    .promo-ico {
        width:52px;
        height:52px
    }
    .close-a {
        max-width:none
    }
    .step {
        grid-template-columns:44px 1fr
    }
    .step-n {
        font-size:1.5rem
    }
    .scrollbar-top {
        height:2px
    }
}
@media(max-width:760px) and (max-height:790px) {
    .stage-title h1 {
        font-size:1.42rem;
        margin-bottom:.6rem
    }
    .stage-title .sub {
        font-size:.87rem
    }
    .stage-title .eta {
        font-size:.82rem;
        margin-top:.4rem
    }
    .stage-title .btn-row {
        margin-top:.9rem;
        gap:.55rem
    }
    .stage-title .btn-lg {
        padding:.78rem 1.3rem;
        font-size:.92rem
    }
}
@media(max-width:760px) and (max-height:700px) {
    .stage-title h1 {
        font-size:1.3rem
    }
    .stage-title .eta {
        display:none
    }
    .stage-title .sub {
        font-size:.84rem
    }
}
@media(max-width:680px) {
    .give {
        grid-template-columns:1fr
    }
}
@media(max-width:560px) {
    body {
        font-size:16px
    }
    .btn {
        width:100%
    }
    .logo-img {
        height:26px
    }
    .ck-bar {
        left:.7rem;
        right:.7rem;
        bottom:.7rem;
        max-width:none
    }
    .stage-title .btn-row {
        flex-direction:column;
        gap:.6rem
    }
}
@media(max-width:420px) {
    .btn {
        padding:.85rem 1.15rem;
        font-size:.93rem
    }
    .promo-br {
        width:16px;
        height:16px;
        border-width:1.5px
    }
}
@media(prefers-reduced-motion:reduce) {
    .logo .logo-img { transform:none!important; filter:none!important; }
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }
    .js .rv,.js .rv-left,.js .rv-right {
        opacity:1;
        translate:none
    }
    .js .promo:not(.in) .promo-frame {
        clip-path:none
    }
}


/* === cooperation.css === */
.doc-hero{padding:clamp(2.6rem,5.5vw,4.4rem) 0 clamp(2rem,4vw,3rem)}
.doc-hero h1{max-width:16ch;margin-bottom:1.3rem}
.summary-card{padding:clamp(1.5rem,3vw,2.2rem);margin-top:2.4rem}
.summary-card p{font-size:1rem;color:var(--ink-2);position:relative}
.summary-card strong{color:var(--forest)}

.doc{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;padding-bottom:clamp(3rem,6vw,5rem)}
.toc{position:sticky;top:96px}
.toc h2{letter-spacing:normal;line-height:1.4;font-family:'Geist',sans-serif;font-size:.85rem;font-weight:600;color:var(--ink-3);margin-bottom:.9rem}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;border-left:1px solid var(--line)}
.toc a{display:block;padding:.5rem 0 .5rem 1rem;font-size:.92rem;color:var(--ink-2);margin-left:-1px;border-left:1px solid transparent;transition:.16s}
.toc a::before{content:counter(t) ". ";color:var(--ink-3)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--forest);border-left-color:var(--forest);font-weight:500}

.art > section{padding-bottom:clamp(2.4rem,4.5vw,3.4rem);margin-bottom:clamp(2.4rem,4.5vw,3.4rem);border-bottom:1px solid var(--line)}
.art > section:last-child{border-bottom:0}
.art-hd{display:flex;gap:1.1rem;align-items:baseline;margin-bottom:1.3rem}
.art-n{font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:rgba(19,66,54,.22);line-height:1;flex:none;min-width:32px}
.art h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.art p{color:var(--ink-2);margin-bottom:1rem}
.art p:last-child{margin-bottom:0}
.art strong{color:var(--ink)}
.art h3{margin:1.8rem 0 .8rem}
.art .ticklist{margin:1rem 0 1.3rem}
.art ol.plain{list-style:none;counter-reset:s;display:grid;gap:.9rem;margin:1.2rem 0}
.art ol.plain li{counter-increment:s;display:flex;gap:.9rem;color:var(--ink-2)}
.art ol.plain li::before{
  content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--forest);color:#fff;font-size:.78rem;font-weight:500;
  display:grid;place-items:center;margin-top:2px;
}
.box{border:1px solid var(--line);border-radius:var(--rad);padding:1.3rem 1.5rem;background:var(--white);margin:1.3rem 0}
.box h4{margin-bottom:.5rem}
.box p{font-size:.95rem;margin-bottom:.6rem}
.box p:last-child{margin-bottom:0}
.box-mint{border-color:var(--line);border-left:2px solid var(--forest);background:rgba(19,66,54,.045)}
.box-warn{border-left:2px solid var(--forest);border-radius:0 var(--rad) var(--rad) 0}
.art a.link{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.pill-price{
  display:inline-block;background:var(--forest);color:#fff;
  padding:.08rem .55rem;border-radius:7px;font-size:.92em;font-weight:500;
}
.variant{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.variant > div{border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem 1.5rem;background:var(--white)}
.variant h4{margin-bottom:.6rem;color:var(--forest)}
.variant p{font-size:.94rem}
table.spec-t{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.95rem}
table.spec-t th,table.spec-t td{padding:.85rem 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
table.spec-t th{width:42%;color:var(--ink);font-weight:500;padding-right:1.2rem}
table.spec-t tr:last-child th,table.spec-t tr:last-child td{border-bottom:0}

.cooperation-page .cooperation-cta{padding-top:clamp(2.5rem,5vw,4rem)}
.cooperation-page .cooperation-cta > .wrap{max-width:1640px}
.cooperation-page .dark-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--forest);color:#fff;border-radius:var(--rad-l);
}
.cooperation-page .dark-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 90% at 100% 0%,rgba(47,214,178,.18),transparent 62%),radial-gradient(45% 80% at 0% 100%,rgba(254,119,0,.15),transparent 70%);
}
.cooperation-page .dark-band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);opacity:.09;
}
.cooperation-page .final h2{color:#fff}
.cooperation-page .final .btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cooperation-page .final .btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.final{padding:clamp(2.4rem,5vw,3.8rem);text-align:center}
.final h2{margin-bottom:.8rem}
.final p{color:rgba(255,255,255,.72);max-width:46ch;margin:0 auto 1.9rem;position:relative}
.final .btn-row{justify-content:center;margin-top:0;position:relative}

@media(max-width:900px){
  .doc{grid-template-columns:1fr;gap:1.8rem}
  .toc{position:static;border:1px solid var(--line);border-radius:var(--rad);padding:1.2rem 1.4rem;background:var(--white)}
  .toc ol{columns:2;column-gap:1.4rem}
  .toc li{break-inside:avoid}
  .variant{grid-template-columns:1fr}
}
@media(max-width:560px){
  .toc ol{columns:1}
  table.spec-t th,table.spec-t td{display:block;width:100%!important;padding:.35rem 0}
  table.spec-t th{border:0;padding-top:.85rem}
  table.spec-t td:last-child{padding-bottom:.85rem}
}

.cooperation-page .doc{position:relative;z-index:1;min-width:0}.cooperation-page .art{min-width:0}.cooperation-page .art section{scroll-margin-top:110px}.cooperation-page .toc ol{padding:0;margin:0}.cooperation-page .cooperation-list{padding-left:1.3rem;margin:1rem 0 1.3rem;color:var(--ink-2)}.cooperation-page .cooperation-list li+li{margin-top:.65rem}.cooperation-page .variant h3{margin:0 0 .6rem;color:var(--forest);font-size:1rem}.cooperation-page .spec-t th{text-align:left;font-weight:500}.cooperation-page .spec-t caption{text-align:left;color:var(--ink);font-weight:600;margin-bottom:.6rem}.cooperation-page .art a{overflow-wrap:anywhere}.cooperation-page .final em{color:var(--mint)}