/* ===== CsakOkosan — premium financial design system (green / trust, Manrope) ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0b2a1e;          /* deep forest green (near-black) — headlines, dark bands, primary */
  --ink-2:#2c4a3d;
  --muted:#5f7369;
  --line:#e3ede8;
  --paper:#ffffff;
  --cream:#f2f8f5;        /* soft green-tinted off-white */
  --cream-2:#e6f1eb;
  /* variable names kept for backward-compat; VALUES are now green-palette */
  --gold:#10a06a;         /* emerald accent — CTAs, highlights */
  --gold-bright:#2bd48c;  /* bright mint highlight */
  --gold-deep:#0b7a50;    /* deep emerald — eyebrow, links, active */
  --ink-green:#0b2a1e;
  --sage:#3f8a63;
  --shadow:0 22px 60px -28px rgba(11,42,30,.35);
  --shadow-sm:0 8px 26px -14px rgba(11,42,30,.26);
  --r:16px; --r-lg:24px; --r-pill:999px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink-2);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
.lead{font-size:1.16rem;color:var(--ink-2);font-weight:400}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;transition:.18s;font-family:inherit}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#06231a;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(16,160,106,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);background:var(--cream)}
.btn-lg{padding:16px 32px;font-size:1.04rem}

/* top bar + header */
.topbar{background:var(--ink);color:#cfe3d8;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px}
.topbar a{color:var(--gold-bright)}
.topbar .tb-r{display:flex;gap:18px;align-items:center}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.brand .mk{width:38px;height:38px;border-radius:11px;object-fit:cover}
.brand b{color:var(--ink);font-weight:800} .brand i{color:var(--gold-deep);font-style:normal;font-weight:800}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-weight:600;font-size:.95rem;color:var(--ink-2);position:relative;padding:6px 0}
nav.main a:hover{color:var(--ink)}
nav.main a.active{color:var(--ink)}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2.5px;border-radius:2px;background:var(--gold)}
.hdr-cta{display:flex;gap:12px;align-items:center}
.burger{display:none}

