/* =========================================================================
   ClickCapital — ELITE LAYER  (loaded last on every page)
   Editorial-grade refinement: Fraunces display serif, refined type scale,
   unified card language, deeper atmosphere, glass nav, premium dark bands.
   Additive + override only. Never hides content. Respects reduced motion.
   ========================================================================= */

:root{
  /* refined palette depth */
  --ink:#081411;
  --ink-2:#0C201B;
  --text:#16332D;
  --muted:#587570;
  --bg:#F6FBF8;
  --line:#E2EEE8;
  --line-2:#D3E5DD;
  /* serif display */
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  /* elevated shadow system */
  --sh-sm:0 1px 2px rgba(8,20,17,.05),0 2px 6px rgba(8,20,17,.04);
  --sh:0 2px 4px rgba(8,20,17,.04),0 10px 24px -8px rgba(8,20,17,.10),0 24px 48px -20px rgba(8,20,17,.10);
  --sh-lg:0 2px 6px rgba(8,20,17,.05),0 18px 40px -14px rgba(8,20,17,.16),0 44px 90px -30px rgba(10,40,34,.24);
  --sh-green:0 10px 24px -8px rgba(23,138,100,.38),0 24px 52px -16px rgba(39,168,125,.34);
}

/* ---------- global type: editorial serif display ---------- */
body{font-feature-settings:"ss01" on,"cv05" on;letter-spacing:.001em}
h1,h2{
  font-family:var(--serif);
  font-weight:560;
  font-variation-settings:"opsz" 110;
  letter-spacing:-.022em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,5.6vw,4.45rem)}
h2{font-size:clamp(2.05rem,3.9vw,3.15rem)}
h1 em,h2 em,.hero h1 .w.g{
  font-family:var(--serif);font-style:italic;font-weight:520;
  font-variation-settings:"opsz" 130;
}
h3,h4{letter-spacing:-.012em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.66;color:var(--muted);font-weight:450}
.section-head{margin-bottom:60px}
.section{padding:106px 0}
.section--tight{padding:66px 0}

