/* DXCESS — Industry (standalone stylesheet)
   Sections in this file:
     1. Design tokens
     2. Base + layout helpers
     3. Buttons
     4. Hero (glows, grid, floating labels, headline)
     5. Section heading
     6. Modules layout (rail + cards)
     7. Screenshot stack
     8. Why dxcess
     9. CTA + footer
   Breakpoints: 640px (large phone) · 768px (tablet = desktop design, smaller)
                1024px (desktop) · 1280px (wide, hero floating labels)      */

/* ---------- Navbar ---------- */
.navbar{position:fixed;top:0;z-index:50;background:hsl(var(--background)/.7);backdrop-filter:blur(12px);border-bottom:1px solid hsl(var(--border)/.6);width:100%}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.logo{display:flex;align-items:center;gap:.625rem}
.logo-mark{width:2.25rem;height:2.25rem;border-radius:.75rem;background:hsl(var(--brand));display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.logo-mark span{width:.75rem;height:.75rem;border-radius:.25rem;background:hsl(var(--brand-foreground))}
.logo-text{font-weight:800;font-size:1.125rem;letter-spacing:-.02em}
.nav-links{display:none;gap:2rem;font-size:.875rem;font-weight:500}
.nav-links a{color:hsl(var(--muted-foreground));transition:color .2s}
.nav-links a:hover{color:hsl(var(--foreground))}
@media(min-width:768px){.nav-links{display:flex}}
.btn-nav{background:hsl(var(--foreground));color:hsl(var(--background));border-radius:9999px;padding:0 1.25rem;height:2.5rem;font-weight:600;display:inline-flex;align-items:center;box-shadow:var(--shadow-soft)}
.arrow{width:1rem;height:1rem;transition:transform .25s}

/* ---------- Mobile nav drawer ---------- */
.nav-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:2.25rem;height:2.25rem;padding:.375rem;border-radius:.5rem;border:1px solid hsl(var(--border));background:hsl(var(--card));transition:background .2s}
.nav-hamburger:hover{background:hsl(var(--muted))}
.nav-hamburger span{display:block;height:2px;border-radius:9999px;background:hsl(var(--foreground));transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;transform-origin:center}
@media(min-width:768px){.nav-hamburger{display:none}}
.nav-overlay{position:fixed;inset:0;z-index:90;background:hsl(var(--foreground)/.25);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.nav-overlay.active{opacity:1;pointer-events:all}
.nav-drawer{position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(300px,85vw);height:100vh;background:#fff;border-right:1px solid hsl(var(--border));box-shadow:8px 0 40px hsl(222 30% 14%/.12);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.25rem;border-bottom:1px solid hsl(var(--border));flex-shrink:0}
.nav-close{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.5rem;color:hsl(var(--muted-foreground));transition:background .2s,color .2s}
.nav-close:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.nav-drawer-links{flex:1;display:flex;flex-direction:column;padding:.75rem 0;overflow-y:auto}
.drawer-link{display:flex;align-items:center;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;color:hsl(var(--foreground));border-left:3px solid transparent;transition:background .2s,border-color .2s,color .2s;letter-spacing:-.01em}
.drawer-link:hover{background:hsl(var(--brand-soft));border-left-color:hsl(var(--brand));color:hsl(var(--brand))}
.nav-drawer-footer{padding:1.25rem;border-top:1px solid hsl(var(--border));flex-shrink:0}
.desktop-only{display:none}
@media(min-width:768px){.desktop-only{display:block}}
.mobile-only{display:block}
@media(min-width:768px){.mobile-only{display:none}}

/* ---------- 1. Design tokens ---------- */
:root {
    --background: 36 40% 98%;
    --foreground: 222 30% 14%;
    --card: #ffffff;
    --muted: #f3f4f6;
    --muted-foreground: 220 12% 45%;
    --border: 220 16% 90%;
    --brand: 158 64% 42%;
    --brand-ink: 158 60% 30%;
    --brand-soft: 158 60% 94%;
    --accent: 27 91% 55%;
    --accent-soft: 30 90% 94%;
    --shadow-soft: 0 10px 30px -12px rgba(20, 28, 46, 0.1);
    --shadow-card: 0 1px 2px rgba(20, 28, 46, 0.04), 0 8px 24px -12px rgba(20, 28, 46, 0.08);
    --shadow-card-lg: 0 2px 4px rgba(20, 28, 46, 0.05), 0 30px 60px -24px rgba(20, 28, 46, 0.22);
    --radius: 1rem;
}

/* ---------- 2. Base ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid hsl(var(--border));
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    line-height: 1.5;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.1;
}
a {
    color: inherit;
    text-decoration: none;
}
ul,
ol {
    list-style: none;
}
img,
svg {
    display: block;
    max-width: 100%;
}
button {
    font: inherit;
    background: none;
    cursor: pointer;
}

/* Layout helpers */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.section {
    padding: 3.5rem 0;
}
.eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsl(var(--brand-ink));
}
.icon {
    width: 1rem;
    height: 1rem;
}
@media (min-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
    .section {
        padding: 5rem 0;
    }
}
@media (min-width: 1024px) {
    .section {
        padding: 6rem 0;
    }
}

/* ---------- 3. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    transition: transform 0.2s, opacity 0.2s;
    border: 1px solid transparent;
}
.btn-dark {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
}
.btn-brand {
    background: hsl(var(--brand));
    color: #fff;
}
.btn:hover {
    transform: translateY(-2px);
}
@media (min-width: 640px) {
    .btn {
        font-size: 1rem;
        padding: 0.95rem 2rem;
    }
}

/* ---------- 4. Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid hsl(var(--border));
    text-align: center;
}
.hero .container {
    position: relative;
    max-width: 900px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* soft colour glows */
.hero-glow {
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 9999px;
    filter: blur(110px);
    pointer-events: none;
}
.hero-glow-left {
    left: -10rem;
    top: -10rem;
    background: hsl(var(--brand) / 0.15);
}
.hero-glow-right {
    right: -10rem;
    top: -6rem;
    background: hsl(var(--accent) / 0.15);
}

/* faint grid, faded out towards the edges */
.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.6;
    background-image:
        linear-gradient(to right, hsl(var(--foreground) / 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(var(--foreground) / 0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 85%);
}

/* floating labels — hidden until there is room for them */
.hero-floats {
    display: none;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .hero-floats {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    /* narrow the headline column so there's real margin for the chips to float in without crowding it */
    .hero .container {
        max-width: 600px;
    }
    /* connecting lines need more room than tablet has to spare */
    .hero-path {
        display: none;
    }
    /* smaller chips, and only the top/bottom pair per side — the middle pair sits right beside the headline */
    .chip {
        padding: 0.4rem 0.7rem;
        font-size: 0.7rem;
    }
    .chip:nth-of-type(2),
    .chip:nth-of-type(5) {
        display: none;
    }
    .chip:nth-of-type(1) {
        top: 8% !important;
        left: 2% !important;
    }
    .chip:nth-of-type(3) {
        top: 84% !important;
        left: 3% !important;
    }
    .chip:nth-of-type(4) {
        top: 8% !important;
        right: 2% !important;
    }
    .chip:nth-of-type(6) {
        top: 84% !important;
        right: 3% !important;
    }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .hero-floats {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    /* still not enough margin for the full 6-chip + connector-line layout — keep it compact */
    .hero-path {
        display: none;
    }
    .chip {
        padding: 0.5rem 0.8rem;
        font-size: 0.78rem;
    }
    .chip:nth-of-type(2),
    .chip:nth-of-type(5) {
        display: none;
    }
    .chip:nth-of-type(1) {
        top: 8% !important;
        left: 1.5% !important;
    }
    .chip:nth-of-type(3) {
        top: 84% !important;
        left: 2.5% !important;
    }
    .chip:nth-of-type(4) {
        top: 8% !important;
        right: 1.5% !important;
    }
    .chip:nth-of-type(6) {
        top: 84% !important;
        right: 2.5% !important;
    }
}
@media (min-width: 1280px) {
    .hero-floats {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
}
.hero-path {
    position: absolute;
    top: 22%;
    width: 14%;
    height: 46%;
}
.hero-path-left {
    left: 7%;
    color: hsl(var(--brand) / 0.45);
}
.hero-path-right {
    right: 7%;
    color: hsl(var(--accent) / 0.5);
}
.chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
    background: var(--card);
    box-shadow: var(--shadow-card);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}
.chip-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
}
.chip-brand .chip-dot {
    background: hsl(var(--brand));
}
.chip-brand .icon {
    color: hsl(var(--brand));
}
.chip-accent .chip-dot {
    background: hsl(var(--accent));
}
.chip-accent .icon {
    color: hsl(var(--accent));
}

/* gentle drift so the labels feel alive */
@keyframes float-a {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-18px) rotate(4deg);
    }
}
@keyframes float-b {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(14px) rotate(-5deg);
    }
}
.float-a {
    animation: float-a 9s ease-in-out infinite;
}
.float-b {
    animation: float-b 11s ease-in-out infinite;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--brand) / 0.3);
    background: hsl(var(--brand-soft));
    color: hsl(var(--brand-ink));
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hero-tag .dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: hsl(var(--brand));
}

