/* =========================================================
   Finance Credit Center — stylesheet
   Fintech palette: midnight, electric violet, lime, lilac
   ========================================================= */
:root {
  --cc-night: #12122b;
  --cc-night-2: #1c1c40;
  --cc-night-3: #0b0b1f;
  --cc-violet: #6a4cf6;
  --cc-violet-d: #5236e0;
  --cc-violet-l: #a996ff;
  --cc-lime: #c8f13c;
  --cc-lime-d: #b2dc22;
  --cc-lilac: #f2efff;
  --cc-text: #4d4d68;
  --cc-line: #e2defa;
  --cc-head: "Unbounded", system-ui, sans-serif;
  --cc-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--cc-body); color: var(--cc-text); background: #fff; font-size: 1.04rem; line-height: 1.72; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--cc-head); color: var(--cc-night); font-weight: 600; line-height: 1.16; letter-spacing: -.02em; }
a { color: var(--cc-violet-d); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cc-night); }
img { max-width: 100%; }
::selection { background: var(--cc-lime); color: var(--cc-night); }
:focus-visible { outline: 3px solid var(--cc-violet); outline-offset: 2px; }

/* ---------- Photo frames ---------- */
.ph { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--cc-night-2), var(--cc-violet) 60%, var(--cc-lime)); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
img.img-missing { opacity: 0; }
.ph:has(img.img-missing)::after { content: "\F42A"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: rgba(255,255,255,.55); }

