@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-300.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-800.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Playfair Display';
src: url('/fonts/playfair-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Playfair Display';
src: url('/fonts/playfair-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Playfair Display';
src: url('/fonts/playfair-900.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Playfair Display';
src: url('/fonts/playfair-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}

:root {
   --bg: #FDFAF5;
   --bg-warm: #F6F0E8;
   --bg-glass: rgba(253, 250, 245, .85);
   --ink: #1C1917;
   --ink-soft: #57534E;
   --ink-muted: #A8A29E;
   --coral: #E05D36;
   --amber: #E8A328;
   --peach: #F4845F;
   --grad: linear-gradient(135deg, #E05D36 0%, #E8A328 100%);
   --grad-soft: linear-gradient(135deg, rgba(224,93,54,.07) 0%, rgba(232,163,40,.07) 100%);
   --grad-hover: linear-gradient(135deg, rgba(224,93,54,.12) 0%, rgba(232,163,40,.1) 100%);
   --glow: 0 8px 40px rgba(224, 93, 54, .15);
   --glow-lg: 0 20px 60px rgba(224, 93, 54, .2);
   --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
   --sans: 'Outfit', system-ui, -apple-system, sans-serif;
   --mono: 'Courier New', Courier, monospace;
   --ease: cubic-bezier(.16, 1, .3, 1);
   --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
   --pad: clamp(1.5rem, 5vw, 5rem);
   --max: 1180px;
   --radius: 20px;
   --radius-sm: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; overflow-x: hidden }
body {
   font-family: var(--sans);
   background: var(--bg);
   color: var(--ink);
   line-height: 1.7;
   font-weight: 400;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font-family: inherit; border: 0; background: 0; color: inherit; cursor: pointer }
::selection { background: var(--coral); color: #fff }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 8px }

.pbar {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: 3px;
   z-index: 300;
   transform-origin: left;
   transform: scaleX(0);
   will-change: transform;
   background: var(--grad);
   border-radius: 0 2px 2px 0;
}

.grain {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 999;
   opacity: .018;
   mix-blend-mode: multiply;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.top {
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 100;
   padding: .85rem var(--pad);
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--bg-glass);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(28, 25, 23, .04);
   transition: all .4s var(--ease);
}
.top.sc {
   box-shadow: 0 4px 30px rgba(28, 25, 23, .06);
   padding: .7rem var(--pad);
   border-radius: 20px;
}
.top__b {
   font-family: var(--serif);
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: -.02em;
}
.top__b strong {
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.top__nav {
   display: flex;
   gap: 2.25rem;
   align-items: center;
}
.top__lk {
   font-size: .88rem;
   font-weight: 500;
   color: var(--ink-soft);
   position: relative;
   transition: color .3s;
}
.top__lk::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--grad);
   border-radius: 2px;
   transition: width .4s var(--ease);
}
.top__lk:hover { color: var(--coral) }
.top__lk:hover::after { width: 100% }

.top__cta {
   font-size: .88rem;
   font-weight: 700;
   color: #fff;
   background: var(--grad);
   padding: .65rem 1.6rem;
   border-radius: 100px;
   transition: all .35s var(--ease);
   box-shadow: 0 4px 16px rgba(224, 93, 54, .2);
   position: relative;
   overflow: hidden;
}
.top__cta::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
   opacity: 0;
   transition: opacity .3s;
}
.top__cta:hover {
   transform: translateY(-2px);
   box-shadow: var(--glow-lg);
}
.top__cta:hover::before { opacity: 1 }

.top__mb {
   display: none;
   width: 44px; height: 44px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
}
.top__mb span {
   width: 22px; height: 2px;
   background: var(--ink);
   border-radius: 2px;
   display: block;
   transition: all .35s var(--ease);
}
.top__mb.on span:nth-child(1) { transform: translateY(8px) rotate(45deg) }
.top__mb.on span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.top__mb.on span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }

.mob {
   position: fixed;
   top: 62px;
   left: 50%;
   transform: translateX(-50%) translateY(-120%) scale(.96);
   width: calc(100% - 2rem);
   max-width: 380px;
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .08);
   border-radius: var(--radius);
   padding: 2rem;
   z-index: 99;
   box-shadow: 0 24px 60px rgba(28, 25, 23, .12);
   transition: all .45s var(--ease);
   opacity: 0;
}
.mob.on {
   transform: translateX(-50%) translateY(0) scale(1);
   opacity: 1;
}
.mob a {
   display: block;
   padding: .7rem 0;
   font-size: 1.1rem;
   font-weight: 500;
   color: var(--ink-soft);
   transition: all .25s;
   border-bottom: 1px solid rgba(28, 25, 23, .04);
}
.mob a:last-child { border-bottom: none }
.mob a:hover { color: var(--coral); padding-left: .5rem }

@media (max-width: 800px) {
   .top__nav { display: none }
   .top__mb { display: flex }
}

.hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: calc(6rem + env(safe-area-inset-top)) var(--pad) 5rem;
   position: relative;
   overflow: hidden;
}
.hero::before {
   content: '';
   position: absolute;
   top: -25%; right: -20%;
   width: clamp(500px, 70vw, 900px);
   height: clamp(500px, 70vw, 900px);
   background: radial-gradient(circle, rgba(224,93,54,.1) 0%, rgba(232,163,40,.06) 35%, transparent 65%);
   border-radius: 50%;
   pointer-events: none;
   animation: orbFloat 20s ease-in-out infinite;
}
.hero::after {
   content: '';
   position: absolute;
   bottom: -15%; left: -15%;
   width: clamp(400px, 50vw, 700px);
   height: clamp(400px, 50vw, 700px);
   background: radial-gradient(circle, rgba(244,132,95,.07) 0%, transparent 55%);
   border-radius: 50%;
   pointer-events: none;
   animation: orbFloat 25s ease-in-out infinite reverse;
}
@keyframes orbFloat {
   0%, 100% { transform: translate(0, 0) scale(1) }
   33% { transform: translate(30px, -20px) scale(1.05) }
   66% { transform: translate(-20px, 15px) scale(.97) }
}

.hero__in {
   position: relative;
   z-index: 2;
   max-width: 840px;
}
.hero__tag {
   font-family: var(--mono);
   font-size: .75rem;
   text-transform: uppercase;
   letter-spacing: .3em;
   color: var(--coral);
   margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: .75rem;
   animation: fadeSlideUp .8s var(--ease) both;
}
.hero__tag::before {
   content: '';
   width: 40px; height: 2px;
   background: var(--grad);
   border-radius: 2px;
}
.hero__h1 {
   font-family: var(--serif);
   font-size: clamp(2.8rem, 7vw, 4.5rem);
   font-weight: 900;
   line-height: 1.06;
   letter-spacing: -.04em;
   margin-bottom: 2rem;
   animation: fadeSlideUp .8s .1s var(--ease) both;
}
.hero__h1 em {
   font-style: italic;
   font-weight: 400;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.hero__p {
   font-size: 1.2rem;
   color: var(--ink-soft);
   max-width: 580px;
   line-height: 1.8;
   margin-bottom: 3rem;
   font-weight: 300;
   animation: fadeSlideUp .8s .2s var(--ease) both;
}
.hero__btns {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 4rem;
   animation: fadeSlideUp .8s .3s var(--ease) both;
}
.hero__stats {
   display: flex;
   gap: 4rem;
   flex-wrap: wrap;
   padding-top: 2.5rem;
   border-top: 1px solid rgba(28, 25, 23, .06);
   animation: fadeSlideUp .8s .4s var(--ease) both;
}
.hero__sv {
   font-family: var(--serif);
   font-size: 2.75rem;
   font-weight: 700;
   display: block;
   line-height: 1;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.hero__sl {
   font-size: .8rem;
   font-weight: 500;
   color: var(--ink-muted);
   text-transform: uppercase;
   letter-spacing: .12em;
   margin-top: .4rem;
}

@keyframes fadeSlideUp {
   from { opacity: 0; transform: translateY(28px) }
   to { opacity: 1; transform: translateY(0) }
}

.bp {
   padding: 1.05rem 2.5rem;
   font-weight: 700;
   font-size: 1rem;
   border-radius: 100px;
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   transition: all .4s var(--ease);
   position: relative;
   letter-spacing: -.01em;
}
.bf {
   background: var(--grad);
   color: #fff;
   border: none;
   box-shadow: 0 6px 24px rgba(224, 93, 54, .25);
}
.bf:hover {
   box-shadow: var(--glow-lg);
   transform: translateY(-3px);
}
.bo {
   background: transparent;
   color: var(--ink);
   border: 2px solid rgba(28, 25, 23, .15);
}
.bo:hover {
   border-color: var(--coral);
   color: var(--coral);
   background: rgba(224, 93, 54, .04);
   transform: translateY(-2px);
}

.div {
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 var(--pad);
   height: 1px;
   background: rgba(28, 25, 23, .06);
}
.sc {
   padding: clamp(5rem, 10vw, 8rem) var(--pad);
   max-width: calc(var(--max) + 2 * clamp(1.5rem, 5vw, 5rem));
   margin: 0 auto;
}
.sc--w {
   background: var(--bg-warm);
   max-width: none;
}
.sc--c { text-align: center }
.sc__tag {
   font-family: var(--mono);
   font-size: .72rem;
   text-transform: uppercase;
   letter-spacing: .3em;
   color: var(--coral);
   margin-bottom: 1.25rem;
   display: block;
   font-weight: 500;
}
.sc__h2 {
   font-family: var(--serif);
   font-size: clamp(2rem, 4.5vw, 3.2rem);
   font-weight: 900;
   line-height: 1.1;
   margin-bottom: 1rem;
   letter-spacing: -.03em;
}
.sc__h2 em {
   font-style: italic;
   font-weight: 400;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.sc__sub {
   font-size: 1.1rem;
   color: var(--ink-soft);
   max-width: 620px;
   line-height: 1.8;
   margin-bottom: 3.5rem;
   font-weight: 300;
}
.sc--c .sc__h2, .sc--c .sc__sub { margin-left: auto; margin-right: auto }

.bens {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
}
.ben {
   padding: 2.25rem;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .05);
   transition: all .45s var(--ease);
   position: relative;
   overflow: hidden;
}
.sc--w .ben { background: var(--bg) }
.ben::after {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 3px;
   background: var(--grad);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease);
   border-radius: var(--radius) var(--radius) 0 0;
}
.ben:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 48px rgba(28, 25, 23, .08);
   border-color: transparent;
}
.ben:hover::after { transform: scaleX(1) }

.ben__ic {
   width: 56px; height: 56px;
   border-radius: 16px;
   background: var(--grad-soft);
   display: grid;
   place-items: center;
   margin-bottom: 1.5rem;
   transition: all .4s var(--ease);
}
.ben:hover .ben__ic {
   background: var(--grad-hover);
   transform: scale(1.05);
}
.ben__ic svg { width: 26px; height: 26px; stroke: var(--coral); fill: none }
.ben__t { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem }
.ben__d { font-size: .9rem; color: var(--ink-soft); line-height: 1.75; font-weight: 300 }

@media (max-width: 1000px) { .bens { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 550px) { .bens { grid-template-columns: 1fr } }

.prob {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
}
.prob__i {
   padding: 2rem 2rem 2rem 2.5rem;
   border-radius: var(--radius);
   border-left: 4px solid;
   border-image: var(--grad) 1;
   background: #fff;
   transition: all .4s var(--ease);
}
.prob__i:hover {
   transform: translateY(-4px) translateX(4px);
   box-shadow: 0 10px 35px rgba(28, 25, 23, .06);
}
.prob__t { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem }
.prob__d { font-size: .9rem; color: var(--ink-soft); line-height: 1.7; font-weight: 300 }
@media (max-width: 650px) { .prob { grid-template-columns: 1fr } }

.brs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
}
.br {
   padding: 2.5rem 2rem;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .05);
   text-align: center;
   transition: all .45s var(--ease);
   position: relative;
}
.br:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 50px rgba(28, 25, 23, .09);
   border-color: rgba(224, 93, 54, .15);
}
.br__em {
   font-size: 3rem;
   display: block;
   margin-bottom: 1.25rem;
   line-height: 1;
   transition: transform .4s var(--ease-bounce);
}
.br:hover .br__em { transform: scale(1.15) rotate(-5deg) }
.br__t { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem }
.br__d { font-size: .9rem; color: var(--ink-soft); line-height: 1.7; font-weight: 300 }
.br__d a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; font-weight: 500 }

