/* ─── PAGE HERO ─── */
.page-hero{
  padding:128px 24px 72px;
  background:var(--soft);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.page-hero::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(60,224,0,0.07) 0%, transparent 65%);
  pointer-events:none;
}
.page-hero-inner{
  position:relative;z-index:1;
  max-width:760px;margin:0 auto;
}
.eyebrow{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--secondary);
  margin-bottom:16px;
}
.page-hero h1{
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:clamp(34px,5vw,58px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--primary);
  margin-bottom:20px;
}
.page-hero h1 em{
  font-style:normal;
  color:var(--highlight);
}
.page-hero p{
  font-size:18px;
  line-height:1.65;
  color:#555;
  margin-bottom:0;
}

/* ─── STAT BAR ─── */
.stat-bar{
  background:var(--primary);
  padding:32px 24px;
}
.stat-bar-inner{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat-item{
  text-align:center;
  padding:16px 24px;
  border-right:1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child{border-right:none}
.stat-num{
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:clamp(28px,3.5vw,44px);
  font-weight:800;
  color:var(--highlight);
  letter-spacing:-0.02em;
  line-height:1;
  margin-bottom:4px;
  font-variant-numeric:tabular-nums;
  min-height:1.1em;
}
.stat-lbl{
  font-size:12px;font-weight:500;
  color:#888;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* ─── CONTENT SECTIONS ─── */
.content-section{
  padding:88px 24px;
  contain:layout style;
}
.content-section.alt{background:var(--soft)}
.content-inner{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.content-inner.flip{direction:rtl}
.content-inner.flip > *{direction:ltr}

.content-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--secondary);
  background:rgba(143,186,143,0.12);
  border:1px solid rgba(143,186,143,0.25);
  padding:5px 12px;border-radius:50px;
  margin-bottom:18px;
}
.content-text h2{
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:clamp(26px,3vw,38px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--primary);
  margin-bottom:18px;
}
.content-text p{
  font-size:16px;
  line-height:1.75;
  color:#4a4a4a;
}

/* ─── VISUAL CARD ─── */
.visual-card{
  background:#fff;
  border:1px solid var(--divider);
  border-radius:20px;
  padding:32px;
  box-shadow:0 4px 32px rgba(0,0,0,0.06);
  position:relative;
  overflow:hidden;
}
.visual-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--highlight), var(--secondary));
  border-radius:20px 20px 0 0;
}
.visual-card-label{
  font-size:10px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:#aaa;
  margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.visual-card-label::after{
  content:'';flex:1;height:1px;background:var(--divider);
}
.prog-list{
  display:flex;flex-direction:column;gap:10px;
  list-style:none;
}
.prog-list li{
  display:flex;align-items:center;gap:12px;
  font-size:14px;font-weight:500;color:#333;
}
.prog-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--highlight);flex-shrink:0;
}
.prog-tag{
  margin-left:auto;
  font-size:11px;font-weight:600;
  color:var(--secondary);
  background:rgba(143,186,143,0.14);
  border-radius:4px;padding:2px 8px;
  white-space:nowrap;
}
.meter-row{
  display:flex;flex-direction:column;gap:14px;
}

.meter-label{
  display:flex;justify-content:space-between;
  font-size:13px;font-weight:500;color:#555;
  margin-bottom:6px;
}
.meter-label span:last-child{font-weight:700;color:var(--primary)}
.meter-bar{
  height:6px;background:var(--divider);border-radius:50px;overflow:hidden;
}
.meter-fill{
  height:100%;border-radius:50px;
  background:linear-gradient(90deg, var(--highlight) 0%, var(--secondary) 100%);
  width:0%;
  transition:width 1.0s cubic-bezier(0.4,0,0.2,1);
}
@media(prefers-reduced-motion:reduce){
  .meter-fill{transition:none!important}
}