.hero h1 {
    margin-top: 1.75rem;
    font-size: 2.75rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.95;
}
.hero h1 .green {
    color: hsl(var(--brand));
}
.hero h1 .underlined {
    position: relative;
    display: inline-block;
}
.hero h1 .underlined svg {
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 100%;
    height: 0.8rem;
    color: hsl(var(--accent));
}
.hero p {
    margin: 2rem auto 0;
    max-width: 36rem;
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
}
.hero p span {
    display: block;
    margin-top: 0.5rem;
}
.hero-cta {
    margin-top: 2.25rem;
}
@media (min-width: 640px) {
    .hero h1 {
        font-size: 4.5rem;
    }
    .hero p {
        font-size: 1.125rem;
    }
}
@media (min-width: 768px) {
    .hero .container {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .hero h1 {
        font-size: 5.25rem;
    }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    /* slightly smaller + narrower column than full desktop, to leave real margin for the floats */
    .hero .container {
        max-width: 820px;
        padding-top: 7.5rem;
        padding-bottom: 7.5rem;
    }
    .hero h1 {
        font-size: 5.75rem;
    }
}
@media (min-width: 1280px) {
    .hero .container {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .hero h1 {
        font-size: 6.5rem;
    }
}

/* ---------- 5. Section heading ---------- */
.head {
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
}
.head h2 {
    margin-top: 1rem;
    font-size: 1.75rem;
}
.head h2 .green {
    color: hsl(var(--brand-ink));
}
.head p:not(.eyebrow) {
    margin-top: 1rem;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) {
    .head h2 {
        font-size: 2.5rem;
    }
    .head p:not(.eyebrow) {
        font-size: 1.125rem;
    }
}
@media (min-width: 1024px) {
    .head h2 {
        font-size: 3rem;
    }
}

/* ---------- 6. Modules layout (rail + cards) ---------- */
.modules-layout {
    margin-top: 2rem;
    display: grid;
    gap: 1.5rem;
}
/* tablet: rail is hidden, so stay single-column like mobile */
@media (min-width: 768px) {
    .modules-layout {
        margin-top: 2.5rem;
        gap: 1.75rem;
    }
}
@media (min-width: 1024px) {
    .modules-layout {
        grid-template-columns: 200px 1fr;
        gap: 3rem;
    }
}

/* Rail (vertical timeline): desktop only (1024px+) */
.rail {
    display: none;
}
@media (min-width: 1024px) {
    .rail {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}
.rail-inner {
    position: relative;
    padding-left: 2rem;
}
/* the track sits at x = 10px, exactly the centre of every 20px node.
   top + height are set in JS so it runs exactly between the first and last node centres, no tail. */
.rail-track,
.rail-track-read {
    position: absolute;
    left: 10px;
    top: 0;
    width: 2px;
    height: 0;
    transform: translateX(-50%);
    border-radius: 9999px;
}
.rail-track {
    background: hsl(var(--border)); /* still to read */
}
.rail-track-read {
    background: hsl(var(--brand) / 0.55); /* already read */
    transition: height 0.5s ease;
}
.rail-list {
    display: grid;
    gap: 1.5rem;
}
.rail-item {
    position: relative;
}
/* node: always 20px so the line always runs through its middle */
.rail-node {
    position: absolute;
    left: 10px;
    top: 0.7rem;
    margin-left: -2rem;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: hsl(var(--background));
    border: 2px solid hsl(var(--border)); /* still to read */
    transition: border-color 0.3s ease;
}
.rail-node::after {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: hsl(var(--border));
    transition: all 0.3s ease;
}
.rail-item.is-read .rail-node {
    border-color: hsl(var(--brand) / 0.6);
}
.rail-item.is-read .rail-node::after {
    background: hsl(var(--brand) / 0.45);
}
.rail-item.is-active .rail-node {
    border-color: hsl(var(--brand));
}
.rail-item.is-active .rail-node::after {
    width: 0.5rem;
    height: 0.5rem;
    background: hsl(var(--brand));
}
.rail-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    text-align: left;
}
.rail-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    background: var(--muted);
    color: hsl(var(--foreground) / 0.35);
    transition: all 0.3s ease;
}
.rail-item.is-read .rail-icon {
    background: hsl(var(--brand-soft));
    color: hsl(var(--brand-ink) / 0.7);
}
.rail-item.is-active .rail-icon {
    color: hsl(var(--brand-ink));
    box-shadow: var(--shadow-card);
}
.rail-num {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: hsl(var(--muted-foreground) / 0.8);
}
.rail-name {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    color: hsl(var(--foreground) / 0.4); /* still to read */
}
.rail-item.is-read .rail-name {
    color: hsl(var(--brand-ink) / 0.75);
}
.rail-item.is-active .rail-name {
    color: hsl(var(--brand-ink));
}
@media (min-width: 1024px) {
    .rail-inner {
        padding-left: 2.25rem;
    }
    .rail-node {
        margin-left: -2.25rem;
    }
    .rail-list {
        gap: 1.75rem;
    }
    .rail-icon {
        width: 2.25rem;
        height: 2.25rem;
    }
    .rail-name {
        font-size: 0.82rem;
    }
}

/* ---------- Module cards ---------- */
.module-list {
    display: grid;
    gap: 1.25rem;
}
.module {
    scroll-margin-top: 6rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card);
    background: var(--card);
}
/* card colour variants */
.module.tint-brand {
    background: linear-gradient(135deg, hsl(var(--brand-soft) / 0.7), var(--card));
}
.module.tint-accent {
    background: linear-gradient(135deg, hsl(var(--accent-soft) / 0.7), var(--card));
}
.module.tint-plain {
    background: var(--card);
}
.module-grid {
    display: grid;
    gap: 1.75rem;
    padding: 1.25rem;
}
.module-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.module-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
}
.module-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}
/* the tick colour always follows the card colour */
.tint-brand .module-icon,
.tint-brand .tick {
    background: hsl(var(--brand-soft));
    color: hsl(var(--brand-ink));
}
.tint-accent .module-icon,
.tint-accent .tick {
    background: hsl(var(--accent-soft));
    color: hsl(var(--accent));
}
.tint-plain .module-icon,
.tint-plain .tick {
    background: hsl(var(--foreground) / 0.07);
    color: hsl(var(--foreground));
}
.module-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}
.module h3 {
    margin-top: 0.25rem;
    font-size: 1.5rem;
}
.module-tagline {
    margin-top: 1rem;
    color: hsl(var(--foreground) / 0.72);
}
.points {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.875rem;
}
.points li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9rem;
    color: hsl(var(--foreground) / 0.85);
}
.tick {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border-radius: 9999px;
}
.tick .icon {
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 3;
}
.points b {
    color: hsl(var(--foreground));
}
.link-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(var(--brand-ink));
}
.link-more:hover {
    gap: 0.8rem;
}
@media (min-width: 640px) {
    .module-grid {
        padding: 2rem;
    }
    .module h3 {
        font-size: 1.875rem;
    }
}
/* two columns from tablet up — same design as desktop, tighter */
@media (min-width: 768px) {
    .module-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 1.75rem;
        padding: 1.5rem;
    }
    .module h3 {
        font-size: 1.5rem;
    }
    .module.reverse .module-copy {
        order: 2;
    }
    .module.reverse .module-shots {
    min-width: 0;
        order: 1;
    }
}
@media (min-width: 1024px) {
    .module-grid {
        gap: 3rem;
        padding: 2.5rem;
    }
    .module h3 {
        font-size: 1.875rem;
    }
}