@media (max-width: 700px) { .brs { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto } }

.prices {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   max-width: 1020px;
   margin: 0 auto;
}
.price {
   padding: 3rem 2rem;
   border-radius: var(--radius);
   background: #fff;
   border: 2px solid rgba(28, 25, 23, .05);
   text-align: center;
   transition: all .45s var(--ease);
   position: relative;
}
.price--pop {
   border-color: var(--coral);
   box-shadow: 0 8px 30px rgba(224, 93, 54, .1);
}
.price--pop::before {
   content: 'Beliebt';
   position: absolute;
   top: -13px; left: 50%;
   transform: translateX(-50%);
   background: var(--grad);
   color: #fff;
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .1em;
   padding: .35rem 1.25rem;
   border-radius: 100px;
   box-shadow: 0 4px 12px rgba(224, 93, 54, .2);
}
.price:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 50px rgba(28, 25, 23, .1);
}
.price__name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem }
.price__cost {
   font-family: var(--serif);
   font-size: 2rem;
   font-weight: 900;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: .5rem;
   line-height: 1.1;
   padding: 0.5rem;;
}
.price__for { font-size: .88rem; color: var(--ink-muted); margin-bottom: 2rem; font-weight: 300 }
.price__list {
   list-style: none;
   text-align: left;
   margin-bottom: 2rem;
}
.price__list li {
   font-size: .92rem;
   padding: .55rem 0;
   border-bottom: 1px solid rgba(28, 25, 23, .04);
   color: var(--ink-soft);
   font-weight: 400;
}
.price__list li::before {
   content: '✓ ';
   color: var(--coral);
   font-weight: 700;
}
@media (max-width: 800px) { .prices { grid-template-columns: 1fr; max-width: 400px } }


