/* ============================================================
   ClicknGet Elements — base structural styles
   Colors / fonts / hover are overridable per-instance via the
   Elementor Style tab; this file only provides the skeleton.
   ============================================================ */

.cg-el{
  --cg-leaf:#82ac3d;
  --cg-forest:#0e6b2f;
  --cg-forest-deep:#0c5d28;
  --cg-ink:#0b1a10;
  --cg-slate:#4c5a48;
  --cg-mute:#6b7766;
  --cg-50:#f2f8e8;
  --cg-border:#e7ecdf;
  --cg-soft:#f6f9f1;
  --cg-font-title:'Recoleta','Georgia',serif;
  --cg-font-head:'Roboto Flex',system-ui,-apple-system,sans-serif;
  --cg-font-body:'Roboto Flex',system-ui,-apple-system,sans-serif;
  font-family:var(--cg-font-body);
  color:var(--cg-slate);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.cg-el *{ box-sizing:border-box; }
.cg-el h1,.cg-el h2,.cg-el h3,.cg-el h4{
  font-family:var(--cg-font-head); color:var(--cg-ink);
  margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:700;
}
/* Section / hero TITLES use Recoleta 700 ~48px (overridable in Style tab) */
.cg-el .cg-head h2,
.cg-el .cg-desc-title,
.cg-el .cg-hero h1,
.cg-el .cg-vision h2,
.cg-el .cg-cta h2{
  font-family:var(--cg-font-title);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}
.cg-el p{ margin:0; }
.cg-el a{ text-decoration:none; color:inherit; }
.cg-el img{ max-width:100%; display:block; }
.cg-el ul{ margin:0; padding:0; list-style:none; }

/* ---- shared heading block ---- */
.cg-head{ max-width:720px; margin:0 0 52px; }
.cg-head.cg-center{ margin-left:auto; margin-right:auto; text-align:center; }
.cg-eyebrow{
  font-family:var(--cg-font-head); font-weight:800; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cg-forest-deep);
  display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
}
.cg-eyebrow::before{ content:""; width:22px; height:3px; background:var(--cg-leaf); border-radius:3px; }
.cg-center .cg-eyebrow{ justify-content:center; }
.cg-head h2{ font-size:clamp(2rem,4.5vw,48px); letter-spacing:-.02em; line-height:1.1; }
.cg-head p{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--cg-mute); margin:18px 0 0; }

/* ---- generic button ---- */
.cg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--cg-font-head); font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease,
  background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cg-btn:hover{ transform:translateY(-2px); }