/* ---------- 7. Screenshot stack (click the back one to swap) ---------- */
.stack {
    position: relative;
    padding-bottom: 3rem;
}
.shot {
    cursor: pointer;
    transition: opacity .35s ease;
}
/* front window: sits lower and further left, so the back one shows above/right of it */
.shot.is-front {
    position: relative;
    z-index: 20;
    margin: 2.25rem 2.5rem 0 0;
    transform: translateY(3rem);
}
/* back window: top-right, fully inside the stack box */
.shot.is-back {
    position: absolute;
    top: -1.5rem;
    right: 0;
    left: 2.5rem;
    z-index: 10;
    opacity: 0.92;
}
.shot.is-back:hover {
    opacity: 1;
}
.shot-window {
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    background: var(--card);
    box-shadow: var(--shadow-card-lg);
    transition: box-shadow .35s ease;
}
.shot.is-front .shot-window {
    box-shadow:
        0 24px 48px rgba(20,28,46,.14),
        0 8px 20px rgba(20,28,46,.05);
}
.shot.is-back .shot-window {
    box-shadow: 0 12px 28px rgba(20,28,46,.1);
}
/* images always render whole inside their window */
.shot-image {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 640px) {
    .shot.is-front { margin: 2.5rem 3rem 0 0; }
    .shot.is-back  { left: 3rem; }
}
@media (min-width: 1024px) {
    .shot.is-front { margin: 2.75rem 3.5rem 0 0; }
    .shot.is-back  { left: 3.5rem; }
}