.links {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   max-width: 720px;
}
.link-card {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem 2rem;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(28, 25, 23, .06);
   background: #fff;
   transition: all .4s var(--ease);
   gap: 1rem;
}
.link-card:hover {
   border-color: rgba(224, 93, 54, .2);
   transform: translateX(6px);
   box-shadow: 0 8px 30px rgba(28, 25, 23, .06);
}
.link-card__t { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: .2rem }
.link-card__d { font-size: .85rem; color: var(--ink-muted); font-weight: 300 }
.link-card__arrow {
   color: var(--coral);
   font-size: 1.4rem;
   transition: transform .4s var(--ease);
   flex-shrink: 0;
}
.link-card:hover .link-card__arrow { transform: translateX(6px) }


.bread {
   font-size: .88rem;
   color: var(--ink-muted);
   margin-bottom: 1.5rem;
   display: flex;
   gap: .5rem;
   align-items: center;
   font-weight: 400;
}
.bread a {
   color: var(--coral);
   text-decoration: underline;
   text-decoration-color: rgba(224, 93, 54, .3);
   text-underline-offset: 3px;
   transition: text-decoration-color .3s;
}
.bread a:hover { text-decoration-color: var(--coral) }

.prose { max-width: 750px }
.prose p {
   font-size: 1.08rem;
   color: var(--ink-soft);
   line-height: 1.9;
   margin-bottom: 1.35rem;
   font-weight: 300;
}
.prose strong { color: var(--ink); font-weight: 600 }
.prose a {
   color: var(--coral);
   text-decoration: underline;
   text-decoration-color: rgba(224, 93, 54, .3);
   text-underline-offset: 3px;
   font-weight: 600;
   transition: text-decoration-color .3s;
}
.prose a:hover { text-decoration-color: var(--coral) }
.prose h3 {
   font-family: var(--serif);
   font-size: 1.5rem;
   font-weight: 700;
   margin: 3rem 0 1rem;
   color: var(--ink);
}

