/* App product pages: eRetail ("Wireframe - 5"), CSR ("Wireframe - 6"),
   Custom App ("Wireframe - 7"), eOwner ("Wireframe - 4"). */
.page-app main { background: #e8e9ed; }

.app-h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); font-weight: 700; line-height: 1.15; color: var(--blue); }
.app-h1 .text-violet { color: var(--violet); }
.app-lead { margin-top: 20px; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); line-height: 1.45; color: #222; max-width: 35rem; }
.app-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.btn-pill { border-radius: 30px; background: #fff; border: 1.5px solid #c9d6ea; color: var(--navy); box-shadow: 0 6px 14px rgba(0, 0, 0, .12); padding: 12px 30px; }
.btn-pill:hover { border-color: var(--blue); color: var(--blue); }
.btn-sm-rect { padding: 7px 14px; font-size: .95rem; border-radius: 3px; }

/* ---------- eRetail hero ---------- */
.er-hero { padding-block: clamp(40px, 6vw, 80px) 40px; overflow: hidden; }
.er-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; position: relative; }
.er-stage { position: relative; min-height: 560px; }
.er-stage::before { /* angled blue shape under the phone */
  content: ""; position: absolute; left: -45%; right: -10%; bottom: 0; height: 58%;
  background: var(--grad); border-radius: 40px; clip-path: polygon(8% 30%, 100% 0, 100% 100%, 0 100%);
}
.er-stage .phone { position: relative; z-index: 1; margin-left: 8%; }
.er-feature-box { position: absolute; z-index: 2; right: 0; top: 0; width: 210px; background: var(--grad); color: #fff; border-radius: 6px; padding: 20px 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); font-size: .85rem; font-weight: 600; }
.er-feature-box li { position: relative; padding-left: 14px; margin-bottom: 9px; }
.er-feature-box li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.er-quote { position: absolute; z-index: 2; right: 4%; top: 50%; width: 240px; background: #eceef3; color: #333; padding: 22px 18px 18px; font-size: .8rem; line-height: 1.45; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); text-align: justify; }
.er-quote::before { content: "\201C"; position: absolute; top: -6px; left: 10px; font-size: 2.6rem; color: #aaa; font-family: Georgia, serif; }

/* Overlapping ring circles */
.ring-row { display: flex; justify-content: center; align-items: center; position: relative; padding-block: 20px; }
.ring-row::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1.5px; background: var(--blue); }
.ring-row::after { content: ""; position: absolute; left: 6%; right: 6%; top: calc(50% - 6px); height: 12px; background: radial-gradient(circle, var(--blue) 5px, transparent 6px) left / 12px 12px no-repeat, radial-gradient(circle, var(--blue) 5px, transparent 6px) right / 12px 12px no-repeat; }
.ring { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(150px, 20vw, 270px); aspect-ratio: 1; margin-inline: -1.5%; border-radius: 50%; border: 1.5px solid var(--blue); background: #e8e9ed; }
.ring.is-lg { width: clamp(170px, 23vw, 310px); }
.ring::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px solid var(--blue); }
.ring-core { display: grid; place-items: center; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: #fff; text-align: center; padding: 10%; font-weight: 600; font-size: clamp(.9rem, .7rem + .6vw, 1.3rem); line-height: 1.25; box-shadow: 0 10px 22px rgba(0, 80, 200, .35); }
.ring-core small { display: block; margin-top: 6px; font-weight: 400; font-size: .75em; opacity: .9; }

/* Blue diagonal band with phones + copy */
.band-diag { position: relative; overflow: hidden; background: var(--grad); color: #fff; }
.band-diag::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 255, 255, .06) 140px 260px); pointer-events: none; }
.band-diag .split { position: relative; min-height: 440px; }
.phone-pair { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding-top: 30px; }
.phone-pair .phone:first-child { transform: rotate(-8deg) translateX(18%); z-index: 0; filter: brightness(.9); }
.phone-pair .phone:last-child { transform: rotate(4deg); z-index: 1; }
.band-diag .split-title { color: #fff; }

/* Why choose card */
.why-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; border: 2px solid var(--blue); border-radius: 20px; padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 70px); }
.why-visual { position: relative; display: grid; place-items: center; min-height: 300px; }
.why-visual .back { position: absolute; left: 12%; top: 0; bottom: 0; width: 45%; background: #9ec7ea; border-radius: 8px; }
.why-visual .front { position: relative; width: 70%; max-width: 16.25rem; aspect-ratio: 1; background: var(--grad); color: #fff; border-radius: 12px; display: grid; place-items: center; text-align: center; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); font-weight: 700; padding: 24px; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.why-visual .diamond { position: absolute; left: 0; top: 40%; width: 64px; height: 64px; background: var(--blue); transform: rotate(45deg); display: grid; place-items: center; color: #fff; }
.why-visual .diamond .icon { transform: rotate(-45deg); }
.why-list { background: var(--blue); color: #fff; border-radius: 8px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; font-size: 1.05rem; }
.why-list li { position: relative; padding-left: 18px; }
.why-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ---------- CSR hero ---------- */
.csr-stage { position: relative; display: grid; place-items: center; padding: 40px 0; }
.csr-stage::before { content: ""; position: absolute; width: 72%; top: 18%; bottom: 0; background: var(--grad); border-radius: 18px; }
.csr-stage .phone { position: relative; }

.hand-stage { position: relative; display: grid; place-items: center; min-height: 460px; }
.hand-stage .sq { position: absolute; background: rgba(255, 255, 255, .25); }
.hand-stage .sq.s1 { width: 110px; height: 150px; right: 18%; top: 22%; }
.hand-stage .sq.s2 { width: 60px; height: 60px; left: 10%; bottom: 14%; }
.hand-stage .sq.s3 { width: 18px; height: 18px; left: 22%; bottom: 36%; }
.hand-stage .phone { transform: rotate(14deg); }

/* ---------- Custom app ---------- */
.ca-hero { background: linear-gradient(180deg, var(--blue) 0, var(--blue-deep) 62%, #e8e9ed 62%); color: #fff; text-align: center; padding-top: clamp(48px, 6vw, 80px); }
.ca-hero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 700; line-height: 1.25; }
.ca-hero .lead { margin: 18px auto 0; max-width: 53.75rem; opacity: .92; }
.ca-phones { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 5vw, 60px); margin-top: 50px; }
.ca-phones .phone:nth-child(2) { max-width: 18.75rem; }
.circle-chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 68.75rem; margin: 0 auto; }
.circle-chain::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--blue); }
.chain-item { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.chain-item::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--blue); clip-path: inset(0 0 45% 0); }
.chain-item:nth-child(even)::before { clip-path: inset(45% 0 0 0); }
.chain-core { width: 84%; aspect-ratio: 1; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; text-align: center; padding: 14%; font-size: clamp(.85rem, .7rem + .4vw, 1.05rem); font-weight: 500; line-height: 1.3; box-shadow: 0 10px 22px rgba(0, 60, 180, .35); }