/* Card grids */
.card-grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.mini-card{
  background:var(--soft);
  border-radius:10px;padding:14px;
  text-align:center;
}
.mini-card .num{
  font-family:'Google Sans Flex',sans-serif;
  font-size:22px;font-weight:800;color:var(--primary);
  letter-spacing:-0.02em;
}
.mini-card .lbl{font-size:11px;color:#888;margin-top:2px}

/* ─── FEATURE LINK LIST ─── */
.feature-links-section{
  padding:88px 24px;
  background:var(--primary);
}
.feature-links-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:start;
}
.feature-links-intro .eyebrow{color:var(--secondary)}
.feature-links-intro h2{
  font-family:'Google Sans Flex',sans-serif;
  font-size:clamp(28px,3.5vw,42px);font-weight:800;
  color:var(--white);letter-spacing:-0.02em;
  line-height:1.12;margin-bottom:18px;
}
.feature-links-intro p{font-size:16px;color:#888;line-height:1.7;margin-bottom:32px}
.feature-link-list{
  list-style:none;
  display:flex;flex-direction:column;gap:4px;
}
.feature-link-list li a{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:10px;
  color:#ccc;text-decoration:none;font-size:15px;font-weight:500;
  transition:background var(--transition),color var(--transition);
  border:1px solid rgba(255,255,255,0.06);
}
.feature-link-list li a:hover{
  background:rgba(60,224,0,0.08);
  color:var(--highlight);
  border-color:rgba(60,224,0,0.2);
}
.feature-link-list li a .fl-icon{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background var(--transition);
}
.feature-link-list li a:hover .fl-icon{background:rgba(60,224,0,0.15)}
.feature-link-list li a .fl-icon svg{stroke:var(--secondary);display:block}
.feature-link-list li a .fl-arrow{margin-left:auto;opacity:0.3;transition:opacity var(--transition),transform var(--transition)}
.feature-link-list li a:hover .fl-arrow{opacity:1;transform:translateX(3px)}

/* ─── DEMO CTA ─── */
.demo-section{
  background:var(--primary);
  padding:100px 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.demo-section::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(60,224,0,0.1) 0%, transparent 60%);
  pointer-events:none;
}
.demo-section h2{
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:clamp(32px,4vw,52px);
  font-weight:800;
  color:var(--white);
  letter-spacing:-0.02em;
  margin-bottom:18px;
}
.demo-section p{
  font-size:18px;color:#aaa;margin-bottom:40px;
  max-width:520px;margin-left:auto;margin-right:auto;line-height:1.6;
}
.demo-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* ─── BUTTONS ─── */
.btn-secondary{
  background:transparent;color:var(--primary);
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:15px;font-weight:600;
  border:2px solid var(--primary);border-radius:50px;
  padding:12px 28px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:background var(--transition),color var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.btn-secondary:hover{background:var(--primary);color:var(--white)}
.btn-highlight{
  background:var(--highlight);color:var(--primary);
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:15px;font-weight:700;border:none;border-radius:50px;
  padding:14px 32px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  box-shadow:0 2px 16px rgba(60,224,0,0.3);
}
.btn-highlight:hover{background:#2fd100;transform:translateY(-2px);box-shadow:0 6px 24px rgba(60,224,0,0.4)}

/* ─── HOVER EFFECTS ─── */
@media(prefers-reduced-motion:no-preference){

  /* Visual cards, lift on hover */
  .visual-card{
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),
               box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),
               border-color 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .visual-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 48px rgba(0,0,0,0.11);
    border-color:rgba(60,224,0,0.25);
  }
  .visual-card:hover::before{
    background:linear-gradient(90deg, var(--highlight), var(--secondary), var(--highlight));
    background-size:200% 100%;
    animation:shimmer-bar 1.6s linear infinite;
  }
  @keyframes shimmer-bar{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
  }

  /* Prog-list rows */
  .prog-list li{
    padding:6px 8px;
    border-radius:6px;
    transition:background 0.2s ease;
    cursor:default;
  }
  .prog-list li:hover{background:rgba(60,224,0,0.07)}
  .prog-list li:hover .prog-dot{
    transform:scale(1.35);
    box-shadow:0 0 6px rgba(60,224,0,0.5);
  }
  .prog-dot{transition:transform 0.2s ease,box-shadow 0.2s ease}
}