/* hero */
.hero{background:linear-gradient(180deg,var(--cream),#fff);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:76px 24px 86px}
.hero h1{font-size:clamp(2.5rem,4.8vw,4rem);color:var(--ink)}
.hero h1 .g{color:var(--gold-deep)}
.hero p.lead{margin:22px 0 32px;max-width:31em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{display:flex;gap:30px;margin-top:36px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.hero-trust div{font-size:.88rem;color:var(--muted)}
.hero-trust b{display:block;font-size:1.6rem;color:var(--ink);font-weight:800}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;height:520px;object-fit:cover}
.hero-visual::before{content:"";position:absolute;inset:-18px -18px auto auto;width:170px;height:170px;background:radial-gradient(circle,rgba(43,212,140,.22),transparent 70%);z-index:-0}
.hero-badge{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:15px 18px;display:flex;gap:12px;align-items:center;border:1px solid var(--line)}
.hero-badge .ic{width:42px;height:42px;border-radius:11px;background:var(--cream);display:grid;place-items:center;font-size:1.2rem;color:var(--gold-deep)}
.hero-badge.b1{top:26px;left:-24px} .hero-badge.b2{bottom:28px;right:-20px}
.hero-badge small{color:var(--muted);font-size:.76rem;display:block} .hero-badge b{font-size:1rem;color:var(--ink)}
.bulb{color:var(--gold)}

/* sections */
section.band{padding:88px 0}
.band.cream{background:var(--cream)}
.band.ink{background:var(--ink);color:#d6e7dd}
.band.ink h2,.band.ink h3{color:#fff}
.sec-head{max-width:680px;margin:0 auto 50px;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:14px 0 14px}
.sec-head.left{margin-left:0;text-align:left}

/* product grid */
.grid{display:grid;gap:22px}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cream-2)}
.card .ic{width:52px;height:52px;border-radius:13px;background:var(--cream);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px;color:var(--gold-deep)}
.card h3{font-size:1.22rem;margin-bottom:8px;font-weight:700}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.card .lnk{font-weight:700;color:var(--gold-deep);display:inline-flex;gap:6px;align-items:center;font-size:.92rem}
.card:hover .lnk{gap:10px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{position:relative;padding-top:20px;border-top:2px solid var(--cream-2)}
.step .n{font-size:1.1rem;color:var(--gold-deep);font-weight:800;letter-spacing:.04em}
.step h4{font-size:1.1rem;margin:10px 0 6px;font-weight:700}
.step p{color:var(--muted);font-size:.92rem}

/* compare teaser */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.cmp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.cmp-row{display:flex;align-items:center;justify-content:space-between;padding:15px 12px;border-radius:12px}
.cmp-row+.cmp-row{border-top:1px solid var(--line)}
.cmp-row.best{background:var(--cream);border:1.5px solid var(--gold);position:relative}
.cmp-row .co{display:flex;gap:12px;align-items:center;font-weight:700}
.cmp-row .co .dot{width:34px;height:34px;border-radius:9px;background:var(--cream-2);display:grid;place-items:center;font-size:.9rem;font-weight:800;color:var(--ink)}
.cmp-row .pr{text-align:right} .cmp-row .pr b{font-size:1.25rem;font-weight:800;color:var(--ink)} .cmp-row .pr small{display:block;color:var(--muted);font-size:.74rem}
.tag-best{position:absolute;top:-11px;left:16px;background:var(--gold);color:#fff;font-size:.66rem;font-weight:800;padding:3px 10px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.06em}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stats .st b{font-size:2.7rem;color:var(--gold-bright);display:block;font-weight:800}
.stats .st span{color:#b3cabf;font-size:.95rem}

/* edu cards */
.edu{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.edu-card{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);transition:.2s}
.edu-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.edu-card img{height:180px;object-fit:cover;width:100%}
.edu-card .b{padding:22px}
.edu-card .cat{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.edu-card h3{font-size:1.2rem;margin:8px 0 8px;font-weight:700}
.edu-card p{color:var(--muted);font-size:.92rem}

/* testimonial */
.quote{max-width:840px;margin:0 auto;text-align:center}
.quote p{font-size:clamp(1.4rem,2.5vw,1.95rem);line-height:1.34;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.quote .who{margin-top:22px;font-weight:700}
.quote .who span{display:block;color:var(--muted);font-weight:400;font-size:.9rem}

/* CTA band */
.cta-band{background:linear-gradient(130deg,var(--ink),#114b35);border-radius:var(--r-lg);padding:62px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem)}
.cta-band p{color:#c7ddd1;max-width:42em;margin:16px auto 28px}
.cta-band .rays{position:absolute;right:-30px;bottom:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(43,212,140,.22),transparent 68%);border-radius:50%}

/* footer */
footer.site{background:var(--ink);color:#a6c2b4;padding:66px 0 30px}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:40px}
footer.site h5{color:#fff;font-weight:700;font-size:.95rem;margin-bottom:14px}
footer.site a{display:block;color:#a6c2b4;padding:4px 0;font-size:.92rem}
footer.site a:hover{color:var(--gold-bright)}
footer.site .brand{color:#fff;margin-bottom:14px}
footer.site .brand b{color:#fff} footer.site .brand i{color:var(--gold-bright)}
footer.site .fnote{border-top:1px solid #1c4133;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#7fa294}
.disclaim{background:var(--cream-2);border-left:3px solid var(--gold);padding:16px 20px;border-radius:10px;font-size:.84rem;color:var(--ink-2);margin-top:26px}

/* forms */
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:1rem;background:#fff;transition:.15s;color:var(--ink-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(16,160,106,.16)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow-sm)}

/* page hero (interior) */
.phero{background:var(--cream);padding:70px 0 56px;border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(2.1rem,3.6vw,3rem);max-width:16em;color:var(--ink)}
.phero p{margin-top:16px;max-width:42em}

/* faq accordion */
.acc{max-width:840px;margin:0 auto}
.acc details{border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:12px;background:#fff}
.acc summary{cursor:pointer;font-weight:700;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:1.04rem;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.4rem;color:var(--gold-deep);font-weight:600}
.acc details[open] summary::after{content:"–"}
.acc details p{padding:0 0 18px;color:var(--muted)}

/* chips */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:9px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line);font-weight:600;font-size:.9rem;cursor:pointer;background:#fff;transition:.15s;color:var(--ink-2)}
.chip:hover,.chip.on{border-color:var(--gold);background:var(--cream);color:var(--ink)}

/* ticks */
.ticks{list-style:none}
.ticks li{padding-left:30px;position:relative;margin-bottom:11px;color:var(--ink-2)}
.ticks li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;background:var(--gold);color:#fff;border-radius:50%;font-size:.72rem;display:grid;place-items:center;font-weight:800}

/* responsive */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero-visual img{height:360px}
  .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)}
  .compare,.edu{grid-template-columns:1fr} footer.site .cols{grid-template-columns:1fr 1fr}
  nav.main,.hdr-cta .btn-ghost{display:none}
  .burger{display:inline-flex}
}
@media(max-width:560px){
  .g-4,.g-3,.g-2,.steps,.stats{grid-template-columns:1fr}
  .cta-band{padding:40px 24px} .hero-badge{display:none}
}