/* AgendaFlow PHP layer — keeps the Lovable design and adds the commercial/product sections. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body.af-menu-open { overflow: hidden; }

/* Official brand lockup using the official AgendaFlow icon. */
.af-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.af-brand img { width: 43px; height: 43px; object-fit: contain; }
.af-brand span { font-family: Manrope, Inter, sans-serif; font-size: 1.2rem; font-weight: 800; letter-spacing: -.04em; color: #2469bf; }
.af-brand b { color: #4fab23; font-weight: 800; }

.af-mobile-menu {
  position: fixed; inset: 64px 0 auto 0; z-index: 49; padding: 12px 20px 18px;
  background: color-mix(in oklab, var(--background) 96%, transparent);
  border-bottom: 1px solid var(--border); box-shadow: 0 18px 35px rgb(0 0 0 / .16); backdrop-filter: blur(18px);
}
.af-mobile-menu[hidden] { display: none !important; }
.af-mobile-menu-inner { display: grid; gap: 4px; max-width: 1280px; margin: 0 auto; }
.af-mobile-menu a { display:flex; align-items:center; min-height:44px; padding:0 10px; border-radius:9px; font-size:.92rem; font-weight:600; color:var(--foreground); text-decoration:none; }
.af-mobile-menu a:hover { background: color-mix(in oklab, var(--surface) 85%, white 4%); }
.af-mobile-menu-cta { justify-content:center; margin-top:8px; background:var(--primary); color:var(--primary-foreground)!important; }

/* Shared commercial sections */
.af-section-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.af-section-intro { max-width: 820px; }
.af-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--primary); font-size:.72rem; line-height:1; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.af-kicker::before { content:""; width:26px; height:2px; border-radius:99px; background:linear-gradient(90deg,var(--primary),var(--accent)); }
.af-section-intro h2, .af-product-head h2, .af-beyond-intro h2 { margin-top:16px; font-family:Manrope,Inter,sans-serif; font-size:clamp(2rem,4vw,3.7rem); line-height:1.06; font-weight:800; letter-spacing:-.045em; }
.af-section-intro > p, .af-product-head > p, .af-beyond-intro > p { margin-top:18px; color:var(--muted-foreground); font-size:1.05rem; line-height:1.8; }

/* Reveal motion for the PHP-specific content. */
.af-reveal { opacity:0; transform:translate3d(0,28px,0) scale(.99); filter:blur(5px); transition:opacity .75s cubic-bezier(.22,.8,.32,1), transform .75s cubic-bezier(.22,.8,.32,1), filter .75s ease; transition-delay:var(--af-delay,0ms); }
.af-reveal.af-visible { opacity:1; transform:none; filter:none; }

/* Pain section */
.af-pain-section { padding:104px 0; border-top:1px solid var(--border); background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 72%,transparent),transparent); }
.af-pain-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:44px; }
.af-pain-card { min-height:220px; padding:24px; border:1px solid var(--border); border-radius:18px; background:color-mix(in oklab,var(--surface) 78%,transparent); position:relative; overflow:hidden; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.af-pain-card::after { content:""; position:absolute; width:120px; height:120px; right:-60px; bottom:-68px; border-radius:50%; background:radial-gradient(circle,color-mix(in oklab,var(--primary) 18%,transparent),transparent 68%); opacity:.75; }
.af-pain-card:hover { transform:translateY(-4px); border-color:color-mix(in oklab,var(--primary) 45%,var(--border)); box-shadow:0 24px 55px rgb(0 0 0 / .16); }
.af-pain-card > span { color:var(--primary); font-family:Manrope,sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.12em; }
.af-pain-card h3 { margin-top:38px; font-family:Manrope,sans-serif; font-weight:800; font-size:1.05rem; }
.af-pain-card p { margin-top:10px; color:var(--muted-foreground); font-size:.86rem; line-height:1.7; }

/* Before / after */
.af-compare-section { padding:100px 0; border-y:1px solid var(--border); background:color-mix(in oklab,var(--background) 91%,var(--surface)); }
.af-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.af-compare-card { padding:26px; border:1px solid var(--border); border-radius:20px; background:color-mix(in oklab,var(--surface) 82%,transparent); position:relative; overflow:hidden; }
.af-compare-card.af-after { border-color:color-mix(in oklab,var(--primary) 42%,var(--border)); background:linear-gradient(145deg,color-mix(in oklab,var(--primary) 9%,var(--surface)),color-mix(in oklab,var(--accent) 5%,var(--surface))); }
.af-compare-label { display:inline-flex; padding:7px 10px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--border); color:var(--muted-foreground); }
.af-after .af-compare-label { color:var(--primary); border-color:color-mix(in oklab,var(--primary) 32%,var(--border)); background:color-mix(in oklab,var(--primary) 9%,transparent); }
.af-compare-card ol { list-style:none; display:grid; gap:13px; margin-top:22px; }
.af-compare-card li { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px; border-radius:12px; background:rgb(255 255 255 / .025); color:color-mix(in oklab,var(--foreground) 88%,transparent); font-size:.86rem; }
.af-compare-card li b { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--border); color:var(--muted-foreground); font-size:.68rem; }
.af-after li b { color:var(--primary); border-color:color-mix(in oklab,var(--primary) 40%,var(--border)); }

