/* ============================================================================
   digital.css — shared styles for the Digital & AI Solutions subdomain
   (digital.html + the four service pages). On-brand navy/teal base with a
   distinct teal->emerald "digital" accent.
   ========================================================================== */

:root { --dg-grad: linear-gradient(100deg, #66CFC5 0%, #00A89C 46%, #009966 100%); }
.dg-grad { background: var(--dg-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dg-eb { color: var(--fw-teal-300) !important; }

/* ── Hero ─────────────────────────────────────────────────────── */
.dg-hero { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--fw-navy) 0%, var(--fw-navy-900) 100%); color:#fff; padding: clamp(96px,13vh,160px) 0 clamp(76px,10vh,120px); }
.dg-hero.dg-hero-sub { padding: clamp(72px,10vh,120px) 0 clamp(60px,8vh,96px); }
.dg-hero .container { position: relative; z-index: 2; }
.dg-hero-glow { position:absolute; inset:-20% -10% -20% -10%; z-index:0; pointer-events:none;
  background: radial-gradient(38% 46% at 78% 26%, rgba(0,168,156,0.42), transparent 70%), radial-gradient(34% 40% at 20% 78%, rgba(0,153,102,0.34), transparent 72%), radial-gradient(30% 34% at 60% 62%, rgba(102,207,197,0.22), transparent 70%);
  filter: blur(8px); animation: dgFloat 18s ease-in-out infinite alternate; }
.dg-grid-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.5;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: radial-gradient(70% 70% at 60% 30%, #000, transparent 100%); mask-image: radial-gradient(70% 70% at 60% 30%, #000, transparent 100%); }
@keyframes dgFloat { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .dg-hero-glow { animation: none; } }

.dg-title { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color:#fff; font-size: clamp(38px,5.8vw,84px); line-height:0.96; letter-spacing:-0.015em; margin: 18px 0 0; max-width: 17ch; }
.dg-lead { font-family: var(--font-body); font-size: clamp(16px,1.5vw,20px); line-height:1.6; color: rgba(255,255,255,0.82); max-width: 640px; margin: 26px 0 0; }
.dg-lead b { color:#fff; font-weight:600; }
.dg-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top: 38px; }
.dg-ghost { background: transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); }
.dg-ghost:hover { border-color: var(--fw-teal-300); color: var(--fw-teal-300); }
.dg-meta { display:flex; gap:40px; flex-wrap:wrap; margin-top:52px; }
.dg-meta-col { position:relative; padding-top:18px; }
.dg-meta-col::before { content:""; position:absolute; left:0; top:0; width:64px; height:2px; background: var(--dg-grad); }
.dg-meta-k { font-family: var(--font-mono); font-size:11px; color: rgba(255,255,255,0.55); letter-spacing:0.08em; text-transform:uppercase; }
.dg-meta-v { font-family: var(--font-display); font-weight:500; font-size:20px; color:#fff; margin-top:6px; letter-spacing:0.02em; text-transform:uppercase; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.dg-crumb { font-family: var(--font-mono); font-size:12px; letter-spacing:0.06em; color: rgba(255,255,255,0.6); }
.dg-crumb a { color: var(--fw-teal-300); text-decoration:none; }
.dg-crumb a:hover { text-decoration:underline; }
.dg-crumb span { margin:0 8px; opacity:0.5; }

/* ── Headings ─────────────────────────────────────────────────── */
.dg-h2 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size: clamp(30px,4.2vw,56px); line-height:0.99; letter-spacing:-0.005em; margin:16px 0 0; }
html[data-theme="dark"] .dg-h2 { color:#fff; }
.dg-h3 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size: clamp(22px,2.4vw,30px); line-height:1.02; letter-spacing:-0.005em; margin:0; }
html[data-theme="dark"] .dg-h3 { color:#fff; }

/* ── What we offer (feature grid) ─────────────────────────────── */
.dg-offer { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:44px; }
.dg-offer-item { background: var(--bg-1); border:1px solid var(--border-1); border-radius:12px; padding:28px 28px 26px; position:relative; overflow:hidden; transition: border-color 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard), transform 220ms var(--ease-standard); }
.dg-offer-item::before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background: var(--dg-grad); transform:scaleX(0); transform-origin:left; transition: transform 300ms var(--ease-standard); }
.dg-offer-item:hover { transform: translateY(-3px); border-color: rgba(0,168,156,0.45); box-shadow: 0 22px 50px -30px rgba(0,168,156,0.5); }
.dg-offer-item:hover::before { transform: scaleX(1); }
.dg-offer-icon { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; background: var(--dg-grad); margin-bottom:16px; }
.dg-offer-icon svg { width:23px; height:23px; }
.dg-offer-item h3 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:20px; letter-spacing:-0.005em; margin:0 0 8px; }
html[data-theme="dark"] .dg-offer-item h3 { color:#fff; }
.dg-offer-item p { font-family: var(--font-body); font-size:14px; line-height:1.6; color: var(--fg-2); margin:0; }

/* ── Process steps ────────────────────────────────────────────── */
.dg-steps { display:grid; grid-template-columns: repeat(5,1fr); gap:0; margin-top:44px; border-top:1px solid var(--border-1); }
.dg-step { padding:28px 22px 28px 0; border-right:1px solid var(--border-1); position:relative; }
.dg-step:last-child { border-right:none; padding-right:0; }
.dg-step-n { font-family: var(--font-mono); font-size:12px; letter-spacing:0.1em; background: var(--dg-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-bottom:14px; }
.dg-step h4 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:18px; line-height:1.02; letter-spacing:-0.005em; margin:0 0 8px; }
html[data-theme="dark"] .dg-step h4 { color:#fff; }
.dg-step p { font-family: var(--font-body); font-size:13px; line-height:1.55; color: var(--fg-2); margin:0; }

/* ── Why / what makes us special (dark grid) ──────────────────── */
.dg-why-sec { position:relative; overflow:hidden; background: linear-gradient(180deg, var(--fw-navy-900) 0%, var(--fw-navy) 100%); color:#fff; }
.dg-why-glow { position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(40% 40% at 85% 8%, rgba(0,168,156,0.18), transparent 70%), radial-gradient(40% 40% at 10% 92%, rgba(0,153,102,0.16), transparent 72%); }
.dg-why-sec .container { position:relative; z-index:1; }
.dg-why { display:grid; grid-template-columns: repeat(3,1fr); gap:0; margin-top:36px; border-top:1px solid rgba(255,255,255,0.12); }
.dg-why-cell { display:grid; grid-template-columns: 40px 1fr; gap:16px; padding:30px 28px 30px 0; border-bottom:1px solid rgba(255,255,255,0.12); border-right:1px solid rgba(255,255,255,0.12); }
.dg-why-cell:nth-child(3n) { border-right:none; padding-right:0; }
.dg-why-cell:nth-last-child(-n+3) { border-bottom:none; }
.dg-why-n { font-family: var(--font-display); font-weight:500; font-size:24px; background: var(--dg-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dg-why h4 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color:#fff; font-size:18px; letter-spacing:-0.005em; margin:0 0 6px; }
.dg-why p { font-family: var(--font-body); font-size:14px; line-height:1.55; color: rgba(255,255,255,0.72); margin:0; }

/* ── Engagement model ─────────────────────────────────────────── */
.dg-engage { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:40px; }
.dg-engage-card { background: var(--bg-1); border:1px solid var(--border-1); border-radius:12px; padding:28px; }
.dg-engage-card .dg-engage-k { font-family: var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--fw-teal); margin-bottom:12px; }
.dg-engage-card h4 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:22px; line-height:1; letter-spacing:-0.005em; margin:0 0 10px; }
html[data-theme="dark"] .dg-engage-card h4 { color:#fff; }
.dg-engage-card p { font-family: var(--font-body); font-size:14px; line-height:1.6; color: var(--fg-2); margin:0; }
.dg-engage-note { font-family: var(--font-body); font-size:13px; color: var(--fg-3); margin-top:24px; max-width:640px; }

/* ── Sample projects / testimonials (placeholder-aware) ───────── */
.dg-proj { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:40px; }
.dg-proj-card { background: var(--bg-1); border:1px solid var(--border-1); border-radius:12px; padding:28px; }
.dg-proj-k { font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--fw-teal); margin-bottom:12px; }
.dg-proj-card h4 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:20px; line-height:1.05; letter-spacing:-0.005em; margin:0 0 10px; }
html[data-theme="dark"] .dg-proj-card h4 { color:#fff; }
.dg-proj-card p { font-family: var(--font-body); font-size:14px; line-height:1.6; color: var(--fg-2); margin:0; }

.dg-quotes { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:40px; }
.dg-quote { background: var(--bg-1); border:1px solid var(--border-1); border-radius:12px; padding:28px; position:relative; }
.dg-quote-mark { font-family: var(--font-display); font-size:44px; line-height:0.6; color: var(--fw-teal-300); }
.dg-quote p { font-family: var(--font-body); font-size:15px; line-height:1.6; color: var(--fg-1); margin:10px 0 18px; }
.dg-quote-by { font-family: var(--font-body); font-size:13px; color: var(--fg-2); }
.dg-quote-by b { color: var(--fw-navy); font-weight:600; }
html[data-theme="dark"] .dg-quote-by b { color:#fff; }

/* Placeholder treatment — visibly a template, never presented as genuine */
.dg-ph { border-style:dashed; border-color: rgba(0,168,156,0.5); }
.dg-ph-tag { position:absolute; top:14px; right:14px; font-family: var(--font-mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color: var(--fw-teal); background: rgba(0,168,156,0.1); border:1px solid rgba(0,168,156,0.3); padding:3px 7px; border-radius:100px; }
.dg-ph-note { font-family: var(--font-body); font-size:13px; color: var(--fg-3); margin-top:20px; }
.dg-proj-card, .dg-quote { position:relative; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.dg-faq { margin-top:36px; border-top:1px solid var(--border-1); max-width: 860px; }
.dg-faq details { border-bottom:1px solid var(--border-1); }
.dg-faq summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:clamp(17px,1.7vw,21px); letter-spacing:-0.005em; }
html[data-theme="dark"] .dg-faq summary { color:#fff; }
.dg-faq summary::-webkit-details-marker { display:none; }
.dg-faq summary::after { content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-6px; border-right:2px solid var(--fw-teal); border-bottom:2px solid var(--fw-teal); transform: rotate(45deg); transition: transform 220ms var(--ease-standard); }
.dg-faq details[open] summary::after { transform: rotate(-135deg); }
.dg-faq details p { font-family: var(--font-body); font-size:15px; line-height:1.65; color: var(--fg-2); margin:0 0 22px; max-width:760px; }

/* ── Related solutions ────────────────────────────────────────── */
.dg-related { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:40px; }
.dg-rel-card { display:block; text-decoration:none; background: var(--bg-1); border:1px solid var(--border-1); border-radius:12px; padding:26px; transition: border-color 220ms var(--ease-standard), transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard); }
.dg-rel-card:hover { transform: translateY(-3px); border-color: rgba(0,168,156,0.45); box-shadow: 0 20px 46px -30px rgba(0,168,156,0.5); }
.dg-rel-k { font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; color: var(--fw-teal); }
.dg-rel-card h4 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:22px; line-height:1.02; letter-spacing:-0.005em; margin:10px 0 8px; }
html[data-theme="dark"] .dg-rel-card h4 { color:#fff; }
.dg-rel-card p { font-family: var(--font-body); font-size:13px; line-height:1.55; color: var(--fg-2); margin:0; }
.dg-rel-card span { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family: var(--font-body); font-size:13px; font-weight:600; color: var(--fw-teal-600); }

/* ── CTA ──────────────────────────────────────────────────────── */
.dg-cta { position:relative; overflow:hidden; background: linear-gradient(150deg, var(--fw-navy) 0%, var(--fw-navy-900) 100%); color:#fff; padding: 96px 0; }
.dg-cta-glow { position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(38% 60% at 82% 40%, rgba(0,168,156,0.28), transparent 72%), radial-gradient(30% 50% at 12% 80%, rgba(0,153,102,0.2), transparent 74%); }
.dg-cta .container { position:relative; z-index:1; }
.dg-cta .cta-inner { display:grid; grid-template-columns: 1.4fr 1fr; gap:48px; align-items:end; }
.dg-cta .cta-lead { font-family: var(--font-body); font-size:18px; color: rgba(255,255,255,0.78); margin:24px 0 0; max-width:460px; }
.dg-cta .cta-actions { display:flex; gap:14px; justify-self:end; flex-wrap:wrap; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .dg-offer, .dg-engage, .dg-proj, .dg-quotes, .dg-related { grid-template-columns: 1fr; }
  .dg-steps { grid-template-columns: 1fr; border-top:none; }
  .dg-step { border-right:none; border-top:1px solid var(--border-1); padding:22px 0; }
  .dg-why { grid-template-columns: 1fr; }
  .dg-why-cell { border-right:none !important; padding-right:0; }
  .dg-why-cell:last-child { border-bottom:none; }
  .dg-cta .cta-inner { grid-template-columns: 1fr; } .dg-cta .cta-actions { justify-self:start; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .dg-offer { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================================
   MOTION LAYER — shared foundation + AI Automation signature
   Heavy visuals run only under .dg-anim (added by JS when motion is welcome).
   ========================================================================== */

/* Hero: two-column with a bespoke visual on the right */
.dg-hero-2col .container { display:grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px,4.5vw,64px); align-items:center; }
.dg-hero-visual { position:relative; min-height: clamp(300px,40vh,420px); }
.dg-flow-canvas { display:block; width:100%; height: clamp(300px,40vh,420px); }
@media (max-width: 900px) { .dg-hero-2col .container { grid-template-columns: 1fr; } .dg-hero-visual { display:none; } }

/* Hero entrance — hidden initial states only when motion is welcome (no FOUC, no-JS safe) */
.dg-anim .dg-hero-copy .eb,
.dg-anim .dg-hero-copy .dg-lead,
.dg-anim .dg-hero-copy .dg-actions,
.dg-anim .dg-hero-copy .dg-meta-col,
.dg-anim .dg-hero-visual { opacity:0; }
.dg-anim .dg-title .dg-word { opacity:0; }

/* Staggered section reveal — richer than a block fade (layout.js drives .is-in) */
.reveal-stagger.dg-stagger > * { opacity:0; transform: translateY(20px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); }
.reveal-stagger.dg-stagger.is-in > * { opacity:1; transform:none; }
.reveal-stagger.dg-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.dg-stagger.is-in > *:nth-child(2){transition-delay:70ms}
.reveal-stagger.dg-stagger.is-in > *:nth-child(3){transition-delay:140ms}
.reveal-stagger.dg-stagger.is-in > *:nth-child(4){transition-delay:210ms}
.reveal-stagger.dg-stagger.is-in > *:nth-child(5){transition-delay:280ms}
.reveal-stagger.dg-stagger.is-in > *:nth-child(6){transition-delay:350ms}

/* ── Pinned "Manual → Automated" moment ─────────────────────────── */
.dg-flow-sec { position:relative; overflow:hidden; background: linear-gradient(180deg, var(--fw-navy) 0%, var(--fw-navy-900) 100%); color:#fff; }
.dg-flow-glow { position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(42% 46% at 80% 20%, rgba(0,168,156,0.20), transparent 70%), radial-gradient(38% 42% at 14% 86%, rgba(0,153,102,0.16), transparent 72%); }
.dg-flow-sec .container { position:relative; z-index:1; }
.dg-flow-stage { position:relative; margin-top:44px; }
.dg-flow-labels { display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; }
.dg-flow-from { color: rgba(255,255,255,0.5); }
.dg-flow-to { color: var(--fw-teal-300); }
/* base / no-JS / reduced-motion: readable static row of chips */
.dg-flow-chips { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.dg-chip { font-family: var(--font-body); font-size:13px; padding:9px 15px; border-radius:100px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.82); white-space:nowrap; }
.dg-flow-counter { margin-top:28px; }
.dg-flow-counter b { font-family: var(--font-display); font-weight:500; font-size: clamp(36px,5vw,64px); line-height:1; background: var(--dg-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dg-flow-counter small { display:block; font-family: var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.5); margin-top:6px; }
.dg-flow-note { font-family: var(--font-body); font-size:13px; color: rgba(255,255,255,0.45); margin-top:18px; }

/* live (motion) mode: absolute chip choreography on a tall stage */
.dg-flow-live .dg-flow-stage { height: clamp(360px, 52vh, 520px); }
.dg-flow-live .dg-flow-chips { position:absolute; inset:0; display:block; margin:0; }
.dg-flow-live .dg-chip { position:absolute; top:0; left:0; will-change: transform, opacity; }
.dg-flow-live .dg-flow-line { position:absolute; left:2%; right:2%; top:50%; height:2px; background: var(--dg-grad); transform: scaleX(0); transform-origin:left center; opacity:0.9; }
.dg-flow-live .dg-flow-counter { position:absolute; left:50%; bottom:4%; right:auto; margin:0; transform:translateX(-50%); text-align:center; }
.dg-flow-line { display:none; }
.dg-flow-live .dg-flow-line { display:block; }
@media (max-width: 760px) { .dg-flow-live .dg-flow-stage { height:auto; } .dg-flow-live .dg-flow-chips { position:static; display:flex; } .dg-flow-live .dg-chip { position:static; } .dg-flow-live .dg-flow-line { display:none; } .dg-flow-live .dg-flow-counter { position:static; text-align:left; } }

/* ============================================================================
   SCROLL-CARDS UPGRADE (inspired by the mockup) — teal base + gold engine
   ========================================================================== */

/* Right-side rail nav (desktop only, shown during the pinned spine) */
.dg-rail { position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:55; display:flex; flex-direction:column; gap:20px; align-items:flex-end; mix-blend-mode:difference; color:#fff; opacity:0; visibility:hidden; transition:opacity .4s var(--ease-standard); }
.dg-rail.is-on { opacity:1; visibility:visible; }
.dg-rail button { all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); transition:color .2s var(--ease-standard); }
.dg-rail button.on { color:#fff; }
.dg-rail-bar { display:block; width:26px; height:2px; background:currentColor; transition:width .25s var(--ease-standard); }
.dg-rail button.on .dg-rail-bar { width:46px; }
@media (max-width: 980px) { .dg-rail { display:none; } }

/* ── Offer: card deck ─────────────────────────────────────────── */
.dg-deck-wrap { display:grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px,5vw,72px); align-items:stretch; }
.dg-deck-side { display:flex; flex-direction:column; }
.dg-deck-meter { display:flex; align-items:baseline; gap:12px; margin-top:30px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--fg-3); }
.dg-deck-idx { font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1; color:var(--fw-navy); letter-spacing:0; }
html[data-theme="dark"] .dg-deck-idx { color:#fff; }
.dg-deck-track { flex:1; height:1px; background:var(--border-1); position:relative; overflow:hidden; }
.dg-deck-bar { position:absolute; inset:0; background:var(--dg-grad); transform:scaleX(0); transform-origin:left; }
.dg-deck { position:relative; }
.dg-deck-card { position:relative; background:var(--bg-2); border:1px solid var(--border-1); border-radius:12px; padding:34px 38px 32px; overflow:hidden; }
.dg-deck-card + .dg-deck-card { margin-top:16px; }
.dg-deck-rule { position:absolute; left:0; top:0; height:3px; width:100%; background:var(--dg-grad); transform:scaleX(0); transform-origin:left; }
.dg-deck-top { display:flex; align-items:center; justify-content:space-between; }
.dg-deck-icon { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--dg-grad); }
.dg-deck-icon svg { width:23px; height:23px; }
.dg-deck-n { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--fw-teal); }
.dg-deck-card h3 { font-family:var(--font-display); font-weight:500; text-transform:uppercase; color:var(--fw-navy); font-size:clamp(22px,2.3vw,28px); letter-spacing:-.005em; margin:20px 0 10px; }
html[data-theme="dark"] .dg-deck-card h3 { color:#fff; }
.dg-deck-card p { font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--fg-2); margin:0; max-width:46ch; }
/* live: absolute stack, pinned scrub */
.dg-deck-live .dg-deck { min-height: clamp(340px,46vh,460px); }
.dg-deck-live .dg-deck-card { position:absolute; left:0; right:0; top:6%; margin:0; will-change:transform,opacity; }
@media (max-width: 900px) { .dg-deck-wrap { grid-template-columns:1fr; } .dg-deck-live .dg-deck { min-height:0; } .dg-deck-live .dg-deck-card { position:relative; top:0; } .dg-deck-live .dg-deck-card + .dg-deck-card { margin-top:16px; } }

/* ── Shift: drawing SVG flow + gold engine + parallax ─────────── */
.dg-flow-live .dg-flow-stage { position:relative; }
.dg-flow-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; display:none; }
.dg-flow-live .dg-flow-svg { display:block; }
.dg-flow-svg path { fill:none; stroke-linecap:round; }
.dg-flow-svg .dg-engine path { fill: var(--fw-gold); }
.dg-flow-svg .dg-engine circle { fill:none; stroke: rgba(212,168,67,.45); }
.dg-flow-par { will-change:transform; }
.dg-flow-ghost { position:absolute; right:-2%; bottom:-8%; z-index:0; pointer-events:none; font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:22vw; line-height:.72; color:rgba(255,255,255,.03); letter-spacing:-.02em; white-space:nowrap; }
.dg-flow-live .dg-flow-counter b { color: var(--fw-gold); -webkit-text-fill-color: var(--fw-gold); background:none; }
.dg-flow-live .dg-flow-to { color: var(--fw-gold); }

/* ── Why: pinned depth reveal + cursor glow ───────────────────── */
.dg-why-live .dg-why-cell { will-change:transform,opacity; }

/* ── Odoo hero: floating module schematic ─────────────────────── */
.dg-modules { width:100%; height:clamp(300px,40vh,420px); display:block; }
.dg-mod-links line { stroke: rgba(102,207,197,.4); stroke-width:1.5; stroke-dasharray:5 7; animation: dgDash 2.6s linear infinite; }
@keyframes dgDash { to { stroke-dashoffset:-24; } }
.dg-mod-tiles rect { fill: rgba(255,255,255,.05); stroke: rgba(102,207,197,.35); stroke-width:1.5; }
.dg-mod-tiles circle { fill: var(--fw-teal-300); }
.dg-mod-tile { transform-box: fill-box; transform-origin: center; animation: dgFloatTile 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--i,0) * .4s); }
@keyframes dgFloatTile { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.dg-mod-core { filter: drop-shadow(0 12px 28px rgba(0,168,156,.55)); }
@media (prefers-reduced-motion: reduce) { .dg-mod-links line, .dg-mod-tile { animation: none; } }

/* ── Brand hero: mark draws stroke-by-stroke + palette pops ───── */
.dg-brandmark { width:100%; height:clamp(300px,40vh,420px); display:block; }
.dg-bm-draw path { stroke-dasharray:100; stroke-dashoffset:100; animation: dgDraw 4s var(--ease-standard) infinite; }
.dg-bm-draw path:nth-child(2) { animation-delay:.35s; }
@keyframes dgDraw { 0% { stroke-dashoffset:100; } 38% { stroke-dashoffset:0; } 62% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-100; } }
.dg-sw { transform-box:fill-box; transform-origin:center; animation: dgPop 4s var(--ease-standard) infinite; animation-delay: calc(var(--i,0) * .12s + .5s); }
@keyframes dgPop { 0%,18% { transform:scale(.2); opacity:0; } 38% { transform:scale(1); opacity:1; } 78% { transform:scale(1); opacity:1; } 100% { transform:scale(.2); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .dg-bm-draw path { animation:none; stroke-dashoffset:0; } .dg-sw { animation:none; transform:none; opacity:1; } }

/* ── Website hero: a page assembling inside a browser ─────────── */
.dg-browser { width:100%; height:clamp(300px,42vh,430px); display:block; }
.dg-br-frame { fill:rgba(255,255,255,.03); stroke:rgba(102,207,197,.32); stroke-width:1.4; }
.dg-br-bar { fill:rgba(102,207,197,.10); stroke:rgba(102,207,197,.22); stroke-width:1; }
.dg-br-dot { fill:#66CFC5; opacity:.5; animation: dgBrDot 4s var(--ease-standard) infinite; animation-delay: calc(var(--i,0)*.12s); }
@keyframes dgBrDot { 0%,10% { opacity:.2; } 20% { opacity:.9; } 60% { opacity:.9; } 100% { opacity:.2; } }
.dg-br-addr { fill:rgba(255,255,255,.06); }
.dg-br-block, .dg-br-cta, .dg-br-tile { transform-box:fill-box; opacity:0; animation: dgBrIn 4s var(--ease-standard) infinite; animation-delay: calc(var(--i,0)*.22s + .3s); }
.dg-br-block, .dg-br-cta { transform-origin:left center; }
.dg-br-block { fill:rgba(255,255,255,.14); }
.dg-br-tile { fill:rgba(102,207,197,.12); stroke:rgba(102,207,197,.28); stroke-width:1; transform-origin:center; }
@keyframes dgBrIn { 0%,8% { opacity:0; transform:translateY(8px) scale(.96); } 30% { opacity:1; transform:none; } 82% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(4px) scale(.98); } }
.dg-br-scan { stroke:#66CFC5; stroke-width:2; opacity:0; filter:drop-shadow(0 0 6px rgba(0,168,156,.7)); animation: dgBrScan 4s var(--ease-standard) infinite; }
@keyframes dgBrScan { 0% { transform:translateY(0); opacity:0; } 6% { opacity:.7; } 50% { transform:translateY(206px); opacity:.5; } 60% { opacity:0; } 100% { opacity:0; transform:translateY(206px); } }
@media (prefers-reduced-motion: reduce) { .dg-br-dot,.dg-br-block,.dg-br-cta,.dg-br-tile { animation:none; opacity:1; transform:none; } .dg-br-scan { animation:none; opacity:0; } }

/* ── AI is a tool, not the team ───────────────────────────────── */
.dg-aio-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-top:44px; }
.dg-aio-card { position:relative; overflow:hidden; border:1px solid var(--border-1); border-radius:14px; padding:30px 30px 28px; background: var(--bg-1); transition: transform 240ms var(--ease-standard), border-color 240ms var(--ease-standard); }
.dg-aio-card::before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background: var(--dg-grad); transform: scaleX(0); transform-origin:left; transition: transform 300ms var(--ease-standard); }
.dg-aio-card:hover { transform: translateY(-3px); border-color: rgba(0,168,156,0.45); }
.dg-aio-card:hover::before { transform: scaleX(1); }
.dg-aio-k { font-family: var(--font-display); font-weight:500; font-size:30px; line-height:1; background: var(--dg-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dg-aio-card h4 { font-family: var(--font-display); font-weight:500; text-transform:uppercase; color: var(--fw-navy); font-size:21px; letter-spacing:-0.005em; margin:14px 0 8px; }
html[data-theme="dark"] .dg-aio-card h4 { color:#fff; }
.dg-aio-card p { font-family: var(--font-body); font-size:15px; line-height:1.6; color: var(--fg-2); margin:0; }
.dg-aio-note { font-family: var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:-0.005em; font-size: clamp(20px,2.4vw,30px); line-height:1.05; color: var(--fw-navy); margin:36px 0 0; }
html[data-theme="dark"] .dg-aio-note { color:#fff; }
@media (max-width: 980px) { .dg-aio-grid { grid-template-columns: 1fr; } }

/* ── Pricing tiers ───────────────────────────────────────────── */
.dg-price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:44px; align-items:stretch; }
.dg-price-card { position:relative; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border-1); border-radius:16px; padding:34px 28px 30px; }
.dg-price-card.is-featured { border-color: var(--fw-teal); box-shadow: 0 24px 60px -32px rgba(0,168,156,0.55); }
.dg-price-card.is-featured::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background: var(--dg-grad); border-radius:16px 16px 0 0; }
.dg-price-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--fw-teal); color:#fff; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 12px; border-radius:20px; white-space:nowrap; }
.dg-price-name { font-family:var(--font-display); font-weight:500; text-transform:uppercase; color:var(--fw-navy); font-size:24px; letter-spacing:-0.005em; }
html[data-theme="dark"] .dg-price-name { color:#fff; }
.dg-price-tag { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--fg-2); margin:8px 0 20px; min-height:42px; }
.dg-price-amt { display:flex; flex-direction:column; gap:2px; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--border-1); }
.dg-price-pre { font-family:var(--font-body); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-2); }
.dg-price-num { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,3.4vw,42px); line-height:1; color:var(--fw-navy); }
html[data-theme="dark"] .dg-price-num { color:#fff; }
.dg-price-suf { font-family:var(--font-body); font-size:12px; color:var(--fg-2); margin-top:4px; }
.dg-price-feats { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; flex-grow:1; }
.dg-price-feats li { display:flex; gap:10px; align-items:flex-start; font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--fg-2); }
.dg-price-feats svg { color:var(--fw-teal); flex:none; margin-top:3px; }
.dg-price-card .btn { justify-content:center; margin-top:auto; width:100%; }
.dg-price-btn { background:transparent; color:var(--fw-navy); border:1px solid var(--border-1); }
html[data-theme="dark"] .dg-price-btn { color:#fff; }
.dg-price-btn:hover { border-color:var(--fw-teal); color:var(--fw-teal); }
.dg-price-note { font-family:var(--font-body); font-size:13.5px; line-height:1.6; color:var(--fg-2); margin:28px 0 0; max-width:640px; }
@media (max-width: 900px) { .dg-price-grid { grid-template-columns:1fr; } .dg-price-tag { min-height:0; } }

/* ── Offer deck v2: fill the pinned stage, big panels, heading-first ── */
.dg-deck-live .dg-deck-wrap { align-items:stretch; min-height:min(80vh,760px); }
.dg-deck-live .dg-deck-side { justify-content:flex-start; }
.dg-deck-live .dg-deck-meter { margin-top:auto; }
.dg-deck-live .dg-deck { min-height:0; }
.dg-deck-live .dg-deck-card { position:absolute; inset:0; top:0; padding:clamp(40px,4vw,64px); display:flex; flex-direction:column; }
.dg-deck-live .dg-deck-icon { width:56px; height:56px; }
.dg-deck-live .dg-deck-icon svg { width:28px; height:28px; }
.dg-deck-live .dg-deck-card h3 { font-size:clamp(28px,3.2vw,46px); margin:auto 0 14px; }
.dg-deck-live .dg-deck-card p { font-size:clamp(15px,1.35vw,19px); max-width:52ch; }
.dg-deck-big { position:absolute; right:clamp(14px,3vw,44px); bottom:clamp(-16px,-1vw,-4px); font-family:var(--font-display); font-weight:500; font-size:clamp(150px,20vw,300px); line-height:.78; color:var(--fw-navy); opacity:.05; pointer-events:none; z-index:0; }
html[data-theme="dark"] .dg-deck-big { color:#fff; opacity:.08; }
.dg-deck-live .dg-deck-card > .dg-deck-top,
.dg-deck-live .dg-deck-card > h3,
.dg-deck-live .dg-deck-card > p { position:relative; z-index:1; }
@media (max-width: 900px) { .dg-deck-live .dg-deck-wrap { min-height:0; } .dg-deck-live .dg-deck-card { position:relative; inset:auto; } .dg-deck-live .dg-deck-card + .dg-deck-card { margin-top:16px; } .dg-deck-big { display:none; } }

/* ── Process: pinned horizontal half-page cards + end hold ────── */
.dg-proc-live .dg-proc-vp { overflow:hidden; margin-top:40px; }
.dg-proc-live .dg-steps { display:flex; flex-wrap:nowrap; width:max-content; gap:24px; border-top:none; margin-top:0; will-change:transform; }
.dg-proc-live .dg-step { flex:0 0 auto; width:clamp(320px,48vw,560px); min-height:clamp(340px,56vh,560px); border:1px solid var(--border-1); border-radius:14px; background:var(--bg-1); padding:clamp(34px,3vw,52px); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.dg-proc-live .dg-step h4 { font-size:clamp(26px,2.7vw,42px); line-height:1; margin:auto 0 14px; }
.dg-proc-live .dg-step p { font-size:clamp(15px,1.35vw,19px); max-width:40ch; margin:0; }
.dg-proc-big { position:absolute; right:14px; top:2px; font-family:var(--font-display); font-weight:500; font-size:clamp(120px,14vw,220px); line-height:.8; color:var(--fw-teal); opacity:.07; pointer-events:none; z-index:0; }
.dg-proc-live .dg-step > .dg-step-n, .dg-proc-live .dg-step > h4, .dg-proc-live .dg-step > p { position:relative; z-index:1; }
@media (max-width: 900px) { .dg-proc-live .dg-proc-vp { overflow:visible; } .dg-proc-live .dg-steps { flex-wrap:wrap; width:auto; } .dg-proc-live .dg-step { width:100%; min-height:0; } .dg-proc-big { display:none; } }
.dg-why-glowdot { position:absolute; width:620px; height:620px; margin:-310px 0 0 -310px; left:0; top:0; z-index:0; pointer-events:none; border-radius:50%; background:radial-gradient(circle, rgba(212,168,67,.12), transparent 66%); will-change:transform; display:none; }
.dg-why-live .dg-why-glowdot { display:block; }