.cta-curve { position: relative; overflow: hidden; background: #e8e9ed; padding-block: 40px 60px; }
.cta-curve-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--grad); color: #fff; border-radius: 0 200px 200px 0; padding: clamp(36px, 5vw, 60px) clamp(40px, 16vw, 240px) clamp(36px, 5vw, 60px) clamp(24px, 3vw, 40px); max-width: 56.25rem; }
.cta-curve h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 600; line-height: 1.3; }
.cta-curve a.cta-link { display: inline-block; margin-top: 18px; color: #fff; }
.call-bubble { position: absolute; right: clamp(20px, 5vw, 60px); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: clamp(120px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%; background: #eceef3; color: var(--blue); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.15; text-align: center; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); transition: transform .2s; }
.call-bubble:hover { transform: translateY(-50%) scale(1.05); }

/* ---------- eOwner ---------- */
.eo-hero { background: var(--grad); color: #fff; overflow: hidden; }
.eo-hero .split { align-items: end; }
.eo-hero-copy { padding-block: clamp(40px, 6vw, 80px); }
.eo-hero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 700; }
.eo-hero .sub { font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem); font-weight: 600; margin-top: 4px; }
.eo-hero ul { margin-top: 26px; display: grid; gap: 10px; }
.eo-hero li { position: relative; padding-left: 16px; }
.eo-hero li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.eo-hero .app-actions { margin-top: 32px; }
.eo-hero-media { display: flex; justify-content: center; align-self: end; }
.eo-hero-media img { width: min(340px, 80%); height: auto; margin-bottom: -20px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
.tile { padding: clamp(26px, 3vw, 40px) 22px; text-align: center; background: #e3e4e8; }
.tile:nth-child(2) { background: var(--violet); color: #fff; }
.tile:nth-child(4) { background: var(--blue); color: #fff; }
.tile .icon { margin: 0 auto 14px; color: var(--violet); }
.tile:nth-child(2) .icon, .tile:nth-child(4) .icon { color: #fff; }
.tile h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); font-weight: 500; line-height: 1.2; }
.tile p { margin-top: 10px; font-size: .92rem; opacity: .85; }

.img-stack { position: relative; min-height: 440px; }
.img-stack .bg { position: absolute; left: 0; top: 14%; width: 62%; bottom: 14%; background: var(--blue); }
.img-stack img { position: absolute; width: 58%; border-radius: 6px; box-shadow: 0 12px 26px rgba(0, 0, 0, .3); object-fit: cover; }
.img-stack img:nth-of-type(1) { left: 6%; top: 0; aspect-ratio: 16 / 10; }
.img-stack img:nth-of-type(2) { left: 18%; bottom: 0; aspect-ratio: 4 / 3.4; }
.img-stack .badge { position: absolute; z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 10px; background: #fff; color: var(--blue); box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.img-stack .badge.b1 { left: 58%; top: 14%; }
.img-stack .badge.b2 { left: 10%; top: 58%; }

.shot-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; align-items: start; }
.shot-card { background: #eceef3; color: var(--ink); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); padding: 22px 22px 0; text-align: center; overflow: hidden; }
.shot-card.is-violet { background: var(--violet); color: #fff; padding: 0 22px 26px; }
.shot-card h3 { font-size: 1.15rem; font-weight: 500; color: var(--violet); }
.shot-card.is-violet h3 { color: #fff; margin-top: 20px; font-size: 1.35rem; }
.shot-card p { margin: 8px auto 18px; font-size: .92rem; max-width: 16.25rem; }
.shot-card.is-violet p { margin-bottom: 0; }
.shot-card .phone { margin: 0 auto; max-width: 13.75rem; border-bottom: 0; border-radius: 30px 30px 0 0; height: 320px; }
.shot-card.is-violet .phone { border-radius: 0 0 30px 30px; border-top: 0; border-bottom: 8px solid #111; }
.shot-card.is-violet .phone::before { display: none; }
.shot-card .phone img { border-radius: 22px 22px 0 0; }
.shot-card.is-violet .phone img { border-radius: 0 0 22px 22px; object-fit: cover; object-position: bottom; height: 100%; }

.eo-pricing { background: var(--grad); }

@media (max-width: 1000px) {
  .er-hero-grid { grid-template-columns: 1fr; }
  .er-stage { min-height: 0; padding-bottom: 30px; }
  .er-stage::before { left: -10%; }
  .er-feature-box { position: relative; width: auto; margin: 20px 0 0; }
  .er-quote { position: relative; right: auto; top: auto; width: auto; margin-top: 20px; }
  .er-stage .phone { margin-inline: auto; }
  .shot-cards { grid-template-columns: 1fr; max-width: 23.75rem; margin-inline: auto; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .why-card { grid-template-columns: 1fr; }
  .circle-chain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 20px; }
  .circle-chain::before { display: none; }
  .ring-row { flex-wrap: wrap; gap: 10px; }
  .ring-row::before, .ring-row::after { display: none; }
  .ca-phones .phone:not(:nth-child(2)) { display: none; }
  .img-stack { min-height: 380px; }
  .cta-curve-inner { border-radius: 0 120px 120px 0; padding-right: 170px; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .cta-curve-inner { flex-direction: column; align-items: flex-start; border-radius: 20px; padding: 30px 24px 150px; }
  .call-bubble { top: auto; bottom: 20px; right: 50%; transform: translateX(50%); width: 110px; }
  .call-bubble:hover { transform: translateX(50%) scale(1.05); }
  .img-stack { min-height: 300px; }
}

.band-diag .split-copy, .band-diag .diamond-list { color: #fff; }

/* Custom website page */
.cw-browser { max-width: 56.25rem; margin: 40px auto -120px; position: relative; background: #fff; border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 40, .35); overflow: hidden; }
.cw-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #eef1f6; }
.cw-bar span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.cw-bar span:nth-child(2) { background: #febc2e; }
.cw-bar span:nth-child(3) { background: #28c840; }
.cw-bar em { margin-left: 12px; font-style: normal; font-size: .85rem; color: #555; background: #fff; border-radius: 6px; padding: 2px 12px; }
.cw-browser img { width: 100%; display: block; }
.page-custom-web .cw-hero + .section { padding-top: clamp(150px, 14vw, 200px); }
.cw-portfolio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.cw-site { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.cw-site img { width: 100%; aspect-ratio: 12 / 7; object-fit: cover; object-position: top; border-bottom: 1px solid #e6e9ef; }
.cw-site-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 18px 22px; }
.cw-site-body h3 { font-size: 1.2rem; color: var(--navy); }
.cw-site-body p { grid-row: 2; color: var(--text); }
.cw-site-body .btn { grid-row: 1 / 3; grid-column: 2; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 760px) {
  .cw-portfolio { grid-template-columns: 1fr; }
  .cw-browser { margin-bottom: -60px; }
  .page-custom-web .cw-hero + .section { padding-top: 100px; }
}