.checks {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.25rem;
   margin: 2rem 0;
}
.check {
   display: flex;
   gap: .85rem;
   align-items: flex-start;
   padding: 1.25rem 1.5rem;
   border-radius: var(--radius-sm);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .04);
   transition: all .35s var(--ease);
}
.check:hover {
   box-shadow: 0 6px 24px rgba(28, 25, 23, .05);
   transform: translateY(-2px);
}
.check__icon {
   width: 30px; height: 30px;
   border-radius: 10px;
   background: var(--grad-soft);
   display: grid;
   place-items: center;
   flex-shrink: 0;
   margin-top: 2px;
}
.check__icon svg { width: 14px; height: 14px; stroke: var(--coral); fill: none }
.check__t { font-weight: 700; font-size: .95rem; margin-bottom: .15rem }
.check__d { font-size: .85rem; color: var(--ink-soft); line-height: 1.65; font-weight: 300 }
@media (max-width: 600px) { .checks { grid-template-columns: 1fr } }

.examples {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   max-width: 1000px;
   margin: 0 auto;
}
.ex {
   padding: 2.25rem;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .05);
   transition: all .45s var(--ease);
}
.ex:hover {
   transform: translateY(-5px);
   box-shadow: 0 14px 40px rgba(28, 25, 23, .07);
}
.ex__em {
   font-size: 2.5rem;
   display: block;
   margin-bottom: 1rem;
   line-height: 1;
   transition: transform .4s var(--ease-bounce);
}
.ex:hover .ex__em { transform: scale(1.1) }
.ex__t { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem }
.ex__d { font-size: .88rem; color: var(--ink-soft); line-height: 1.7; font-weight: 300 }
@media (max-width: 700px) { .examples { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto } }


