/* ============================================================
   Credit Finance Forward — style.css
   All site styles (shared across every page)
   ============================================================ */
:root{
  --bg:#F2EEE5;
  --bg-2:#E3DCCF;
  --paper:#FBF9F3;
  --ink:#202B25;
  --ink-2:#405247;
  --muted:#788477;
  --line:rgba(32,43,37,0.11);
  --line-strong:rgba(32,43,37,0.24);

  --coral:#9E3545;
  --teal:#176B50;
  --lav:#B7A3A0;
  --sun:#D4AA55;
  --sage:#A6B68B;
  --terra:#70443D;
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ overflow-x:hidden; max-width:100%; }
body{
background:var(--bg);
color:var(--ink);
font-family:'Inter',sans-serif;
font-size:17px;
line-height:1.6;
font-weight:400;
}
h1,h2,h3,h4,h5,h6,.serif{
font-family:'Fraunces', serif;
font-weight:500;
letter-spacing:-0.02em;
line-height:1.05;
color:var(--ink);
}
.mono{ font-family:'JetBrains Mono', monospace; font-weight:500; letter-spacing:0; }
a{ color:inherit; text-decoration:none;}
::selection{ background:var(--coral); color:#fff;}
/* === Grainy texture overlay === */
body::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
mix-blend-mode:multiply;
}
main, header, footer, .toast-wrap, .nav-wrap, #preloader,  .cursor-dot, .cursor-ring, #scrollProgress{ position:relative; z-index:2;}
.modal{
position:fixed !important;
z-index:1055 !important;
}
/* === Preloader === */
#preloader{
position:fixed; inset:0; background:var(--bg); z-index:99999;
display:flex; flex-direction:column; align-items:center; justify-content:center;
transition:opacity .7s ease, visibility .7s ease;
}
#preloader.hide{ opacity:0; visibility:hidden;}
.pre-mark{
font-family:'Fraunces',serif; font-size:64px; font-weight:300; color:var(--ink);
position:relative; overflow:hidden; line-height:1;
}
.pre-mark span{ display:inline-block; animation:rise 1s ease both;}
.pre-mark span:nth-child(1){ animation-delay:.0s;}
.pre-mark span:nth-child(2){ animation-delay:.08s;}
.pre-mark span:nth-child(3){ animation-delay:.16s;}
.pre-mark span:nth-child(4){ animation-delay:.24s;}
.pre-mark span:nth-child(5){ animation-delay:.32s;}
@keyframes rise{
from{ transform:translateY(110%); opacity:0;}
to{ transform:translateY(0); opacity:1;}
}
.pre-line{
width:160px; height:1px; background:var(--line-strong); margin-top:28px; position:relative; overflow:hidden;
}
.pre-line::after{
content:""; position:absolute; inset:0; width:40%;
background:var(--coral); animation:slideX 1.2s ease-in-out infinite;
}
@keyframes slideX{
0%{ transform:translateX(-100%);}
100%{ transform:translateX(400%);}
}
.pre-tag{ margin-top:18px; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.3em; color:var(--muted);}
/* === Custom cursor === */
.cursor-dot,.cursor-ring{ position:fixed; pointer-events:none; z-index:99998; left:0; top:0;
transform:translate(-50%,-50%); will-change:transform;}
.cursor-dot{ width:6px; height:6px; background:var(--ink); border-radius:50%;}
.cursor-ring{ width:38px; height:38px; border:1px solid var(--ink); border-radius:50%;
transition:width .25s ease, height .25s ease, background .25s ease, opacity .25s ease;}
.cursor-ring.grow{ width:80px; height:80px; background:var(--coral); border-color:transparent; opacity:.7;
mix-blend-mode:multiply;}
@media (max-width:991.98px){ .cursor-dot,.cursor-ring{ display:none!important;} body{ cursor:auto;} }
@media (min-width:992px){ body, body *{ cursor:none;} }
/* === Scroll progress === */
#scrollProgress{
position:fixed; top:0; left:0; height:2px; width:0%;
background:var(--ink); z-index:99997;
}
/* === Top ticker === */
.ticker{
position:relative; z-index:3;
background:var(--ink); color:var(--bg); overflow:hidden;
padding:8px 0; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.ticker-track{ display:flex; gap:60px; white-space:nowrap; animation:ticker 45s linear infinite;}
.ticker-track span{ display:inline-flex; gap:10px; align-items:center;}
.ticker-track span::after{ content:"●"; color:var(--coral); margin-left:60px;}
@keyframes ticker{ to{ transform:translateX(-50%);} }
/* === Navigation === */
.nav-wrap{
position:sticky; top:0; z-index:9999;
background:rgba(244,239,230,0.85);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
}
.nav-inner{
max-width:1320px; margin:0 auto; padding:16px 28px;
display:flex; align-items:center; justify-content:space-between; gap:24px;
transition:padding .3s ease;
}
.nav-wrap.shrink .nav-inner{ padding:10px 28px;}
.brand{
display:flex; align-items:center; gap:10px;
font-family:'Fraunces',serif; font-size:26px; font-weight:500; letter-spacing:-0.02em;
}
.brand-orb{
width:30px; height:30px; border-radius:50%;
background:radial-gradient(circle at 30% 30%, var(--sun), var(--coral) 70%, var(--terra));
box-shadow:0 0 20px rgba(255,107,71,.4);
}
.nav-links{ display:flex; gap:8px; list-style:none; margin:0; padding:0; align-items:center;}
.nav-links a{
padding:8px 16px; font-size:14px; font-weight:500; color:var(--ink-2);
border-radius:0; position:relative; transition:color .25s ease;
}
.nav-links a::after{
content:""; position:absolute; left:16px; right:16px; bottom:4px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1);}
.nav-links a.active{ color:var(--ink); font-weight:600;}
.nav-cta{
background:var(--ink); color:var(--bg); border:0;
padding:12px 22px; border-radius:999px; font-weight:500; font-size:14px;
display:inline-flex; align-items:center; gap:8px;
transition:transform .25s ease, background .25s ease;
}
.nav-cta:hover{ background:var(--coral); transform:translateY(-2px); color:#fff;}
.nav-cta .arr{ transition:transform .25s ease;}
.nav-cta:hover .arr{ transform:translateX(4px);}
.nav-toggle{ display:none; background:transparent; border:1px solid var(--line-strong); width:42px; height:42px; border-radius:50%; color:var(--ink);}
.mobile-menu{ display:none;}
.mobile-menu.open{
display:block; position:fixed; top:80px; left:16px; right:16px; z-index:9998;
background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:14px;
box-shadow:0 30px 60px rgba(0,0,0,.1);
}
.mobile-menu a{
display:block; padding:12px 14px; color:var(--ink-2); font-size:15px; border-radius:12px;
}
.mobile-menu a:hover{ background:var(--bg); color:var(--ink);}
.mobile-menu .nav-cta{ width:100%; margin-top:10px; padding:14px; justify-content:center;}
@media (max-width:991.98px){
.nav-links, .nav-inner > .nav-cta{ display:none;}
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center;}
}
/* === Section base === */
section{ position:relative; padding-top:120px; padding-bottom:120px;}
@media (max-width:767.98px){ section{ padding-top:80px; padding-bottom:80px;}}
.container{ max-width:1320px;}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.25em; text-transform:uppercase;
color:var(--muted); margin-bottom:24px;
}
.eyebrow .dash{ width:36px; height:1px; background:var(--ink);}
.section-title{
font-family:'Fraunces',serif; font-weight:400;
font-size:clamp(2.4rem, 5.5vw, 4.4rem); line-height:1.02; letter-spacing:-0.035em;
margin-bottom:28px;
}
.section-title em{ font-style:italic; font-weight:300; color:var(--coral); font-family:'Fraunces',serif;}
.section-sub{ color:var(--muted); font-size:18px; max-width:640px;}
.divider-line{ height:1px; background:var(--line); margin:60px 0;}
/* === Buttons === */
.btn-ink{
background:var(--ink); color:var(--bg); border:0;
padding:16px 30px; border-radius:999px; font-weight:500; font-size:15px;
display:inline-flex; align-items:center; gap:10px;
transition:transform .25s ease, background .25s ease;
}
.btn-ink:hover{ background:var(--coral); color:#fff; transform:translateY(-3px);}
.btn-paper{
background:var(--paper); color:var(--ink); border:1px solid var(--line-strong);
padding:15px 28px; border-radius:999px; font-weight:500; font-size:15px;
display:inline-flex; align-items:center; gap:10px;
transition:all .25s ease;
}
.btn-paper:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-3px);}
.btn-sm-ink{
background:transparent; color:var(--ink); border:1px solid var(--ink);
padding:9px 18px; border-radius:999px; font-size:13px; font-weight:500;
display:inline-flex; align-items:center; gap:6px;
transition:all .25s ease;
}
.btn-sm-ink:hover{ background:var(--ink); color:var(--bg);}
.btn-sm-ink i{ transition:transform .25s ease;}
.btn-sm-ink:hover i{ transform:translateX(4px);}
/* === HERO === */
#home{ padding-top:0px; padding-bottom:80px;}
.hero-grid{ display:grid; grid-template-columns:2fr 1fr; gap:50px; align-items:end; }
.hero-headline{
font-family:'Fraunces',serif; font-weight:400;
font-size:clamp(3rem, 5vw, 5rem);
line-height:0.95;
letter-spacing:-0.045em;
margin-bottom:0;
}
.hero-headline .word{ display:inline-block; overflow:hidden; padding-bottom:0.12em;}
.hero-headline .word span{
display:inline-block; transform:translateY(110%);
animation:wordRise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes wordRise{ to{ transform:translateY(0);} }
.hero-headline .ital{ font-style:italic; font-weight:300; color:var(--coral);}
.hero-headline .underline-art{
position:relative; display:inline-block;
}
.hero-headline .underline-art svg{
position:absolute; left:0; right:0; bottom:-6px; width:100%; height:14px;
}
.hero-headline .underline-art svg path{
fill:none; stroke:var(--coral); stroke-width:3; stroke-linecap:round;
stroke-dasharray:300; stroke-dashoffset:300;
animation:drawLine 1.6s ease 1.4s forwards;
}
@keyframes drawLine{ to{ stroke-dashoffset:0;} }
.hero-meta{ display:grid; gap:40px; align-items:flex-start; margin-top:50px;}
.hero-meta .col-meta{ flex:1; min-width:200px;}
.hero-meta p{ color:var(--muted); font-size:17px; max-width:480px; margin:0;}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap;}
.hero-aside{
display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:60px;
align-items:stretch;
}
.aside-card{
background:var(--paper); border:1px solid var(--line); border-radius:24px;
padding:24px; position:relative;
transition:transform .4s ease, border-color .3s ease;
}
.aside-card:hover{ transform:translateY(-6px); border-color:var(--line-strong);}
.aside-card.feature{
background:var(--ink); color:var(--bg); grid-column:span 2;
}
.aside-card.feature .mono{ color:var(--lav);}
.aside-stat{ font-family:'Fraunces',serif; font-size:48px; font-weight:300; line-height:1;}
.aside-stat sup{ font-size:22px; font-weight:400; opacity:.7;}
.aside-label{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.aside-card.feature .aside-label{ color:rgba(255,255,255,.5);}
.aside-tag{
display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
background:var(--bg); border:1px solid var(--line); border-radius:999px;
font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
color:var(--muted);
}
.aside-card.feature .aside-tag{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--lav);}
.spark{ display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:14px;}
.spark span{ flex:1; background:var(--ink); border-radius:2px; min-width:3px; opacity:.85;}
.aside-card.feature .spark span{ background:var(--sun);}
/* === Trust strip === */
.trust-strip{
margin-top:80px; padding-top:30px; border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px;
}
.trust-strip .label{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);}
.trust-strip .logos{ display:flex; flex-wrap:wrap; gap:40px; align-items:center;}
.trust-strip .logos span{
font-family:'Fraunces',serif; font-size:22px; font-weight:500; color:var(--ink-2); opacity:.55;
letter-spacing:-0.02em;
}
.trust-strip .logos span i{ margin-right:6px;}
/* === ABOUT — magazine spread === */
#about{ background:var(--bg-2);}
.about-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:30px; align-items:start;}
.about-lead{ grid-column:span 7;}
.about-lead .drop::first-letter{
font-family:'Fraunces',serif; float:left; font-size:88px; line-height:.8; padding:8px 12px 0 0;
color:var(--coral); font-weight:400;
}
.about-lead p{ font-size:19px; color:var(--ink-2); line-height:1.55;}
.about-side{ grid-column:span 5;}
.spec-card{
background:var(--paper); border:1px solid var(--line); border-radius:24px;
padding:30px; margin-bottom:18px;
}
.spec-card .num{
font-family:'Fraunces',serif; font-size:64px; font-weight:300; line-height:1; color:var(--ink);
}
.spec-card .num em{ color:var(--coral); font-style:italic;}
.spec-card p{ color:var(--muted); font-size:14px; margin:8px 0 0;}
.values-row{
grid-column:span 12; margin-top:30px;
display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.value-tile{
background:var(--paper); border:1px solid var(--line); border-radius:20px;
padding:24px; transition:all .35s ease; position:relative; overflow:hidden;
}
.value-tile:hover{ transform:translateY(-6px); background:var(--ink); color:var(--bg);}
.value-tile:hover .value-num,
.value-tile:hover .value-name{ color:inherit;}
.value-tile:hover .value-desc{ color:rgba(255,255,255,.7);}
.value-num{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.18em; color:var(--muted);}
.value-name{ font-family:'Fraunces',serif; font-size:28px; font-weight:400; margin:10px 0 8px;}
.value-desc{ font-size:14px; color:var(--muted);}
@media (max-width:991.98px){
.about-grid{ grid-template-columns:1fr;}
.about-lead, .about-side, .values-row{ grid-column:span 1;}
.values-row{ grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){ .values-row{ grid-template-columns:1fr;} }
/* === SERVICES === */
.svc-intro-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:end; margin-bottom:60px;}
@media (max-width:991.98px){ .svc-intro-grid{ grid-template-columns:1fr; gap:30px;}}
.cat-wrap{ padding:60px 0; border-top:1px solid var(--line);}
.cat-wrap:first-of-type{ border-top:0; padding-top:30px;}
.cat-head{ display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:end; margin-bottom:40px;}
.cat-no{
font-family:'Fraunces',serif; font-size:120px; font-weight:300; line-height:.85; color:var(--ink);
letter-spacing:-0.05em;
}
.cat-no em{ font-style:italic; color:var(--coral);}
.cat-name{ font-family:'Fraunces',serif; font-size:clamp(2rem, 4vw, 3rem); font-weight:400; margin:0;}
.cat-tag{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase;}
.cat-meta{ text-align:right; color:var(--muted); font-family:'JetBrains Mono'; font-size:12px;}
@media (max-width:767.98px){
.cat-head{ grid-template-columns:1fr; gap:14px;}
.cat-no{ font-size:80px;}
.cat-meta{ text-align:left;}
}
/* ---- 1. LOANS — Expandable list ---- */
.loan-list{ border-top:1px solid var(--line);}
.loan-row{
border-bottom:1px solid var(--line); padding:24px 0;
display:grid; grid-template-columns:60px 1fr auto auto; gap:24px; align-items:center;
cursor:pointer; transition:padding .3s ease;
}
.loan-row:hover{ padding-left:14px;}
.loan-idx{ font-family:'JetBrains Mono'; font-size:13px; color:var(--muted);}
.loan-name{ font-family:'Fraunces',serif; font-size:28px; font-weight:400; transition:color .3s ease;}
.loan-row:hover .loan-name{ color:var(--coral);}
.loan-desc-mini{ color:var(--muted); font-size:14px; max-width:420px;}
.loan-arrow{ color:var(--ink); font-size:22px; transition:transform .35s ease;}
.loan-row.open .loan-arrow{ transform:rotate(45deg) translate(2px,-2px); color:var(--coral);}
.loan-detail{
grid-column:1 / -1; max-height:0; overflow:hidden; transition:max-height .5s ease;
}
.loan-detail-inner{
display:grid; grid-template-columns:60px 1fr auto; gap:24px; padding:18px 0 6px;
align-items:start;
}
.loan-detail-inner p{ color:var(--ink-2); font-size:16px; max-width:680px; margin:0;}
@media (max-width:767.98px){
.loan-row{ grid-template-columns:40px 1fr auto;}
.loan-desc-mini{ display:none;}
.loan-detail-inner{ grid-template-columns:40px 1fr;}
.loan-detail-inner .btn-sm-ink{ grid-column:2;}
}
/* ---- 2. INSURANCE — Tabbed selector ---- */
.ins-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px;}
.ins-tab{
padding:10px 20px; background:transparent; border:1px solid var(--line-strong); border-radius:999px;
font-size:13px; font-weight:500; color:var(--ink-2); cursor:pointer; transition:all .25s ease;
display:inline-flex; align-items:center; gap:8px;
}
.ins-tab i{ font-size:14px;}
.ins-tab:hover{ background:var(--paper);}
.ins-tab.active{ background:var(--ink); color:var(--bg); border-color:var(--ink);}
.ins-panel{ display:none; animation:fadeUp .5s ease both;}
.ins-panel.active{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;}
@keyframes fadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
.ins-visual{
background:var(--paper); border:1px solid var(--line); border-radius:32px;
padding:48px; text-align:center; position:relative; overflow:hidden;
min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ins-visual::before{
content:""; position:absolute; inset:-2px; border-radius:32px; padding:1px;
background:linear-gradient(135deg, var(--coral), var(--teal), var(--lav));
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0; transition:opacity .4s ease;
}
.ins-panel.active .ins-visual::before{ opacity:1;}
.ins-icon-huge{
font-size:120px; line-height:1; color:var(--ink);
animation:floatY 6s ease-in-out infinite;
}
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.ins-visual .badge-color{
display:inline-flex; padding:4px 12px; border-radius:999px; font-family:'JetBrains Mono';
font-size:10px; letter-spacing:.2em; text-transform:uppercase; margin-top:24px;
}
.ins-content h3{ font-family:'Fraunces',serif; font-size:clamp(2rem,3.5vw,2.8rem); font-weight:400; margin-bottom:18px;}
.ins-content p{ color:var(--ink-2); font-size:17px; margin-bottom:24px;}
.ins-features{ list-style:none; padding:0; margin:0 0 28px;}
.ins-features li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px;}
.ins-features li:last-child{ border-bottom:0;}
.ins-features li i{ color:var(--teal);}
@media (max-width:991.98px){
.ins-panel.active{ grid-template-columns:1fr;}
.ins-icon-huge{ font-size:80px;}
}
/* ---- 3. INVESTMENTS — Stacked tilt cards ---- */
.inv-stack{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.inv-card{
background:var(--paper); border:1px solid var(--line); border-radius:28px;
padding:36px; position:relative; min-height:420px;
display:flex; flex-direction:column; justify-content:space-between;
transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.inv-card:nth-child(1){ transform:rotate(-1.5deg);}
.inv-card:nth-child(2){ transform:rotate(0.8deg) translateY(-16px);}
.inv-card:nth-child(3){ transform:rotate(-0.6deg);}
.inv-card:hover{ transform:rotate(0) translateY(-20px); box-shadow:0 30px 80px rgba(0,0,0,.12); z-index:2;}
.inv-card .ticker-badge{
position:absolute; top:24px; right:24px;
font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.18em; color:var(--muted);
}
.inv-icon-wrap{
width:72px; height:72px; border-radius:24px;
display:flex; align-items:center; justify-content:center; font-size:32px;
margin-bottom:auto;
}
.inv-card.c1 .inv-icon-wrap{ background:var(--sun); color:var(--ink);}
.inv-card.c2 .inv-icon-wrap{ background:var(--lav); color:var(--ink);}
.inv-card.c3 .inv-icon-wrap{ background:var(--sage); color:var(--ink);}
.inv-card h3{ font-family:'Fraunces',serif; font-size:32px; font-weight:400; margin:28px 0 12px;}
.inv-card p{ color:var(--muted); font-size:15px; margin-bottom:20px;}
.inv-card .perf{
padding-top:18px; border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono'; font-size:12px;
}
.inv-card .perf .up{ color:var(--teal);}
@media (max-width:991.98px){
.inv-stack{ grid-template-columns:1fr;}
.inv-card{ transform:none!important; min-height:auto;}
}
/* ---- 4. WEALTH — Orbital roadmap ---- */
.wealth-orbit{
display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.orbit-stage{
position:relative; aspect-ratio:1/1; max-width:520px; margin: 30px;
}
.orbit-center{
position:absolute; inset:0; margin:auto; width:160px; height:160px; border-radius:50%;
background:var(--ink); color:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; font-family:'Fraunces',serif; font-size:18px; line-height:1.2;
z-index:3;
}
.orbit-center .mono{ font-size:10px; letter-spacing:.2em; color:var(--lav); margin-bottom:6px;}
.orbit-ring{
position:absolute; inset:0; border:1px dashed var(--line-strong); border-radius:50%;
animation:rotate 60s linear infinite;
}
.orbit-ring.r2{ inset:18%; animation-duration:40s; animation-direction:reverse;}
@keyframes rotate{ to{ transform:rotate(360deg);} }
.orbit-node{
position:absolute; width:64px; height:64px; border-radius:50%;
background:var(--paper); border:1px solid var(--line-strong);
display:flex; align-items:center; justify-content:center;
font-size:24px; color:var(--ink); cursor:pointer;
transition:transform .3s ease, background .3s ease, color .3s ease;
z-index:2;
}
.orbit-node:hover, .orbit-node.active{ background:var(--coral); color:#fff; border-color:transparent; transform:scale(1.15);}
.orbit-node.n1{ top:0; left:50%; transform:translateX(-50%);}
.orbit-node.n2{ top:20%; right:0;}
.orbit-node.n3{ bottom:20%; right:0;}
.orbit-node.n4{ bottom:0; left:50%; transform:translateX(-50%);}
.orbit-node.n5{ bottom:20%; left:0;}
.orbit-node.n6{ top:20%; left:0;}
.orbit-info{ background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:36px;}
.orbit-info .step-num{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.22em; color:var(--coral);}
.orbit-info h3{ font-family:'Fraunces',serif; font-size:36px; font-weight:400; margin:10px 0 16px;}
.orbit-info p{ color:var(--ink-2); font-size:16px; margin-bottom:22px;}
@media (max-width:991.98px){
.wealth-orbit{ grid-template-columns:1fr;}
.orbit-stage{ max-width:380px;}
}
/* ---- 5. PAYMENTS — Magazine spread ---- */
.pay-mag{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}
.pay-feature{
grid-column:span 7;
background:var(--ink); color:var(--bg); border-radius:32px; padding:48px;
position:relative; overflow:hidden; min-height:380px;
display:flex; flex-direction:column; justify-content:space-between;
}
.pay-feature::after{
content:""; position:absolute; right:-40px; bottom:-40px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle, var(--coral), transparent 70%); opacity:.55;
}
.pay-feature h3{ font-family:'Fraunces',serif; font-size:48px; font-weight:400; color:var(--bg); margin:24px 0 14px;}
.pay-feature p{ color:rgba(255,255,255,.7); max-width:440px; position:relative;}
.pay-feature .mono{ color:var(--sun);}
.pay-feature .btn-sm-ink{ background:var(--bg); color:var(--ink); border-color:var(--bg); position:relative; z-index:2; align-self:flex-start;}
.pay-feature .btn-sm-ink:hover{ background:var(--coral); color:#fff; border-color:var(--coral);}
.pay-side{ grid-column:span 5; display:flex; flex-direction:column; gap:20px;}
.pay-mini{
background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:24px;
display:flex; align-items:flex-start; gap:18px; transition:all .35s ease;
}
.pay-mini:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink);}
.pay-mini:hover .mono, .pay-mini:hover p, .pay-mini:hover h4{ color:inherit;}
.pay-mini:hover p{ opacity:.7;}
.pay-mini-ico{
width:54px; height:54px; border-radius:16px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-size:24px;
}
.pay-mini.m1 .pay-mini-ico{ background:var(--sun); color:var(--ink);}
.pay-mini.m2 .pay-mini-ico{ background:var(--lav); color:var(--ink);}
.pay-mini h4{ font-family:'Fraunces',serif; font-size:22px; font-weight:400; margin:0 0 6px;}
.pay-mini p{ color:var(--muted); font-size:14px; margin:0 0 12px;}
.pay-row{ grid-column:span 12; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pay-cell{
background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:28px;
transition:all .35s ease;
}
.pay-cell:hover{ background:var(--bg-2); transform:translateY(-4px);}
.pay-cell .pay-mini-ico{ margin-bottom:18px;}
.pay-cell.k1 .pay-mini-ico{ background:var(--sage); color:var(--ink);}
.pay-cell.k2 .pay-mini-ico{ background:var(--coral); color:#fff;}
.pay-cell.k3 .pay-mini-ico{ background:var(--teal); color:#fff;}
.pay-cell h4{ font-family:'Fraunces',serif; font-size:24px; font-weight:400; margin:0 0 8px;}
.pay-cell p{ color:var(--muted); font-size:14px; margin:0 0 16px;}
@media (max-width:991.98px){
.pay-feature, .pay-side, .pay-row{ grid-column:span 12;}
.pay-row{ grid-template-columns:1fr;}
.pay-feature h3{ font-size:36px;}
}
/* ---- 6. DEBT RELIEF — Before/After journey ---- */
.debt-journey{
background:var(--paper); border:1px solid var(--line); border-radius:32px; padding:48px;
position:relative; overflow:hidden;
}
.debt-stages{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; position:relative;}
.debt-stages::before{
content:""; position:absolute; top:48px; left:16%; right:16%; height:2px;
background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
}
.debt-stage{ text-align:center; position:relative; z-index:1;}
.debt-circle{
width:96px; height:96px; border-radius:50%; margin:0 auto 24px;
display:flex; align-items:center; justify-content:center; font-size:38px;
border:2px solid var(--line-strong); background:var(--bg);
transition:all .4s ease;
}
.debt-stage.s1 .debt-circle{ background:#FFE4DE; color:var(--terra); border-color:#FFC8BC;}
.debt-stage.s2 .debt-circle{ background:var(--sun); color:var(--ink); border-color:transparent;}
.debt-stage.s3 .debt-circle{ background:var(--sage); color:#fff; border-color:transparent;}
.debt-stage:hover .debt-circle{ transform:scale(1.1) rotate(-8deg);}
.debt-tag{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.2em; color:var(--muted); margin-bottom:10px;}
.debt-stage h3{ font-family:'Fraunces',serif; font-size:28px; font-weight:400; margin-bottom:12px;}
.debt-stage p{ color:var(--muted); font-size:14px; margin-bottom:20px;}
@media (max-width:991.98px){
.debt-stages{ grid-template-columns:1fr; gap:50px;}
.debt-stages::before{ display:none;}
.debt-journey{ padding:32px 24px;}
}
/* ---- 7. HOME WARRANTY — Floor plan ---- */
.home-plan{
display:grid; grid-template-columns:1fr 1.4fr; gap:30px;
}
.home-blueprint{
background:var(--paper); border:1px solid var(--line); border-radius:32px;
padding:36px; position:relative;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size:24px 24px;
}
.house-svg{ width:100%; height:auto; max-height:420px;}
.house-svg .room{
fill:rgba(255,255,255,.6); stroke:var(--ink); stroke-width:2;
transition:fill .3s ease;
cursor:pointer;
}
.house-svg .room:hover{ fill:var(--sun);}
.house-svg .label{ font-family:'JetBrains Mono'; font-size:9px; fill:var(--ink-2); text-anchor:middle; letter-spacing:.1em;}
.house-svg .pin{ animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{
0%,100%{ r:5; opacity:1;}
50%{ r:9; opacity:.5;}
}
.home-list{ display:flex; flex-direction:column; gap:14px;}
.home-row{
background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px;
display:grid; grid-template-columns:54px 1fr auto; gap:18px; align-items:center;
transition:all .35s ease;
}
.home-row:hover{ background:var(--bg-2); transform:translateX(6px); border-color:var(--ink);}
.home-row .ico{
width:54px; height:54px; border-radius:16px; background:var(--sage);
display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ink);
}
.home-row.r2 .ico{ background:var(--sun);}
.home-row.r3 .ico{ background:var(--lav);}
.home-row h4{ font-family:'Fraunces',serif; font-size:22px; font-weight:400; margin:0 0 4px;}
.home-row p{ color:var(--muted); font-size:14px; margin:0;}
@media (max-width:991.98px){
.home-plan{ grid-template-columns:1fr;}
}
/* ---- 8. AUTO WARRANTY — Infographic ---- */
.auto-info{
background:var(--ink); color:var(--bg); border-radius:32px; padding:48px;
position:relative; overflow:hidden;
}
.auto-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center;}
.auto-hero{
text-align:center; position:relative;
}
.car-illu{
width:100%; max-width:340px; height:auto;
}
.car-illu .body{ fill:var(--coral);}
.car-illu .window{ fill:var(--lav);}
.car-illu .wheel{ fill:var(--ink-2); stroke:var(--bg); stroke-width:2;}
.car-illu .light{ fill:var(--sun);}
.auto-stats{
display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px;
}
.auto-stat{
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px;
padding:18px;
}
.auto-stat .big{ font-family:'Fraunces',serif; font-size:36px; font-weight:300; line-height:1;}
.auto-stat .lbl{ font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.6); text-transform:uppercase; margin-top:6px;}
.auto-svcs{ display:flex; flex-direction:column; gap:18px;}
.auto-svc{
display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
padding:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
border-radius:20px; transition:all .35s ease;
}
.auto-svc:hover{ background:rgba(255,255,255,.10); border-color:var(--coral);}
.auto-svc .num{ font-family:'Fraunces',serif; font-size:32px; font-weight:300; color:var(--sun);}
.auto-svc h4{ font-family:'Fraunces',serif; font-size:22px; font-weight:400; margin:0 0 4px; color:var(--bg);}
.auto-svc p{ color:rgba(255,255,255,.65); font-size:13px; margin:0;}
.auto-svc .btn-sm-ink{ background:transparent; color:var(--bg); border-color:var(--bg);}
.auto-svc .btn-sm-ink:hover{ background:var(--coral); border-color:var(--coral); color:#fff;}
@media (max-width:991.98px){
.auto-grid{ grid-template-columns:1fr;}
.auto-info{ padding:32px 24px;}
}
/* === BENEFITS — Editorial bento === */
#benefits{ background:var(--paper);}
.ben-grid{ display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:minmax(180px,auto); gap:20px;}
.ben-card{
background:var(--bg); border:1px solid var(--line); border-radius:24px; padding:32px;
position:relative; overflow:hidden;
transition:transform .4s ease;
}
.ben-card:hover{ transform:translateY(-6px);}
.ben-card.dark{ background:var(--ink); color:var(--bg);}
.ben-card.coral{ background:var(--coral); color:#fff;}
.ben-card.sun{ background:var(--sun); color:var(--ink);}
.ben-card.sage{ background:var(--sage); color:#fff;}
.ben-card.lav{ background:var(--lav); color:var(--ink);}
.ben-num{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.22em; opacity:.6;}
.ben-card h3{ font-family:'Fraunces',serif; font-size:32px; font-weight:400; margin:18px 0 14px; color:inherit; line-height:1.1;}
.ben-card p{ font-size:15px; margin:0;}
.ben-card.dark p, .ben-card.sage p, .ben-card.coral p{ color:rgba(255,255,255,.75);}
.ben-card.sun p, .ben-card.lav p{ color:rgba(0,0,0,.65);}
.ben-card.b1{ grid-column:span 3; grid-row:span 2;}
.ben-card.b2{ grid-column:span 3;}
.ben-card.b3{ grid-column:span 2;}
.ben-card.b4{ grid-column:span 1;}
.ben-card.b5{ grid-column:span 3;}
.ben-card.b6{ grid-column:span 3;}
.ben-deco{
position:absolute; right:-30px; bottom:-30px; font-size:140px; opacity:.15; line-height:1;
}
.ben-card .ben-stat{
font-family:'Fraunces',serif; font-size:64px; font-weight:300; line-height:1; margin-top:20px;
}
@media (max-width:991.98px){
.ben-grid{ grid-template-columns:repeat(2, 1fr);}
.ben-card.b1, .ben-card.b2, .ben-card.b5, .ben-card.b6{ grid-column:span 2; grid-row:auto;}
.ben-card.b3, .ben-card.b4{ grid-column:span 1;}
}
@media (max-width:520px){
.ben-grid{ grid-template-columns:1fr;}
.ben-card{ grid-column:span 1!important;}
}
/* === PROCESS — Horizontal scrolled === */
.proc-track{
display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;
}
.proc-step{
background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:30px;
position:relative; transition:all .35s ease;
}
.proc-step:hover{ background:var(--ink); color:var(--bg); transform:translateY(-6px);}
.proc-step:hover .proc-num{ color:var(--sun);}
.proc-step:hover p{ color:rgba(255,255,255,.75);}
.proc-num{
font-family:'Fraunces',serif; font-size:72px; font-weight:300; line-height:.9;
color:var(--coral); transition:color .35s ease;
}
.proc-step h3{ font-family:'Fraunces',serif; font-size:24px; font-weight:400; margin:18px 0 12px;}
.proc-step p{ color:var(--muted); font-size:14px; margin:0;}
.proc-step .step-arr{
position:absolute; right:-22px; top:50%; transform:translateY(-50%);
width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--bg);
display:flex; align-items:center; justify-content:center; font-size:14px; z-index:2;
}
.proc-step:last-child .step-arr{ display:none;}
@media (max-width:991.98px){
.proc-track{ grid-template-columns:1fr;}
.proc-step .step-arr{ display:none;}
}
/* === TESTIMONIALS — Editorial pages === */
#testimonials{ background:var(--bg-2);}
.t-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}
.t-card{
background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:36px;
position:relative; transition:transform .4s ease;
}
.t-card:hover{ transform:translateY(-6px);}
.t-mark{
font-family:'Fraunces',serif; font-size:80px; font-weight:300; color:var(--coral); line-height:.4;
margin-bottom:16px;
}
.t-text{ font-family:'Fraunces',serif; font-size:22px; font-weight:400; line-height:1.35; color:var(--ink); margin-bottom:24px;}
.t-card.feature .t-text{ font-size:30px;}
.t-meta{ display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--line);}
.t-avatar{
width:50px; height:50px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces',serif; font-weight:500; font-size:20px;
}
.t-avatar.a1{ background:var(--sun); color:var(--ink);}
.t-avatar.a2{ background:var(--coral); color:#fff;}
.t-avatar.a3{ background:var(--sage); color:#fff;}
.t-avatar.a4{ background:var(--lav); color:var(--ink);}
.t-avatar.a5{ background:var(--teal); color:#fff;}
.t-name{ font-weight:600; font-size:15px;}
.t-role{ font-size:13px; color:var(--muted);}
.t-rating{ margin-left:auto; color:var(--sun); font-size:13px;}
.t-card.dark{ background:var(--ink); color:var(--bg);}
.t-card.dark .t-text{ color:var(--bg);}
.t-card.dark .t-role{ color:rgba(255,255,255,.6);}
.t-card.dark .t-meta{ border-color:rgba(255,255,255,.12);}
.tx1{ grid-column:span 7; grid-row:span 2;}
.tx2{ grid-column:span 5;}
.tx3{ grid-column:span 5;}
.tx4{ grid-column:span 6;}
.tx5{ grid-column:span 6;}
@media (max-width:991.98px){
.t-grid{ grid-template-columns:1fr;}
.tx1, .tx2, .tx3, .tx4, .tx5{ grid-column:span 1; grid-row:auto;}
}
/* === FAQ === */
.faq-grid{ display:grid; grid-template-columns:1fr 1.6fr; gap:60px;}
.faq-item{
border-bottom:1px solid var(--line); padding:24px 0; cursor:pointer;
transition:padding .3s ease;
}
.faq-item:first-of-type{ border-top:1px solid var(--line);}
.faq-item:hover{ padding-left:8px;}
.faq-head{ display:flex; align-items:center; justify-content:space-between; gap:18px;}
.faq-q{ font-family:'Fraunces',serif; font-size:22px; font-weight:400; margin:0;}
.faq-plus{
width:36px; height:36px; border-radius:50%; border:1px solid var(--ink);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
position:relative; transition:all .35s ease;
}
.faq-plus::before, .faq-plus::after{
content:""; position:absolute; background:var(--ink); transition:transform .35s ease;
}
.faq-plus::before{ width:12px; height:2px;}
.faq-plus::after{ width:2px; height:12px;}
.faq-item.open .faq-plus{ background:var(--coral); border-color:var(--coral);}
.faq-item.open .faq-plus::before, .faq-item.open .faq-plus::after{ background:#fff;}
.faq-item.open .faq-plus::after{ transform:scaleY(0);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s ease;}
.faq-a-inner{ padding-top:16px; color:var(--ink-2); font-size:16px; max-width:680px;}
@media (max-width:991.98px){ .faq-grid{ grid-template-columns:1fr; gap:30px;}}
/* === NEWSLETTER === */
.news-card{
background:var(--coral); color:#fff; border-radius:36px; padding:60px;
position:relative; overflow:hidden;
}
.news-card::before{
content:""; position:absolute; right:-100px; top:-100px; width:380px; height:380px; border-radius:50%;
border:1px solid rgba(255,255,255,.18);
}
.news-card::after{
content:""; position:absolute; right:-150px; top:-150px; width:480px; height:480px; border-radius:50%;
border:1px solid rgba(255,255,255,.10);
}
.news-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:50px; position:relative; align-items:center; z-index: 100000000;}
.news-card h2{ color:#fff; font-family:'Fraunces',serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:400; margin-bottom:16px;}
.news-card p{ color:rgba(255,255,255,.85); margin-bottom:0;}
.news-form{ background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); border-radius:24px; padding:28px;}
.news-form label{ font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.7); text-transform:uppercase; margin-bottom:6px; display:block;}
.input-light{
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
border-radius:14px; padding:13px 16px; color:#fff; width:100%; font-size:14px;
transition:all .25s ease;
}
.input-light::placeholder{ color:rgba(255,255,255,.55); }
.input-light:focus{ background:rgba(255,255,255,.18); border-color:#fff; outline:none;}
.form-check-input.light-check{
background-color:rgba(255,255,255,.10); border-color:rgba(255,255,255,.30);
}
.form-check-input.light-check:checked{ background-color:#fff; border-color:#fff;}
.btn-news{
background:var(--ink); color:#fff; border:0;
padding:14px 26px; border-radius:999px; font-weight:500; font-size:14px;
display:inline-flex; align-items:center; gap:10px;
transition:all .25s ease;
}
.btn-news:hover{ background:#fff; color:var(--ink); transform:translateY(-3px);}
.unsub-link{ color:#fff; text-decoration:underline; cursor:pointer;}
@media (max-width:991.98px){
.news-grid{ grid-template-columns:1fr;}
.news-card{ padding:36px 28px;}
}
/* === CONTACT === */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.contact-form{ background:var(--paper); border:1px solid var(--line); border-radius:32px; padding:40px;}
.contact-form label{ display:block; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.input-dark{
background:transparent; border:0; border-bottom:1px solid var(--line-strong);
padding:10px 0; width:100%; font-size:16px; color:var(--ink); font-family:'Inter';
transition:border-color .25s ease;
}
.input-dark:focus{ outline:none; border-bottom-color:var(--coral);}
.input-dark::placeholder{ color:var(--muted);}
textarea.input-dark{ resize:vertical; min-height:80px;}
select.input-dark{
appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1916' fill='none' stroke-width='1.5'/></svg>");
background-repeat:no-repeat; background-position:right 0 center; padding-right:24px;
}
.contact-side h2{ font-family:'Fraunces',serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:400; margin-bottom:24px;}
.contact-side p{ color:var(--ink-2); font-size:17px; margin-bottom:40px;}
.contact-list .ci{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 0; border-bottom:1px solid var(--line);}
.contact-list .ci:last-child{ border-bottom:0;}
.ci-ico{
width:50px; height:50px; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:20px;
}
.ci-ico.c1{ background:var(--sun); color:var(--ink);}
.ci-ico.c2{ background:var(--lav); color:var(--ink);}
.ci-ico.c3{ background:var(--sage); color:#fff;}
.ci-label{ font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; margin-bottom:4px;}
.ci-value{ font-family:'Fraunces',serif; font-size:20px; font-weight:400;}
@media (max-width:991.98px){
.contact-grid{ grid-template-columns:1fr;}
}
/* === CTA === */
.cta-final{
background:var(--ink); color:var(--bg);
border-radius:36px; padding:80px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta-final::before{
content:""; position:absolute; left:-60px; top:-60px; width:240px; height:240px; border-radius:50%;
background:radial-gradient(circle, var(--coral), transparent 70%); opacity:.5;
}
.cta-final::after{
content:""; position:absolute; right:-80px; bottom:-80px; width:300px; height:300px; border-radius:50%;
background:radial-gradient(circle, var(--sun), transparent 70%); opacity:.4;
}
.cta-final h2{
position:relative; font-family:'Fraunces',serif; font-weight:400;
font-size:clamp(2.5rem,6vw,5rem); line-height:1; margin-bottom:24px; color:var(--bg);
}
.cta-final h2 em{ font-style:italic; color:var(--coral); font-weight:300;}
.cta-final p{ position:relative; color:rgba(255,255,255,.75); max-width:560px; margin:0 auto 36px; font-size:18px;}
.cta-final .btn-paper{ background:var(--bg); color:var(--ink);}
.cta-final .btn-paper:hover{ background:var(--coral); color:#fff; border-color:var(--coral);}
/* === FOOTER === */
.footer{
background:var(--bg-2); padding:80px 0 40px;
border-top:1px solid var(--line);
}
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.footer-brand p{ color:var(--muted); font-size:14px; max-width:280px; margin:18px 0 24px;}
.footer h6{ font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;}
.footer a.fl{ display:block; color:var(--ink); font-size:15px; padding:6px 0; transition:color .25s ease; font-family:'Fraunces',serif; font-weight:400;}
.footer a.fl:hover{ color:var(--coral);}
.social-row{ display:flex; gap:10px;}
.social-row a{
width:42px; height:42px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all .25s ease;
}
.social-row a:hover{ background:var(--ink); color:var(--bg); transform:translateY(-3px);}
.footer-bottom{
margin-top:60px; padding-top:24px; border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
color:var(--muted); font-size:13px;
}
.footer-mark{ font-family:'Fraunces',serif; font-size:88px; line-height:1; font-weight:300; margin-top:40px; opacity:.12;}
@media (max-width:991.98px){
.footer-top{ grid-template-columns:1fr 1fr;}
.footer-mark{ font-size:48px;}
}
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr;} }
/* === MODAL (kept for compatibility) === */
.modal-content{
background:var(--paper); border:1px solid var(--line-strong); border-radius:28px;
color:var(--ink); box-shadow:0 40px 80px rgba(0,0,0,.2);
}
.modal-header{
border-bottom:1px solid var(--line); padding:28px 32px;
background:var(--bg-2); border-radius:28px 28px 0 0;
}
.modal-title{ font-family:'Fraunces',serif; font-weight:400; font-size:26px;}
.modal-body{ padding:32px; color:var(--ink-2); font-size:15px;}
.modal-body h6{ font-family:'Fraunces',serif; font-weight:500; font-size:18px; color:var(--ink); margin-top:20px; margin-bottom:8px;}
.modal-body p{ margin-bottom:12px;}
.modal-footer{ border-top:1px solid var(--line); padding:18px 32px;}
/* === TOAST === */
.toast-wrap{
position:fixed; top:90px; right:20px; z-index:99999;
display:flex; flex-direction:column; gap:12px; max-width:360px;
}
.toast-item{
background:var(--ink); color:var(--bg);
border-radius:16px; padding:16px 18px;
display:flex; gap:14px; align-items:flex-start;
box-shadow:0 24px 50px rgba(0,0,0,.25);
transform:translateX(120%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
border-left:3px solid var(--sun);
}
.toast-item.show{ transform:translateX(0);}
.toast-item .tico{
width:32px;height:32px; border-radius:50%; background:var(--sun); color:var(--ink);
display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.toast-title{ font-family:'Fraunces',serif; font-weight:500; font-size:16px;}
.toast-msg{ font-size:13px; color:rgba(255,255,255,.7); margin-top:2px;}
/* Spinner mini */
.spin-mini{
width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
border-radius:50%; animation:spin .8s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
/* Magnetic */
.magnetic{ display:inline-flex; will-change:transform;}
/* Utility hide */
.d-grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}

/* ============================================================
   ADDITIONS FOR INNER PAGES
   (about / services / contact / subscribe / unsubscribe / legal)
   ============================================================ */
/* Narrow centered form card (unsubscribe page) */
.narrow-form{ max-width:560px; margin:0 auto; }
/* Legal document layout (privacy / terms pages) */
.legal-wrap{ max-width:860px; margin:0 auto; }
.legal-doc{
background:var(--paper); border:1px solid var(--line); border-radius:32px;
padding:56px;
}
.legal-doc h6{
font-family:'Fraunces',serif; font-weight:500; font-size:20px; color:var(--ink);
margin-top:30px; margin-bottom:10px;
}
.legal-doc h6:first-child{ margin-top:0; }
.legal-doc p{ color:var(--ink-2); font-size:16px; margin-bottom:14px; }
.legal-doc p:last-child{ margin-bottom:0; }
@media (max-width:767.98px){ .legal-doc{ padding:32px 22px; } }