@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand-primary:#95BF47;
  --brand-hover:#5E8E3E;
  --brand-soft:#F4FAEA;
  --brand-light:#DFF1C2;
  --heading:#1A1F36;
  --body:#4B5563;
  --muted:#6B7280;
  --page-bg:#FCFCF9;
  --section-bg:#F7FAF4;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --premium-dark:#111827;
  --surface-page:var(--page-bg);
  --surface-card:var(--card);
  --surface-soft:var(--brand-soft);
  --surface-hover:#F1F8E9;
  --surface-strong:#F9FCF5;
  --success:#22C55E;
  --warning:#F59E0B;
  --info:#3B82F6;
  --icon-green-bg:#ECF8E4;
  --icon-blue-bg:#F3F4F6;
  --icon-purple-bg:#F4EEFF;
  --icon-orange-bg:#FFF7E6;
  --icon-teal-bg:#EAF8F4;
  --icon-green:#5E8E3E;
  --icon-blue:#4B5563;
  --icon-purple:#6D28D9;
  --icon-orange:#B36B00;
  --icon-teal:#0F766E;
  --clr-primary:var(--brand-primary);
  --clr-secondary:var(--brand-hover);
  --clr-dark:var(--heading);
  --clr-ink:var(--heading);
  --clr-muted:var(--muted);
  --clr-body:var(--body);
  --clr-border:var(--border);
  --clr-bg-soft:var(--brand-soft);
  --shadow-sm:0 10px 24px rgba(17,24,39,.08);
  --shadow-md:0 18px 40px rgba(17,24,39,.10);
  --shadow-lg:0 30px 70px rgba(17,24,39,.12);
  --shadow-featured:0 24px 54px rgba(149,191,71,.16);
  --radius-lg:22px;
  --radius-md:16px;
  --container:1240px;
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
  font-family:var(--font-body);margin:0;padding:0;
}
.shopify-page{ font-family:var(--font-body); color:var(--clr-ink); overflow-x:hidden; font-size:16.5px; background:var(--surface-page); padding-top:64px; }
.shopify-page *{ box-sizing:border-box; min-width:0; }
.shopify-page img, .shopify-page svg{ max-width:100%; display:block; }
.shopify-page h1, .shopify-page h2, .shopify-page h3{ font-family:var(--font-display); }
.shopify-page a{ text-decoration:none; color:var(--clr-ink); }
.shopify-page a:hover{ color:var(--brand-hover); }
.shopify-page a.button:hover,
.shopify-page a.case-link-button:hover{ color:inherit; }
.shopify-page :focus-visible{ outline:3px solid rgba(149,191,71,.28); outline-offset:3px; }
.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:20px; top:20px; z-index:9999; background:#fff; color:var(--brand-hover); padding:10px 14px; border-radius:999px; box-shadow:var(--shadow-sm); }
.page-toc{ position:fixed; top:calc(var(--site-header-height,78px) + 12px); left:50%; transform:translateX(-50%); z-index:60; display:flex; gap:8px; align-items:center; width:calc(100% - 56px); max-width:var(--container); margin:0; padding:8px 18px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border:1px solid rgba(229,231,235,.9); border-radius:999px; box-shadow:var(--shadow-sm); overflow:auto; white-space:nowrap; }
.page-toc .toc-title{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-hover); margin-right:6px; }
.page-toc a{ color:var(--clr-ink); font-size:13px; font-weight:600; display:inline-block; padding:6px 8px; border-radius:999px; }
.page-toc a:hover{ color:var(--brand-hover); background:var(--brand-soft); }
.page-toc a.is-active{ color:var(--brand-hover); background:var(--brand-soft); }
.shopify-page [id]{ scroll-margin-top:calc(var(--site-header-height,78px) + 76px); }
@media (max-width:720px){ .page-toc{ display:none; } .shopify-page{ padding-top:0; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.section-pad{ padding:64px 28px; position:relative; }
.section-cta{ margin-top:16px; }
.section-cta .button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:700; font-size:14.7px; white-space:nowrap; }
.section-cta .button-primary{ background:var(--clr-primary); color:#fff; box-shadow:0 14px 30px rgba(149,191,71,.24); }
.section-cta .button-primary:hover{ background:var(--brand-hover); color:#fff; transform:translateY(-1px); box-shadow:0 18px 34px rgba(149,191,71,.3); }
.seo-rich-section{ background:linear-gradient(180deg,var(--surface-card) 0%, var(--section-bg) 100%); }
.seo-rich-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.seo-rich-card{ background:var(--surface-card); border:1px solid var(--clr-border); border-radius:20px; padding:20px 18px; box-shadow:var(--shadow-sm); }
.seo-rich-card h3{ font-size:17px; margin:0 0 8px; color:var(--clr-ink); }
.seo-rich-card p{ margin:0; color:var(--clr-muted); line-height:1.65; font-size:14.4px; }
.section-bg{ background:linear-gradient(180deg,var(--section-bg) 0%,var(--surface-strong) 100%); }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--clr-secondary); font-weight:700; letter-spacing:.07em; text-transform:uppercase; font-size:12.5px; margin-bottom:8px; }
.eyebrow.center{ justify-content:center; }
.eyebrow-dash{ display:none; }
.section-head{ max-width:760px; margin:0 auto 20px; text-align:center; }
.section-head h2{ font-size:clamp(28px, 2.8vw, 40px); line-height:1.22; margin:2px 0 0; font-weight:700; color:var(--clr-ink); }
.section-head p{ margin-top:8px; color:var(--clr-muted); font-size:16px; line-height:1.65; }
.section-head a{ color:var(--clr-secondary); font-weight:600; }
.section-head a:hover{ text-decoration:underline; }
.img-ph{ position:relative; width:100%; aspect-ratio:var(--ar,4/3); border-radius:inherit; background:linear-gradient(135deg, rgba(149,191,71,.12), rgba(94,142,62,.06)), repeating-linear-gradient(45deg, rgba(15,23,42,.03) 0 2px, transparent 2px 14px); border:1.5px dashed rgba(15,23,42,.13); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; text-align:center; color:var(--clr-muted); overflow:hidden; }
.img-ph-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; aspect-ratio:auto; border-radius:0; }
.img-ph-flat{ border-radius:0; }
.hero-visual{ position:relative; width:100%; max-width:520px; height:560px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; }
.hero-image{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.breadcrumb-nav{ max-width:var(--container); margin:0 auto 12px; padding:0 28px; }
.breadcrumb-list{ display:flex; flex-wrap:wrap; gap:0.5rem; list-style:none; margin:0; padding:0; font-size:13.6px; color:var(--clr-muted); }
.breadcrumb-list li{ display:flex; align-items:center; gap:0.5rem; }
.breadcrumb-list li+li::before{ content:'›'; color:var(--clr-border); }
.breadcrumb-list a{ color:var(--clr-secondary); }
.breadcrumb-list a:hover{ text-decoration:underline; }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:700; font-size:14.7px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button-primary{ background:var(--clr-primary); color:#fff; box-shadow:0 14px 30px rgba(149,191,71,.24); }
.button-primary:hover{ background:var(--brand-hover); color:#fff; transform:translateY(-1px); box-shadow:0 18px 34px rgba(149,191,71,.3); }
.button-outline{ background:var(--surface-card); color:var(--clr-ink); border:1px solid var(--clr-border); }
.button-outline:hover{ border-color:var(--brand-primary); background:var(--brand-soft); color:var(--clr-dark); transform:translateY(-1px); }
.hero-section{ position:relative; padding:72px 28px 40px; overflow:hidden; background:linear-gradient(135deg,#FFF 0%, #FCFAF2 42%, var(--brand-soft) 100%); }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; }
.hero-blob-1{ top:-60px; right:-120px; width:520px; height:520px; opacity:.32; background:radial-gradient(circle,rgba(149,191,71,.24) 0%, transparent 70%); }
.hero-blob-2{ bottom:-90px; left:-80px; width:320px; height:320px; opacity:.18; background:radial-gradient(circle,rgba(15,118,110,.14) 0%, transparent 70%); }
.hero-inner{ position:relative; z-index:1; max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,520px); gap:28px; align-items:center; }
.hero-copy h1{ font-size:clamp(32px,3.6vw,46.4px); line-height:1.12; font-weight:800; margin:0 0 14px; letter-spacing:-.01em; color:var(--clr-ink); }
.hero-highlight{ background:linear-gradient(135deg,var(--brand-primary) 0%, var(--brand-hover) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-copy > p{ font-size:16.3px; line-height:1.7; color:var(--clr-body); margin:0 0 18px; max-width:520px; }
.hero-copy > p a{ color:var(--brand-hover); font-weight:600; }
.hero-copy > p a:hover{ text-decoration:underline; }
.hero-buttons{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.hero-highlights{ display:grid; gap:10px; padding-top:16px; border-top:1px solid rgba(26,31,54,.1); }
.hero-highlight-item{ display:flex; align-items:center; gap:10px; color:var(--clr-ink); font-weight:600; font-size:14.4px; }
.hero-highlight-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--brand-primary); background:var(--brand-soft); border-radius:50%; padding:3px; box-sizing:content-box; }
.hero-visual{ position:relative; width:100%; max-width:520px; height:560px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 60px rgba(17,24,39,.12); background:var(--surface-card); border:1px solid rgba(229,231,235,.9); }
.hero-image{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.trust-section{ background:linear-gradient(180deg,#FFF 0%, var(--section-bg) 100%); border-top:1px solid var(--clr-border); border-bottom:1px solid var(--clr-border); }
.trust-panel{ max-width:var(--container); margin:0 auto; }
.trust-text{ max-width:700px; margin:0 auto 20px; text-align:center; }
.trust-text h2{ font-size:clamp(22.4px,2.2vw,29.6px); font-weight:700; line-height:1.32; margin-top:2px; color:var(--clr-ink); }
.trust-logos{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.trust-logo{ text-align:center; padding:14px 10px; border-radius:16px; font-weight:700; font-size:14.4px; color:#fff; cursor:pointer; transition:transform .2s ease; }
.trust-logo:hover{ transform:translateY(-3px); }
.trust-logo-retail{ background:linear-gradient(135deg, rgba(149,191,71,.95), rgba(94,142,62,.95)); }
.trust-logo-fashion{ background:linear-gradient(135deg, rgba(15,118,110,.92), rgba(6,95,70,.92)); }
.trust-logo-beauty{ background:linear-gradient(135deg, rgba(186,87,222,.9), rgba(141,55,210,.95)); }
.trust-logo-health{ background:linear-gradient(135deg, rgba(245,158,11,.92), rgba(180,107,0,.95)); }
.trust-logo-luxury{ background:linear-gradient(135deg, rgba(17,24,39,.96), rgba(75,85,99,.95)); }
.trust-logo-food{ background:linear-gradient(135deg, rgba(245,158,11,.92), rgba(180,107,0,.95)); }
.trust-badges{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.trust-badge{ display:flex; align-items:center; gap:12px; text-align:left; background:var(--surface-card); border-radius:var(--radius-md); padding:16px 16px; box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); transition:box-shadow .2s ease, border-color .2s ease; font-weight:600; font-size:13.6px; color:var(--clr-ink); }
.trust-badge:hover{ box-shadow:var(--shadow-md); border-color:var(--brand-primary); }
.why-shopify-section{ background:var(--surface-card); }
.why-shopify-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:32px; align-items:center; }
.why-image{ position:relative; max-width:360px; }
.why-image .img-ph{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-height:340px; }
.why-copy-block h2{ font-size:clamp(25.6px,2.4vw,34.4px); font-weight:800; line-height:1.22; margin:4px 0 10px; color:var(--clr-ink); }
.why-copy-block > p{ color:var(--clr-body); font-size:16px; line-height:1.65; margin-bottom:16px; }
.why-copy-block > p a{ color:var(--brand-hover); font-weight:600; }
.why-copy-block > p a:hover{ text-decoration:underline; }
.why-benefits{ display:grid; gap:10px; }
.why-benefit-card{ background:var(--surface-card); border:1px solid var(--clr-border); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, border-color .2s ease; }
.bento-row{ max-width:var(--container); margin:0 auto 16px; display:grid; grid-template-columns:3fr 2fr; gap:16px; }
.service-feature-card{ background:var(--surface-card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); display:flex; flex-direction:column; transition:box-shadow .3s ease, transform .3s ease; }
.service-feature-card:hover{ box-shadow:0 20px 40px rgba(149,191,71,.15); transform:translateY(-3px); }
.service-feature-card .img-ph{ border-radius:0; }
.service-feature-copy{ padding:20px 22px; }
.card-label{ display:inline-flex; padding:5px 12px; border-radius:999px; background:var(--brand-soft); color:var(--brand-hover); font-weight:700; font-size:10.9px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.07em; border:1px solid var(--brand-light); }
.service-feature-copy h3{ font-size:21.6px; margin:0 0 8px; font-weight:800; color:var(--clr-ink); }
.service-feature-copy p{ color:var(--clr-muted); line-height:1.6; margin-bottom:12px; font-size:15.2px; }
.service-feature-copy ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.service-feature-copy ul li{ display:flex; align-items:center; gap:8px; font-size:14.4px; font-weight:600; color:var(--clr-ink); }
.service-feature-copy ul li svg{ width:14px; height:14px; color:var(--brand-primary); flex-shrink:0; }
.service-medium-col{ display:grid; grid-template-rows:1fr 1fr; gap:14px; }
.service-card{ border-radius:18px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.service-medium{ background:var(--surface-card); border:1px solid var(--clr-border); padding:18px; box-shadow:var(--shadow-sm); }
.service-medium:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.service-icon{ width:38px; height:38px; border-radius:11px; background:var(--brand-soft); border:1px solid var(--brand-light); color:var(--brand-hover); display:grid; place-items:center; margin-bottom:12px; }
.service-icon svg{ width:17px; height:17px; }
.service-card h3{ font-size:16.8px; margin:0 0 6px; font-weight:700; color:var(--clr-ink); }
.service-card p{ color:var(--clr-muted); line-height:1.55; margin:0; font-size:14.1px; }
.service-secondary-grid{ max-width:var(--container); margin:0 auto 16px; display:flex; flex-wrap:wrap; gap:14px; }
.service-small{ background:var(--surface-card); border:1px solid var(--clr-border); box-shadow:var(--shadow-sm); padding:18px; flex:1 1 260px; }
.service-small:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--brand-primary); }
.service-small-head{ display:flex; align-items:flex-start; justify-content:space-between; }
.service-small-head .service-icon{ margin-bottom:12px; }
.service-badge{ font-size:10.4px; font-weight:700; background:var(--surface-soft); color:var(--brand-hover); border:1px solid var(--brand-light); border-radius:999px; padding:4px 9px; height:fit-content; }
.service-small h3{ font-size:16px; }
.service-small p{ font-size:13.6px; }
.benefits-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.benefit-card{ position:relative; background:var(--surface-card); border-radius:20px; padding:20px 18px; border:1px solid var(--clr-border); min-height:170px; transition:transform .3s ease, box-shadow .3s ease; overflow:hidden; }
.benefit-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--brand-primary); }
.benefit-num{ position:absolute; top:16px; right:20px; font-size:44.6px; font-weight:800; color:rgba(149,191,71,.12); line-height:1; font-family:var(--font-display); }
.benefit-icon{ width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,var(--brand-primary),var(--brand-hover)); color:#fff; display:grid; place-items:center; margin-bottom:14px; box-shadow:0 10px 22px rgba(149,191,71,.24); }
.benefit-card strong{ display:block; font-size:17.6px; margin-bottom:6px; font-weight:700; color:var(--clr-ink); }
.benefit-card p{ color:var(--clr-muted); line-height:1.55; margin:0; font-size:14.4px; }
.process-inner{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr; place-items:center; gap:24px; }
.timeline-wrap{ position:relative; width:100%; max-width:860px; margin:0 auto; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.timeline-point{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:24px 20px; background:var(--surface-card); border:1px solid var(--clr-border); border-radius:24px; box-shadow:var(--shadow-sm); }
.timeline-point:hover{ box-shadow:var(--shadow-md); border-color:var(--brand-primary); }
.timeline-num{ position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; background:var(--brand-soft); color:var(--brand-hover); border-radius:50%; font-weight:800; font-size:15px; border:2px solid var(--brand-light); }
.timeline-card{ background:transparent; border:none; box-shadow:none; padding:0; }
.timeline-card h3{ margin:0 0 6px; font-size:17.2px; font-weight:800; color:var(--clr-ink); }
.timeline-card p{ color:var(--clr-muted); line-height:1.7; margin:0; font-size:14px; }
.choose-section{ background:linear-gradient(180deg,#FFF 0%, var(--section-bg) 100%); }
.choose-inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:36px; align-items:center; }
.choose-copy h2{ font-size:clamp(25.6px,2.4vw,34.4px); font-weight:800; line-height:1.22; margin:4px 0 10px; color:var(--clr-ink); }
.choose-copy > p{ color:var(--clr-body); font-size:16px; line-height:1.65; }
.choose-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.choose-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--clr-ink); font-weight:700; font-size:15.7px; }
.choose-list li::before{ content:'✓'; color:var(--brand-primary); font-weight:900; font-size:17.6px; }
.choose-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.choose-card{ display:flex; flex-direction:column; gap:6px; border-radius:18px; padding:18px; background:var(--surface-card); border:1px solid var(--clr-border); box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.choose-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--brand-primary); }
.choose-card-large{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:18px; background:linear-gradient(135deg,var(--brand-soft),var(--surface-card)); }
.choose-card-large div:last-child{ display:flex; flex-direction:column; gap:4px; }
.choose-icon{ width:44px; height:44px; border-radius:12px; background:var(--icon-teal-bg); border:1px solid rgba(15,118,110,.12); color:var(--icon-teal); display:grid; place-items:center; flex-shrink:0; }
.choose-icon svg{ width:22px; height:22px; }
.tech-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.tech-card{ background:var(--surface-card); border:1px solid var(--clr-border); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.tech-card:hover{ box-shadow:var(--shadow-md); border-color:var(--brand-light); transform:translateY(-3px); }
.tech-card-header{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.tech-card-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--tech-card-tint); color:var(--tech-card-accent); }
.tech-card h3{ margin:0; font-size:16px; font-weight:700; color:var(--clr-ink); }
.tech-tool-list{ display:grid; gap:2px; }
.tech-tool-row{ display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:11px; transition:background .2s ease; }
.tech-tool-row:hover{ background:var(--brand-soft); cursor:pointer; }
.tech-tool-logo{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--surface-soft); border:1px solid var(--clr-border); flex-shrink:0; font-size:10.4px; font-weight:800; color:var(--brand-hover); }
.tech-tool-logo img{ width:100%; height:100%; object-fit:contain; }
.industry-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.industry-card{ position:relative; border-radius:18px; overflow:hidden; cursor:pointer; border:1px solid var(--clr-border); display:block; }
.industry-card-media{ position:relative; overflow:hidden; }
.industry-card-media::before{ content:''; display:block; padding-top:68%; }
.industry-card-body{ padding:14px 16px; }
.industry-card-body strong{ display:block; font-size:15.2px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; color:var(--clr-ink); }
.industry-card-body p{ margin:0; line-height:1.5; color:var(--clr-muted); font-size:13.6px; font-weight:500; }
.case-grid{ max-width:var(--container); margin:0 auto; }
.case-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--surface-card); color:var(--clr-ink); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); margin-bottom:16px; }
.case-card-image{ position:relative; overflow:hidden; }
.case-card-copy{ padding:26px 28px; display:flex; flex-direction:column; justify-content:center; background:var(--surface-card); }
.case-tag{ display:inline-flex; align-self:flex-start; padding:7px 14px; border-radius:999px; background:var(--brand-soft); color:var(--brand-hover); font-weight:700; font-size:10.9px; letter-spacing:.07em; text-transform:uppercase; border:1px solid rgba(149,191,71,.2); margin-bottom:12px; }
.case-card-copy h3{ font-size:21.6px; margin:0 0 8px; font-weight:800; color:var(--clr-ink); line-height:1.28; }
.case-card-copy p{ color:var(--clr-body); line-height:1.6; margin-bottom:10px; font-size:15.2px; }
.case-meta{ color:var(--clr-muted); margin-bottom:14px; font-size:13.6px; font-weight:500; }
.case-link-button{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; padding:10px 20px; border-radius:999px; background:var(--brand-primary); color:#fff; font-weight:700; font-size:14.7px; box-shadow:0 12px 20px rgba(149,191,71,.18); transition:background .25s ease, box-shadow .25s ease, color .25s ease; }
.case-link-button:hover{ background:var(--brand-hover); color:#fff; box-shadow:0 12px 20px rgba(149,191,71,.22); }
.faq-accordion{ max-width:760px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:16px; padding:0 20px; }
.faq-row{ border-radius:20px; border:1px solid rgba(15,23,42,.08); background:var(--surface-card); overflow:hidden; box-shadow:0 8px 30px rgba(15,23,42,.08); }
.faq-item{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:14px; background:transparent; border:none; padding:18px 22px; font-size:15px; font-weight:700; color:var(--clr-ink); cursor:pointer; transition:background .2s ease; }
.faq-item:hover{ background:rgba(149,191,71,.08); }
.faq-icon{ flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(149,191,71,.18); color:var(--brand-hover); font-weight:800; font-size:16px; }
.faq-q{ flex:1; }
.faq-chevron{ flex-shrink:0; color:var(--clr-muted); transition:transform .25s ease, color .25s ease; }
.faq-item[aria-expanded="true"]{ background:rgba(149,191,71,.1); }
.faq-item[aria-expanded="true"] .faq-icon{ background:var(--brand-primary); color:#fff; transform:rotate(45deg); }
.faq-item[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); color:var(--brand-primary); }
.faq-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease, background .25s ease; padding:0 22px; background:rgba(244,250,234,.9); }
.faq-panel[aria-hidden="false"]{ padding-top:18px; padding-bottom:18px; }
.faq-panel p{ margin:0; color:var(--clr-body); line-height:1.75; font-size:15px; }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (max-width:1100px){ .hero-inner, .why-shopify-grid, .choose-inner, .process-inner{ grid-template-columns:minmax(0,1fr); } .hero-inner{ display:flex; flex-direction:column; } .hero-visual{ order:1; max-width:380px; margin:0 auto 40px; width:100%; } .hero-copy{ order:2; } .bento-row{ grid-template-columns:1fr; } .service-medium-col{ grid-template-rows:none; grid-template-columns:1fr 1fr; } .benefits-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .trust-logos{ grid-template-columns:repeat(3, minmax(0,1fr)); } .trust-badges{ grid-template-columns:repeat(2, minmax(0,1fr)); } .why-benefits{ grid-template-columns:1fr; } .why-image{ max-width:420px; margin:0 auto; } .choose-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } .tech-grid, .industry-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .case-card{ grid-template-columns:minmax(0,1fr); } .case-card-image{ min-height:220px; } }
@media (max-width:900px){ .trust-logos{ grid-template-columns:repeat(2, minmax(0,1fr)); } .trust-badges{ grid-template-columns:minmax(0,1fr); } .choose-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } .choose-card-large{ grid-column:1/-1; } .service-medium-col{ grid-template-columns:1fr; } .benefits-grid, .tech-grid, .industry-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:720px){ .shopify-page{ font-size:15px; } .section-pad{ padding:40px 18px; } .hero-section{ padding:88px 18px 40px; } .hero-copy h1{ font-size:30.4px; } .hero-copy > p{ font-size:15.2px; } .trust-logos{ grid-template-columns:minmax(0,1fr); } .trust-badges{ grid-template-columns:minmax(0,1fr); } .benefits-grid, .tech-grid, .industry-grid, .choose-cards{ grid-template-columns:minmax(0,1fr); } .choose-card-large{ flex-direction:column; text-align:center; } .faq-item{ flex-wrap:wrap; } .timeline-card{ width:calc(100% - 54px); } }
@media (max-width:540px){ .section-pad{ padding:32px 16px; } .hero-section{ padding:60px 16px 28px; } .hero-inner{ gap:18px; } .hero-copy h1{ font-size:clamp(28px, 6vw, 34px); } .hero-copy > p{ font-size:15px; max-width:100%; } .hero-buttons{ flex-direction:column; align-items:stretch; } .button, .button-primary, .button-outline, .case-link-button{ width:100%; justify-content:center; } .hero-highlights{ grid-template-columns:1fr; } .trust-logos, .trust-badges, .benefits-grid, .tech-grid, .industry-grid, .choose-cards{ grid-template-columns:1fr; } .hero-visual{ max-width:100%; height:auto; min-height:300px; } .case-card{ grid-template-columns:1fr; } .case-card-image{ min-height:220px; } }
.contact-modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); opacity:0; visibility:hidden; transition:opacity .24s ease, visibility .24s ease; z-index:9998; }
.contact-modal{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease, visibility .24s ease; z-index:9999; }
.contact-modal.is-open, .contact-modal-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.contact-modal__panel{ width:min(980px,95vw); max-width:980px; height:min(880px, 94vh); overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 32px 80px rgba(15,23,42,.22); transform:translateY(24px); transition:transform .24s ease; display:flex; flex-direction:column; }
.contact-modal.is-open .contact-modal__panel{ transform:translateY(0); }
.contact-modal__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; flex:0 0 auto; }
.contact-modal__title{ font-size:clamp(22px,2.2vw,30px); margin:0; color:#101828; }
.contact-modal__close{ width:44px; height:44px; border:none; background:rgba(26,31,54,.06); border-radius:14px; font-size:1.6rem; line-height:1; cursor:pointer; color:#0f172a; }
.contact-modal__body{ display:flex; flex-direction:column; padding:0 18px 18px; min-height:0; flex:1 1 auto; }
.contact-modal__widget{ width:100%; flex:1 1 auto; min-height:0; border-radius:16px; overflow:hidden; border:1px solid rgba(15,23,42,.08); }
.contact-modal__widget .calendly-inline-widget{ width:100%; height:100%; overflow-y:hidden !important; }
@media (max-width:900px){ .contact-modal{ padding:12px; } .contact-modal__panel{ width:100%; height:min(760px, 92vh); } .contact-modal__body{ padding:0 16px 16px; } }
@media (max-width:720px){ .contact-modal{ padding:8px; } .contact-modal__header{ padding:16px; } .contact-modal__panel{ width:100%; height:calc(100vh - 16px); border-radius:20px; } .contact-modal__body{ padding:0 12px 12px; } .contact-modal__title{ font-size:clamp(19px,5vw,24px); } }
.shopify-page .hire_developer_footer_section{ background:var(--premium-dark); padding:64px 28px 32px; }
.shopify-page .hire_developer_container{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
.shopify-page .hire_developer_footer_heading{ color:#fff; font-size:1.1rem; font-weight:700; margin-bottom:16px; font-family:var(--font-display); }
.shopify-page .technology_link_box ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.shopify-page .technology_link_box a{ color:rgba(255,255,255,.74); font-size:14px; line-height:1.5; transition:color .2s ease; }
.shopify-page .technology_link_box a:hover{ color:var(--brand-primary); }
.shopify-page #followus-sec-mid, .shopify-page #subscribe-sec, .shopify-page #copyright-sec{ background:var(--premium-dark); color:#f8fafc; }
.shopify-page #followus-sec-mid{ max-width:var(--container); margin:0 auto; padding:0 28px 28px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
.shopify-page #followus-sec-mid h2, .shopify-page #subscribe-sec a, .shopify-page #copyright-sec p, .shopify-page #copyright-sec a{ color:#fff; }
.shopify-page #subscribe-sec, .shopify-page #copyright-sec{ padding:0 28px 28px; }
.shopify-page #copyright-sec p{ font-size:13px; color:rgba(255,255,255,.72); }
.shopify-page .follow_us{ color:var(--brand-primary); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.shopify-page .fb-footer:hover span, .shopify-page .fb-twitter:hover span, .shopify-page .fbLinkedIn:hover span, .shopify-page .blog_footer:hover span{ filter:brightness(1.15); }