/* Sticky-safe root: the global stylesheet sets overflow-x:hidden on html/body,
   which makes body a nested scroll container and BREAKS position:sticky
   (pinned sections scroll away). `clip` prevents horizontal scroll exactly like
   hidden but does NOT create a scroll container, so sticky pins to the viewport.
   body must not be a scroll container -> overflow-y:visible; html stays the scroller. */
html{ overflow-x:clip; }
body.td-body{ overflow-x:clip; overflow-y:visible; }

/* ============================================================
   Tripster Developers - Immersive Section System (GLOBAL)
   Reusable .imm-* components: hero aurora, scroll-flip, choose-path,
   marquee, portfolio, glass cards, premium arrows.
   Loaded site-wide via shared/header.php. Reuses :root tokens from style.css.
   Extracted from index-immersive.php on 2026-08-07 for one-stylesheet consistency.
   ============================================================ */

/* ============================================================
   IMMERSIVE LAYER (prototype) scoped .imm-*  | reuses :root tokens
   ============================================================ */
.imm-hero{ position:relative; overflow:hidden; isolation:isolate; }
.imm-hero .hero-container{ position:relative; z-index:3; }
.imm-hero .hero-glow{ z-index:1; }

/* Animated aurora blobs */
.imm-aurora{ position:absolute; inset:-10% -10% 0 -10%; z-index:1; pointer-events:none; filter:blur(60px); opacity:.9; }
.imm-blob{ position:absolute; display:block; border-radius:50%; mix-blend-mode:multiply; opacity:.5; }
.imm-blob-1{ width:clamp(280px,38vw,560px); aspect-ratio:1; left:-6%; top:-8%;
    background:radial-gradient(circle at 30% 30%, rgba(220,38,38,.55), rgba(220,38,38,0) 70%);
    animation:imm-float-1 18s ease-in-out infinite; }
.imm-blob-2{ width:clamp(260px,34vw,520px); aspect-ratio:1; right:-8%; top:-4%;
    background:radial-gradient(circle at 60% 40%, rgba(249,115,22,.40), rgba(249,115,22,0) 70%);
    animation:imm-float-2 22s ease-in-out infinite; }
.imm-blob-3{ width:clamp(300px,40vw,600px); aspect-ratio:1; left:35%; top:20%;
    background:radial-gradient(circle at 50% 50%, rgba(91,61,245,.20), rgba(91,61,245,0) 70%);
    animation:imm-float-3 26s ease-in-out infinite; }
@keyframes imm-float-1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6%,4%) scale(1.08);} }
@keyframes imm-float-2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5%,6%) scale(1.1);} }
@keyframes imm-float-3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-4%,-5%) scale(1.06);} }

/* Faint grid, fading toward edges */
.imm-grid{ position:absolute; inset:0; z-index:2; pointer-events:none;
    background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); }

/* Shimmering gradient headline accent */
.imm-hero .text-gradient{
    background:linear-gradient(100deg,#DC2626 0%,#F97316 25%,#DC2626 50%,#C42525 75%,#DC2626 100%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:imm-shimmer 7s linear infinite;
}
@keyframes imm-shimmer{ to{ background-position:200% center; } }

/* Magnetic buttons (JS sets --mx/--my) */
.imm-magnetic{ will-change:transform; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background-color .3s ease; }

@media (prefers-reduced-motion: reduce){
    .imm-blob, .imm-hero .text-gradient{ animation:none !important; }
    .imm-magnetic{ transition:none !important; transform:none !important; }
}

/* ---- Commerce stack scroll narrative ---- */
.imm-stack{ background:linear-gradient(180deg,var(--bg-main) 0%,var(--bg-alt) 100%); border-top:1px solid var(--border-color); }
.imm-stack-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:start; }
.imm-stack-rail{ position:sticky; top:120px; align-self:start; }
.imm-stack-title{ font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.08; margin:8px 0 18px; }
.imm-stack-lead{ font-size:clamp(1rem,1.2vw,1.2rem); max-width:460px; }
.imm-stack-nav{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.imm-stack-nav li{ display:flex; align-items:center; gap:12px; font-family:var(--font-heading); font-weight:600; font-size:clamp(.95rem,1.1vw,1.05rem); color:var(--text-muted); opacity:.55; padding:8px 12px; border-radius:12px; transition:all .35s ease; border-left:2px solid transparent; }
.imm-stack-nav li span{ font-size:.8rem; color:var(--brand-red); font-weight:700; letter-spacing:.05em; }
.imm-stack-nav li.is-active{ opacity:1; color:var(--text-main); background:rgba(220,38,38,.06); border-left-color:var(--brand-red); transform:translateX(4px); }

.imm-stack-steps{ display:flex; flex-direction:column; gap:clamp(20px,4vw,40px); }
.imm-step{ position:relative; background:var(--bg-main); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:clamp(28px,3.5vw,44px); box-shadow:var(--shadow-soft); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease; overflow:hidden; }
.imm-step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--brand-red),#F97316); transform:scaleY(0); transform-origin:top; transition:transform .5s ease; }
.imm-step.is-active{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:rgba(220,38,38,.35); }
.imm-step.is-active::before{ transform:scaleY(1); }
.imm-step-num{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(220,38,38,.30); display:block; margin-bottom:14px; transition:-webkit-text-stroke-color .5s ease,color .5s ease; }
.imm-step.is-active .imm-step-num{ color:rgba(220,38,38,.10); -webkit-text-stroke-color:rgba(220,38,38,.55); }
.imm-step h3{ font-size:clamp(1.4rem,2.2vw,1.9rem); margin-bottom:12px; }
.imm-step p{ margin-bottom:18px; max-width:52ch; }
.imm-step-link{ font-family:var(--font-heading); font-weight:600; color:var(--brand-red); text-decoration:none; font-size:clamp(.9rem,1vw,1rem); display:inline-flex; align-items:center; gap:6px; transition:gap .3s ease; }
.imm-step-link:hover{ gap:12px; }