.signs {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.25rem;
   margin: 2rem 0;
}
.sign {
   display: flex;
   gap: 1.25rem;
   align-items: flex-start;
   padding: 1.75rem;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .04);
   border-left: 4px solid;
   border-image: var(--grad) 1;
   transition: all .4s var(--ease);
}
.sign:hover {
   transform: translateY(-3px) translateX(3px);
   box-shadow: 0 8px 30px rgba(28, 25, 23, .06);
}
.sign__x {
   width: 36px; height: 36px;
   border-radius: 50%;
   background: var(--grad-soft);
   display: grid;
   place-items: center;
   flex-shrink: 0;
   font-family: var(--serif);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--coral);
}
.sign__t { font-weight: 700; font-size: .95rem; margin-bottom: .2rem }
.sign__d { font-size: .85rem; color: var(--ink-soft); line-height: 1.65; font-weight: 300 }
@media (max-width: 650px) { .signs { grid-template-columns: 1fr } }

.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   max-width: 1020px;
   margin: 0 auto;
}
.step {
   text-align: center;
   padding: 2.25rem 1.5rem;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .05);
   transition: all .45s var(--ease);
}
.sc--w .step { background: var(--bg) }
.step:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 40px rgba(28, 25, 23, .07);
}
.step__n {
   font-family: var(--serif);
   font-size: 2.25rem;
   font-style: italic;
   font-weight: 400;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: .75rem;
   display: block;
   line-height: 1;
}
.step__t { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem }
.step__d { font-size: .85rem; color: var(--ink-soft); line-height: 1.6; font-weight: 300 }
@media (max-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 450px) { .steps { grid-template-columns: 1fr } }

