.odoo-hero{min-height:0;max-height:none;padding-bottom:2.5rem}
.odoo-hero .hero-row{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:center}
.odoo-hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.05;margin:.2rem 0 .9rem}
.odoo-hero .lede{font-size:1.15rem;color:var(--muted);max-width:40rem;margin-bottom:1.4rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem}
.odoo-logo{display:block;margin-bottom:.6rem}
.hero-shot{border-radius:var(--radius);border:1.5px solid var(--line);box-shadow:0 10px 30px rgba(34,22,16,.12);width:100%;height:auto}
.definition{border-left:5px solid #714b67;background:var(--card);border-radius:var(--radius);padding:1.4rem 1.6rem;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.definition h2{margin-top:0}
.answer-first{font-size:1.08rem;font-weight:500;color:var(--ink);background:var(--bg-alt);border-radius:10px;padding:1rem 1.2rem;margin:0 0 1.2rem}
.osec{padding:3.5rem 0} .osec h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.1;margin-bottom:1rem}
.pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;list-style:none;padding:0}
.pain li{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.pain strong{display:block;color:var(--accent-deep);margin-bottom:.3rem}
.cards.apps,.cards.inds{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.app-card h3{display:flex;align-items:center;gap:.6rem} .app-card h3 img{border-radius:8px}
.badge{display:inline-block;background:#714b67;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.15rem .55rem;margin-right:.3rem}
.card .src{font-size:.88rem;margin-top:.6rem} .verticals{font-style:italic}
.ind-card .checklist{font-size:.95rem;gap:.45rem}
.checklist{list-style:none;padding:0;display:grid;gap:.6rem;margin:1rem 0}
.checklist li{padding-left:1.6rem;position:relative} .checklist li::before{content:"\2713";position:absolute;left:0;color:var(--accent-deep);font-weight:700}
.tbl-wrap{overflow-x:auto} table.cmp{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);font-size:.97rem}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:.7rem .85rem;text-align:left;vertical-align:top} table.cmp thead th{background:var(--bg-alt)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem} .shots figure{margin:0} .shots img{width:100%;height:auto;border-radius:12px;border:1.5px solid var(--line)} .shots figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{counter-increment:s;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.2rem} .steps li::before{content:counter(s);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent-deep);color:#fff;font-weight:800;margin-bottom:.5rem}
.final-cta{text-align:center;padding:3rem 1rem} .final-cta .hero-ctas{justify-content:center}
.quote{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.odoo-hero nav a{color:inherit}
.legal{font-size:.82rem;color:var(--muted)}
@media (max-width:860px){.odoo-hero .hero-row{grid-template-columns:1fr} .hero-media{display:none}}
.sap{color:#0a6ed1;font-weight:800}.odoo{color:#8e44ad;font-weight:800}
h1 .sap,h2 .sap{color:#0a6ed1}.answer-first .sap,.definition .sap{color:#0a6ed1}
.badge-sap{background:#0a6ed1}.definition.sap-def{border-left-color:#0a6ed1}
.deploy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.page-hero h1 .sap{color:#0a6ed1}.page-hero h1 .odoo{color:#8e44ad}
.page-hero .hero-ctas{margin-top:1.4rem}
.hl{display:inline-block;color:#fff;border-radius:.18em;padding:0 .18em;line-height:1.05}
.hl-odoo{background:#714b67}.hl-sap{background:#0a6ed1}
.hl{text-transform:none}
.cards.apps,.cards.inds,.pain,.deploy{grid-template-columns:repeat(4,1fr)}
.shots{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.cards.apps,.cards.inds,.pain,.deploy{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards.apps,.cards.inds,.pain,.deploy,.shots,.steps{grid-template-columns:1fr}}
.steps{grid-template-columns:repeat(4,1fr)}@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
.sap,.answer-first .sap,.definition .sap{color:#0857a6}.page-hero h1 .sap,h2 .sap{color:#0a6ed1}
/* hero split (blog-style text + visual) */
.hero-split{display:grid;grid-template-columns:1.25fr 1fr;gap:2.5rem;align-items:center}
.hero-split .hero-visual img{width:100%;height:auto;border-radius:14px;border:1.5px solid var(--line);box-shadow:0 18px 40px rgba(34,22,16,.14);transform:rotate(-1deg)}
.hero-split .hero-visual figcaption{font-size:.75rem;color:var(--muted);margin-top:.5rem;text-align:right}
@media (max-width:860px){.hero-split{grid-template-columns:1fr;gap:1.5rem}.hero-split .hero-visual img{transform:none}}
/* zig-zag feature rows */
.zz{display:grid;gap:1.25rem;margin-top:1.5rem}
.zz-row{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:1.4rem 1.6rem}
.zz-row:nth-child(even) .zz-media{order:-1}
.zz-text h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em;margin:.35rem 0 .6rem;color:var(--ink)}
.pill{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-radius:999px;padding:.2rem .6rem}
.pill-sap{background:#0a6ed1}.pill-odoo{background:#714b67}
.ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem;font-size:.95rem}
.ticks li{position:relative;padding-left:1.45rem;line-height:1.35}
.ticks li::before{content:"";position:absolute;left:0;top:.18em;width:1rem;height:1rem;border-radius:50%;background:var(--tick,#0a6ed1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.zz-odoo .ticks li::before{--tick:#714b67}
.zz-media img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.zz-media figcaption{font-size:.72rem;color:var(--muted);margin-top:.3rem}
.zz-src{font-size:.8rem;color:var(--muted);margin-top:.8rem}
/* UI mockup */
.mock{border-radius:12px;overflow:hidden;border:1px solid #d5dde8;background:#f5f7fa;font-size:.78rem;box-shadow:0 8px 22px rgba(10,40,80,.08)}
.mock-bar{background:#354a5f;color:#fff;padding:.45rem .75rem;font-weight:700;display:flex;justify-content:space-between}
.mock-odoo .mock-bar{background:#714b67}
.mock-row{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .75rem;border-top:1px solid #e3e8ef;background:#fff;color:#32363a}
.mock-tag{border-radius:999px;padding:0 .5rem;font-weight:700;font-size:.7rem;background:#e5f0fa;color:#0a4f96}
.mock-odoo .mock-tag{background:#f1e8ef;color:#5b3a53}
.mock-ai{background:#eef5fd;padding:.6rem .75rem;color:#0a3d72;border-top:1px solid #d5e4f5}
.mock-odoo .mock-ai{background:#f6eff4;color:#4f2f47}
@media (max-width:860px){.zz-row{grid-template-columns:1fr;padding:1.1rem}.zz-row:nth-child(even) .zz-media{order:0}.zz-row .zz-media{display:none}.zz-row:first-child .zz-media{display:block}}
@media (max-width:420px){.ticks{grid-template-columns:1fr}}
/* zz accordion */
.zz{gap:.6rem}
.zz-row{display:block;padding:0;overflow:hidden;border-radius:14px}
.zz-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:.75rem 1.2rem}
.zz-sum::-webkit-details-marker{display:none}
.zz-sum h3{margin:0;flex:1;font-family:var(--font-display);text-transform:uppercase;font-size:1.2rem;letter-spacing:.02em}
.zz-sum::after{content:"+";font-weight:800;font-size:1.4rem;line-height:1;color:var(--accent-deep)}
.zz-row[open] .zz-sum::after{content:"\2013"}
.zz-n{font-size:.8rem;color:var(--muted)}
.zz-body{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;padding:0 1.2rem 1.1rem}
.zz-row:nth-child(even) .zz-body .zz-media{order:-1}
@media (max-width:860px){.zz-row{padding:0}.zz-body{grid-template-columns:1fr}.zz-row:nth-child(even) .zz-body .zz-media{order:0}.zz-row .zz-media{display:block}.zz-n{display:none}}
.osec .answer-first{margin-bottom:1rem}
/* zz accordion */
.zz{gap:.6rem}
.zz-row{display:block;padding:0;overflow:hidden;border-radius:14px}
.zz-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:.75rem 1.2rem}
.zz-sum::-webkit-details-marker,.ind-acc summary::-webkit-details-marker{display:none}
.zz-sum h3{margin:0;flex:1;font-family:var(--font-display);text-transform:uppercase;font-size:1.2rem;letter-spacing:.02em}
.zz-sum::after,.ind-acc summary::after{content:"+";font-weight:800;font-size:1.4rem;line-height:1;color:var(--accent-deep)}
.zz-row[open] .zz-sum::after,.ind-acc[open] summary::after{content:"\2013"}
.zz-n{font-size:.8rem;color:var(--muted)}
.zz-body{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;padding:0 1.2rem 1.1rem}
.zz-row:nth-child(even) .zz-body .zz-media{order:-1}
@media (max-width:860px){.zz-row{padding:0}.zz-body{grid-template-columns:1fr}.zz-row:nth-child(even) .zz-body .zz-media{order:0}.zz-row .zz-media{display:block}.zz-n{display:none}}
/* industries accordion */
.inds-acc{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;align-items:start;margin-top:1rem}
.ind-acc{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:.7rem 1.1rem}
.ind-acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;column-gap:.6rem}
.ind-acc summary::after{grid-row:1/3;grid-column:2;align-self:center}
.ind-acc h3{margin:0;font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;color:var(--ink)}
.ind-acc .verticals{font-size:.82rem;color:var(--muted);font-style:normal}
.ind-acc .ticks{margin:.7rem 0 .3rem;grid-template-columns:1fr;font-size:.9rem}
.ind-acc .src{font-size:.82rem;margin:0}
.inds-acc .ticks li::before{--tick:#714b67}
@media (max-width:700px){.inds-acc{grid-template-columns:1fr}}
/* condensed spacing */
.osec{padding:2.4rem 0}.osec h2{margin-bottom:.7rem}.osec .answer-first{margin-bottom:1rem;padding:.85rem 1.1rem}
table.cmp th,table.cmp td{padding:.5rem .7rem;font-size:.92rem}
.faq-list{gap:.5rem}
/* ===== FX layer ===== */
.fx-sap{--g1:#0a6ed1;--g2:#19a0ff;--g3:#5b3cc4}.fx-odoo{--g1:#714b67;--g2:#b04ea8;--g3:#e2589c}
.hl{background:linear-gradient(110deg,var(--g1),var(--g2),var(--g3),var(--g1));background-size:300% 100%;animation:fxshift 6s linear infinite}
@keyframes fxshift{to{background-position:300% 0}}
.page-hero{position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:55vw;height:55vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--g2) 22%,transparent),transparent 65%);pointer-events:none;animation:fxfloat 9s ease-in-out infinite alternate}
.page-hero>.wrap{position:relative}
.page-hero .btn-primary{box-shadow:0 0 0 0 color-mix(in srgb,var(--g2) 55%,transparent),0 8px 22px rgba(193,18,31,.3);animation:fxglow 2.6s ease-out infinite}
@keyframes fxglow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g2) 55%,transparent),0 8px 22px rgba(193,18,31,.3)}70%{box-shadow:0 0 0 14px transparent,0 8px 22px rgba(193,18,31,.3)}100%{box-shadow:0 0 0 0 transparent,0 8px 22px rgba(193,18,31,.3)}}
.hero-split .hero-visual img{box-shadow:0 30px 60px -12px color-mix(in srgb,var(--g1) 45%,transparent),0 18px 36px -18px rgba(0,0,0,.35);animation:fxfloat 6s ease-in-out infinite alternate}
@keyframes fxfloat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-10px) rotate(.5deg)}}
.zz-media img,.zz-media .mock{box-shadow:0 22px 44px -16px color-mix(in srgb,var(--g1) 40%,transparent);transition:transform .35s ease}
.zz-media:hover img,.zz-media:hover .mock{transform:translateY(-4px) scale(1.01)}
.osec+.osec{position:relative}
.osec+.osec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1120px,90%);height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--g1),var(--g2),var(--g3),transparent);background-size:200% 100%;animation:fxshift 8s linear infinite;opacity:.55}
/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:0 auto;max-width:var(--container-max);padding:0 1.25rem}
.stat{border-radius:16px;padding:1rem 1.1rem;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));background-size:200% 200%;animation:fxshift 10s linear infinite;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--g1) 70%,transparent)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;opacity:.95}
.stats-src{max-width:var(--container-max);margin:.5rem auto 0;padding:0 1.25rem;font-size:.75rem;color:var(--muted)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
/* scroll reveal (CSS-only, transform/opacity: no layout shift) */
@supports (animation-timeline:view()){
 .zz-row,.ind-acc,.pain li,.deploy .card,.steps li,.stat,.tbl-wrap,.definition{animation:fxin linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@keyframes fxin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hl,.stat,.page-hero::before,.page-hero .btn-primary,.hero-split .hero-visual img,.osec+.osec::before,.zz-row,.ind-acc,.pain li,.deploy .card,.steps li,.tbl-wrap,.definition{animation:none!important}}
.fx-sap{--s1:#08498a;--s2:#0a5fb5;--s3:#3b2a9a}.fx-odoo{--s1:#4f2f47;--s2:#714b67;--s3:#8a3680}
.stat{background:linear-gradient(135deg,var(--s1),var(--s2) 60%,var(--s3));background-size:200% 200%}
.hl{background:linear-gradient(110deg,var(--s1),var(--s2),var(--s3),var(--s1));background-size:300% 100%}
@font-face{font-family:"AntonO";font-style:normal;font-weight:400;font-display:optional;src:url(/assets/fonts/anton-latin.woff2) format("woff2")}
main.fx-sap,main.fx-odoo{--font-display:"AntonO","Anton","Arial Black",Impact,sans-serif}
main.fx-sap .page-hero h1,main.fx-odoo .page-hero h1{font-family:"AntonO","Anton","Arial Black",Impact,sans-serif}
@media (min-width:861px){main.fx-sap .page-hero,main.fx-odoo .page-hero{min-height:540px}}