.cg-btn-primary{ background:var(--cg-forest); color:#fff; box-shadow:0 14px 30px -12px rgba(14,107,47,.45); }
.cg-btn-primary:hover{ background:var(--cg-forest-deep); color:#fff; }
.cg-btn-ghost{ background:#fff; color:var(--cg-ink); border-color:var(--cg-border); }
.cg-btn-ghost:hover{ border-color:var(--cg-leaf); color:var(--cg-forest-deep); }
.cg-btn-leaf{ background:var(--cg-leaf); color:#07371a; }
.cg-btn-light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.30); }
.cg-btn-light:hover{ background:rgba(255,255,255,.24); color:#fff; }

.cg-link{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--cg-font-head); font-weight:700; font-size:15px; color:var(--cg-forest-deep);
}
.cg-link svg{ width:17px; height:17px; transition:transform .2s ease; }
.cg-link:hover svg{ transform:translateX(4px); }

/* ---- icon chip ---- */
.cg-ic{
  width:54px; height:54px; border-radius:16px; background:var(--cg-50); color:var(--cg-forest-deep);
  display:grid; place-items:center; margin-bottom:20px; transition:background-color .2s ease, color .2s ease;
}
.cg-ic svg, .cg-ic i, .cg-ic img{ width:26px; height:26px; font-size:26px; }

/* ---- placeholder ---- */
.cg-ph{
  background:repeating-linear-gradient(45deg,#eef3e4 0,#eef3e4 11px,#e3ebd4 11px,#e3ebd4 22px);
  border:1px solid var(--cg-border); border-radius:26px; display:grid; place-items:center;
  color:#97a193; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; text-align:center; padding:16px;
}
.cg-ph span{ background:rgba(255,255,255,.82); padding:6px 12px; border-radius:8px; border:1px solid var(--cg-border); }

/* ============================================================
   HERO
   ============================================================ */
.cg-hero{ display:grid; grid-template-columns:1.06fr .94fr; gap:60px; align-items:center; }
.cg-hero .cg-pill{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--cg-border);
  border-radius:999px; padding:8px 16px; font-family:var(--cg-font-head); font-weight:700;
  font-size:13.5px; color:var(--cg-mute);
}
.cg-hero .cg-pill .cg-live{ width:8px; height:8px; border-radius:50%; background:var(--cg-leaf); box-shadow:0 0 0 4px rgba(130,172,61,.22); }
.cg-hero h1{ font-size:clamp(2.4rem,5.2vw,48px); font-weight:700; letter-spacing:-.02em; margin:22px 0 0; }
.cg-hero h1 .cg-accent, .cg-accent{ color:var(--cg-leaf); }
.cg-hero .cg-lede{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--cg-mute); margin:22px 0 0; line-height:1.6; }
.cg-hero .cg-hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.cg-hero .cg-stats{ display:flex; gap:14px; margin-top:42px; flex-wrap:wrap; }
.cg-hero .cg-stat{ background:#fff; border:1px solid var(--cg-border); border-radius:18px; padding:16px 20px; }
.cg-hero .cg-stat b{ font-family:var(--cg-font-head); font-weight:900; font-size:1.7rem; color:var(--cg-forest-deep); display:block; line-height:1; letter-spacing:-.03em; }
.cg-hero .cg-stat span{ font-size:13px; color:var(--cg-mute); }
.cg-hero-art{ position:relative; }
.cg-hero-art img{ width:100%; border-radius:26px; object-fit:cover; }
.cg-hero-art .cg-ph{ aspect-ratio:4/5; }

/* Hero without image — single column */
.cg-hero-noimg{ display:block; }
.cg-hero-noimg .cg-hero-copy{ max-width:820px; }
.cg-hero-noimg.cg-hero-center{ text-align:center; }
.cg-hero-noimg.cg-hero-center .cg-hero-copy{ margin:0 auto; }
.cg-hero-noimg.cg-hero-center .cg-hero-cta,
.cg-hero-noimg.cg-hero-center .cg-stats{ justify-content:center; }

/* ============================================================
   SERVICES GRID (bento)
   ============================================================ */
.cg-grid-services{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.cg-scard{
  background:#fff; border:1px solid var(--cg-border); border-radius:26px; padding:32px;
  display:flex; flex-direction:column; position:relative; overflow:hidden; grid-column:span 2;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cg-scard:hover{ transform:translateY(-6px); box-shadow:0 14px 36px -16px rgba(11,26,16,.2); }
.cg-scard.cg-span3{ grid-column:span 3; }
.cg-scard.cg-span6{ grid-column:span 6; }
.cg-scard h3{ font-size:1.36rem; }
.cg-scard p{ margin-top:11px; color:var(--cg-mute); font-size:15.5px; }
.cg-scard .cg-price-from{ font-family:var(--cg-font-head); font-weight:800; font-size:13px; color:#97a193; margin-top:18px; }
.cg-scard .cg-price-from b{ color:var(--cg-forest-deep); font-size:15px; }
.cg-scard .cg-link{ margin-top:22px; }
.cg-scard-img{ width:100%; aspect-ratio:16/10; border-radius:16px; object-fit:cover; margin-bottom:20px; }
.cg-scard.cg-cta-tile{ background:linear-gradient(155deg,#0c5d28,#07491f); color:#fff; justify-content:center; }
.cg-scard.cg-cta-tile h3{ color:#fff; }
.cg-scard.cg-cta-tile p{ color:rgba(255,255,255,.82); }
.cg-scard.cg-cta-tile .cg-link{ color:#fff; }
.cg-scard.cg-cta-tile::after{ content:""; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px; background:radial-gradient(circle,rgba(130,172,61,.4),transparent 70%); }

/* icon chip — soft variant override (light chip instead of filled) */
.cg-feat .cg-ic.cg-ic-soft{ background:var(--cg-50); color:var(--cg-forest-deep); box-shadow:none; }

/* ============================================================
   DESCRIPTION split ("The service")
   ============================================================ */
.cg-desc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.cg-desc-title{ font-size:clamp(1.8rem,4.5vw,48px); letter-spacing:-.02em; line-height:1.12; }
.cg-desc-body p{ color:var(--cg-mute); font-size:1.08rem; }
.cg-desc-body p + p{ margin-top:18px; }

/* ============================================================
   FEATURES (Why Us)
   ============================================================ */
.cg-grid-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cg-feat{ background:#fff; border:1px solid var(--cg-border); border-radius:26px; padding:30px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cg-feat:hover{ transform:translateY(-5px); box-shadow:0 14px 36px -16px rgba(11,26,16,.2); }
.cg-feat .cg-ic{ width:52px; height:52px; border-radius:15px; background:var(--cg-forest); color:#fff; box-shadow:0 14px 30px -12px rgba(14,107,47,.45); }
.cg-feat .cg-ic svg, .cg-feat .cg-ic i{ width:24px; height:24px; font-size:24px; }
.cg-feat h3{ font-size:1.16rem; }
.cg-feat p{ margin-top:10px; font-size:14.5px; color:var(--cg-mute); }

/* ---- Features layout variants ---- */
/* 1) Stacked card (default) — handled by base .cg-feat above. */

/* 2) Icon left (horizontal) */
.cg-fv-inline .cg-feat{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:6px; align-items:start; }
.cg-fv-inline .cg-feat .cg-ic{ grid-row:1 / span 2; margin-bottom:0; align-self:start; }
.cg-fv-inline .cg-feat h3{ grid-column:2; grid-row:1; }
.cg-fv-inline .cg-feat p{ grid-column:2; grid-row:2; margin-top:0; }

/* 3) Minimal line — no card, accent top rule */
.cg-fv-minimal .cg-feat{
  background:transparent; border:0; border-top:3px solid var(--cg-border);
  border-radius:0; padding:24px 4px 0; box-shadow:none;
}
.cg-fv-minimal .cg-feat:hover{ transform:none; box-shadow:none; border-top-color:var(--cg-leaf); }
.cg-fv-minimal .cg-feat .cg-ic{
  width:44px; height:44px; border-radius:12px; background:transparent;
  color:var(--cg-forest); box-shadow:none; margin-bottom:16px; padding:0;
  display:flex; align-items:center; justify-content:flex-start;
}
.cg-fv-minimal .cg-feat .cg-ic svg, .cg-fv-minimal .cg-feat .cg-ic i{ width:28px; height:28px; font-size:28px; }

/* ============================================================
   VISION band
   ============================================================ */
.cg-vision{ background:linear-gradient(150deg,#0c5d28,#07371a); color:#fff; border-radius:34px; padding:70px; position:relative; overflow:hidden; }
.cg-vision::after{ content:""; position:absolute; right:-90px; top:-90px; width:400px; height:400px; background:radial-gradient(circle,rgba(130,172,61,.22),transparent 70%); border-radius:50%; }
.cg-vision-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; position:relative; z-index:1; }
.cg-vision h2{ color:#fff; font-size:clamp(2rem,4.5vw,48px); letter-spacing:-.02em; }
.cg-vision .cg-eyebrow{ color:#c5dd97; }
.cg-vision p{ color:rgba(255,255,255,.86); margin-top:18px; font-size:1.1rem; }
.cg-vision-list{ margin-top:28px; display:grid; gap:14px; }
.cg-vision-list li{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.94); font-size:15.5px; }
.cg-vision-list .cg-vchk{ width:22px; height:22px; color:var(--cg-leaf); flex:none; margin-top:1px; }
.cg-vision-list .cg-vchk svg{ width:22px; height:22px; }

/* ============================================================
   CTA band
   ============================================================ */
.cg-cta{ background:#0b1a10; border-radius:34px; padding:80px 40px; text-align:center; position:relative; overflow:hidden; }
.cg-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(62% 120% at 50% 0%,rgba(14,107,47,.55),transparent 62%); }
.cg-cta::after{ content:""; position:absolute; left:-80px; bottom:-100px; width:300px; height:300px; background:radial-gradient(circle,rgba(130,172,61,.25),transparent 70%); }
.cg-cta > *{ position:relative; z-index:1; }
.cg-cta h2{ color:#fff; font-size:clamp(2rem,4.5vw,48px); }
.cg-cta p{ color:rgba(255,255,255,.72); margin:18px auto 0; max-width:580px; font-size:1.1rem; }
.cg-cta .cg-cta-btns{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.cg-grid-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cg-step{ padding-top:20px; border-top:3px solid var(--cg-border); transition:border-color .2s ease; }
.cg-step:hover{ border-color:var(--cg-leaf); }
.cg-step .cg-n{ font-family:var(--cg-font-head); font-weight:800; font-size:13px; color:var(--cg-forest); letter-spacing:.1em; }
.cg-step h3{ font-size:1.14rem; margin-top:12px; }
.cg-step p{ margin-top:8px; font-size:14.5px; color:var(--cg-mute); }

/* ============================================================
   IMAGE FRAME
   ============================================================ */
.cg-image{ position:relative; }
.cg-image img{ width:100%; border-radius:26px; object-fit:cover; display:block; }
.cg-image .cg-ph{ width:100%; }
.cg-image figcaption{ margin-top:14px; font-size:13.5px; color:var(--cg-mute); font-family:var(--cg-font-head); font-weight:600; text-align:center; }

/* ============================================================
   PRICING
   ============================================================ */
.cg-grid-pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.cg-pcard{ background:#fff; border:1px solid var(--cg-border); border-radius:26px; padding:36px 30px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.cg-pcard:hover{ transform:translateY(-4px); box-shadow:0 14px 36px -16px rgba(11,26,16,.2); }
.cg-pcard.cg-feat{ border:1.5px solid var(--cg-forest); position:relative; box-shadow:0 36px 80px -32px rgba(7,73,31,.34); transform:scale(1.03); }
.cg-pcard.cg-feat:hover{ transform:scale(1.03) translateY(-4px); }
.cg-pbadge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--cg-forest); color:#fff; font-family:var(--cg-font-head); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:7px 18px; border-radius:999px; box-shadow:0 14px 30px -12px rgba(14,107,47,.45); white-space:nowrap; }
.cg-ptier{ font-family:var(--cg-font-head); font-weight:800; font-size:1.3rem; color:var(--cg-ink); }
.cg-psub{ font-size:14px; color:var(--cg-mute); margin-top:5px; min-height:42px; }
.cg-pamt{ margin-top:20px; display:flex; align-items:baseline; gap:8px; }
.cg-pcur{ font-family:var(--cg-font-head); font-weight:800; font-size:1.1rem; color:var(--cg-mute); }
.cg-pnum{ font-family:var(--cg-font-head); font-weight:900; font-size:2.9rem; color:var(--cg-ink); letter-spacing:-.04em; line-height:1; }
.cg-pdiv{ height:1px; background:var(--cg-border); margin:26px 0; }
.cg-pfeats{ display:grid; gap:13px; flex:1; }
.cg-pfeats li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--cg-slate); }
.cg-pchk{ width:22px; height:22px; border-radius:7px; background:var(--cg-50); color:var(--cg-forest-deep); display:grid; place-items:center; flex:none; margin-top:1px; }
.cg-pchk svg{ width:14px; height:14px; display:block; }
.cg-pcard .cg-btn{ margin-top:30px; width:100%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .cg-hero, .cg-vision-grid, .cg-desc-grid{ grid-template-columns:1fr; gap:40px; }
  .cg-grid-services{ grid-template-columns:repeat(2,1fr); }
  .cg-scard, .cg-scard.cg-span3, .cg-scard.cg-span6{ grid-column:span 1; }
  .cg-grid-features{ grid-template-columns:repeat(2,1fr) !important; }
  .cg-grid-steps{ grid-template-columns:repeat(2,1fr) !important; }
  .cg-grid-pricing{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .cg-pcard.cg-feat{ transform:none; }
  .cg-pcard.cg-feat:hover{ transform:translateY(-4px); }
  .cg-vision{ padding:48px; }
}
@media (max-width:680px){
  .cg-grid-services, .cg-grid-features, .cg-grid-steps{ grid-template-columns:1fr !important; }
  .cg-vision{ padding:34px; }
  .cg-cta{ padding:52px 24px; }
}