/* ---------- Generic ---------- */
.sec { padding: 100px 0; }
.sec-sm { padding: 70px 0; }
.bg-lilac { background: var(--cc-lilac); }
.tagline { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--cc-violet-d); margin-bottom: 1rem; }
.tagline::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cc-lime); box-shadow: 0 0 0 3px rgba(200,241,60,.3); transform: rotate(45deg); }
.title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.1rem; }
.hl { position: relative; display: inline; color: var(--cc-violet); background: linear-gradient(transparent 62%, rgba(200,241,60,.65) 62%); padding: 0 .1em; }
.lead2 { font-size: 1.14rem; color: #5d5d78; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 14px; padding: .74rem 1.5rem; transition: all .25s; white-space: nowrap; }
.btn-lg { padding: .92rem 1.8rem; font-size: 1.05rem; }
.btn-lime { background: var(--cc-lime); color: var(--cc-night); border: 2px solid var(--cc-lime); }
.btn-lime:hover, .btn-lime:focus { background: #fff; border-color: #fff; color: var(--cc-night); transform: translateY(-2px); }
.btn-violet { background: var(--cc-violet); color: #fff; border: 2px solid var(--cc-violet); }
.btn-violet:hover, .btn-violet:focus { background: var(--cc-night); border-color: var(--cc-night); color: #fff; transform: translateY(-2px); }
.btn-violet-o { background: transparent; color: var(--cc-violet-d); border: 2px solid var(--cc-violet); }
.btn-violet-o:hover, .btn-violet-o:focus { background: var(--cc-violet); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border: 2px solid rgba(255,255,255,.3); }
.btn-ghost:hover, .btn-ghost:focus { background: #fff; color: var(--cc-night); border-color: #fff; }
@media (max-width: 575.98px) { .btn { white-space: normal; } }

/* ---------- Top bar + header ---------- */
.cc-top { background: var(--cc-night-3); color: rgba(255,255,255,.7); font-size: .88rem; padding: .45rem 0; }
.cc-top a { color: rgba(255,255,255,.8); }
.cc-top a:hover { color: var(--cc-lime); }
.cc-top i { color: var(--cc-lime); margin-right: .4rem; }
.credit-head { position: sticky; top: 0; z-index: 1030; background: var(--cc-night); transition: box-shadow .3s; }
.credit-head.scrolled { box-shadow: 0 12px 30px rgba(11,11,31,.35); }
.credit-head .navbar { padding: .85rem 0; }
.brand-logo { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; font-family: var(--cc-head); font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; color: #fff; line-height: 1; }
.brand-logo:hover { color: #fff; }
.brand-logo .mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--cc-violet), var(--cc-violet-l)); color: var(--cc-lime); font-size: 1.15rem; }
.nav-pillbox { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: .3rem; }
.credit-head .nav-link { font-weight: 600; color: rgba(255,255,255,.78); padding: .48rem .95rem !important; border-radius: 12px; white-space: nowrap; }
.credit-head .nav-link:hover { color: #fff; }
.credit-head .nav-link.active { color: var(--cc-night); background: var(--cc-lime); }
.navbar-toggler { border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1.5rem; width: 46px; height: 46px; border-radius: 12px; padding: 0; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(200,241,60,.5); }
@media (min-width: 992px) { .credit-head .navbar-toggler { display: none; } }
@media (max-width: 991.98px) { .credit-head .navbar-collapse { padding: 1rem 0; } .nav-pillbox { margin-bottom: .2rem; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .credit-head .nav-link { padding: .45rem .6rem !important; font-size: .95rem; } .credit-head .btn-lime { display: none; } }
@media (max-width: 400px) { .brand-logo { font-size: .98rem; } .brand-logo .mark { width: 36px; height: 36px; flex-basis: 36px; } }

/* ---------- Hero ---------- */
.cc-hero { position: relative; overflow: hidden; background: var(--cc-night); padding: 80px 0 110px; color: rgba(255,255,255,.78); }
.cc-hero::before { content: ""; position: absolute; width: 640px; height: 640px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(106,76,246,.55), transparent 65%); pointer-events: none; }
.cc-hero::after { content: ""; position: absolute; width: 520px; height: 520px; left: -220px; bottom: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(200,241,60,.18), transparent 65%); pointer-events: none; }
.cc-hero .container { position: relative; z-index: 1; }
.cc-hero .tagline { color: var(--cc-lime); }
.cc-hero h1 { color: #fff; font-size: clamp(2.3rem, 4.8vw, 3.9rem); margin-bottom: 1.3rem; }
.cc-hero h1 .hl { color: var(--cc-lime); background: none; padding: 0; }
.cc-hero .lead2 { color: rgba(255,255,255,.75); margin-bottom: 2rem; max-width: 560px; }
.hero-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.hero-trust li { display: flex; align-items: center; gap: .45rem; font-weight: 600; color: #fff; font-size: .95rem; }
.hero-trust i { color: var(--cc-lime); }
.hero-visual { position: relative; padding: 0 0 50px 60px; }
.hv-photo { border-radius: 32px; aspect-ratio: 9 / 8.2; box-shadow: 0 40px 80px rgba(0,0,0,.4); }
.cc-card { position: absolute; left: 0; bottom: 0; width: 300px; aspect-ratio: 1.586; border-radius: 20px; padding: 1.2rem 1.4rem; background: linear-gradient(135deg, #7d62ff, var(--cc-violet-d) 45%, #2a1a8f); color: #fff; box-shadow: 0 30px 60px rgba(11,11,31,.5), inset 0 1px 0 rgba(255,255,255,.3); transform: rotate(-8deg); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.cc-card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: rgba(200,241,60,.25); }
.cc-card-top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.cc-card-top i { transform: rotate(90deg); font-size: 1.2rem; opacity: .85; }
.chip-ic { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f4e9a6, #c9a74a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cc-card-num { font-family: var(--cc-head); letter-spacing: .12em; font-size: 1rem; position: relative; }
.cc-card-bot { display: flex; justify-content: space-between; align-items: center; font-family: var(--cc-head); font-size: .72rem; letter-spacing: .14em; position: relative; }
.cc-card-bot i { font-size: 1.4rem; color: var(--cc-lime); }
.hv-pill { position: absolute; right: -10px; top: 26px; display: inline-flex; align-items: center; gap: .5rem; background: var(--cc-lime); color: var(--cc-night); font-weight: 700; padding: .7rem 1.1rem; border-radius: 14px; box-shadow: 0 16px 34px rgba(0,0,0,.3); }
@media (max-width: 991.98px) { .hero-visual { max-width: 560px; margin: 0 auto; } .hv-pill { right: 10px; } }
@media (max-width: 575.98px) { .hero-visual { padding: 0 0 40px 20px; } .cc-card { width: 220px; padding: .9rem 1rem; border-radius: 16px; } .cc-card-num { font-size: .78rem; } .chip-ic { width: 32px; height: 24px; } .hv-pill { top: 14px; font-size: .9rem; } }

/* ---------- Marquee ---------- */
.marquee { background: var(--cc-lime); overflow: hidden; padding: 1.1rem 0; border-top: 1px solid rgba(0,0,0,.06); }
.marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee-set { display: flex; flex-shrink: 0; }
.marquee span { display: inline-flex; align-items: center; gap: 1rem; padding: 0 1.6rem; font-family: var(--cc-head); font-weight: 600; font-size: 1.15rem; color: var(--cc-night); white-space: nowrap; }
.marquee span i { color: var(--cc-violet); font-size: 1rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Bento services ---------- */
.bento { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--cc-lilac); border-radius: 26px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.bento:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(82,54,224,.18); }
.bento > .ph { height: 240px; flex: 0 0 auto; }
.bento .ph img { transition: transform .6s; }
.bento:hover .ph img { transform: scale(1.06); }
.b-txt { padding: 1.7rem 1.8rem 1.9rem; display: flex; flex-direction: column; align-items: flex-start; flex: 1; height: 100%; }
.b-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 1rem; }
.b-top .ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--cc-violet); color: #fff; font-size: 1.3rem; }
.b-top .no { font-family: var(--cc-head); font-weight: 600; font-size: .9rem; color: var(--cc-violet-d); background: #fff; border-radius: 999px; padding: .25rem .8rem; }
.bento h3 { font-size: 1.32rem; margin-bottom: .55rem; }
.bento p { flex: 1; margin-bottom: 1.3rem; }
.bento .btn { white-space: normal; text-align: left; }
.bento.dark { background: var(--cc-night); color: rgba(255,255,255,.75); }
.bento.dark h3 { color: #fff; }
.bento.dark .b-top .ic { background: var(--cc-lime); color: var(--cc-night); }
.bento.dark .b-top .no { background: rgba(255,255,255,.1); color: var(--cc-lime); }
.bento.wide .ph { height: 100%; min-height: 300px; }
@media (max-width: 767.98px) { .bento.wide .ph { min-height: 220px; } }

/* ---------- About ---------- */
.about-stack { position: relative; padding: 0 0 90px 0; }
.about-stack .a { border-radius: 28px; aspect-ratio: 9 / 7; width: 86%; }
.about-stack .b { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 6 / 4.6; border-radius: 22px; border: 8px solid var(--cc-lilac); }
.about-tabs { gap: .4rem; background: #fff; border-radius: 16px; padding: .35rem; display: inline-flex; flex-wrap: wrap; margin-bottom: 1.4rem; box-shadow: 0 8px 22px rgba(82,54,224,.08); }
.about-tabs .nav-link { color: var(--cc-text); font-weight: 600; border-radius: 12px; padding: .5rem 1rem; }
.about-tabs .nav-link.active { background: var(--cc-violet); color: #fff; }
.about-pane p { font-size: 1.08rem; }
.ok-list { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.ok-list li { position: relative; padding-left: 2.1rem; margin-bottom: .6rem; font-weight: 600; color: var(--cc-night); }
.ok-list li::before { content: "\F633"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .18rem; width: 24px; height: 24px; border-radius: 8px; background: var(--cc-lime); color: var(--cc-night); font-size: .9rem; display: grid; place-items: center; line-height: 1; }
@media (max-width: 575.98px) { .about-stack { padding-bottom: 60px; } .about-stack .a { width: 92%; } }

/* ---------- Utilization calculator ---------- */
.calc-dark { background: var(--cc-night); background-image: radial-gradient(circle at 90% 10%, rgba(106,76,246,.35), transparent 40%), radial-gradient(circle at 5% 95%, rgba(200,241,60,.12), transparent 35%); color: rgba(255,255,255,.75); }
.calc-dark .title { color: #fff; }
.calc-dark .hl { color: var(--cc-lime); background: none; }
.calc-dark .tagline { color: var(--cc-lime); }
.calc-dark .lead2 { color: rgba(255,255,255,.72); }
.util-card { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.u-in { padding: 2.2rem; }
.u-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: end; padding: 1rem 0; border-bottom: 1px dashed var(--cc-line); }
.u-row:first-child { padding-top: 0; }
.u-card { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--cc-head); font-size: .9rem; font-weight: 600; color: var(--cc-night); padding-bottom: .7rem; }
.u-card i { color: var(--cc-violet); font-size: 1.1rem; }
.u-in .form-label { font-size: .85rem; font-weight: 600; color: var(--cc-text); margin-bottom: .3rem; }
.u-in .input-group-text { background: var(--cc-lilac); color: var(--cc-violet-d); font-weight: 700; border-color: var(--cc-line); }
.u-fine { font-size: .85rem; color: #8a8aa3; margin: 1.2rem 0 0; }
.u-out { background: linear-gradient(160deg, var(--cc-violet), var(--cc-violet-d) 60%, #3b25b8); color: rgba(255,255,255,.85); padding: 2.2rem; height: 100%; display: flex; flex-direction: column; }
.u-out small { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.75); }
.u-status { font-size: .8rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; }
.u-status.good { background: var(--cc-lime); color: var(--cc-night); }
.u-status.mid { background: #ffd166; color: var(--cc-night); }
.u-status.high { background: #ff7a8a; color: var(--cc-night); }
.u-pct { font-family: var(--cc-head); font-weight: 700; font-size: clamp(2.8rem, 5vw, 3.8rem); color: #fff; line-height: 1.05; margin: .6rem 0 1rem; }
.u-meter { position: relative; height: 14px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: visible; }
.u-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cc-lime), #ffd166 50%, #ff7a8a); background-size: 300px 100%; transition: width .5s ease; }
.u-mark { position: absolute; top: -5px; width: 3px; height: 24px; background: #fff; border-radius: 2px; transform: translateX(-50%); }
.u-scale { position: relative; display: flex; justify-content: space-between; font-size: .78rem; margin-top: .4rem; color: rgba(255,255,255,.7); }
.u-scale .m30 { position: absolute; left: 30%; transform: translateX(-50%); font-weight: 700; color: #fff; }
.u-stats { display: grid; gap: .1rem; margin-top: 1.3rem; }
.u-stats div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.u-stats b { color: #fff; font-family: var(--cc-head); font-weight: 600; }
.u-note { margin: 1.2rem 0 0; color: #fff; font-size: .98rem; }
@media (max-width: 575.98px) { .u-in, .u-out { padding: 1.5rem 1.2rem; } .u-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .u-card { grid-column: 1 / -1; padding-bottom: 0; } }

/* ---------- Steps ---------- */
.step { position: relative; background: #fff; border: 1px solid var(--cc-line); border-radius: 24px; padding: 2rem 1.6rem 1.8rem; height: 100%; transition: border-color .3s, transform .3s, box-shadow .3s; overflow: hidden; }
.step:hover { border-color: var(--cc-violet); transform: translateY(-5px); box-shadow: 0 22px 44px rgba(82,54,224,.12); }
.step .n { position: absolute; right: 1.2rem; top: .4rem; font-family: var(--cc-head); font-weight: 700; font-size: 4.4rem; color: var(--cc-lilac); line-height: 1; }
.step i { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--cc-night); color: var(--cc-lime); font-size: 1.45rem; margin-bottom: 1.1rem; }
.step h3 { position: relative; font-size: 1.2rem; margin-bottom: .45rem; }
.step p { position: relative; margin: 0; }

/* ---------- Testimonial bubbles ---------- */
.bubble { margin: 0; }
.bubble blockquote { position: relative; background: #fff; border-radius: 26px 26px 26px 6px; padding: 1.7rem 1.8rem; margin: 0 0 1.1rem; box-shadow: 0 14px 34px rgba(82,54,224,.08); }
.bubble blockquote::after { content: ""; position: absolute; left: 0; bottom: -14px; width: 26px; height: 16px; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble.right blockquote { background: var(--cc-night); border-radius: 26px 26px 6px 26px; }
.bubble.right blockquote::after { left: auto; right: 0; background: var(--cc-night); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble.right blockquote p { color: rgba(255,255,255,.88); }
.bubble blockquote p { margin: .5rem 0 0; font-size: 1.08rem; color: var(--cc-night); }
.bubble .stars { color: #f5b301; font-size: .85rem; letter-spacing: .12em; }
.bubble.right .stars { color: var(--cc-lime); }
.bubble figcaption { display: flex; align-items: center; gap: .7rem; font-weight: 700; color: var(--cc-night); padding-left: .4rem; }
.bubble.right figcaption { justify-content: flex-end; padding: 0 .4rem 0 0; }
.bubble .av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--cc-violet); color: #fff; font-family: var(--cc-head); font-size: .85rem; }
.bubble.right .av { background: var(--cc-lime); color: var(--cc-night); }

/* ---------- Blog cards ---------- */
.post-card { position: relative; display: block; border-radius: 26px; overflow: hidden; aspect-ratio: 8 / 9.4; color: #fff; isolation: isolate; }
.post-card .ph { position: absolute; inset: 0; z-index: -2; }
.post-card .ph img { transition: transform .7s; }
.post-card:hover .ph img { transform: scale(1.07); }
.post-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,18,43,.05) 20%, rgba(18,18,43,.92) 72%); }
.post-card .chip { position: absolute; left: 1.3rem; top: 1.3rem; background: var(--cc-lime); color: var(--cc-night); font-size: .78rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.post-card .pc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem; display: block; }
.post-card h3 { color: #fff; font-size: 1.22rem; margin-bottom: .5rem; }
.post-card .ex { display: block; color: rgba(255,255,255,.8); font-size: .95rem; margin-bottom: .8rem; }
.post-card .go { color: var(--cc-lime); font-weight: 700; }
.post-card .go i { display: inline-block; transition: transform .25s; }
.post-card:hover .go i { transform: translateX(5px); }
.post-card:hover { color: #fff; }
@media (max-width: 575.98px) { .post-card { aspect-ratio: 4 / 5; } }

/* ---------- FAQ ---------- */
.faq-help { background: var(--cc-night); color: rgba(255,255,255,.75); border-radius: 24px; padding: 1.8rem; margin-top: 1.4rem; }
.faq-help i { font-size: 2rem; color: var(--cc-lime); display: block; margin-bottom: .6rem; }
.faq-help b { display: block; color: #fff; font-family: var(--cc-head); font-weight: 600; }
.faq-help a:not(.btn) { color: var(--cc-lime); font-weight: 700; font-size: 1.15rem; }
.acc-cc .accordion-item { border: 0; border-radius: 20px !important; margin-bottom: .9rem; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(82,54,224,.06); }
.acc-cc .accordion-button { font-family: var(--cc-head); font-weight: 500; font-size: 1.02rem; color: var(--cc-night); background: #fff; padding: 1.25rem 1.5rem; box-shadow: none; gap: 1rem; }
.acc-cc .accordion-button:not(.collapsed) { color: var(--cc-violet-d); }
.acc-cc .accordion-button::after { background-image: none; content: "\F64D"; font-family: "bootstrap-icons"; width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: var(--cc-lilac); color: var(--cc-violet-d); font-size: 1rem; transition: transform .3s; margin-left: auto; }
.acc-cc .accordion-button:not(.collapsed)::after { content: "\F63B"; transform: none; background: var(--cc-lime); color: var(--cc-night); }
.acc-cc .accordion-button:focus { box-shadow: none; }
.acc-cc .accordion-body { padding: 0 1.5rem 1.4rem; }

/* ---------- Newsletter ---------- */
.news-dark { background: var(--cc-night); background-image: radial-gradient(circle at 100% 0, rgba(106,76,246,.45), transparent 45%); border-radius: 28px; padding: 3rem; color: rgba(255,255,255,.75); }
.news-dark h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .5rem; }
.news-dark .hl { color: var(--cc-lime); background: none; }
.news-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--cc-lime); color: var(--cc-night); font-size: 1.7rem; }
.news-field { display: flex; gap: .5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: .4rem; }
.news-field .form-control { background: transparent; border: 0; color: #fff; box-shadow: none; }
.news-field .form-control::placeholder { color: rgba(255,255,255,.55); }
@media (max-width: 575.98px) { .news-dark { padding: 2rem 1.3rem; } .news-field { flex-direction: column; } }

/* ---------- CTA ---------- */
.cta-violet { position: relative; overflow: hidden; padding: 90px 0; background: var(--cc-violet-d); color: rgba(255,255,255,.85); isolation: isolate; }
.cta-violet .ph.bg { position: absolute; inset: 0; z-index: -2; opacity: .25; }
.cta-violet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--cc-violet-d) 35%, rgba(82,54,224,.55)); }
.cta-violet .tagline { color: var(--cc-lime); }
.cta-violet h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

/* ---------- Page banner ---------- */
.cc-banner { position: relative; overflow: hidden; background: var(--cc-night); padding: 90px 0 90px; color: rgba(255,255,255,.75); isolation: isolate; }
.cc-banner .ph.side { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); z-index: -1; opacity: .9; }
.cc-banner::before { content: ""; position: absolute; width: 520px; height: 520px; left: -200px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(106,76,246,.45), transparent 65%); z-index: -1; }
.cc-banner h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: .9rem; }
.cc-banner.post h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cc-banner .lead2 { color: rgba(255,255,255,.75); }
.crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; margin-bottom: 1.1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); padding: .4rem .9rem; border-radius: 12px; }
.crumbs a { color: var(--cc-lime); }
.crumbs a:hover { color: #fff; }
.crumbs i { font-size: .7rem; color: rgba(255,255,255,.5); }
.crumbs .cur { color: #fff; }
@media (max-width: 991.98px) { .cc-banner .ph.side { width: 100%; clip-path: none; opacity: .18; } .cc-banner { padding: 70px 0; } }

/* ---------- Services page ---------- */
.svc-panel { background: var(--cc-lilac); border-radius: 28px; overflow: hidden; margin-bottom: 2rem; scroll-margin-top: 110px; }
.svc-panel .ph { height: 100%; min-height: 300px; }
.svc-panel .txt { padding: 2.6rem; }
.svc-panel h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.svc-panel:nth-child(even) { background: #fff; border: 1px solid var(--cc-line); }
@media (max-width: 575.98px) { .svc-panel .txt { padding: 1.7rem 1.3rem; } .svc-panel .ph { min-height: 220px; } }

/* ---------- About page ---------- */
.mv-card { background: #fff; border-radius: 26px; padding: 2.4rem; height: 100%; }
.mv-card .ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--cc-violet); color: #fff; font-size: 1.5rem; margin-bottom: 1.1rem; }
.mv-card h3 { font-size: 1.5rem; }
.mv-card.dark { background: var(--cc-night); color: rgba(255,255,255,.78); }
.mv-card.dark h3 { color: #fff; }
.mv-card.dark .ic { background: var(--cc-lime); color: var(--cc-night); }
.val-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 1.9rem 1.6rem; height: 100%; transition: border-color .3s, background .3s; }
.val-card:hover { border-color: var(--cc-lime); background: rgba(255,255,255,.08); }
.val-card i { font-size: 1.8rem; color: var(--cc-lime); display: block; margin-bottom: .8rem; }
.val-card h3 { color: #fff; font-size: 1.2rem; }
.val-card p { margin: 0; }

/* ---------- Blog post ---------- */
.post-photo { border-radius: 26px; aspect-ratio: 2 / 1; margin-bottom: 2.2rem; }
.post-text p { margin-bottom: 1.35rem; font-size: 1.1rem; }
.post-text h2 { font-size: 1.6rem; margin: 2.2rem 0 1rem; }
.post-text .cc-note { position: relative; background: var(--cc-lilac); border-left: 6px solid var(--cc-lime); border-radius: 0 20px 20px 0; padding: 1.5rem 1.6rem 1.5rem 4.4rem; font-weight: 600; font-size: 1.12rem; color: var(--cc-night); margin: 2rem 0; }
.post-text .cc-note::before { content: "\F46B"; font-family: "bootstrap-icons"; position: absolute; left: 1.3rem; top: 1.3rem; width: 38px; height: 38px; border-radius: 12px; background: var(--cc-violet); color: #fff; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; }
.post-text a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.post-pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--cc-line); padding-top: 1.8rem; margin-top: 2.4rem; }
.side-box { background: var(--cc-lilac); border-radius: 24px; padding: 1.8rem; margin-bottom: 1.6rem; }
.side-box h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.side-box .sp { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; color: var(--cc-night); font-weight: 600; line-height: 1.35; }
.side-box .sp:last-child { margin-bottom: 0; }
.side-box .sp:hover { color: var(--cc-violet-d); }
.side-box .sp .ph { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 16px; }
.side-box ul { list-style: none; padding: 0; margin: 0; }
.side-box li a { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px dashed rgba(82,54,224,.2); color: var(--cc-night); font-weight: 600; }
.side-box li a i { color: var(--cc-violet); }
.side-box li:last-child a { border-bottom: 0; }
.side-box li a:hover { color: var(--cc-violet-d); }
.side-box.dark { background: var(--cc-night); color: rgba(255,255,255,.78); }
.side-box.dark h3 { color: #fff; }

/* ---------- Contact ---------- */
.contact-stack { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.c-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--cc-lilac); border-radius: 20px; padding: 1.3rem 1.4rem; }
.c-item > i { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; background: var(--cc-night); color: var(--cc-lime); font-size: 1.2rem; }
.c-item h3 { font-size: 1rem; margin-bottom: .2rem; }
.c-item p { margin: 0; }
.c-item a { font-weight: 700; overflow-wrap: anywhere; }
.map-frame { flex: 1; min-height: 260px; border-radius: 20px; overflow: hidden; border: 1px solid var(--cc-line); }
.map-frame iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }
.form-box { background: #fff; border: 1px solid var(--cc-line); border-radius: 28px; padding: 2.5rem; box-shadow: 0 24px 50px rgba(82,54,224,.08); height: 100%; }
.form-box .form-label { font-weight: 600; color: var(--cc-night); }
.form-control, .form-select { border-radius: 12px; border-color: #d9d5f0; padding: .74rem 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--cc-violet); box-shadow: 0 0 0 .2rem rgba(106,76,246,.15); }
.form-check-input:checked { background-color: var(--cc-violet); border-color: var(--cc-violet); }
@media (max-width: 575.98px) { .form-box { padding: 1.7rem 1.2rem; } }
.unsub-ic { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; display: grid; place-items: center; background: var(--cc-violet); color: #fff; font-size: 1.5rem; }
.rounded-photo { border-radius: 24px; aspect-ratio: 9 / 5.2; }

/* ---------- Form status ---------- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; margin-top: 1rem; padding: .85rem 1.1rem; border-radius: 14px; font-weight: 600; font-size: .95rem; }
.form-status.show { display: block; }
.form-status.success { background: #edf9d2; color: #3d5a00; border: 1px solid #d3ef8c; }
.form-status.error { background: #ffe9ec; color: #a1172c; border: 1px solid #ffc5ce; }

/* ---------- Legal ---------- */
.legal-nav { position: sticky; top: 110px; background: var(--cc-lilac); border-radius: 22px; padding: 1.6rem; }
.legal-nav h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.legal-nav a { display: flex; gap: .6rem; padding: .38rem 0; color: var(--cc-night); font-weight: 600; font-size: .95rem; }
.legal-nav a span { color: var(--cc-violet); font-weight: 700; }
.legal-nav a:hover { color: var(--cc-violet-d); }
@media (max-width: 1199.98px) { .legal-nav { position: static; } }
.legal-body h2 { font-size: 1.4rem; margin: 2.2rem 0 .9rem; scroll-margin-top: 110px; display: flex; align-items: center; gap: .8rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h2 .n { font-size: .8rem; background: var(--cc-lime); color: var(--cc-night); padding: .3rem .55rem; border-radius: 8px; }
.legal-body ul { padding-left: 1.3rem; }

/* ---------- Footer ---------- */
.foot { background: var(--cc-night-3); color: rgba(255,255,255,.65); padding: 80px 0 0; font-size: .98rem; }
.foot h4 { color: #fff; font-size: 1rem; margin-bottom: 1.2rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .55rem; }
.foot a { color: rgba(255,255,255,.72); }
.foot a:hover { color: var(--cc-lime); }
.foot .cl { display: flex; gap: .7rem; align-items: flex-start; overflow-wrap: anywhere; }
.foot .cl i { color: var(--cc-lime); margin-top: .2rem; }
.foot-label { color: #fff; font-weight: 600; }
.foot-field { display: flex; gap: .4rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: .35rem; }
.foot-field .form-control { background: transparent; border: 0; color: #fff; box-shadow: none; }
.foot-field .form-control::placeholder { color: rgba(255,255,255,.5); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 60px; padding: 1.4rem 0; font-size: .92rem; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.3rem; }
@media (max-width: 767.98px) { .foot-legal { justify-content: center; } }

/* ---------- Back to top ---------- */
.to-top { position: fixed; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 14px; border: 0; background: var(--cc-lime); color: var(--cc-night); font-size: 1.2rem; z-index: 1040; box-shadow: 0 10px 24px rgba(11,11,31,.3); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .3s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--cc-violet); color: #fff; }

/* ---------- Reveal ---------- */
.pop-in { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .7s ease, transform .7s ease; }
.pop-in.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pop-in { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } }

@media (max-width: 767.98px) {
  .sec { padding: 70px 0; }
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}