.grid3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
}
.card {
   padding: 2.25rem;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid rgba(28, 25, 23, .05);
   transition: all .45s var(--ease);
   position: relative;
   overflow: hidden;
}
.sc--w .card { background: var(--bg) }
.card::after {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 3px;
   background: var(--grad);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease);
}
.card:hover {
   transform: translateY(-5px);
   box-shadow: 0 14px 45px rgba(28, 25, 23, .08);
   border-color: transparent;
}
.card:hover::after { transform: scaleX(1) }

.card__ic {
   width: 52px; height: 52px;
   border-radius: 14px;
   background: var(--grad-soft);
   display: grid;
   place-items: center;
   margin-bottom: 1.25rem;
   transition: all .4s var(--ease);
}
.card:hover .card__ic { background: var(--grad-hover); transform: scale(1.05) }
.card__ic svg { width: 24px; height: 24px; stroke: var(--coral); fill: none }
.card__t { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem }
.card__d { font-size: .9rem; color: var(--ink-soft); line-height: 1.7; font-weight: 300 }
.card__d a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; font-weight: 500 }

@media (max-width: 700px) { .grid3 { grid-template-columns: 1fr } }


.fcta {
   padding: clamp(5rem, 10vw, 8rem) var(--pad);
   text-align: center;
   position: relative;
   overflow: hidden;
}
.fcta::before {
   content: '';
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   width: clamp(400px, 50vw, 700px);
   height: clamp(400px, 50vw, 700px);
   background: radial-gradient(circle, rgba(224,93,54,.06) 0%, rgba(232,163,40,.03) 35%, transparent 60%);
   border-radius: 50%;
   pointer-events: none;
   animation: orbFloat 18s ease-in-out infinite;
}
.fcta__h {
   font-family: var(--serif);
   font-size: clamp(2.2rem, 5vw, 3.5rem);
   font-weight: 900;
   margin-bottom: 1.25rem;
   position: relative;
   letter-spacing: -.03em;
}
.fcta__p {
   color: var(--ink-soft);
   font-size: 1.1rem;
   max-width: 540px;
   margin: 0 auto 2.5rem;
   line-height: 1.8;
   position: relative;
   font-weight: 300;
}
.fcta__btns {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
   position: relative;
}

.ft {
   background: var(--ink);
   color: #FAF7F2;
   padding: 4.5rem var(--pad) 2rem;
}
.ft__in { max-width: var(--max); margin: 0 auto }
.ft__g {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 3.5rem;
   margin-bottom: 3rem;
}
.ft__brand {
   font-family: var(--serif);
   font-size: 1.6rem;
   font-weight: 700;
   margin-bottom: .75rem;
}
.ft__desc {
   font-size: .92rem;
   color: rgba(250, 247, 242, .45);
   line-height: 1.75;
   font-weight: 300;
}
.ft__title {
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .2em;
   margin-bottom: .85rem;
   color: rgba(250, 247, 242, .35);
}
.ft__links { list-style: none }
.ft__links li { margin-bottom: .4rem }
.ft__links a {
   font-size: .92rem;
   color: rgba(250, 247, 242, .55);
   transition: all .25s;
   font-weight: 300;
}
.ft__links a:hover { color: var(--coral); padding-left: .3rem }
.ft__bot {
   border-top: 1px solid rgba(250, 247, 242, .06);
   padding-top: 1.5rem;
   font-size: .82rem;
   color: rgba(250, 247, 242, .3);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: .5rem;
   font-weight: 300;
}
.ft__bot a { color: var(--coral) }
@media (max-width: 700px) { .ft__g { grid-template-columns: 1fr; gap: 2rem } }

.rv {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.rv.vis {
   opacity: 1;
   transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
   }
   .rv { opacity: 1; transform: none }
}