/* Product / real screenshots */
.af-product-section { padding:110px 0; }
.af-product-head { display:grid; grid-template-columns:1.05fr .75fr; gap:70px; align-items:end; }
.af-product-head > p { margin:0 0 5px; }
.af-showcase { margin-top:50px; }
.af-showcase-tabs { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none; scroll-snap-type:x proximity; }
.af-showcase-tabs::-webkit-scrollbar { display:none; }
.af-showcase-tabs button { flex:0 0 auto; min-height:39px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:color-mix(in oklab,var(--surface) 86%,transparent); color:var(--muted-foreground); font:700 .73rem Inter,sans-serif; white-space:nowrap; scroll-snap-align:center; cursor:pointer; transition:all .22s ease; }
.af-showcase-tabs button:hover { color:var(--foreground); border-color:color-mix(in oklab,var(--primary) 38%,var(--border)); transform:translateY(-1px); }
.af-showcase-tabs button.active { color:#06101f; border-color:transparent; background:linear-gradient(110deg,var(--primary),var(--accent)); box-shadow:0 12px 28px color-mix(in oklab,var(--primary) 22%,transparent); }
.af-showcase-media { position:relative; overflow:hidden; width:100%; aspect-ratio:1200/630; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:0 32px 80px rgb(0 0 0 / .22); }
.af-showcase-media::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .035); }
.af-showcase-media picture, .af-showcase-media img { display:block; width:100%; height:100%; }
.af-showcase-media img { object-fit:cover; opacity:1; transform:scale(1); transition:opacity .28s ease, transform .6s cubic-bezier(.22,.8,.32,1); }
.af-showcase-media img.af-switching { opacity:.08; transform:scale(.992); }
.af-showcase-copy { max-width:900px; padding:21px 4px 5px; }
.af-showcase-copy span { color:var(--primary); font-size:.66rem; font-weight:800; letter-spacing:.14em; }
.af-showcase-copy h3 { margin-top:5px; font-family:Manrope,sans-serif; font-size:1.4rem; font-weight:800; letter-spacing:-.025em; }
.af-showcase-copy p { margin-top:8px; color:var(--muted-foreground); font-size:.95rem; line-height:1.72; }

