/* ═══════════════════════════════════════════════════════════════════
   odoo-redesign.css — Web&Code Tech Discover Odoo Page
   ═══════════════════════════════════════════════════════════════════ */

.odoo-page { background:#0B0F14; color:#fff; overflow-x:hidden; }

/* ── HERO ────────────────────────────────────────────────────────── */
.odoo-hero {
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(120px,16vw,200px) clamp(20px,5vw,96px) clamp(100px,12vw,160px);
  overflow:hidden; text-align:center;
}
.odoo-hero__noise {
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:256px; opacity:.3; pointer-events:none;
}
.odoo-hero__orbs { position:absolute; inset:0; pointer-events:none; }
.odoo-hero__orb { position:absolute; border-radius:50%; filter:blur(80px); }
.odoo-hero__orb--1 { width:600px; height:500px; top:-100px; left:-100px; background:radial-gradient(circle,rgba(255,127,65,.12) 0%,transparent 70%); }
.odoo-hero__orb--2 { width:500px; height:400px; bottom:-80px; right:-80px; background:radial-gradient(circle,rgba(255,127,65,.08) 0%,transparent 70%); }
.odoo-hero__inner { position:relative; z-index:2; max-width:980px; margin:0 auto; }
.odoo-hero__badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,127,65,.1); border:1px solid rgba(255,127,65,.35); color:#F97316;
  padding:9px 22px; border-radius:9999px; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:2.5rem;
  animation:fadeUp .6s ease both;
}
.odoo-hero__title {
  font-family:'Barlow',sans-serif; font-weight:900;
  font-size:clamp(40px,7.5vw,92px); line-height:.92;
  letter-spacing:-.03em; text-transform:uppercase; color:#fff;
  margin-bottom:2rem; animation:fadeUp .7s .1s ease both;
}
.odoo-hero__title-accent { display:block; background:linear-gradient(135deg,#F97316,#EA580C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.odoo-hero__title-dim { display:block; color:rgba(255,255,255,.2); }
.odoo-hero__lead { font-size:clamp(16px,1.8vw,19px); line-height:1.7; color:rgba(255,255,255,.55); max-width:780px; margin:0 auto 2.5rem; animation:fadeUp .7s .2s ease both; }
.odoo-hero__ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; animation:fadeUp .7s .3s ease both; }
.odoo-hero__pill {
  display:inline-flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px 24px; font-size:14px; animation:fadeUp .7s .4s ease both;
}
.odoo-hero__pill-before,.odoo-hero__pill-after { display:flex; flex-direction:column; align-items:center; gap:2px; color:rgba(255,255,255,.4); }
.odoo-hero__pill-old { display:block; font-family:'Barlow',sans-serif; font-size:20px; font-weight:800; text-decoration:line-through; color:rgba(255,80,80,.7); }
.odoo-hero__pill-arrow { font-size:22px; color:#F97316; font-weight:700; }
.odoo-hero__pill-after strong { font-family:'Barlow',sans-serif; font-size:24px; font-weight:900; color:#F97316; letter-spacing:-.01em; }
.odoo-hero__pill--statement {
  gap:10px; font-size:15px; font-weight:600; color:rgba(255,255,255,.75);
  border-color:rgba(255,127,65,.22); background:rgba(255,127,65,.06);
  letter-spacing:.01em;
}
.odoo-hero__pill--statement svg { color:#FF7F41; flex-shrink:0; }

/* ── PAIN ────────────────────────────────────────────────────────── */
.odoo-pain { padding:clamp(80px,10vw,140px) clamp(20px,5vw,96px); background:#111827; position:relative; }
.odoo-pain::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,127,65,.3),transparent); }
.odoo-pain__inner { max-width:1240px; margin:0 auto; }
.odoo-pain__header { max-width:700px; margin-bottom:3.5rem; }
.odoo-pain__headline { font-family:'Barlow',sans-serif; font-size:clamp(32px,4.5vw,54px); font-weight:900; color:#fff; letter-spacing:-.025em; line-height:1.05; margin-bottom:1rem; }
.odoo-pain__headline em { font-style:normal; background:linear-gradient(135deg,#F97316,#EA580C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.odoo-pain__sub { font-size:16px; color:rgba(255,255,255,.45); line-height:1.6; }
.odoo-pain__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pain-card { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:2rem; transition:all .3s ease; }
.pain-card:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); transform:translateY(-3px); }
.pain-card--highlight { background:rgba(255,127,65,.04); border-color:rgba(255,127,65,.12); }
.pain-card--highlight:hover { border-color:rgba(255,127,65,.3); background:rgba(255,127,65,.08); }
.pain-card__icon { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); margin-bottom:1.25rem; }
.pain-card__icon--orange { background:rgba(255,127,65,.12); color:#F97316; }
.pain-card h3 { font-family:'Barlow',sans-serif; font-size:19px; font-weight:700; color:#fff; margin-bottom:10px; }
.pain-card p { font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.48); }

/* ── MODULES ────────────────────────────────────────────────────── */
.odoo-modules { padding:clamp(80px,10vw,140px) clamp(20px,5vw,96px); background:#0B0F14; }
.odoo-modules__inner { max-width:1240px; margin:0 auto; }
.odoo-modules__header { text-align:center; max-width:680px; margin:0 auto 4rem; }
.odoo-modules__headline { font-family:'Barlow',sans-serif; font-size:clamp(34px,5vw,54px); font-weight:900; color:#fff; letter-spacing:-.025em; line-height:1.05; margin-bottom:1rem; }
.odoo-modules__headline em { font-style:normal; background:linear-gradient(135deg,#F97316,#EA580C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.odoo-modules__sub { font-size:16px; color:rgba(255,255,255,.48); line-height:1.65; }
.odoo-modules__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.module-card { position:relative; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:1.75rem 1.5rem; transition:all .35s cubic-bezier(.22,1,.36,1); overflow:hidden; }
.module-card:hover { background:rgba(255,255,255,.05); border-color:rgba(255,127,65,.25); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.module-card--featured { background:linear-gradient(135deg,rgba(255,127,65,.1),rgba(255,100,40,.04)); border-color:rgba(255,127,65,.3); }
.module-card--featured:hover { border-color:rgba(255,127,65,.55); box-shadow:0 20px 50px rgba(255,127,65,.15); }
.module-card__icon-wrap { width:48px; height:48px; border-radius:12px; background:rgba(255,127,65,.15); display:flex; align-items:center; justify-content:center; color:#F97316; margin-bottom:1.25rem; }
.module-card__icon-wrap--dim { background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); }
.module-card:hover .module-card__icon-wrap--dim { background:rgba(255,127,65,.1); color:#F97316; }
.module-card h3 { font-family:'Barlow',sans-serif; font-size:17px; font-weight:700; color:#fff; margin-bottom:10px; }
.module-card p { font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.45); }
.module-card__tag { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,127,65,.2); color:#F97316; padding:4px 10px; border-radius:9999px; }

/* ── ADVANTAGE ─────────────────────────────────────────────────── */
.odoo-advantage { padding:clamp(80px,10vw,140px) clamp(20px,5vw,96px); background:#111827; position:relative; }
.odoo-advantage::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,127,65,.3),transparent); }
.odoo-advantage__inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.odoo-advantage__headline { font-family:'Barlow',sans-serif; font-size:clamp(30px,4vw,48px); font-weight:900; color:#fff; letter-spacing:-.025em; line-height:1.05; margin-bottom:1.25rem; }
.odoo-advantage__headline em { font-style:normal; background:linear-gradient(135deg,#F97316,#EA580C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.odoo-advantage__body { font-size:16px; line-height:1.7; color:rgba(255,255,255,.5); }
.advantage-list { display:flex; flex-direction:column; gap:1.5rem; }
.adv-item { display:flex; gap:16px; align-items:flex-start; }
.adv-item__check { width:32px; height:32px; border-radius:50%; background:rgba(255,127,65,.15); border:1px solid rgba(255,127,65,.3); display:flex; align-items:center; justify-content:center; color:#F97316; flex-shrink:0; margin-top:2px; }
.adv-item h4 { font-family:'Barlow',sans-serif; font-size:16px; font-weight:700; color:#fff; margin-bottom:5px; }
.adv-item p { font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.45); }

/* ── ROI ──────────────────────────────────────────────────────── */
.odoo-roi { padding:clamp(80px,10vw,140px) clamp(20px,5vw,96px); background:#0B0F14; position:relative; overflow:hidden; }
.odoo-roi__glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:500px; background:radial-gradient(ellipse,rgba(255,127,65,.1) 0%,transparent 65%); pointer-events:none; filter:blur(40px); }
.odoo-roi__inner { max-width:1240px; margin:0 auto; position:relative; z-index:1; }
.odoo-roi__headline { font-family:'Barlow',sans-serif; font-size:clamp(36px,5vw,56px); font-weight:900; color:#fff; letter-spacing:-.025em; text-align:center; margin-bottom:3.5rem; }
.odoo-roi__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.roi-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:2.25rem 1.75rem; text-align:center; transition:all .3s ease; }
.roi-card:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); transform:translateY(-4px); }
.roi-card--featured { background:linear-gradient(135deg,rgba(255,127,65,.1),rgba(255,127,65,.04)); border-color:rgba(255,127,65,.25); }
.roi-card--featured:hover { border-color:rgba(255,127,65,.45); }
.roi-card__val { font-family:'Barlow',sans-serif; font-size:clamp(36px,5vw,56px); font-weight:900; color:#fff; letter-spacing:-.03em; line-height:1; margin-bottom:10px; }
.roi-card--featured .roi-card__val { background:linear-gradient(135deg,#F97316,#EA580C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.roi-card__label { font-family:'Barlow',sans-serif; font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; }
.roi-card__desc { font-size:13px; line-height:1.6; color:rgba(255,255,255,.4); }

/* ── CTA ──────────────────────────────────────────────────────── */
.odoo-cta { position:relative; padding:clamp(100px,14vw,180px) clamp(20px,5vw,96px); background:#111827; text-align:center; overflow:hidden; }
.odoo-cta__noise { position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity:.3; pointer-events:none; }
.odoo-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(255,127,65,.13) 0%,transparent 60%); pointer-events:none; }
.odoo-cta__inner { max-width:780px; margin:0 auto; position:relative; z-index:2; }
.odoo-cta__headline { font-family:'Barlow',sans-serif; font-size:clamp(42px,7vw,82px); font-weight:900; color:#fff; letter-spacing:-.03em; line-height:.95; text-transform:uppercase; margin-bottom:1.75rem; }
.odoo-cta__accent { display:block; background:linear-gradient(135deg,#F97316,#EA580C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.odoo-cta__sub { font-size:clamp(16px,2vw,19px); line-height:1.65; color:rgba(255,255,255,.52); margin-bottom:2.5rem; }
.odoo-cta__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.odoo-cta__note { font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(255,255,255,.28); letter-spacing:.04em; }

@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ── ODOO DEMO BUTTON ──────────────────────────────────────────── */
.odoo-demo-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.btn--demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255,127,65,0.18) 0%, rgba(255,127,65,0.08) 100%);
  border: 1.5px solid rgba(255,127,65,0.55);
  color: #F97316;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 9999px;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.btn--demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,127,65,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn--demo:hover {
  background: linear-gradient(135deg, rgba(255,127,65,0.28) 0%, rgba(255,127,65,0.14) 100%);
  border-color: #F97316;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 127, 65, 0.25);
  color: #fff;
}

.btn--demo:hover::before { opacity: 1; }

.btn--demo svg { flex-shrink: 0; }

.odoo-demo-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

.odoo-demo-note svg { color: rgba(255,127,65,0.6); flex-shrink: 0; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:1100px){.odoo-modules__grid{grid-template-columns:repeat(2,1fr)}.odoo-roi__grid{grid-template-columns:repeat(2,1fr)}.odoo-advantage__inner{grid-template-columns:1fr;gap:4rem}}
@media(max-width:768px){.odoo-pain__grid{grid-template-columns:1fr}.odoo-modules__grid{grid-template-columns:1fr}.odoo-hero__ctas,.odoo-cta__actions{flex-direction:column;align-items:center}}
@media(max-width:480px){.odoo-roi__grid{grid-template-columns:1fr}}