:root {
--bg: #F8F1EA;
--bg2: #EEE1D5;
--card: #FFFFFF;
--ink: #302329;
--muted: #796C70;
--line: #E3D5CC;
--green: #A65345;
--green-d: #893F35;
--on-green: #FFFFFF;
--mint: #F3E4DD;
--honey: #D58A3A;
--honey-t: #F8EAD8;
--rose: #B85D70;
--rose-t: #F5E1E5;
--blue-t: #E9DFE7;
--ink-t: #E9DFDA;
--sh: 0 10px 30px rgba(48, 35, 41, .09);
--sh-lg: 0 22px 55px rgba(48, 35, 41, .14);
--sh-sm: 0 4px 14px rgba(48, 35, 41, .07);
--r: 22px;
--rs: 14px;
--sky1: #F2D5C5;
--sky2: #E4C9D0;
--win: #F0BE67;
--win-op: .25;
--glass: rgba(255, 255, 255, .08);
}
html[data-mode="dark"] {
--bg: #171113;
--bg2: #100C0E;
--card: #241A1D;
--ink: #F5EDEC;
--muted: #B5A3A6;
--line: #392A2E;
--green: #C87562;
--green-d: #AD5D4D;
--on-green: #FFFFFF;
--mint: #342326;
--honey: #E2A85B;
--honey-t: #392A1D;
--rose: #D77B8C;
--rose-t: #3B252B;
--blue-t: #30262D;
--ink-t: #302326;
--sh: 0 12px 32px rgba(0, 0, 0, .52);
--sh-lg: 0 26px 60px rgba(0, 0, 0, .66);
--sh-sm: 0 5px 16px rgba(0, 0, 0, .42);
--sky1: #3A2828;
--sky2: #30232B;
--win: #F1C16D;
--win-op: 1;
--glass: rgba(255, 255, 255, .09);
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: 'Nunito', system-ui, sans-serif;
font-size: 16.5px;
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background .4s ease, color .4s ease
}
body.lock {
overflow: hidden
}
a {
color: inherit;
text-decoration: none
}
button {
font: inherit;
cursor: pointer;
color: inherit
}
:focus-visible {
outline: 3px solid var(--honey);
outline-offset: 2px;
border-radius: 8px
}
::selection {
background: var(--green);
color: var(--on-green)
}
section {
scroll-margin-top: 88px
}
.container-x {
width: min(1120px, 100% - 36px);
margin-inline: auto
}
.has-alt {
background: var(--bg2)
}
.soft-edge {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line)
}
/* ════ TYPE ════ */
h1,
h2,
h3,
h4 {
font-weight: 900;
letter-spacing: -.025em;
line-height: 1.16;
margin: 0
}
h1 {
font-size: clamp(2.5rem, 5.6vw, 4.1rem)
}
h2 {
font-size: clamp(1.9rem, 3.8vw, 2.7rem)
}
h3 {
font-size: 1.28rem;
line-height: 1.3
}
h4 {
font-size: 1.05rem
}
.lead {
color: var(--muted);
font-size: clamp(1rem, 1.3vw, 1.12rem);
font-weight: 600
}
.mut {
color: var(--muted)
}
.xs {
font-size: .82rem;
color: var(--muted)
}
.hl {
color: var(--green)
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--card);
border-radius: 999px;
padding: .4rem .95rem;
font-weight: 800;
font-size: .8rem;
box-shadow: var(--sh-sm);
color: var(--green)
}
.sec-head {
max-width: 640px;
margin: 0 auto 2.6rem;
text-align: center
}
.sec-head h2 {
margin: .9rem 0 .6rem
}
.sec-head p {
margin: 0
}
/* ════ UI BITS ════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border: 0;
border-radius: 999px;
padding: .9rem 1.7rem;
font-weight: 800;
font-size: .95rem;
transition: .22s ease
}
.btn:active {
transform: scale(.97)
}
.btn-green {
background: var(--green);
color: var(--on-green);
box-shadow: 0 10px 22px -8px rgba(46, 125, 91, .55)
}
.btn-green:hover {
background: var(--green-d);
transform: translateY(-2px)
}
.btn-honey {
background: var(--honey);
color: #3A2B07;
box-shadow: 0 10px 22px -8px rgba(235, 169, 55, .55)
}
.btn-honey:hover {
transform: translateY(-2px);
filter: brightness(1.03)
}
.btn-soft {
background: var(--card);
color: var(--ink);
box-shadow: var(--sh-sm)
}
.btn-soft:hover {
transform: translateY(-2px)
}
.btn-sm {
padding: .55rem 1.1rem;
font-size: .85rem
}
.card {
background: var(--card);
border-radius: var(--r);
box-shadow: var(--sh);
transition: transform .25s ease, box-shadow .25s ease
}
.card-lift:hover {
transform: translateY(-5px);
box-shadow: var(--sh-lg)
}
.chip {
display: inline-flex;
align-items: center;
gap: .4rem;
background: var(--card);
border-radius: 999px;
padding: .45rem .9rem;
font-weight: 800;
font-size: .82rem;
box-shadow: var(--sh-sm)
}
.tag {
display: inline-flex;
align-items: center;
gap: .35rem;
background: var(--mint);
border-radius: 8px;
padding: .3rem .65rem;
font-size: .76rem;
font-weight: 800;
color: var(--ink)
}
.field {
display: block;
margin-bottom: .9rem
}
.field>span {
display: block;
font-size: .78rem;
font-weight: 800;
color: var(--muted);
margin-bottom: .35rem;
letter-spacing: .01em
}
.req {
color: var(--rose)
}
.inp {
width: 100%;
background: var(--bg);
border: 1.5px solid transparent;
border-radius: var(--rs);
padding: .78rem 1rem;
font: inherit;
font-weight: 700;
font-size: .92rem;
color: var(--ink);
transition: .2s
}
.inp::placeholder {
color: var(--muted);
opacity: .65;
font-weight: 600
}
.inp:focus {
outline: none;
background: var(--card);
border-color: var(--green);
box-shadow: 0 0 0 4px var(--mint)
}
select.inp {
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A766C' stroke-width='2.6'><path d='M6 9l6 6 6-6'/></svg>");
background-repeat: no-repeat;
background-position: right .9rem center;
background-size: 15px;
padding-right: 2.4rem
}
textarea.inp {
min-height: 120px;
resize: vertical
}
.cbx {
display: flex;
gap: .7rem;
align-items: flex-start;
margin: .5rem 0 1rem
}
.cbx input {
width: 19px;
height: 19px;
aspect-ratio: 1;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--green);
cursor: pointer
}
.cbx label {
font-size: .82rem;
color: var(--muted);
font-weight: 600;
line-height: 1.5;
cursor: pointer
}
.note {
font-size: .86rem;
font-weight: 800;
margin-top: .7rem;
display: none
}
.note.show {
display: block
}
/* ════ MOTION ════ */
.rv {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .3, 1)
}
.rv.vis {
opacity: 1;
transform: none
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: translateY(26px) scale(.96)
}
100% {
opacity: 1;
transform: none
}
}
@media (prefers-reduced-motion:reduce) {
.rv {
opacity: 1 !important;
transform: none !important
}
* {
animation: none !important
}
html {
scroll-behavior: auto
}
}
/* ════ TOP NOTE + NAV ════ */
.top-note {
background: var(--green);
color: #fff;
text-align: center;
font-size: .8rem;
font-weight: 800;
padding: .5rem 1rem;
letter-spacing: .02em
}
nav {
position: sticky;
top: 0;
z-index: 800;
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line)
}
.nav-in {
display: flex;
align-items: center;
gap: .85rem;
height: 72px
}
.logo {
display: flex;
align-items: center;
gap: .6rem;
flex-shrink: 0
}
.logo-mk {
width: 40px;
height: 40px;
border-radius: 14px;
background: var(--green);
display: grid;
place-items: center;
font-size: 1.2rem;
box-shadow: var(--sh-sm)
}
.logo b {
font-weight: 900;
font-size: 1.2rem;
letter-spacing: -.02em;
line-height: 1;
display: block
}
.logo small {
display: block;
font-size: .66rem;
font-weight: 800;
color: var(--muted);
letter-spacing: .06em
}
.nav-links {
display: flex;
gap: .1rem;
margin: 0 auto;
padding: 0;
list-style: none
}
.nav-links a {
padding: .5rem .8rem;
border-radius: 999px;
font-weight: 800;
font-size: .87rem;
color: var(--muted);
transition: .2s;
white-space: nowrap
}
.nav-links a:hover {
color: var(--ink);
background: var(--mint)
}
.nav-links a.on {
color: var(--green);
background: var(--mint)
}
.round-btn {
width: 44px;
height: 44px;
border-radius: 14px;
border: 0;
background: var(--card);
box-shadow: var(--sh-sm);
display: grid;
place-items: center;
font-size: 1.05rem;
transition: .2s;
flex-shrink: 0
}
.round-btn:hover {
transform: translateY(-2px) rotate(-8deg)
}
.m-menu {
display: none;
border-top: 1px solid var(--line);
background: var(--bg);
padding: .8rem 0 1.4rem
}
.m-menu.open {
display: block
}
.m-menu a {
display: flex;
justify-content: space-between;
padding: .85rem .2rem;
border-bottom: 1px dashed var(--line);
font-weight: 800
}
.m-menu a:last-of-type {
border: 0
}
.m-menu a.btn {
justify-content: center;
border-bottom: 0
}
/* ════ HERO ════ */
.hero {
position: relative;
overflow: hidden;
padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
background: radial-gradient(700px 420px at 12% -8%, var(--honey-t), transparent 60%),
radial-gradient(760px 480px at 95% 10%, var(--mint), transparent 62%),
radial-gradient(600px 400px at 55% 115%, var(--rose-t), transparent 66%), var(--bg)
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(1.8rem, 4vw, 3.4rem);
align-items: center
}
.hero h1 {
margin: 1rem 0
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-top: 1.4rem
}
.book {
background: var(--card);
border-radius: var(--r);
box-shadow: var(--sh-lg);
padding: clamp(1.2rem, 2.6vw, 1.6rem);
margin-top: 1.8rem
}
.book-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem
}
.book-head b {
font-size: 1.1rem;
font-weight: 900
}
.open-pill {
display: inline-flex;
align-items: center;
gap: .45rem;
background: var(--mint);
border-radius: 999px;
padding: .3rem .8rem;
font-size: .75rem;
font-weight: 800;
color: var(--ink)
}
.open-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
animation: pulse-dot 2s infinite
}
@keyframes pulse-dot {
50% {
box-shadow: 0 0 0 6px rgba(46, 125, 91, .18)
}
}
.book-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr auto;
gap: .7rem;
align-items: end
}
.book .field {
margin: 0
}
.book-res {
display: none;
margin-top: .8rem;
background: var(--mint);
border-radius: 12px;
padding: .7rem .95rem;
font-weight: 800;
font-size: .86rem
}
.book-res.show {
display: block;
animation: bounce-in .4s ease
}
.book-res.err {
background: var(--rose-t);
color: #A33222
}
.book-foot {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: .9rem;
align-items: center
}
.book-foot .lbl {
font-size: .76rem;
font-weight: 800;
color: var(--muted);
margin-right: .2rem
}
.p-chip {
border: 1.5px solid var(--line);
background: transparent;
border-radius: 999px;
padding: .32rem .8rem;
font-size: .78rem;
font-weight: 800;
transition: .18s;
color: var(--ink)
}
.p-chip:hover {
border-color: var(--green);
background: var(--mint)
}
.p-chip.on {
background: var(--green);
border-color: var(--green);
color: #fff
}
.hero-steps {
display: grid;
grid-template-columns: auto 1fr;
gap: .7rem;
align-items: center;
margin-top: 1.4rem;
background: var(--glass);
border-radius: 999px;
padding: .4rem 1rem .4rem .4rem;
width: fit-content;
box-shadow: var(--sh-sm)
}
.step-dot {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--card);
display: grid;
place-items: center;
font-weight: 900;
font-size: .8rem;
color: var(--green);
box-shadow: var(--sh-sm)
}
/* scene card */
.scene {
width: 100%;
border-radius: 28px;
box-shadow: var(--sh-lg);
position: relative
}
.scene .sky {
position: absolute;
inset: 0;
border-radius: 28px;
background: linear-gradient(180deg, var(--sky1), var(--sky2));
transition: background .6s ease
}
.scene svg {
position: relative;
display: block;
width: 100%;
height: auto;
border-radius: 28px
}
.float-tag {
position: absolute;
background: var(--card);
border-radius: 999px;
padding: .5rem .95rem;
font-weight: 800;
font-size: .78rem;
box-shadow: var(--sh);
display: flex;
align-items: center;
gap: .4rem;
animation: floaty 7s ease-in-out infinite;
z-index: 2
}
.ft-1 {
top: 16px;
left: -14px
}
.ft-2 {
bottom: 22px;
right: -12px;
animation-delay: -3s
}
@keyframes floaty {
50% {
transform: translateY(-10px)
}
}
.sun-rays {
transform-origin: center;
transform-box: fill-box;
animation: spin 24s linear infinite
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.cloud {
animation: drift 10s ease-in-out infinite
}
.cloud.b {
animation: drift 14s ease-in-out infinite reverse
}
@keyframes drift {
50% {
transform: translateX(16px)
}
}
.smoke {
animation: puff 3.6s ease-in-out infinite;
opacity: 0
}
.smoke.p2 {
animation-delay: -1.2s
}
.smoke.p3 {
animation-delay: -2.4s
}
@keyframes puff {
0% {
transform: translateY(0) scale(.6);
opacity: 0
}
30% {
opacity: .8
}
100% {
transform: translateY(-28px) scale(1.2);
opacity: 0
}
}
.win-glow {
animation: warm 4s ease-in-out infinite
}
@keyframes warm {
50% {
opacity: .65
}
}
.star {
animation: twinkle 2.6s ease-in-out infinite
}
@keyframes twinkle {
50% {
opacity: .2
}
}
.sun-emoji,
.moon-emoji {
position: absolute;
top: 26px;
right: 32px;
font-size: 2.6rem;
z-index: 2;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .12));
transition: opacity .5s, transform .5s
}
.moon-emoji {
opacity: 0;
transform: scale(.6) rotate(-30deg)
}
html[data-mode="dark"] .sun-emoji {
opacity: 0;
transform: scale(.6) rotate(30deg)
}
html[data-mode="dark"] .moon-emoji {
opacity: 1;
transform: none
}
/* ════ TRUST STRIP ════ */
html[data-mode="dark"] .stars-g {
opacity: 1
}
.trust-strip {
border-top: 1px solid var(--line)
}
.trust-strip .inner {
display: flex;
flex-wrap: wrap;
gap: .7rem;
justify-content: center;
padding-block: 1.2rem
}
/* ════ ABOUT ════ */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.6rem, 4vw, 3rem);
align-items: center
}
.about-list {
display: grid;
gap: .9rem;
margin-top: 1.3rem
}
.a-item {
display: flex;
gap: .9rem;
background: var(--card);
border-radius: var(--rs);
padding: 1rem 1.1rem;
box-shadow: var(--sh-sm)
}
.a-item .e {
width: 42px;
height: 42px;
aspect-ratio: 1;
border-radius: 13px;
display: grid;
place-items: center;
font-size: 1.25rem;
flex-shrink: 0
}
.e-mint {
background: var(--mint)
}
.e-honey {
background: var(--honey-t)
}
.e-rose {
background: var(--rose-t)
}
.e-blue {
background: var(--blue-t)
}
.e-ink {
background: var(--ink-t)
}
.a-item p {
margin: 0;
font-size: .9rem;
color: var(--muted);
font-weight: 600
}
.a-item b {
font-weight: 800
}
/* ════ SERVICES ════ */
.tabs {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
margin-bottom: 2rem
}
.tab {
border: 1.5px solid var(--line);
background: var(--card);
border-radius: 999px;
padding: .6rem 1.3rem;
font-weight: 800;
font-size: .9rem;
transition: .2s
}
.tab:hover {
border-color: var(--green)
}
.tab.on {
background: var(--green);
border-color: var(--green);
color: #fff;
box-shadow: var(--sh-sm)
}
.svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem
}
.svc {
background: var(--card);
border-radius: var(--r);
padding: 1.4rem;
box-shadow: var(--sh-sm);
display: flex;
flex-direction: column;
border: 2px solid transparent;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
position: relative
}
.svc:hover {
transform: translateY(-6px);
box-shadow: var(--sh-lg)
}
.svc.pick {
border-color: var(--green)
}
.svc .e-wrap {
width: 56px;
height: 56px;
border-radius: 17px;
display: grid;
place-items: center;
font-size: 1.7rem;
margin-bottom: 1rem;
background: var(--mint)
}
.svc:nth-child(3n+2) .e-wrap {
background: var(--honey-t)
}
.svc:nth-child(3n) .e-wrap {
background: var(--rose-t)
}
.svc p {
font-size: .88rem;
color: var(--muted);
font-weight: 600;
margin: .5rem 0 1rem
}
.svc .no {
position: absolute;
top: 1.2rem;
right: 1.3rem;
font-size: .78rem;
font-weight: 900;
color: var(--muted);
opacity: .55
}
.svc-foot {
display: flex;
gap: .5rem;
margin-top: auto
}
.svc-hide {
display: none
}
.svc-empty {
display: none;
text-align: center;
padding: 2rem;
font-weight: 800;
color: var(--muted)
}
/* ════ WHY ════ */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem
}
.why {
background: var(--card);
border-radius: var(--r);
padding: 1.5rem;
box-shadow: var(--sh-sm);
transition: .25s;
position: relative;
overflow: hidden
}
.why:hover {
transform: translateY(-5px);
box-shadow: var(--sh-lg)
}
.why .e {
width: 52px;
height: 52px;
border-radius: 15px;
display: grid;
place-items: center;
font-size: 1.45rem;
margin-bottom: 1rem
}
.why p {
margin: .5rem 0 0;
font-size: .9rem;
color: var(--muted);
font-weight: 600
}
/* ════ PILLARS ════ */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.6rem, 4vw, 3.2rem);
align-items: center
}
.plan {
border: 2px solid transparent;
background: var(--card);
border-radius: var(--r);
padding: 1.2rem 1.3rem;
display: flex;
gap: 1rem;
align-items: center;
width: 100%;
text-align: left;
transition: .2s;
box-shadow: var(--sh-sm)
}
.plan:hover {
transform: translateX(5px)
}
.plan.pick {
border-color: var(--green);
box-shadow: var(--sh)
}
.plan .e {
width: 46px;
height: 46px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 1.3rem;
flex-shrink: 0
}
.plan .pr {
margin-left: auto;
text-align: right;
font-weight: 900;
font-size: 1.25rem;
white-space: nowrap
}
.plan .pr small {
display: block;
font-size: .68rem;
font-weight: 800;
color: var(--muted)
}
.bill-sw {
display: inline-flex;
background: var(--card);
border-radius: 999px;
padding: .3rem;
box-shadow: var(--sh-sm)
}
.bill-sw button {
border: 0;
background: transparent;
border-radius: 999px;
padding: .45rem 1.1rem;
font-weight: 800;
font-size: .83rem;
color: var(--muted);
transition: .2s
}
.bill-sw button.on {
background: var(--green);
color: #fff
}
.cov {
display: flex;
flex-wrap: wrap;
gap: .5rem
}
.cov-f {
border: 1.5px solid var(--line);
background: var(--card);
border-radius: 999px;
padding: .45rem .95rem;
font-weight: 800;
font-size: .82rem;
cursor: pointer;
transition: .18s;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: .4rem
}
.cov-f input {
position: absolute;
opacity: 0;
width: 0;
height: 0
}
.cov-f.on {
background: var(--honey-t);
border-color: var(--honey)
}
.tip {
background: var(--honey-t);
border-radius: var(--rs);
padding: 1rem 1.2rem;
font-size: .88rem;
font-weight: 700;
margin-top: 1rem
}
.re-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .9rem
}
.re-card {
background: var(--card);
border-radius: var(--r);
padding: 1.3rem;
box-shadow: var(--sh-sm);
text-align: center;
transition: .25s
}
.re-card:hover {
transform: translateY(-5px);
box-shadow: var(--sh-lg)
}
.re-card .e {
font-size: 2rem
}
.re-card p {
font-size: .83rem;
color: var(--muted);
font-weight: 600;
margin: .4rem 0 0
}
.calc {
background: var(--card);
border-radius: var(--r);
padding: clamp(1.3rem, 3vw, 1.8rem);
box-shadow: var(--sh-lg)
}
.range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 9px;
border-radius: 99px;
background: var(--ink-t);
margin: .7rem 0 1.2rem
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--green);
border: 4px solid var(--card);
box-shadow: var(--sh-sm);
cursor: grab
}
.range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--green);
border: 4px solid var(--card);
cursor: grab
}
.calc-out {
background: var(--green);
color: var(--on-green);
border-radius: 18px;
text-align: center;
padding: 1.1rem;
margin-top: .4rem
}
.calc-out .big {
font-weight: 900;
font-size: clamp(1.9rem, 4vw, 2.6rem);
letter-spacing: -.02em;
line-height: 1.1
}
.calc-mini {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .7rem;
margin-top: .8rem
}
.calc-mini .c {
background: var(--bg);
border-radius: 12px;
text-align: center;
padding: .7rem
}
.calc-mini b {
font-weight: 900
}
/* ════ TESTIMONIALS ════ */
.t-box {
max-width: 720px;
margin: 0 auto;
text-align: center
}
.t-card {
background: var(--card);
border-radius: 26px;
box-shadow: var(--sh-lg);
padding: clamp(1.6rem, 4vw, 2.6rem);
min-height: 330px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative
}
.t-card.swap {
animation: bounce-in .45s ease
}
.stars {
color: var(--honey);
letter-spacing: .25em;
font-size: 1rem
}
.t-quote {
font-size: clamp(1.05rem, 2vw, 1.28rem);
font-weight: 700;
line-height: 1.65;
margin: 1.1rem 0 1.4rem
}
.t-who {
display: flex;
align-items: center;
justify-content: center;
gap: .8rem
}
.t-av {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--mint);
display: grid;
place-items: center;
font-size: 1.4rem;
flex-shrink: 0
}
.t-who b {
font-weight: 900;
display: block;
line-height: 1.25
}
.t-who small {
color: var(--muted);
font-weight: 700
}
.t-nav {
display: flex;
justify-content: center;
align-items: center;
gap: .9rem;
margin-top: 1.4rem
}
.t-dots {
display: flex;
gap: .45rem
}
.t-dot {
width: 10px;
height: 10px;
border-radius: 99px;
border: 0;
background: var(--line);
padding: 0;
transition: .25s
}
.t-dot.on {
width: 30px;
background: var(--green)
}
/* ════ FAQ ════ */
.faq-wrap {
max-width: 760px;
margin: 0 auto
}
.qa {
background: transparent !important;
border-radius: 0;
box-shadow: none !important;
margin-bottom: 0;
border-bottom: 1px solid var(--line);
overflow: hidden;
transition: .25s
}
.qa:last-child {
border-bottom: none;
}
.qa button {
width: 100%;
display: flex;
align-items: center;
text-align: left;
background: none;
border: 0 !important;
box-shadow: none !important;
padding: 1.2rem 0;
font-weight: 800;
font-size: 1.05rem;
color: var(--ink);
transition: color .2s
}
.qa button:hover {
color: var(--green);
}
.qa button span:last-child {
flex: 1;
padding-right: 1rem;
}
.qa .qi {
order: 2;
width: auto;
height: auto;
border-radius: 0;
background: transparent !important;
display: flex;
place-items: center;
flex-shrink: 0;
transition: transform .3s ease, color .2s;
color: var(--muted);
font-size: 1.4rem;
margin-left: auto;
}
.qa button:hover .qi {
color: var(--green);
}
.qa.open .qi {
color: var(--green);
transform: rotate(45deg)
}
.qa .ans {
height: 0;
overflow: hidden;
transition: height .4s ease
}
.qa .ans p {
margin: 0;
padding: 0 0 1.4rem 0;
font-size: .95rem;
color: var(--muted);
font-weight: 600;
line-height: 1.6;
}
.qa-hide {
display: none
}
.faq-tools {
max-width: 760px;
margin: 0 auto 1.2rem;
display: flex;
gap: .7rem
}
.faq-tools .grow {
flex: 1;
position: relative
}
.faq-tools .grow i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted)
}
.faq-tools input {
padding-left: 2.6rem
}
/* ════ NEWSLETTER ════ */
.news-panel {
background: linear-gradient(135deg, var(--mint), var(--honey-t));
border-radius: 30px;
padding: clamp(1.6rem, 4vw, 3rem);
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center
}
.news-panel p {
color: var(--muted);
font-weight: 600
}
.f2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem
}
.linkish {
background: none;
border: 0;
padding: 0;
font-size: .84rem;
font-weight: 800;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 4px
}
.linkish:hover {
color: var(--ink)
}
/* ════ CONTACT ════ */
.ct-grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 1.2rem;
align-items: start
}
.ct-form {
background: var(--card);
border-radius: var(--r);
box-shadow: var(--sh-lg);
padding: clamp(1.3rem, 3vw, 1.9rem)
}
.info-stack {
display: grid;
gap: .75rem
}
.info {
display: flex;
gap: .9rem;
background: var(--card);
border-radius: 16px;
padding: .95rem 1.1rem;
box-shadow: var(--sh-sm);
transition: .2s
}
.info:hover {
transform: translateY(-3px)
}
.info .e {
width: 42px;
height: 42px;
border-radius: 13px;
display: grid;
place-items: center;
font-size: 1.25rem;
flex-shrink: 0
}
.info b {
display: block;
font-size: .72rem;
font-weight: 900;
color: var(--muted);
letter-spacing: .06em;
text-transform: uppercase
}
.map {
border-radius: 16px;
box-shadow: var(--sh-sm);
height: 190px;
position: relative;
overflow: hidden;
background: var(--mint)
}
.map svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%
}
.map-pin {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
background: var(--card);
border-radius: 999px;
padding: .5rem .9rem;
box-shadow: var(--sh);
font-weight: 800;
font-size: .78rem;
display: flex;
gap: .4rem;
align-items: center
}
/* ════ FOOTER ════ */
footer {
background: #0E1A14;
color: #DCE7DF;
border-top: 1px solid #0E1A14
}
html[data-mode="dark"] footer {
background: #0A100C
}
.f-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 2rem;
padding: 3rem 0 2.2rem
}
.f-grid h5 {
font-size: .72rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: #7FB89E;
margin-bottom: 1rem
}
.f-grid ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: .5rem;
font-size: .88rem;
color: #B8C8BE;
font-weight: 600
}
.f-grid a:hover {
color: #fff
}
.soc {
display: flex;
gap: .5rem;
margin-top: 1.1rem
}
.soc a {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1.5px solid rgba(255, 255, 255, .22);
display: grid;
place-items: center;
transition: .2s;
color: #DCE7DF
}
.soc a:hover {
background: var(--green);
border-color: var(--green);
color: #fff;
transform: translateY(-3px)
}
.f-base {
border-top: 1px solid rgba(255, 255, 255, .14);
padding-block: 1.1rem;
display: flex;
flex-wrap: wrap;
gap: .8rem;
justify-content: space-between;
font-size: .8rem;
color: #9DB3A6;
font-weight: 600
}
.f-base button {
background: none;
border: 0;
color: inherit;
padding: 0;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px
}
.f-base button:hover {
color: #fff
}
.f-base a {
color: inherit;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px
}
.f-base a:hover {
color: #fff
}
/* ════ MODALS / TOAST ════ */
.modal-content.soft {
background: var(--card);
color: var(--ink);
border: 0;
border-radius: 22px;
box-shadow: var(--sh-lg)
}
.soft .modal-header,
.soft .modal-footer {
border-color: var(--line)
}
.soft .modal-title {
font-weight: 900
}
.soft .modal-body {
max-height: 64vh;
overflow: auto
}
.soft h6 {
font-size: .72rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--green);
margin: 1.4rem 0 .35rem
}
.soft h6:first-child {
margin-top: 0
}
.soft p {
font-size: .9rem;
color: var(--muted);
font-weight: 600
}
html[data-mode="dark"] .soft .btn-close {
filter: invert(1)
}
.toast {
position: fixed;
left: 50%;
bottom: 22px;
transform: translate(-50%, 170%);
z-index: 2200;
background: var(--ink);
color: var(--bg);
border-radius: 999px;
padding: .8rem 1.4rem;
font-weight: 800;
font-size: .86rem;
box-shadow: var(--sh-lg);
transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
max-width: 92vw;
display: flex;
gap: .5rem;
align-items: center
}
.toast.show {
transform: translate(-50%, 0)
}
.top-btn {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 900;
width: 46px;
height: 46px;
border-radius: 50%;
border: 0;
background: var(--card);
box-shadow: var(--sh);
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transition: .3s;
font-size: 1.1rem
}
.top-btn.on {
opacity: 1;
pointer-events: auto
}
.top-btn:hover {
background: var(--green);
color: #fff
}
/* ════ SUBPAGE EXTRAS ════ */
.page-hero {
position: relative;
overflow: hidden;
padding: clamp(2.6rem, 6vw, 4.4rem) 0;
text-align: center;
background: radial-gradient(700px 420px at 12% -8%, var(--honey-t), transparent 60%),
radial-gradient(760px 480px at 95% 10%, var(--mint), transparent 62%),
radial-gradient(600px 400px at 55% 115%, var(--rose-t), transparent 66%), var(--bg);
border-bottom: 1px solid var(--line)
}
.page-hero h1 {
margin: 1rem auto .7rem;
max-width: 780px
}
.page-hero .lead {
max-width: 640px;
margin: 0 auto
}
.page-hero .hero-trust {
justify-content: center
}
.legal-doc {
max-width: 820px;
margin: 0 auto;
background: var(--card);
border-radius: var(--r);
box-shadow: var(--sh);
padding: clamp(1.6rem, 4vw, 3rem)
}
.legal-doc h3 {
font-size: .78rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--green);
margin: 2rem 0 .5rem
}
.legal-doc h3:first-of-type {
margin-top: 0
}
.legal-doc p {
margin: 0 0 .9rem;
font-size: .95rem;
color: var(--muted);
font-weight: 600
}
.legal-doc p:last-child {
margin-bottom: 0
}
.legal-meta {
display: flex;
flex-wrap: wrap;
gap: .55rem;
justify-content: center;
margin-bottom: 1.6rem
}
.mini-panel {
max-width: 640px;
margin: 0 auto;
background: var(--card);
border-radius: 26px;
box-shadow: var(--sh-lg);
padding: clamp(1.5rem, 4vw, 2.4rem)
}
.cta-band {
background: var(--card);
border-radius: 26px;
box-shadow: var(--sh);
padding: clamp(1.4rem, 3vw, 2.1rem);
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between
}
.cta-band h3 {
margin: 0
}
.cta-band p {
margin: .3rem 0 0;
color: var(--muted);
font-weight: 600;
font-size: .92rem
}
/* ════ RESPONSIVE ════ */
@media (max-width:1040px) {
.nav-links {
display: none
}
.hero-grid,
.about-grid,
.split,
.ct-grid,
.news-panel {
grid-template-columns: 1fr
}
.svc-grid,
.why-grid {
grid-template-columns: 1fr 1fr
}
.re-cards {
grid-template-columns: 1fr
}
.f-grid {
grid-template-columns: 1fr 1fr
}
.book-grid {
grid-template-columns: 1fr 1fr
}
.book-grid .wid {
grid-column: 1/-1
}
}
@media (max-width:620px) {
.svc-grid,
.why-grid {
grid-template-columns: 1fr
}
.f2,
.book-grid {
grid-template-columns: 1fr
}
.book-grid .wid {
grid-column: auto
}
.f-grid {
grid-template-columns: 1fr
}
.hero-steps {
border-radius: var(--rs)
}
}