/* gradient words: deep green → teal (calmer, richer than lime) */
.grad-text,.hero h1 .w.g,.phero h1 .g,.about-hero h1 .g{
  background:linear-gradient(105deg,#0E5E45 0%,#1C9A70 45%,#2FB68C 78%,#3FC9A4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cvx h2.sec{font-family:var(--serif);font-weight:560;letter-spacing:-.02em}
.cvx h2.sec em{font-weight:520}

/* eyebrow: quieter, wider, more couture */
.eyebrow,.cvx .eyebrow{
  font-size:.72rem;letter-spacing:.22em;font-weight:700;color:#1B8463;gap:10px;
}
.eyebrow::before,.cvx .eyebrow::before{width:26px;height:1.5px;background:linear-gradient(90deg,#2FB68C,#A4EFD7)}
.eyebrow--center::after{width:26px;height:1.5px;background:linear-gradient(90deg,#A4EFD7,#2FB68C)}

/* ---------- atmosphere: calmer, deeper ---------- */
.atmos{background:linear-gradient(180deg,#F2FAF6,#F6FBF8 42%,#F7FBFA)}
.atmos .mesh{opacity:.34}
.atmos .m3{opacity:.16}
.atmos .grain{opacity:.05}
.hero .hero-bg{opacity:.42}

/* ---------- header: floating glass capsule ---------- */
.site-header{padding-top:6px}
.site-header .nav{height:76px}
.site-header.scrolled{background:transparent;box-shadow:none;backdrop-filter:none}
.site-header.scrolled .nav{
  background:rgba(255,255,255,.66);
  backdrop-filter:saturate(190%) blur(20px);
  -webkit-backdrop-filter:saturate(190%) blur(20px);
  box-shadow:0 1px 1px rgba(8,20,17,.04),0 12px 34px -16px rgba(8,20,17,.22),inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -1px 0 rgba(8,20,17,.03);
  height:62px;margin-top:8px;border-radius:999px;padding:0 12px 0 22px;
}
.nav-links a{font-size:.95rem;letter-spacing:.002em}
.nav-links a::after{height:1.6px;bottom:-3px}
.nav-phone{font-size:.95rem}

/* ---------- buttons: jewel finish ---------- */
.btn{font-weight:700;letter-spacing:.004em}
.btn-primary{
  background:linear-gradient(160deg,#2FB68C 0%,#1FA379 52%,#15885F 100%)!important;
  background-size:100%!important;
  color:#F3FFFA!important;
  text-shadow:0 1px 0 rgba(6,46,33,.18);
  box-shadow:var(--sh-green),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(6,46,33,.22);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background-position:0!important;
  box-shadow:0 14px 30px -8px rgba(23,138,100,.46),0 30px 64px -18px rgba(39,168,125,.42),inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(6,46,33,.22);
}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:rgba(255,255,255,.85);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1.4px var(--line-2),0 1px 2px rgba(8,20,17,.05)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #2FB68C,0 10px 24px -10px rgba(23,138,100,.25)}
.btn-dark{box-shadow:0 10px 26px -10px rgba(8,20,17,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-lg{padding:20px 36px}

/* ---------- hero ---------- */
.hero{padding:64px 0 96px}
.hero h1{margin-bottom:24px}
.hero .lead{max-width:540px;margin-bottom:34px}
.hero-assure span{font-size:.93rem}
.hero-photo{border-radius:30px}
.hero-photo::after{
  border-radius:30px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 -90px 90px -60px rgba(6,30,24,.38),0 50px 100px -40px rgba(8,20,17,.5);
}
.float-card{border:1px solid rgba(255,255,255,.8);box-shadow:var(--sh-lg)}
.quote-card{border:1px solid rgba(255,255,255,.85);box-shadow:var(--sh-lg)}
.qc-amt{font-variation-settings:"opsz" 90;font-weight:580}
.live-badge{box-shadow:var(--sh-sm),inset 0 0 0 1px rgba(8,20,17,.04)}

/* deals ticker: glassier */
.deals{background:rgba(255,255,255,.62);backdrop-filter:blur(8px);border-color:var(--line)}
.deal{font-size:.875rem}
.deal .dot{box-shadow:0 0 0 3px rgba(56,191,148,.16)}

/* ---------- marquee logos: uniform white panel chips, rounded ---------- */
.mq-item{color:#6B837D;font-size:1.08rem;filter:grayscale(1);opacity:.8;transition:filter .35s,opacity .35s,transform .25s}
.mq-item:hover{filter:none;opacity:1}
.mq-item img.mq-real{
  height:64px;width:auto;max-width:150px;object-fit:contain;
  background:#fff;border-radius:14px;padding:9px 14px;
  box-shadow:inset 0 0 0 1px rgba(8,20,17,.07),0 2px 8px rgba(8,20,17,.05);
}
.lstrip img{
  height:56px;max-width:130px;object-fit:contain;
  background:#fff;border-radius:12px;padding:8px 12px;
  box-shadow:inset 0 0 0 1px rgba(8,20,17,.07),0 2px 8px rgba(8,20,17,.05);
  filter:grayscale(1);opacity:.85;transition:.3s;
}
.lstrip img:hover{filter:none;opacity:1}

/* ---------- product hero visual: cinematic photo layer ---------- */
.pvisual .pv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.pvisual .pv-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,23,19,.08),rgba(9,23,19,.28) 45%,rgba(9,23,19,.82))}
.pvisual .pv-tag,.pvisual .pv-card{z-index:3}
.pvisual .pv-art{z-index:2}

/* home gallery photo tiles */
.cvx .prodart{position:relative}
.cvx .prodart img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cvx .prodcard:hover .prodart img{transform:scale(1.05)}
.mq::before{background:linear-gradient(90deg,var(--bg) 18%,transparent)}
.mq::after{background:linear-gradient(270deg,var(--bg) 18%,transparent)}

/* ---------- unified card language ---------- */
.prod,.feat,.tst,.price,.step,.pfeat,.value,.team-card,.contact-card,
.cvx .prodcard,.cvx .feat,.pstat,.mock,.trust-card{
  border-radius:22px;
}
.prod,.feat,.tst,.price,.step,.pfeat,.value,.team-card,.cvx .prodcard,.cvx .feat{
  border:1px solid rgba(13,42,36,.075);
  box-shadow:var(--sh-sm);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s cubic-bezier(.2,.7,.2,1),border-color .32s;
}
.prod:hover,.feat:hover,.tst:hover,.pfeat:hover,.team-card:hover,.cvx .prodcard:hover{
  transform:translateY(-6px);
  border-color:rgba(47,182,140,.34);
  box-shadow:var(--sh-lg);
}
.price:hover{transform:translateY(-7px)}
.price.feat{border:1px solid rgba(47,182,140,.55)}
/* hairline gradient crown on hover */
.feat,.pfeat,.tst,.cvx .prodcard{position:relative;overflow:hidden}
.feat::before,.pfeat::before,.tst::before,.cvx .prodcard::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#2FB68C 30%,#3FC9A4 70%,transparent);
  opacity:0;transition:opacity .35s;
}
.feat:hover::before,.pfeat:hover::before,.tst:hover::before,.cvx .prodcard:hover::before{opacity:1}

/* product range chips & numerals: tabular + serif amounts */
.prod-range,.pp-amt,.pstat .v,.stat .num,.bignum .bn-v,.price .pr-amt,
.fc-title,.app-offer .ao-amt,.app-approved .aa-t b,.tick-chip .tc-n{
  font-variant-numeric:tabular-nums;
}
.pp-amt,.price .pr-amt{font-weight:580}
.bignum .bn-v{
  font-weight:560;
  background:linear-gradient(165deg,#081411 18%,#15885F 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* steps */
.step-n{box-shadow:var(--sh-green),inset 0 1px 0 rgba(255,255,255,.35)}
.pstep .sn{background:linear-gradient(150deg,#0C201B,#163A30);box-shadow:0 8px 18px -8px rgba(8,20,17,.4)}

/* ---------- dark bands: deep botanical green + aurora ---------- */
.statband{
  background:
    radial-gradient(900px 420px at 86% -34%,rgba(47,182,140,.28),transparent 62%),
    radial-gradient(620px 360px at 4% 120%,rgba(64,202,186,.14),transparent 60%),
    linear-gradient(140deg,#091713 0%,#0C231D 58%,#0A1B16 100%);
  border-radius:30px;
  box-shadow:0 40px 90px -38px rgba(8,20,17,.55),inset 0 1px 0 rgba(255,255,255,.06);
}
.dark{
  background:
    radial-gradient(820px 460px at 10% -22%,rgba(47,182,140,.2),transparent 60%),
    radial-gradient(700px 420px at 96% 112%,rgba(11,155,229,.08),transparent 60%),
    linear-gradient(150deg,#091713 0%,#0B211B 100%);
}
.trust-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.075);backdrop-filter:blur(4px);transition:border-color .3s,background .3s,transform .3s}
.trust-card:hover{border-color:rgba(95,224,179,.3);background:rgba(255,255,255,.06);transform:translateY(-3px)}
.bigcta{
  border-radius:32px;
  background:
    radial-gradient(760px 400px at 16% -10%,rgba(63,201,164,.4),transparent 60%),
    radial-gradient(560px 360px at 92% 108%,rgba(255,55,117,.22),transparent 60%),
    linear-gradient(150deg,#091713,#0C231D 70%,#0A1B16);
  box-shadow:0 50px 110px -44px rgba(8,20,17,.6);
}
.bigcta h2{font-weight:540}
.bigcta .shimmer{font-style:italic;font-weight:520}
.cvx .stage{border-radius:32px}
.cta-band{
  border-radius:30px;
  background:linear-gradient(125deg,#0E6B4C,#1C9A70 55%,#2FB68C);
  box-shadow:0 36px 80px -32px rgba(14,107,76,.55);
}

/* ---------- testimonials ---------- */
.tst p{font-size:1.02rem;line-height:1.68}
.quote-mark{font-family:var(--serif);font-style:italic;color:#DCF3E9}
.tst-av{box-shadow:0 0 0 3px #fff,0 4px 12px rgba(8,20,17,.16)}

/* press names */
.press-row .pname{font-weight:520;font-style:italic;font-size:1.42rem;color:#86988F;opacity:.62}
.press-row .pname:hover{opacity:1;color:#0C201B}

/* ---------- FAQ ---------- */
.faq{border-radius:18px;border-color:rgba(13,42,36,.08)}
.faq summary{padding:22px 26px;font-size:1.07rem}
.faq[open]{border-color:rgba(47,182,140,.3);box-shadow:0 14px 36px -18px rgba(8,20,17,.16)}
.faq .ans{line-height:1.7}

/* ---------- product pages ---------- */
.phero h1{font-weight:560}
.pvisual{border-radius:30px;box-shadow:0 44px 96px -38px rgba(8,20,17,.5)}
.pvisual .pv-card{border-radius:18px;border:1px solid rgba(255,255,255,.8)}
.whofor-img,.story-grid img{border-radius:26px;box-shadow:var(--sh-lg)}
.pintro p{font-size:1.14rem;line-height:1.78}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#08120F,#060E0C);padding:80px 0 32px}
.footer .f-about{line-height:1.7}
.footer h4{letter-spacing:.16em;font-size:.78rem;color:#CFE7DD}
.footer ul a{transition:color .2s,padding-left .2s}
.footer ul a:hover{color:#5FE0B3;padding-left:3px}
.f-social a{border:1px solid rgba(255,255,255,.07)}
.news{border-radius:28px;background:linear-gradient(130deg,#0E6B4C,#1C9A70 60%,#27A87D);box-shadow:0 30px 70px -28px rgba(14,107,76,.5)}
.news input:focus{box-shadow:0 0 0 4px rgba(255,255,255,.35),var(--sh)}

/* ---------- forms / app pages ---------- */
.cform input,.cform textarea,.cform select{border-radius:14px;border-color:var(--line-2)}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:#2FB68C;box-shadow:0 0 0 4px rgba(47,182,140,.18)}

/* ---------- mockups: crisper chrome ---------- */
.appwin{border-radius:20px;border-color:rgba(13,42,36,.08);box-shadow:var(--sh-lg)}
.mock{border-radius:24px}
.mock-search{border-radius:14px;box-shadow:0 0 0 4px rgba(47,182,140,.16)}

/* ---------- micro-interactions & accessibility ---------- */
.btn,.ptab,.faq summary,.nav-links a{ -webkit-tap-highlight-color:transparent }
::selection{background:rgba(47,182,140,.24);color:#081411}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid #1C9A70;outline-offset:3px;border-radius:6px;
}
img{-webkit-user-drag:none}

/* scroll progress: slimmer, calmer */
#cc-progress{height:2px;background:linear-gradient(90deg,#0E6B4C,#2FB68C,#3FC9A4);box-shadow:none}

/* cursor follower: subtler */
.cursor-follow{border-width:1.5px;opacity:.55}

/* ---------- responsive refinement ---------- */
@media (max-width:980px){
  .section{padding:80px 0}
  .hero{padding:40px 0 72px}
  h1{font-size:clamp(2.35rem,8vw,3.2rem)}
  .site-header.scrolled .nav{margin-top:6px}
}
@media (max-width:560px){
  .section{padding:64px 0}
  .section-head{margin-bottom:40px}
  .statband,.bigcta,.cta-band{border-radius:24px}
  .btn-lg{padding:18px 28px;font-size:1.02rem}
}

/* ---------- Framer-style motion layer (activated by motion.js) ---------- */
.mx-on .mx-head{
  opacity:0;filter:blur(10px);transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
}
.mx-on .mx-head.mx-in{opacity:1;filter:blur(0);transform:none}
.mx-on .mx-card{
  opacity:0;transform:translateY(38px) scale(.965);
  transition:opacity .8s cubic-bezier(.16,.84,.3,1),transform .8s cubic-bezier(.16,.84,.3,1);
}
.mx-on .mx-card.mx-in{opacity:1;transform:none}
.mx-on .mx-panel{will-change:transform,opacity}
.mx-on .hero-copy,.mx-on .hero-visual{will-change:transform,opacity}
.mx-on .cvx .prodart img{will-change:transform}
/* hover lift must still win on cards that also entered via mx */
.mx-on .mx-card.mx-in:hover{transform:translateY(-6px)}
.mx-on .price.mx-card.mx-in:hover{transform:translateY(-7px)}

/* reduced motion: kill transforms entirely */
@media (prefers-reduced-motion:reduce){
  .prod:hover,.feat:hover,.tst:hover,.pfeat:hover,.team-card:hover,.cvx .prodcard:hover,
  .price:hover,.trust-card:hover,.btn-primary:hover{transform:none}
}

/* ---------- June Special announcement bar ---------- */
.cc-promo{position:relative;z-index:61;background:linear-gradient(90deg,#0E6B4C,#1FA379 58%,#2FB68C);
  color:#fff;text-align:center;font-family:var(--display,"Plus Jakarta Sans",sans-serif);
  font-size:.9rem;font-weight:600;padding:9px 42px;letter-spacing:.004em}
.cc-promo a{color:#fff;text-decoration:none;display:inline-flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap}
.cc-promo a:hover{text-decoration:underline}
.cc-promo .cc-promo-tag{background:#FF3775;color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(255,55,117,.35)}
.cc-promo .cc-promo-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:rgba(255,255,255,.82);font-size:19px;line-height:1;cursor:pointer;padding:4px 6px}
.cc-promo .cc-promo-x:hover{color:#fff}
@media(max-width:560px){.cc-promo{font-size:.8rem;padding:8px 36px}}