/* Beyond calendar */
.af-beyond { margin-top:82px; padding:40px; border:1px solid var(--border); border-radius:24px; background:linear-gradient(145deg,color-mix(in oklab,var(--surface) 92%,transparent),color-mix(in oklab,var(--primary) 4%,var(--surface))); }
.af-beyond-intro { max-width:790px; }
.af-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.af-capabilities article { padding:20px; min-height:155px; border:1px solid var(--border); border-radius:15px; background:rgb(255 255 255 / .018); transition:transform .22s ease,border-color .22s ease; }
.af-capabilities article:hover { transform:translateY(-3px); border-color:color-mix(in oklab,var(--accent) 35%,var(--border)); }
.af-capabilities strong { display:block; font-family:Manrope,sans-serif; font-size:.93rem; }
.af-capabilities p { margin-top:9px; color:var(--muted-foreground); font-size:.8rem; line-height:1.65; }

/* Value by stakeholder */
.af-stakeholder-section { padding:105px 0; border-y:1px solid var(--border); background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 54%,transparent),transparent); }
.af-stakeholder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:44px; }
.af-stakeholder-card { min-height:210px; padding:23px; border:1px solid var(--border); border-radius:17px; background:color-mix(in oklab,var(--surface) 78%,transparent); transition:transform .25s ease,border-color .25s ease; }
.af-stakeholder-card:hover { transform:translateY(-4px); border-color:color-mix(in oklab,var(--primary) 38%,var(--border)); }
.af-stakeholder-card > span { color:var(--primary); font-size:.65rem; font-weight:800; letter-spacing:.13em; }
.af-stakeholder-card h3 { margin-top:34px; font-family:Manrope,sans-serif; font-size:1.08rem; font-weight:800; }
.af-stakeholder-card p { margin-top:9px; color:var(--muted-foreground); font-size:.83rem; line-height:1.68; }

/* Lovable export leaves reveal blocks invisible until React hydrates. */
.af-reveal-ready { will-change: opacity, transform; }

/* FAQ static/PHP behavior. */
#faq [role="region"] { padding:0; }
#faq [data-state="open"] > h3 button svg { transform:rotate(180deg); }
#faq button svg { transition:transform .2s ease; }

@media (max-width: 900px) {
  .af-section-shell { width:min(100% - 32px,1180px); }
  .af-pain-grid, .af-stakeholder-grid { grid-template-columns:1fr 1fr; }
  .af-product-head { grid-template-columns:1fr; gap:20px; }
  .af-product-head > p { margin:0; }
  .af-capabilities { grid-template-columns:1fr 1fr; }
  .af-beyond { padding:28px; }
}

@media (max-width: 620px) {
  html { scroll-padding-top:68px; }
  .af-brand { gap:7px; }
  .af-brand img { width:39px; height:39px; }
  .af-brand span { font-size:1.1rem; }
  .af-pain-section, .af-compare-section, .af-product-section, .af-stakeholder-section { padding:76px 0; }
  .af-section-intro h2, .af-product-head h2, .af-beyond-intro h2 { font-size:clamp(1.9rem,9.5vw,2.7rem); }
  .af-section-intro > p, .af-product-head > p, .af-beyond-intro > p { font-size:.94rem; line-height:1.7; }
  .af-pain-grid, .af-compare-grid, .af-stakeholder-grid, .af-capabilities { grid-template-columns:1fr; }
  .af-pain-card, .af-stakeholder-card { min-height:185px; }
  .af-showcase { margin-top:34px; }
  .af-showcase-tabs { margin-inline:-16px; padding-inline:16px; }
  .af-showcase-tabs button { min-height:38px; font-size:.7rem; padding-inline:13px; }
  .af-showcase-media { border-radius:13px; box-shadow:0 20px 52px rgb(0 0 0 / .18); }
  .af-showcase-copy { padding:15px 2px 0; }
  .af-showcase-copy h3 { font-size:1.18rem; }
  .af-showcase-copy p { font-size:.85rem; line-height:1.65; }
  .af-beyond { margin-top:58px; padding:22px; border-radius:18px; }
  .af-capabilities article { min-height:140px; }
}

@media (min-width: 1024px) { .af-mobile-menu { display:none!important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .transition-all { transition:none!important; }
  .af-reveal { opacity:1!important; transform:none!important; filter:none!important; transition:none!important; }
  .af-showcase-media img { transition:none!important; }
}