/* ---------- 8. Why dxcess ---------- */
.why {
    border-top: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
    background: rgba(255, 255, 255, 0.5);
}
.why-grid {
    display: grid;
    gap: 2.5rem;
}
.why h2 {
    margin-top: 1rem;
    font-size: 1.75rem;
}
.why h2 .green {
    color: hsl(var(--brand-ink));
}
.why-intro p:not(.eyebrow) {
    margin-top: 1rem;
    max-width: 24rem;
    color: hsl(var(--muted-foreground));
}
.reasons {
    display: grid;
    gap: 1rem;
}
.reason {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid hsl(var(--border));
    border-radius: 1.25rem;
    background: var(--card);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, border-color 0.2s;
}
.reason:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--brand) / 0.4);
}
.reason-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: hsl(var(--brand-soft));
    color: hsl(var(--brand-ink));
}
.reason-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}
.reason-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.reason-title span {
    font-size: 0.7rem;
    font-weight: 700;
    color: hsl(var(--muted-foreground) / 0.8);
}
.reason h3 {
    font-size: 1.125rem;
}
.reason p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
    .reasons {
        grid-template-columns: 1fr 1fr;
    }
    .why h2 {
        font-size: 2.5rem;
    }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .why h2 {
        font-size: 2rem;
    }
    .why-intro p:not(.eyebrow) {
        font-size: 0.95rem;
        max-width: 30rem;
    }
    .reason-icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.85rem;
    }
    .reason-icon .icon {
        width: 1.05rem;
        height: 1.05rem;
    }
}
@media (min-width: 1024px) {
    .why-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 4rem;
    }
    .why-intro {
        position: sticky;
        top: 3rem;
        align-self: start;
    }
    .why h2 {
        font-size: 3rem;
    }
    .reasons {
        grid-template-columns: 1fr;
    }
}

/* ---------- 9. CTA ---------- */
.cta-box {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    text-align: center;
    padding: 3rem 1.25rem;
    box-shadow: var(--shadow-card);
}
.cta-box h2 {
    font-size: 1.75rem;
    max-width: 34rem;
    margin: 0 auto;
}
.cta-box p {
    margin: 1rem auto 0;
    max-width: 34rem;
    color: hsl(var(--background) / 0.7);
}
.cta-box .btn {
    margin-top: 1.75rem;
}
@media (min-width: 640px) {
    .cta-box {
        border-radius: 1.5rem;
        padding: 4rem 1.5rem;
    }
    .cta-box h2 {
        font-size: 2.5rem;
    }
}
.cta-note{margin:24px auto 0 !important;font-size:13px !important;line-height:1.6 !important;color:rgba(255,255,255,.75) !important}
.cta-note a{color:#fff !important;font-weight:600 !important;text-decoration:underline !important;text-underline-offset:3px}
.cta-note a:hover{opacity:.85}

/* ---------- Footer ---------- */
.footer{padding:3rem 1.5rem;border-top:1px solid hsl(var(--border));text-align:center;font-size:.875rem;color:hsl(var(--muted-foreground))}