@media (max-width:900px){
    .imm-stack-inner{ grid-template-columns:1fr; gap:28px; }
    .imm-stack-rail{ position:static; }
    .imm-stack-nav{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    .imm-step,.imm-step::before,.imm-stack-nav li{ transition:none !important; }
}

/* ---- Scroll-flip services (Apple-launch style, bright + playful) ---- */
.imm-flip{ position:relative; background:
    radial-gradient(55% 45% at 12% 8%, rgba(249,115,22,.12), transparent 60%),
    radial-gradient(50% 50% at 88% 16%, rgba(91,61,245,.12), transparent 60%),
    radial-gradient(60% 55% at 50% 104%, rgba(16,185,129,.10), transparent 60%),
    var(--bg-main); }
.imm-flip-sticky{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(64px,10vw,120px) 24px; position:relative; }
.imm-flip-heading{ margin-bottom:20px; }
.imm-flip-stage{ position:relative; width:min(880px,92vw); }
.imm-flip-panel{ display:flex; flex-direction:column; align-items:center; padding:clamp(24px,4vw,40px) 0; }
.imm-flip-eyebrow{ font-family:var(--font-heading); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:clamp(.72rem,1vw,.85rem); color:var(--brand-red); margin-bottom:18px; padding:7px 16px; border:1px solid rgba(220,38,38,.25); border-radius:100px; background:rgba(220,38,38,.05); }
.imm-flip-panel:nth-child(2) .imm-flip-eyebrow{ color:#EA580C; border-color:rgba(249,115,22,.30); background:rgba(249,115,22,.07); }
.imm-flip-panel:nth-child(3) .imm-flip-eyebrow{ color:#5B3DF5; border-color:rgba(91,61,245,.30); background:rgba(91,61,245,.07); }
.imm-flip-panel:nth-child(4) .imm-flip-eyebrow{ color:#0284C7; border-color:rgba(14,165,233,.30); background:rgba(14,165,233,.07); }
.imm-flip-panel:nth-child(5) .imm-flip-eyebrow{ color:#059669; border-color:rgba(16,185,129,.30); background:rgba(16,185,129,.07); }
.imm-flip-h{ font-size:clamp(2rem,5.5vw,4rem); line-height:1.04; margin-bottom:20px; }
.imm-flip .text-gradient{ background:linear-gradient(100deg,#DC2626,#F97316,#5B3DF5); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.imm-flip-p{ font-size:clamp(1.05rem,1.6vw,1.35rem); max-width:36ch; margin:0 auto 26px; }
.imm-flip-link{ font-family:var(--font-heading); font-weight:700; color:var(--brand-red); text-decoration:none; font-size:clamp(1rem,1.2vw,1.15rem); display:inline-flex; gap:9px; align-items:center; transition:gap .3s ease; }
.imm-flip-link:hover{ gap:13px; }

/* Reusable premium arrow (global token, currentColor-tinted SVG mask) */
:root{ --imm-arrow:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.imm-arrow{ display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto; background:currentColor; -webkit-mask:var(--imm-arrow) center/contain no-repeat; mask:var(--imm-arrow) center/contain no-repeat; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.imm-flip-link:hover .imm-arrow,.imm-path-card:hover .imm-arrow,.imm-work-card:hover .imm-arrow{ transform:translateX(4px); }
.imm-flip-dots{ display:flex; gap:10px; margin-top:34px; justify-content:center; }
.imm-flip-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:width .4s ease, background-color .4s ease; }
.imm-flip-dots span.on{ background:var(--brand-red); width:26px; border-radius:100px; }
/* Engine ON: pin + 3D flip (desktop, motion-ok) */
.imm-flip--on{ height:calc(var(--panels,5) * 58svh + 100svh); }
.imm-flip--on .imm-flip-sticky{ position:sticky; position:-webkit-sticky; top:0; height:100vh; height:100svh; min-height:0; overflow:hidden; perspective:1600px; padding:clamp(80px,12vh,120px) 24px clamp(40px,7vh,64px); justify-content:center; gap:0; }
.imm-flip--on .imm-flip-heading{ margin-bottom:clamp(14px,2.5vh,26px); }
.imm-flip--on .imm-flip-stage{ display:grid; transform-style:preserve-3d; }
.imm-flip--on .imm-flip-panel{ grid-area:1 / 1; will-change:transform,opacity; backface-visibility:hidden; transition:none; justify-content:center; }
.imm-flip--on .imm-flip-dots{ margin-top:clamp(18px,3.5vh,34px); }
@media (prefers-reduced-motion: reduce){ .imm-flip-link,.imm-flip-dots span{ transition:none !important; } }

/* ---- Choose your path ---- */
.imm-path{ background:
    radial-gradient(45% 40% at 8% 0%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(45% 45% at 95% 10%, rgba(91,61,245,.10), transparent 60%),
    radial-gradient(50% 40% at 60% 100%, rgba(16,185,129,.08), transparent 60%),
    var(--bg-main); }
.imm-path-head{ max-width:760px; margin:0 auto clamp(40px,6vw,64px); }
.imm-path-title{ font-size:clamp(1.8rem,3.2vw,2.8rem); line-height:1.1; }
.imm-path-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.imm-path-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(255,255,255,.75); border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,30px); overflow:hidden; box-shadow:0 8px 30px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease, background-color .4s ease; }
.imm-path-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120% 120% at 100% 0%, rgba(220,38,38,.10), transparent 55%); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.imm-path-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(220,38,38,.35); background:var(--bg-main); }
.imm-path-card:hover::after{ opacity:1; }
.imm-path-num{ font-family:var(--font-heading); font-weight:800; font-size:1rem; color:var(--brand-red); letter-spacing:.08em; margin-bottom:14px; }
.imm-path-card h3{ font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.2; margin-bottom:10px; }
.imm-path-card p{ font-size:clamp(.9rem,1vw,1rem); margin-bottom:18px; }
.imm-path-cta{ margin-top:auto; font-family:var(--font-heading); font-weight:600; color:var(--brand-red); font-size:clamp(.88rem,1vw,.98rem); display:inline-flex; align-items:center; gap:6px; transition:gap .3s ease; }
.imm-path-card:hover .imm-path-cta{ gap:12px; }
@media (max-width:900px){ .imm-path-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .imm-path-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .imm-path-card,.imm-path-cta{ transition:none !important; } }

/* ---- Our own apps marquee ---- */
.imm-marquee-sec{ background:var(--bg-alt); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); padding-top:clamp(40px,5vw,64px) !important; padding-bottom:clamp(40px,5vw,64px) !important; }
.imm-marquee-kicker{ text-align:center; font-family:var(--font-heading); font-weight:700; color:var(--text-main); font-size:clamp(1rem,1.6vw,1.35rem); margin-bottom:clamp(24px,3vw,36px); }
.imm-marquee{ position:relative; display:flex; gap:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.imm-marquee-track{ display:flex; flex-shrink:0; gap:clamp(12px,1.5vw,18px); padding-right:clamp(12px,1.5vw,18px); animation:imm-scroll 38s linear infinite; will-change:transform; }
.imm-marquee:hover .imm-marquee-track{ animation-play-state:paused; }
.imm-chip{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; background:var(--bg-main); border:1px solid var(--border-color); border-radius:100px; padding:10px 20px 10px 10px; font-family:var(--font-heading); font-weight:600; font-size:clamp(.85rem,1vw,.95rem); color:var(--text-main); box-shadow:var(--shadow-soft); }
.imm-chip img{ width:40px; height:40px; border-radius:10px; object-fit:cover; flex-shrink:0; }
@keyframes imm-scroll{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce){
    .imm-marquee{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; }
    .imm-marquee-track{ animation:none; }
    .imm-marquee-track[aria-hidden="true"]{ display:none; }
}

/* ---- Selected work / portfolio ---- */
.imm-work{ background:var(--bg-main); }
.imm-work-head{ max-width:1200px; margin:0 auto clamp(32px,5vw,56px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.imm-work-title{ font-size:clamp(1.8rem,3.2vw,2.8rem); line-height:1.1; max-width:18ch; margin-top:8px; }
.imm-work-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.imm-work-card{ text-decoration:none; display:block; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-main); border:1px solid var(--border-color); box-shadow:var(--shadow-soft); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; }
.imm-work-media{ aspect-ratio:3/2; overflow:hidden; background:var(--bg-alt); }
.imm-work-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.imm-work-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(220,38,38,.35); }
.imm-work-card:hover .imm-work-media img{ transform:scale(1.06); }
.imm-work-meta{ padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.imm-work-meta h3{ font-size:clamp(1rem,1.2vw,1.15rem); margin:0; }
.imm-work-meta span{ font-family:var(--font-body); font-size:.82rem; color:var(--text-muted); font-weight:500; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.imm-work-meta i{ color:var(--brand-red); font-style:normal; opacity:0; transform:translateX(-4px); transition:opacity .3s ease, transform .3s ease; }
.imm-work-card:hover .imm-work-meta i{ opacity:1; transform:translateX(0); }
@media (max-width:1024px){ .imm-work-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .imm-work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .imm-work-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .imm-work-card,.imm-work-media img,.imm-work-meta i{ transition:none !important; } }

/* ---- Immersive polish on existing service cards ---- */
.services-section .service-card{ transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }
.services-section .service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(220,38,38,.30); }
.services-section .service-icon{ transition:transform .4s ease; }
.services-section .service-card:hover .service-icon{ transform:scale(1.08) rotate(-3deg); }
@media (prefers-reduced-motion: reduce){ .services-section .service-card,.services-section .service-icon{ transition:none !important; } }

/* ---- Products by platform (glass cards) ---- */
.imm-products{ background:transparent; }
.imm-prod-head{ max-width:1200px; margin:0 auto clamp(32px,5vw,52px); }
.imm-prod-title{ font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.08; margin:8px 0 16px; }
.imm-prod-lead{ font-size:clamp(1rem,1.2vw,1.2rem); max-width:640px; }
.imm-platform{ max-width:1200px; margin:0 auto; }
.imm-platform-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(20px,3vw,30px); padding-bottom:16px; border-bottom:1px solid var(--border-color); }
.imm-platform-name{ font-size:clamp(1.2rem,1.8vw,1.6rem); }
.imm-viewall{ font-family:var(--font-heading); font-weight:700; color:var(--brand-red); text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-size:clamp(.9rem,1vw,1rem); white-space:nowrap; }
.imm-viewall:hover .imm-arrow{ transform:translateX(4px); }
.imm-prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(16px,1.8vw,22px); }
.imm-prod-card{ position:relative; display:flex; flex-direction:column; background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-lg); padding:clamp(20px,2.2vw,26px); box-shadow:0 8px 30px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.6); overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }
.imm-prod-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--acc,#DC2626); }
.imm-prod-card::after{ content:""; position:absolute; right:-28%; top:-38%; width:56%; padding-bottom:56%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--acc,#DC2626) 22%, transparent), transparent 70%); pointer-events:none; }
.imm-prod-card[data-accent="red"]{ --acc:#DC2626; }
.imm-prod-card[data-accent="orange"]{ --acc:#EA580C; }
.imm-prod-card[data-accent="violet"]{ --acc:#5B3DF5; }
.imm-prod-card[data-accent="blue"]{ --acc:#0284C7; }
.imm-prod-card[data-accent="green"]{ --acc:#059669; }
.imm-prod-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:color-mix(in srgb, var(--acc) 35%, transparent); }
.imm-prod-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.imm-prod-top img{ width:52px; height:52px; border-radius:13px; box-shadow:0 4px 12px rgba(0,0,0,.10); flex:0 0 auto; }
.imm-prod-top h4{ font-family:var(--font-heading); font-weight:700; font-size:clamp(1.05rem,1.3vw,1.25rem); line-height:1.15; margin:0; color:var(--text-main); }
.imm-prod-card p{ font-size:clamp(.9rem,1vw,.98rem); margin:0 0 20px; flex:1; }
.imm-prod-links{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.imm-prod-store{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-heading); font-weight:700; font-size:.92rem; color:#fff; background:var(--acc,#DC2626); padding:9px 16px; border-radius:100px; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; }
.imm-prod-store:hover{ transform:translateY(-2px); box-shadow:0 6px 16px color-mix(in srgb, var(--acc) 40%, transparent); }
.imm-prod-store:hover .imm-arrow{ transform:translateX(3px); }
.imm-prod-detail{ font-family:var(--font-heading); font-weight:600; font-size:.9rem; color:var(--text-muted); text-decoration:none; padding:9px 10px; border-radius:100px; transition:color .3s ease, background-color .3s ease; }
.imm-prod-detail:hover{ color:var(--text-main); background:rgba(15,23,42,.05); }
@media (max-width:768px){ .imm-platform-bar{ flex-wrap:wrap; } }
@media (prefers-reduced-motion: reduce){ .imm-prod-card,.imm-prod-store,.imm-prod-detail{ transition:none !important; } }

/* ---- Odoo product cards (module-glyph tile + price badge) ---- */
.imm-odoo-tile{ width:52px; height:52px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; background:color-mix(in srgb, var(--acc,#DC2626) 12%, #ffffff); color:var(--acc,#DC2626); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc,#DC2626) 22%, transparent); }
.imm-odoo-tile svg{ width:24px; height:24px; display:block; }
.imm-price{ align-self:flex-start; font-family:var(--font-heading); font-weight:700; font-size:.78rem; color:var(--acc,#DC2626); background:color-mix(in srgb, var(--acc,#DC2626) 9%, #ffffff); border:1px solid color-mix(in srgb, var(--acc,#DC2626) 22%, transparent); padding:3px 11px; border-radius:100px; margin-bottom:12px; }
.imm-platform + .imm-platform{ margin-top:clamp(48px,7vw,88px); }

/* ---- Media product cards (banners + video) ---- */
.imm-prod-card{ padding:0; }
.imm-prod-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.imm-prod-media img,.imm-prod-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.imm-prod-media img{ transform:scale(1.0); transition:transform 6s ease; }
.imm-prod-card:hover .imm-prod-media img{ transform:scale(1.07); }
.imm-prod-body{ display:flex; flex-direction:column; flex:1; padding:clamp(18px,2vw,24px); }
.imm-prod-card{ display:flex; flex-direction:column; }
.imm-prod-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.imm-prod-top-row h4{ font-family:var(--font-heading); font-weight:700; font-size:clamp(1.02rem,1.2vw,1.18rem); line-height:1.15; margin:0; color:var(--text-main); }
.imm-prod-top-row .imm-price{ margin-bottom:0; flex:0 0 auto; }
.imm-prod-top img{ width:44px; height:44px; border-radius:11px; }
@media (prefers-reduced-motion: reduce){ .imm-prod-media img{ transition:none !important; transform:none !important; } }

/* ---- Product feature rows (one full row per app, alternating, lazy media) ---- */
.imm-feature-list{ max-width:1150px; margin:0 auto; }
.imm-feature{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,66px); align-items:center; padding:clamp(34px,5.5vw,70px) 0; }
.imm-feature + .imm-feature{ border-top:1px solid var(--border-color); }
.imm-feature:nth-child(even) .imm-feature-media{ order:2; }
.imm-feature[data-accent="red"]{--acc:#DC2626}.imm-feature[data-accent="orange"]{--acc:#EA580C}.imm-feature[data-accent="violet"]{--acc:#5B3DF5}.imm-feature[data-accent="blue"]{--acc:#0284C7}.imm-feature[data-accent="green"]{--acc:#059669}
.imm-feature-media{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 22px 60px rgba(15,23,42,.12); border:1px solid rgba(255,255,255,.7); background:var(--bg-alt); }
.imm-feature-media video,.imm-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.imm-feature-media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); border-radius:inherit; pointer-events:none; }
.imm-feature-tag{ display:inline-block; font-family:var(--font-heading); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.74rem; color:var(--acc,#DC2626); background:color-mix(in srgb,var(--acc,#DC2626) 9%,#ffffff); border:1px solid color-mix(in srgb,var(--acc,#DC2626) 22%,transparent); padding:5px 13px; border-radius:100px; margin-bottom:16px; }
.imm-feature-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.imm-feature-head img{ width:46px; height:46px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.10); flex:0 0 auto; }
.imm-feature-head h4{ font-family:var(--font-heading); font-weight:800; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.08; margin:0; color:var(--text-main); }
.imm-feature-text p{ font-size:clamp(1rem,1.15vw,1.14rem); margin:0 0 22px; max-width:46ch; }
@media (max-width:820px){ .imm-feature{ grid-template-columns:1fr; gap:20px; } .imm-feature:nth-child(even) .imm-feature-media{ order:0; } }

/* ---- Horizontal Work slider (native swipe on mobile, scroll-driven pin on desktop) ---- */
.imm-hwork{ background:var(--bg-main); }
.imm-hwork .imm-work-head{ max-width:1200px; margin:0 auto clamp(24px,4vw,44px); padding:0 clamp(20px,5vw,40px); }
.imm-hwork-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.imm-hwork-viewport::-webkit-scrollbar{ display:none; }
.imm-hwork-track{ display:flex; gap:clamp(16px,2vw,26px); width:max-content; padding:6px clamp(20px,5vw,40px) 14px; }
.imm-hwork .imm-work-card{ scroll-snap-align:center; flex:0 0 clamp(250px,80vw,400px); }
.imm-work-head-spacer{ display:none; }
/* desktop scroll-jack pin */
.imm-hwork--on{ height:var(--hwork-h,300vh); }
.imm-hwork--on .imm-hwork-sticky{ position:sticky; position:-webkit-sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.imm-hwork--on .imm-hwork-viewport{ overflow:hidden; scroll-snap-type:none; }
.imm-hwork--on .imm-hwork-track{ will-change:transform; }
.imm-hwork--on .imm-work-card{ flex-basis:min(30vw,380px); }

/* ---- Services reveal (native scroll, compositor transition, no flicker) ---- */
.imm-svc{ position:relative; background:
    radial-gradient(55% 40% at 12% 6%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(50% 45% at 90% 20%, rgba(91,61,245,.10), transparent 60%),
    radial-gradient(60% 50% at 50% 102%, rgba(16,185,129,.09), transparent 60%),
    var(--bg-main);
    padding-top:clamp(60px,9vw,110px); padding-bottom:clamp(60px,9vw,110px); }
.imm-svc-intro{ max-width:860px; margin:0 auto clamp(20px,4vw,44px); text-align:center; padding:0 24px; }
.imm-svc-title{ font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.08; }
.imm-svc .text-gradient{ background:linear-gradient(100deg,#DC2626,#F97316,#5B3DF5); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.imm-svc-list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(8px,2vh,24px); }
.imm-svc-panel{ text-align:center; padding:clamp(40px,9vh,88px) 24px; opacity:0; transform:translateY(46px) scale(.965); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); --acc:#DC2626; }
.imm-svc-panel.in{ opacity:1; transform:none; }
.imm-svc-panel[data-accent="orange"]{--acc:#EA580C}.imm-svc-panel[data-accent="violet"]{--acc:#5B3DF5}.imm-svc-panel[data-accent="blue"]{--acc:#0284C7}.imm-svc-panel[data-accent="green"]{--acc:#059669}
.imm-svc-eyebrow{ display:inline-block; font-family:var(--font-heading); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:clamp(.72rem,1vw,.85rem); color:var(--acc); background:color-mix(in srgb,var(--acc) 9%,#ffffff); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); border-radius:100px; padding:7px 16px; margin-bottom:18px; }
.imm-svc-panel h3{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2rem,5.4vw,3.7rem); line-height:1.05; margin:0 auto 18px; max-width:16ch; color:var(--text-main); letter-spacing:-.02em; }
.imm-svc-panel p{ font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.55; color:var(--text-muted); max-width:40ch; margin:0 auto 24px; }
.imm-svc-link{ font-family:var(--font-heading); font-weight:700; color:var(--acc); text-decoration:none; font-size:clamp(1rem,1.2vw,1.12rem); display:inline-flex; align-items:center; gap:9px; }
.imm-svc-link:hover .imm-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .imm-svc-panel{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---- Hero 3D + kinetic type + custom cursor ---- */
.imm-hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.imm-hero3d .imm-aurora{ opacity:.55; }
.imm-hero3d .imm-grid{ opacity:.5; }
.imm-hero3d .hero-container{ position:relative; z-index:4; }
.imm-kinetic .imm-kw{ display:inline-block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; vertical-align:bottom; }
.imm-kinetic .imm-kwi{ display:inline-block; transform:translateY(118%); transition:transform .95s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); will-change:transform; }
.imm-kinetic.in .imm-kwi{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .imm-kinetic .imm-kwi{ transform:none !important; } }

/* Minimal hero backdrop + grain + scroll cue */
.imm-hero3d .imm-aurora{ opacity:.38; }
.imm-hero3d .imm-grid{ opacity:.4; }
.imm-hero-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.32; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:170px 170px; }
.imm-scrollcue{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:9px; }
.imm-scrollcue-txt{ font-family:var(--font-heading); font-weight:600; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); }
.imm-scrollcue-line{ position:relative; width:1.5px; height:46px; background:linear-gradient(var(--border-color),rgba(226,232,240,0)); overflow:hidden; border-radius:2px; }
.imm-scrollcue-line i{ position:absolute; top:0; left:0; width:100%; height:42%; background:var(--brand-red); border-radius:2px; animation:imm-scrolldown 1.9s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes imm-scrolldown{ 0%{ transform:translateY(-110%);} 65%,100%{ transform:translateY(240%);} }
@media (max-width:767px){ .imm-scrollcue{ display:none; } }
@media (prefers-reduced-motion: reduce){ .imm-scrollcue-line i{ animation:none; } }

.imm-cursor{ position:fixed; inset:0; z-index:99999; pointer-events:none; display:none; }
body.imm-has-cursor .imm-cursor{ display:block; }
body.imm-has-cursor{ cursor:none; }
body.imm-has-cursor a, body.imm-has-cursor button, body.imm-has-cursor .imm-magnetic{ cursor:none; }
.imm-cursor-dot{ position:fixed; top:0; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--brand-red,#DC2626); will-change:transform; }
.imm-cursor-ring{ position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px; border:1.5px solid rgba(220,38,38,.45); border-radius:50%; will-change:transform; transition:width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, background-color .25s ease; }
body.imm-cursor-hot .imm-cursor-ring{ width:64px; height:64px; margin:-32px 0 0 -32px; border-color:rgba(220,38,38,.85); background:rgba(220,38,38,.07); }
@media (hover:none),(pointer:coarse){ .imm-cursor{ display:none !important; } body.imm-has-cursor{ cursor:auto !important; } }

/* ---- Hero floating UI panels (ecommerce storefront + code + analytics) ---- */
.imm-hero-stage{ position:absolute; inset:0; z-index:2; pointer-events:none; perspective:1500px; overflow:hidden; }
.imm-hp{ position:absolute; margin:0; border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.85); box-shadow:0 30px 70px rgba(15,23,42,.16), 0 4px 12px rgba(15,23,42,.06); will-change:transform; transform-style:preserve-3d; }
.imm-hp img{ display:block; width:100%; height:auto; }
.imm-hp-tag{ position:absolute; top:10px; left:10px; z-index:2; font-family:var(--font-heading); font-weight:700; font-size:11px; letter-spacing:.03em; color:#0F172A; background:rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.08); border-radius:100px; padding:4px 11px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.imm-hp-store{ width:clamp(210px,23vw,340px); left:1.5%; top:34%; }
.imm-hp-code{ width:clamp(220px,25vw,380px); right:1.5%; top:15%; }
.imm-hp-dash{ width:clamp(180px,18vw,290px); right:9%; bottom:5%; }
@media (max-width:1100px){ .imm-hp-dash{ display:none; } .imm-hp-store{ left:-5%; } .imm-hp-code{ right:-5%; } }
@media (max-width:767px){ .imm-hero-stage{ display:none; } }

/* ---- Cohesive scroll reveal (immersive, minimal) ---- */
.imm-reveal{ opacity:0; transform:translateY(42px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.imm-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .imm-reveal{ opacity:1 !important; transform:none !important; } }

/* ---- Editorial left-aligned oversized hero (awwwards) ---- */
.imm-hero3d .hero-container{ max-width:min(1320px,94vw); text-align:left; align-items:flex-start; margin:0 auto; }
.imm-hero3d .hero-badge{ align-self:flex-start; }
.imm-hero3d .hero-title{ font-size:clamp(2.7rem,8.6vw,7rem); line-height:.96; letter-spacing:-.035em; max-width:16ch; margin-bottom:clamp(24px,3vw,40px); }
.imm-hero3d .hero-subtitle{ text-align:left; margin-left:0; margin-right:0; max-width:56ch; }
.imm-hero3d .hero-actions{ justify-content:flex-start; }
.imm-hero3d .hero-proof{ align-self:flex-start; }
/* Keep it still: static gradient on the type (no sweep) */
.imm-hero .text-gradient{ animation:none !important; background-position:0 0 !important; }
.imm-hero3d .imm-scrollcue{ left:auto; right:5vw; transform:none; }
@media (max-width:600px){ .imm-hero3d .hero-title{ font-size:clamp(2.5rem,11vw,3.6rem); letter-spacing:-.03em; max-width:none; } .imm-hero3d .hero-subtitle{ max-width:none; } }

/* ---- Hero cover-scroll: the next section slides up OVER a pinned hero; scroll back reveals it (desktop + phone) ---- */
@media (min-height:600px){
  #main-content.modern-home > .imm-hero{ position:sticky; position:-webkit-sticky; top:0; height:100vh; height:100svh; z-index:1; display:flex; align-items:center; padding-top:0 !important; padding-bottom:0 !important; }
  #main-content.modern-home > .imm-hero .hero-container{ width:100%; }
  /* every section after the hero MUST be opaque, or the pinned hero bleeds through (cover-scroll requirement) */
  #main-content.modern-home > *:not(.imm-hero){ position:relative; z-index:2; background-color:var(--bg-main); }
  /* Opaque backdrop between the pinned hero (z1) and the sections (z2): guarantees the hero can NEVER
     bleed through, even while a .td-animate section is mid fade-in (opacity < 1 would otherwise reveal it). */
  #main-content.modern-home{ position:relative; }
  #main-content.modern-home::after{ content:""; position:absolute; left:0; right:0; top:100vh; top:100svh; bottom:0; background:var(--bg-main); z-index:1; pointer-events:none; }
  #main-content.modern-home > .imm-svc{ box-shadow:0 -40px 80px rgba(15,23,42,.10); }
  .imm-hero3d .imm-scrollcue{ bottom:26px; }
}
/* Phone: fit the hero into one screen so the same cover effect works (full text stays in DOM for SEO) */
@media (max-width:899px) and (min-height:600px){
  .imm-hero3d .hero-title{ font-size:clamp(2.15rem,8.8vw,3.1rem) !important; line-height:1.02 !important; margin-bottom:16px !important; }
  .imm-hero3d .hero-subtitle{ font-size:.92rem !important; line-height:1.45 !important; margin-bottom:18px !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .imm-hero3d .hero-badge{ margin-bottom:14px; }
  .imm-hero3d .hero-actions{ margin-bottom:16px !important; gap:10px; }
  .imm-hero3d .hero-proof{ padding:10px 16px !important; }
  #main-content.modern-home > .imm-hero{ align-items:flex-start; padding-top:clamp(84px,13vh,120px) !important; }
}

/* ---- Services: pinned horizontal flip (6 panels flip in on scroll) ---- */
.imm-svc2{ padding:0 !important; height:calc(6 * 60vh + 100vh); position:relative; }
.imm-svc2-sticky{ position:sticky; position:-webkit-sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(84px,12vh,120px) 24px clamp(48px,8vh,72px); perspective:1600px; }
.imm-svc2-head{ margin-bottom:clamp(18px,3.5vh,36px); }
.imm-svc2-stage{ position:relative; width:min(760px,92vw); transform-style:preserve-3d; display:grid; }
.imm-svc2-panel{ grid-area:1 / 1; backface-visibility:hidden; will-change:transform,opacity; transform-origin:center center; opacity:0; transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1); --acc:#DC2626; }
.imm-svc2-panel[data-accent="orange"]{--acc:#EA580C}.imm-svc2-panel[data-accent="violet"]{--acc:#5B3DF5}.imm-svc2-panel[data-accent="blue"]{--acc:#0284C7}.imm-svc2-panel[data-accent="green"]{--acc:#059669}
.imm-svc2-eyebrow{ display:inline-block; font-family:var(--font-heading); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:clamp(.72rem,1vw,.85rem); color:var(--acc); background:color-mix(in srgb,var(--acc) 9%,#ffffff); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); border-radius:100px; padding:7px 16px; margin-bottom:18px; }
.imm-svc2-panel h3{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2rem,5vw,3.5rem); line-height:1.04; letter-spacing:-.02em; margin:0 auto 18px; max-width:16ch; color:var(--text-main); }
.imm-svc2 .text-gradient{ background:linear-gradient(100deg,#DC2626,#F97316,#5B3DF5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.imm-svc2-panel p{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; color:var(--text-muted); max-width:42ch; margin:0 auto 24px; }
.imm-svc2-dots{ display:flex; gap:9px; margin-top:clamp(18px,3.5vh,34px); }
.imm-svc2-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:width .4s ease, background-color .4s ease; }
.imm-svc2-dots span.on{ background:var(--brand-red); width:26px; border-radius:100px; }
@media (prefers-reduced-motion: reduce){ .imm-svc2-panel{ transition:none !important; } }

/* ---- Persistent floating CTA ---- */
.imm-cta-float{ position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:9990; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-heading); font-weight:700; font-size:clamp(.9rem,1vw,1rem); color:#fff !important; background:var(--brand-red); padding:14px 24px; border-radius:100px; text-decoration:none; box-shadow:0 10px 30px rgba(220,38,38,.35), 0 2px 8px rgba(0,0,0,.12); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background-color .3s ease; animation:imm-cta-in .6s .9s both cubic-bezier(.2,.8,.2,1); }
.imm-cta-float::after{ content:""; width:1.02em; height:1.02em; background:currentColor; -webkit-mask:var(--imm-arrow) center/contain no-repeat; mask:var(--imm-arrow) center/contain no-repeat; transition:transform .3s ease; }
.imm-cta-float:hover{ transform:translateY(-3px); background:var(--brand-red-dark,#C42525); box-shadow:0 16px 42px rgba(220,38,38,.45); }
.imm-cta-float:hover::after{ transform:translateX(3px); }
@keyframes imm-cta-in{ from{ opacity:0; transform:translateY(22px) scale(.9);} to{ opacity:1; transform:none;} }
.imm-hero3d .imm-scrollcue{ left:5vw; right:auto; }
@media (max-width:767px){ .imm-cta-float{ right:14px; bottom:14px; padding:12px 18px; } }
@media (prefers-reduced-motion: reduce){ .imm-cta-float{ animation:none; } }

/* ---- Hero scroll cue: centered + down arrow ---- */
.imm-hero3d .imm-scrollcue{ left:50% !important; right:auto !important; transform:translateX(-50%); bottom:24px; align-items:center; gap:8px; }
.imm-scrollcue-chev{ width:20px; height:20px; display:block; background:var(--brand-red); animation:imm-bob 1.6s ease-in-out infinite;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes imm-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
@media (prefers-reduced-motion: reduce){ .imm-scrollcue-chev{ animation:none; } }

/* ---- Service platform logos ---- */
.imm-svc2-logo{ display:inline-flex; align-items:center; justify-content:center; gap:11px; margin-bottom:20px; }
.imm-svc2-logo .imm-logo-img{ height:clamp(30px,3.6vw,42px); width:auto; display:block; }
.imm-logo-wm{ font-family:var(--font-heading); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.02em; line-height:1; }
.imm-wm-shopify{ color:#5E8E3E; }
.imm-wm-odoo{ color:#714B67; }
.imm-wm-plus{ color:#0F172A; }

/* ---- Service title: bigger + wider (kill side deadspace), one size below hero h1 ---- */
.imm-svc2-stage{ width:min(1140px,93vw); }
.imm-svc2-panel h3{ font-size:clamp(2.4rem,6.4vw,5.4rem) !important; line-height:1.03; letter-spacing:-.025em; max-width:none; }
.imm-svc2-panel p{ max-width:54ch; font-size:clamp(1.1rem,1.5vw,1.4rem); }

/* ---- Services logo/eyebrow: stack cleanly (logo own line, plain caption) ---- */
.imm-svc2-logo{ display:flex !important; margin:0 auto 12px !important; }
.imm-svc2-logo .imm-logo-img{ height:clamp(34px,4vw,48px); }
.imm-svc2 .imm-svc2-eyebrow{ background:none; border:none; padding:0; margin-bottom:16px; color:var(--acc); font-size:clamp(.72rem,.95vw,.84rem); letter-spacing:.16em; }

/* ---- Services up/down scroll hint (pinned) ---- */
.imm-svc2-hint{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(20px,4vh,40px); display:flex; flex-direction:column; align-items:center; gap:3px; opacity:.75; }
.imm-svc2-dots{ margin-bottom:clamp(56px,10vh,84px); }
.imm-hint-txt{ font-family:var(--font-heading); font-weight:700; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); order:2; }
.imm-hint-chev{ width:16px; height:16px; display:block; background:var(--text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.imm-hint-up{ transform:rotate(180deg); opacity:.4; order:1; }
.imm-hint-down{ order:3; background:var(--brand-red); animation:imm-bob 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .imm-hint-down{ animation:none; } }

/* ---- Official service logos sizing ---- */
.imm-svc2-logo .imm-logo-img{ height:clamp(30px,3.6vw,40px); width:auto; display:block; }
.imm-svc2-logo .imm-logo-plus-img{ height:clamp(24px,2.8vw,32px); }
.imm-hint-chev{ pointer-events:auto; cursor:pointer; }
.imm-scrollcue{ cursor:pointer; }

/* ---- Service logo: proper centering + sizing (real marks) ---- */
.imm-svc2-logo{ display:flex !important; justify-content:center !important; align-items:center; gap:11px; margin:0 auto 16px !important; }
.imm-svc2-logo .imm-logo-img{ height:clamp(42px,4.8vw,54px); width:auto; }
.imm-svc2-logo img[src*="odoo"]{ height:clamp(46px,5.4vw,62px); }

.imm-svc2-logo .imm-logo-plus-img{ height:clamp(40px,4.6vw,52px) !important; }

/* ---- Work: full-screen flip, one client per screen ---- */
.imm-work2{ padding:0 !important; height:calc(5 * 56vh + 100vh); position:relative; background:var(--bg-alt); }
.imm-work2-sticky{ position:sticky; position:-webkit-sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(84px,12vh,120px) 24px clamp(56px,9vh,84px); perspective:1600px; }
.imm-work2-stage{ position:relative; width:min(1160px,93vw); transform-style:preserve-3d; display:grid; }
.imm-work2-panel{ grid-area:1 / 1; backface-visibility:hidden; will-change:transform,opacity; opacity:0; transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1); display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,4vw,60px); align-items:center; }
.imm-work2-media{ aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 70px rgba(15,23,42,.18); border:1px solid rgba(255,255,255,.7); }
.imm-work2-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.imm-work2-text{ text-align:left; }
.imm-work2-cat{ display:inline-block; font-family:var(--font-heading); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:clamp(.7rem,.95vw,.82rem); color:var(--brand-red); margin-bottom:12px; }
.imm-work2-panel h3{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1.0; letter-spacing:-.025em; margin:0 0 22px; color:var(--text-main); }
.imm-work2-dots{ display:flex; gap:9px; margin-top:clamp(24px,4vh,40px); margin-bottom:clamp(40px,7vh,60px); }
.imm-work2-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:width .4s ease, background-color .4s ease; }
.imm-work2-dots span.on{ background:var(--brand-red); width:26px; border-radius:100px; }
@media (max-width:820px){ .imm-work2-panel{ grid-template-columns:1fr; gap:18px; text-align:center; } .imm-work2-text{ text-align:center; } .imm-work2-panel h3{ font-size:clamp(1.9rem,8vw,2.7rem); } }
@media (prefers-reduced-motion: reduce){ .imm-work2-panel{ transition:none !important; } }

/* ---- Work FULL-BLEED override: edge-to-edge image + glass card ---- */
/* ---- WORK: contained framed slideshow (not full-bleed) ---- */
.imm-work2-panel{ position:absolute !important; inset:0; display:grid !important; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.5vw,72px); align-items:center; padding:clamp(120px,15vh,150px) clamp(24px,6vw,88px) clamp(84px,12vh,110px); }
.imm-work2-stage{ position:absolute !important; inset:0; width:auto !important; }
.imm-work2-media{ position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden; border:1px solid rgba(15,23,42,.08); box-shadow:0 40px 90px rgba(15,23,42,.20); order:2; }
.imm-work2-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.imm-work2-scrim{ display:none; }
.imm-work2-card{ position:static; max-width:520px; background:none; border:0; box-shadow:none; padding:0; text-align:left; -webkit-backdrop-filter:none; backdrop-filter:none; order:1; }
.imm-work2-card h3{ font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; margin:0 0 16px; }
.imm-work2-label{ position:absolute; top:clamp(90px,13vh,120px); left:50%; transform:translateX(-50%); z-index:3; font-family:var(--font-heading); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:clamp(.72rem,.95vw,.82rem); color:var(--text-main); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); padding:6px 16px; border-radius:100px; box-shadow:0 6px 18px rgba(15,23,42,.12); }
.imm-work2-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); margin:0 !important; z-index:4; }
.imm-work2-hint{ z-index:4; }
@media (max-width:900px){ .imm-work2-panel{ grid-template-columns:1fr; gap:18px; align-content:center; justify-items:center; padding:clamp(104px,14vh,124px) 20px clamp(78px,11vh,96px); }
 .imm-work2-media{ order:1; width:min(560px,92vw); } .imm-work2-card{ order:2; text-align:center; } .imm-work2-card h3{ font-size:clamp(1.7rem,7vw,2.3rem); } }

/* ============ PRODUCTS: full-screen framed showcase (one product per scroll, videos) ============ */
.imm-prod2{ padding:0 !important; height:calc(7 * 56vh + 100vh); position:relative; background:var(--bg-alt); }
.imm-prod3{ height:calc(10 * 52vh + 100vh); }
.imm-prod2-sticky{ position:sticky; position:-webkit-sticky; top:0; height:100vh; height:100svh; overflow:hidden; perspective:1600px; }
.imm-prod2-stage{ position:absolute; inset:0; transform-style:preserve-3d; }
.imm-prod2-panel{ position:absolute; inset:0; display:block; backface-visibility:hidden; will-change:transform,opacity; opacity:0; transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.imm-prod2-panel[data-accent="red"]{    --acc:#DC2626; }
.imm-prod2-panel[data-accent="orange"]{ --acc:#EA580C; }
.imm-prod2-panel[data-accent="violet"]{ --acc:#5B3DF5; }
.imm-prod2-panel[data-accent="blue"]{   --acc:#0284C7; }
.imm-prod2-panel[data-accent="green"]{  --acc:#059669; }
.imm-prod2-panel[data-accent="gold"]{    --acc:#E8890B; }
.imm-prod2-panel[data-accent="teal"]{    --acc:#0FA48B; }
.imm-prod2-panel[data-accent="coral"]{   --acc:#E8623D; }
.imm-prod2-panel[data-accent="magenta"]{ --acc:#D6336C; }
.imm-prod2-sound{ margin-left:auto; font-family:var(--font-heading); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--text-main); background:#fff; border:1px solid rgba(15,23,42,.12); border-radius:99px; padding:4px 12px; cursor:pointer; transition:.25s; }
.imm-prod2-sound.on{ background:var(--acc,#DC2626); border-color:var(--acc,#DC2626); color:#fff; }
/* bright, accent-tinted canvas per product (never dark) */
.imm-prod2-panel{ background:
  radial-gradient(1100px 760px at 82% 22%, color-mix(in srgb, var(--acc,#DC2626) 15%, #fff), rgba(255,255,255,0) 58%),
  radial-gradient(900px 700px at 6% 96%, color-mix(in srgb, var(--acc,#DC2626) 9%, #fff), rgba(255,255,255,0) 55%),
  var(--bg-alt); }
.imm-prod2-inner{ position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:clamp(28px,4.5vw,72px); align-items:center;
  padding:clamp(120px,15vh,150px) clamp(24px,6vw,88px) clamp(84px,12vh,110px); }
.imm-prod2-copy{ text-align:left; max-width:520px; }
.imm-prod2-plat{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.imm-prod2-platlogo{ height:22px; width:auto; display:block; }
.imm-prod2-tag{ font-family:var(--font-heading); font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:.68rem; color:var(--acc,var(--brand-red)); background:color-mix(in srgb, var(--acc,#DC2626) 12%, #fff); border:1px solid color-mix(in srgb, var(--acc,#DC2626) 24%, #fff); border-radius:100px; padding:4px 11px; }
.imm-prod2-copy h3{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; letter-spacing:-.028em; margin:0 0 16px; color:var(--text-main); }
.imm-prod2-desc{ margin:0 0 22px; font-size:clamp(1rem,1.2vw,1.16rem); line-height:1.55; color:var(--text-soft); }
.imm-prod2-viewall{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--font-heading); font-weight:700; font-size:.82rem; letter-spacing:.02em; color:var(--text-main); text-decoration:none; }
.imm-prod2-viewall:hover{ color:var(--acc,var(--brand-red)); }
/* browser-style frame around the demo */
.imm-prod2-frame{ border-radius:20px; overflow:hidden; background:#fff; border:1px solid rgba(15,23,42,.08);
  box-shadow:0 40px 90px color-mix(in srgb, var(--acc,#0F172A) 20%, rgba(15,23,42,.16)), 0 8px 24px rgba(15,23,42,.10);
  width:100%; max-width:min(680px,52vw); justify-self:start; }
.imm-prod2-frame-bar{ height:38px; display:flex; align-items:center; gap:7px; padding:0 16px; background:#F7F8FB; border-bottom:1px solid #EEF0F5; }
.imm-prod2-frame-bar span{ width:11px; height:11px; border-radius:50%; background:#D7DBE3; }
.imm-prod2-frame-bar span:nth-child(1){ background:#FF5F57; } .imm-prod2-frame-bar span:nth-child(2){ background:#FEBC2E; } .imm-prod2-frame-bar span:nth-child(3){ background:#28C840; }
.imm-prod2-frame-media{ aspect-ratio:16/10; overflow:hidden; }
.imm-prod2-frame-media img, .imm-prod2-frame-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.imm-prod2-label{ position:absolute; top:clamp(90px,13vh,120px); left:50%; transform:translateX(-50%); z-index:3; font-family:var(--font-heading); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:clamp(.72rem,.95vw,.82rem); color:var(--text-main); background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:6px 16px; border-radius:100px; box-shadow:0 6px 18px rgba(15,23,42,.12); }
.imm-prod2-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:4; }
.imm-prod2-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:width .4s ease, background-color .4s ease; }
.imm-prod2-dots span.on{ background:var(--brand-red); width:26px; border-radius:100px; }
.imm-prod2-hint{ z-index:4; }
@media (prefers-reduced-motion: reduce){ .imm-prod2-panel{ transition:none !important; } }
@media (max-width:900px){
  .imm-prod2-inner{ grid-template-columns:1fr; gap:clamp(18px,3vh,28px); align-content:center; justify-items:center;
    padding:clamp(104px,14vh,124px) 20px clamp(78px,11vh,96px); }
  .imm-prod2-copy{ text-align:center; order:2; max-width:560px; }
  .imm-prod2-plat{ justify-content:center; }
  .imm-prod2-copy h3{ font-size:clamp(1.7rem,7vw,2.3rem); }
  .imm-prod-links{ justify-content:center; }
  .imm-prod2-frame{ order:1; max-width:min(560px,92vw); justify-self:center; }
  .imm-prod2-frame-media{ aspect-ratio:16/11; }
}
@media (max-width:900px) and (max-height:720px){
  .imm-prod2-desc{ display:none; }  /* keep it swift on short mobile screens */
}

/* ---- Odoo banner grid (free scroll) ---- */
.imm-odoogrid-sec{ background:var(--bg-alt); padding:clamp(72px,10vh,110px) clamp(20px,5vw,64px) !important; }
.imm-odoogrid-head{ text-align:center; max-width:820px; margin:0 auto clamp(34px,5vh,54px); display:flex; flex-direction:column; align-items:center; gap:16px; }
.imm-odoogrid-head h2{ font-family:var(--font-heading); font-weight:800; font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.025em; line-height:1.05; margin:0; }
.imm-odoogrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); max-width:1200px; margin:0 auto; }
.imm-odoocard{ display:block; text-decoration:none; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--border-color); box-shadow:var(--shadow-soft); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.imm-odoocard img{ width:100%; height:auto; display:block; }
.imm-odoocard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.imm-odoocard-name{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; font-family:var(--font-heading); font-weight:700; font-size:.95rem; color:var(--text-main); border-top:1px solid var(--border-color); }
@media (max-width:760px){ .imm-odoogrid{ grid-template-columns:1fr; } }
/* transparent header over full-bleed work */

.imm-work2-detail{ display:flex; flex-direction:column; gap:14px; }
.imm-work2-detail p{ margin:0; font-size:clamp(.98rem,1.15vw,1.12rem); line-height:1.55; color:var(--text-soft); }
.imm-work2-dlabel{ display:block; font-family:var(--font-heading); font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:.68rem; color:var(--brand-red); margin-bottom:4px; }
/* video frame title: everyone knows what they're watching */
.imm-prod2-frame-title{ font-style:normal; font-family:var(--font-heading); font-weight:700; font-size:12px; letter-spacing:.02em; color:var(--text-soft); margin-left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
/* mobile: label chip must never overlap the frame */
@media (max-width:900px){
  .imm-prod2-label{ top:clamp(76px,10vh,96px); font-size:.62rem; padding:5px 13px; }
  .imm-prod2-inner{ padding-top:clamp(128px,17vh,150px) !important; }
  .imm-prod2-frame-title{ font-size:11px; }
}

/* ============ TAIL SECTIONS: immersive design language to the footer ============ */
/* Impact stats: glass cards, accent numerals */
#main-content.modern-home .impact-section{ background:
  radial-gradient(900px 620px at 85% 10%, color-mix(in srgb,#DC2626 7%,#fff), rgba(255,255,255,0) 60%),
  radial-gradient(800px 600px at 8% 95%, color-mix(in srgb,#F59E0B 8%,#fff), rgba(255,255,255,0) 55%), var(--bg-main) !important; }
#main-content.modern-home .stat-box{ background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85); border-radius:20px; box-shadow:0 20px 50px rgba(15,23,42,.10); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
#main-content.modern-home .stat-box:hover{ transform:translateY(-6px); }
#main-content.modern-home .stat-val{ background:linear-gradient(90deg,#DC2626,#EA580C); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Reviews: glass cards + premium arrows */
#main-content.modern-home .review-card{ background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:20px; border:1px solid var(--border-color); box-shadow:0 14px 36px rgba(15,23,42,.07); font-style:normal; }
#main-content.modern-home .review-card p{ font-style:normal; }
#main-content.modern-home .review-author::before{ content:""; display:inline-block; width:18px; height:2px; background:var(--brand-red); margin-right:8px; vertical-align:middle; border-radius:2px; }
#main-content.modern-home .td-partner-link .imm-arrow{ margin-left:7px; }
/* Featured testimonial: bright gradient statement panel */
#main-content.modern-home .featured-testimonial{ background:linear-gradient(120deg, color-mix(in srgb,#DC2626 8%,#fff), color-mix(in srgb,#F59E0B 10%,#fff)) !important; }
#main-content.modern-home .testimonial-wrap{ max-width:900px; margin:0 auto; text-align:center; background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.9); border-radius:26px; padding:clamp(30px,4.5vw,56px);
  box-shadow:0 30px 70px rgba(15,23,42,.12); }
#main-content.modern-home .testimonial-wrap p{ font-family:var(--font-heading); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.35; letter-spacing:-.01em; color:var(--text-main); }
/* ---- TIMELINE: new face (cooperates with legacy rail geometry) ---- */
#main-content.modern-home .timeline::before{ width:4px; border-radius:99px;
  background:linear-gradient(180deg,#DC2626,#EA580C,#F59E0B,#059669,#0284C7,#5B3DF5); opacity:.9; }
#main-content.modern-home .timeline-item::after{ content:""; position:absolute; left:-27px; top:6px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:4px solid var(--brand-red); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-red) 14%,#fff); z-index:2; }
#main-content.modern-home .timeline-item:nth-child(2)::after{ border-color:#EA580C; box-shadow:0 0 0 4px color-mix(in srgb,#EA580C 14%,#fff); }
#main-content.modern-home .timeline-item:nth-child(3)::after{ border-color:#F59E0B; box-shadow:0 0 0 4px color-mix(in srgb,#F59E0B 14%,#fff); }
#main-content.modern-home .timeline-item:nth-child(4)::after{ border-color:#059669; box-shadow:0 0 0 4px color-mix(in srgb,#059669 14%,#fff); }
#main-content.modern-home .timeline-item:nth-child(5)::after{ border-color:#0284C7; box-shadow:0 0 0 4px color-mix(in srgb,#0284C7 14%,#fff); }
#main-content.modern-home .timeline-item:nth-child(6)::after{ border-color:#5B3DF5; box-shadow:0 0 0 4px color-mix(in srgb,#5B3DF5 14%,#fff); }
#main-content.modern-home .timeline-item:nth-child(7)::after{ border-color:#94A3B8; box-shadow:0 0 0 4px #EEF1F6; }
#main-content.modern-home .timeline-year{ border-width:2px; box-shadow:0 8px 20px rgba(15,23,42,.08); }
#main-content.modern-home .timeline-content{ background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:18px; box-shadow:0 12px 32px rgba(15,23,42,.06); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
#main-content.modern-home .timeline-content:hover{ transform:translateX(6px); box-shadow:0 20px 48px rgba(15,23,42,.10); }
#main-content.modern-home .timeline-item.future .timeline-content{ border-style:dashed; background:rgba(255,255,255,.6); }
/* CTA band: bright brand gradient */
#main-content.modern-home .cta-section{ background:linear-gradient(135deg,#DC2626 0%,#EA580C 55%,#F59E0B 100%) !important; }
#main-content.modern-home .cta-title{ color:#fff !important; letter-spacing:-.025em; }
#main-content.modern-home .cta-subtitle{ color:rgba(255,255,255,.92) !important; }
#main-content.modern-home .cta-section .btn-primary{ background:#fff !important; color:#DC2626 !important; box-shadow:0 16px 40px rgba(0,0,0,.22); }
/* Local expertise: glass grid */
#main-content.modern-home .expertise-item{ background:rgba(255,255,255,.85); border:1px solid var(--border-color); border-radius:18px; padding:24px;
  box-shadow:0 12px 32px rgba(15,23,42,.05); transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s; }
#main-content.modern-home .expertise-item:hover{ transform:translateY(-6px); border-color:rgba(220,38,38,.35); }
#main-content.modern-home .timeline-item::after{ left:-32px; top:8px; }
#main-content.modern-home .timeline-year{ left:-56px; }
@media (max-width:900px){
  #main-content.modern-home .timeline-year{ left:-40px; }
  #main-content.modern-home .timeline-item::after{ display:none; }
}
#main-content.modern-home .timeline-year{ z-index:3; }
/* mobile timeline: years as static pills above cards (never off-screen) */
@media (max-width:900px){
  #main-content.modern-home .timeline{ padding-left:22px; }
  #main-content.modern-home .timeline::before{ left:6px; }
  #main-content.modern-home .timeline-year{ position:static; transform:none; display:inline-block; margin:0 0 10px; left:auto; }
  #main-content.modern-home .timeline-content{ margin-left:0; }
}
/* touch scroll-snap markers (invisible, inside pinned decks only) */
.imm-snapmark{ position:absolute; left:0; width:1px; height:100vh; height:100svh; pointer-events:none; opacity:0;
  scroll-snap-align:start; scroll-snap-stop:always; }