/* ─── FOCUS VISIBLE ─── */
:focus-visible{
  outline:2px solid var(--highlight);
  outline-offset:3px;
  border-radius:4px;
}
/* Remove default focus ring where :focus-visible is supported */
:focus:not(:focus-visible){outline:none}

/* ─── CHECK BULLET (content section bullet icons) ─── */
.check-bullet{
  flex-shrink:0;
  margin-top:3px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(60,224,0,0.12);
  border:1px solid rgba(60,224,0,0.3);
  display:flex;align-items:center;justify-content:center;
}

/* ─── BULLET LIST ROWS ─── */
.bullet-list{display:flex;flex-direction:column;gap:10px}
.bullet-list--spaced{margin-bottom:18px}
.bullet-row{display:flex;gap:12px;align-items:flex-start}
.bullet-row p{font-size:15px;color:#4a4a4a;line-height:1.6;margin:0}
.bullet-row strong{color:var(--primary)}

/* ─── PROG DOT / TAG VARIANTS ─── */
.prog-dot--alt{background:var(--secondary)}
.prog-tag--green{color:#3CE000;background:rgba(60,224,0,0.1)}

/* ─── BUTTON SIZE VARIANT ─── */
.btn-highlight--lg{font-size:16px;padding:16px 40px}

/* ─── SECTION 3 (cards) layout ─── */
.cards-section-inner{max-width:1200px;margin:0 auto}
.cards-section-header{text-align:center;margin-bottom:48px}
.cards-section-header .content-badge{margin:0 auto 14px}
.cards-section-header h2{
  font-family:'Google Sans Flex','Google Sans',sans-serif;
  font-size:clamp(26px,3vw,38px);font-weight:800;
  letter-spacing:-0.02em;color:var(--primary);line-height:1.15;
}
.cards-section-header p{font-size:16px;color:#666;max-width:560px;margin:12px auto 0;line-height:1.65}
.cards-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card-grid-mb{margin-bottom:20px}
.vc-note{font-size:12px;color:#aaa;line-height:1.5;margin-top:16px;padding-top:14px;border-top:1px solid var(--divider)}
.vc-desc{font-size:14px;color:#555;line-height:1.65;margin-bottom:18px}
.vc-label-spaced{margin-bottom:12px}
.prog-list--spaced{margin-bottom:16px}

/* ─── VENDOR CARD inner ─── */
.vendor-num-wrap{text-align:center;padding:20px 0}
.vendor-num{
  font-family:'Google Sans Flex',sans-serif;
  font-size:48px;font-weight:800;color:var(--highlight);
  letter-spacing:-0.03em;line-height:1;
  font-variant-numeric:tabular-nums;
  min-height:1.1em;
}
.vendor-num-lbl{font-size:13px;color:#888;margin-top:4px;margin-bottom:24px}

/* ─── DEMO SECTION INNER ─── */
.demo-inner{position:relative;z-index:1}
.demo-eyebrow{color:var(--secondary);text-align:center}

/* Light variant for use on dark backgrounds */
.btn-secondary--light{color:#aaa;border-color:rgba(255,255,255,0.2)}
.btn-secondary--light:hover{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.4)}

/* ─── RESPONSIVE (mobile: single-column stack) ───
   Gen-A page: op-base-a has no layout breakpoints, so nothing reflowed.
   Scoped under #main-content to win by specificity, not source order.
   .content-inner rows are text-first in the DOM, so they stack text-over-visual
   naturally; .flip's direction:rtl has no effect once single-column. */
@media (max-width:742px){
  #main-content .page-hero{padding:100px 20px 56px}
  #main-content .content-section{padding:56px 20px}
  #main-content .feature-links-section{padding:56px 20px}
  #main-content .demo-section{padding:64px 20px}

  #main-content .stat-bar-inner{grid-template-columns:repeat(2,1fr)}
  #main-content .content-inner{grid-template-columns:1fr;gap:36px}
  #main-content .feature-links-inner{grid-template-columns:1fr;gap:40px}
  #main-content .cards-split{grid-template-columns:1fr}
}
@media (max-width:600px){
  #main-content .page-hero h1{font-size:clamp(28px,7.5vw,42px)}
}