/* BrandLift Studio – homepage-only sections (shared pieces live in components.css / visuals.css) */

/* Hero: cinematic full-width background (supplied BrandLift scene), header floats over it */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  margin-top: calc(var(--header-h) * -1); min-height: clamp(640px, 94vh, 980px); padding: calc(var(--header-h) + 28px) 0 32px; background: var(--bg-deep); }
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; transform-origin: 72% 50%; }
.hero::before { /* readability: dark from the left, soft fades top and bottom */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 8, 9, 0.96) 0%, rgba(8, 8, 9, 0.84) 26%, rgba(8, 8, 9, 0.4) 50%, rgba(8, 8, 9, 0) 72%),
    linear-gradient(180deg, rgba(8, 8, 9, 0.7) 0%, rgba(8, 8, 9, 0) 20%, rgba(8, 8, 9, 0) 78%, var(--bg) 100%);
}
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.hero-inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vw, 48px); }
.hero-copy { min-width: 0; max-width: 560px; }
.hero .eyebrow { font-size: 0.74rem; letter-spacing: 0.24em; margin-bottom: 20px; color: var(--gold); }
.hero h1 { font-size: clamp(2.3rem, 3.6vw + .8rem, 4.1rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 24px; }
.hl-line { display: block; }
.hl-gold { color: var(--gold); }
.hero-lead { color: rgba(244, 239, 230, 0.78); font-size: clamp(0.98rem, .5vw + .82rem, 1.1rem); line-height: 1.65; max-width: 48ch; margin-bottom: 32px; }
.hero .button-row { gap: 12px; }
.hero .button-row .btn { min-height: 48px; padding: 0 26px; font-size: 0.92rem; gap: 10px; }
.hero .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -3px 0 rgba(120, 90, 35, 0.35) inset, 0 12px 28px -12px rgba(0, 0, 0, 0.8), 0 0 26px -10px rgba(201, 164, 92, 0.55); }
.hero .btn-glass { background: rgba(14, 14, 16, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(201, 164, 92, 0.5); }
.hero .btn-glass:hover { box-shadow: 0 0 22px -8px rgba(201, 164, 92, 0.6); }
.hero .btn .icon { width: 18px; height: 18px; color: var(--gold-light); stroke-width: 1.5; }
.arrow { display: inline-block; transition: transform .25s var(--ease, ease); }
.btn:hover .arrow, .fc-card:hover .arrow, .fc-card:focus-visible .arrow { transform: translateX(4px); }

/* Floating service cards (HTML/CSS, not part of the image) */
.hero-cards { display: none; }
@media (min-width: 1024px) {
  .hero-bg-img { top: auto; bottom: 0; height: min(100%, 50vw); object-position: 80% 50%; transform-origin: 72% 60%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .hero-cards { display: block; position: absolute; left: 44%; right: 0; top: auto; bottom: -32px; height: min(50vw, calc(100% + 128px)); pointer-events: none; }
  .fc { position: absolute; rotate: var(--r, 0deg); pointer-events: auto; perspective: 700px; }
  .fc-1 { --r: -4deg; left: 14%; top: 4%; }
  .fc-2 { --r: -5deg; left: 6%; top: 52%; }
  .fc-3 { --r: -5deg; right: 2%; top: 9%; }
  .fc-4 { --r: -5deg; right: 3%; top: 41%; }
}
.fc-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 190px; max-width: 250px; border-radius: 14px;
  font-size: 0.86rem; font-weight: 500; line-height: 1.25; color: var(--text);
  background: linear-gradient(160deg, rgba(26, 24, 20, 0.82), rgba(10, 10, 11, 0.82));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 164, 92, 0.5); box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform .35s var(--ease, ease), border-color .3s ease, box-shadow .3s ease;
}
.fc-card .icon { width: 24px; height: 24px; color: var(--gold-light); stroke-width: 1.4; }
.fc-card .arrow { margin-left: auto; color: var(--gold); }
.fc-card:hover, .fc-card:focus-visible { transform: translateY(-5px) rotateX(6deg) rotateY(-6deg); border-color: var(--gold-light); box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.9), 0 0 24px -8px rgba(201, 164, 92, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* Stats panel (placeholder numbers) */
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; max-width: 100%; margin: 0;
  border: 1px solid rgba(201, 164, 92, 0.22); border-radius: 18px; background: rgba(12, 12, 14, 0.6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9); }
.hero-stats > div { display: grid; grid-template-columns: 30px auto; column-gap: 12px; align-items: center; padding: 16px 28px; border-left: 1px solid rgba(244, 239, 230, 0.08); }
.hero-stats > div:first-child { border-left: 0; }
.hero-stats .icon { grid-row: span 2; width: 28px; height: 28px; color: var(--gold); stroke-width: 1.3; }
.hero-stats dt { grid-column: 2; grid-row: 1; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); line-height: 1.25; white-space: nowrap; }
.hero-stats dd { grid-column: 2; grid-row: 2; margin: 0; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* Large desktop: more presence for the hero message (tablet/mobile keep the rules above) */
@media (min-width: 1200px) {
  .hero > .container.hero-inner {
    max-width: 1560px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}
  .hero-inner { gap: clamp(48px, min(4.6vw, 7.4vh), 80px); padding-bottom: clamp(0px, min(1.6vw, 3vh) - 8px, 32px); }
  .hero-copy { max-width: 780px; }
  .hero .eyebrow { font-size: 0.8rem; margin-bottom: 28px; }
  .hero h1 { font-size: clamp(4.7rem, 2.9vw + 2.6rem, 5.6rem); margin-bottom: 34px; text-shadow: 0 2px 32px rgba(8, 8, 9, 0.55); }
  .hero .hl-line { white-space: nowrap; }
  .hero-lead { font-size: clamp(1.2rem, .32vw + 1rem, 1.32rem); max-width: 50ch; margin-bottom: 46px; text-shadow: 0 1px 18px rgba(8, 8, 9, 0.6); }
  .fc-1 { top: 9%; left: 20%; } /* clear of the header on tall screens and of the heading */
  .fc-2 { left: 16%; top: 56%; } /* clear of the paragraph's line ends */
  .hero .button-row { gap: 16px; }
  .hero .button-row .btn { min-height: 60px; padding: 0 38px; font-size: 1.06rem; gap: 12px; }
  .hero .btn .icon { width: 22px; height: 22px; }
  .hero-stats {
    border-radius: 20px;
    width: min(106%, 1120px);
}
  .hero-stats > div { grid-template-columns: 36px auto; column-gap: 14px; padding: 22px 44px; }
  .hero-stats .icon { width: 34px; height: 34px; }
  .hero-stats dt { font-size: 1rem; letter-spacing: 0.08em; }
  .hero-stats dd { margin-top: 3px; font-size: 0.92rem; }
}

/* 1200–1599px: lift the "Marknadsföring & tillväxt" card clear of the building's B emblem */
@media (min-width: 1200px) and (max-width: 1599px) {
  .fc-3 { top: 4%; }
}

.services-visual { display: none; } /* supporting image is desktop-only (>= 1200px) */

/* Large desktop: homepage services section at hero scale (scoped to #tjanster; shared card styles untouched) */
@media (min-width: 1200px) {
  /* left edge shared with header/hero container; widens to the right only */
  #tjanster > .container {
    max-width: 1560px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}
  #tjanster .section-head { max-width: 920px; margin-bottom: 64px; }
  /* top row: heading + intro left, supporting visual right (cards below unchanged) */
  #tjanster .services-top { display: grid; grid-template-columns: minmax(0, 1fr) 36%; column-gap: 64px; align-items: center; margin-bottom: 72px; }
  #tjanster .services-top .section-head { margin-bottom: 0; }
  #tjanster .services-visual { display: block; position: relative; margin: 0; }
  #tjanster .services-visual::before { /* soft gold ambience behind the image */
    content: ""; position: absolute; inset: 10% 6%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(201, 164, 92, 0.14), transparent 100%); filter: blur(24px); }
  #tjanster .services-visual img { display: block; width: 100%; height: auto;
    -webkit-mask-image: radial-gradient(ellipse 64% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 64% 66% at 50% 50%, #000 62%, transparent 100%); }
  #tjanster .eyebrow { font-size: 0.84rem; margin-bottom: 20px; }
  #tjanster .section-head h2 { font-size: clamp(3rem, 1.6vw + 1.9rem, 3.5rem); margin-bottom: 20px; }
  #tjanster .lead { font-size: 1.3rem; }
  #tjanster .card-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  #tjanster .card { padding: 38px; gap: 14px; }
  #tjanster .card-icon { width: 62px; height: 62px; font-size: 34px; border-radius: 17px; margin-bottom: 8px; }
  #tjanster .card-kicker { font-size: 0.82rem; }
  #tjanster .card h3 { font-size: 1.52rem; }
  #tjanster .card-text { font-size: 1.06rem; }
  #tjanster .card-meta { padding-top: 20px; gap: 8px 32px; }
  #tjanster .card-meta dt { font-size: 0.78rem; }
  #tjanster .card-meta dd { font-size: 1.08rem; }
  #tjanster .card-link { font-size: 1.02rem; margin-top: 16px; }
  #tjanster .section-cta { margin-top: 48px; position: relative; top: 24px; } /* vertical offset only: horizontally centred on the same axis as the showcase */
  #tjanster .section-cta .btn {
    min-height: 50px;
    padding: 0 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
}
}

/* Large desktop: brand showcase as a quiet cinematic transition into Packages */
@media (min-width: 1200px) {
  .brand-showcase { margin-top: -40px; padding: 0 0 64px; } /* pulls up into the image's own dark margin */
  .brand-showcase::after { /* hairline leading down to the Packages divider */
    content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 56px;
    background: linear-gradient(180deg, transparent, rgba(201, 164, 92, 0.4)); }
  .showcase-figure { width: min(100%, 640px); }
  .showcase-figure::before { inset: 6% -14% 2%; background: radial-gradient(closest-side, rgba(201, 164, 92, 0.13), rgba(201, 164, 92, 0.045) 55%, transparent 100%); }
  .showcase-figure figcaption { gap: 0; margin-top: -8%; }
  .showcase-figure .eyebrow { font-size: 0.8rem; letter-spacing: 0.3em; margin-bottom: 16px; }
  .showcase-line { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: #b8b2a6; }
}

/* Large desktop: signature package at hero/services scale (left edge shared with header/hero, widens right) */
@media (min-width: 1200px) {
  #paket { padding: 80px 0 120px; }
 #paket > .container {
    max-width: 1480px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}
  #paket .section-head { max-width: 920px; margin-bottom: 56px; }
  #paket .eyebrow { font-size: 0.84rem; margin-bottom: 20px; }
  #paket .section-head h2 { font-size: 3.3rem; margin-bottom: 0; }
  #paket .package { gap: 88px; padding: 82px; border-radius: 30px; }
  #paket .package::after { border-radius: 29px; }
  #paket .package-main { gap: 20px; }
  #paket .package-badge { font-size: 0.78rem; padding: 7px 16px 7px 12px; }
  #paket .package-badge .icon { width: 15px; height: 15px; }
  #paket .card-kicker { font-size: 0.84rem; }
  #paket .package h3 { font-size: 3.4rem; }
  #paket .card-text { font-size: 1.1rem; }
  #paket .price-label { font-size: 0.8rem; }
  #paket .price-now { font-size: 4.9rem; }
  #paket .price-old { font-size: 1.15rem; }
  #paket .package-facts { gap: 16px; padding-top: 22px; }
  #paket .package-facts dt { font-size: 0.8rem; }
  #paket .package-facts dd { font-size: 1.06rem; }
  #paket .button-row { gap: 16px; }
  #paket .button-row .btn { min-height: 60px; padding: 0 38px; font-size: 1.06rem; }
  #paket .package-included h4 { font-size: 0.86rem; margin-bottom: 24px; }
  #paket .included-list li { grid-template-columns: 48px 1fr; column-gap: 20px; padding: 17px 0; }
  #paket .included-list li:first-child { padding-top: 0; }
  #paket .inc-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 25px; }
  #paket .included-name { font-size: 1.08rem; }
  #paket .included-note { font-size: 0.96rem; }
}

/* Large desktop: "Varför BrandLift" value cards (left edge shared with header/hero, widens right) */
@media (min-width: 1200px) {
  #om-oss { padding: 80px 0 112px; }
  #om-oss > .container { max-width: 1480px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; }
  #om-oss .section-head { max-width: 920px; margin-bottom: 56px; }
  #om-oss .eyebrow { font-size: 0.84rem; margin-bottom: 20px; }
  #om-oss .section-head h2 { font-size: 3.5rem; margin-bottom: 20px; }
  #om-oss .lead { font-size: 1.3rem; }
  #om-oss .card-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 56px 28px; }
  /* open editorial blocks: no card surface, a fading champagne hairline on top (same language as the Process line) */
  #om-oss .card { padding: 34px 72px 0 0; gap: 14px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  #om-oss .card::before { inset: 0 0 auto 0; height: 1px; border-radius: 0; opacity: 1; transition: none;
    background: linear-gradient(90deg, rgba(201, 164, 92, 0.5), rgba(201, 164, 92, 0.08)); }
  #om-oss .card:hover { transform: none; box-shadow: none; border-color: transparent; }
  #om-oss .card h3 { font-size: 1.7rem; }
  #om-oss .card-text { font-size: 1.06rem; }
  #om-oss .section-cta { margin-top: 52px; }
  #om-oss .section-cta .text-link { font-size: 1.08rem; font-weight: 600; }
}

/* Large desktop: "Så arbetar vi" as an editorial timeline (left edge shared with header/hero, widens right) */
@media (min-width: 1200px) {
  #process { padding: 104px 0 112px; }
  #process > .container { max-width: 1480px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; }
  #process .section-head { margin-bottom: 60px; }
  #process .eyebrow { font-size: 0.84rem; margin-bottom: 20px; }
  #process .section-head h2 { font-size: 3.7rem; margin-bottom: 0; }
  #process .process { position: relative; gap: 64px; }
  #process .process::before { /* one continuous line through all four steps */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, rgba(201, 164, 92, 0.58), rgba(201, 164, 92, 0.3) 75%, rgba(201, 164, 92, 0.06)); }
  #process .process li { position: relative; border-top: 0; padding-top: 38px; gap: 10px; }
  #process .process li::before { /* step marker on the line */
    content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 164, 92, 0.12); }
  #process .step-no { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.08em; }
  #process .process h3 { font-size: 1.75rem; }
  #process .process .card-text { font-size: 1.12rem; line-height: 1.75; color: #b8b2a6; }
}

/* Large desktop: final CTA as the centred closing statement (home.css only loads on the homepage) */
@media (min-width: 1200px) {
  .section:has(> .container > .cta) { padding: 108px 0 114px; } /* +22px total = what the tighter card gives back; footer stays put */
  .section:has(> .container > .cta) > .container { max-width: 1480px; width: calc(100% - 40px);margin-left: auto; margin-right: auto; }
  .cta { margin-bottom: 0; padding: 78px 110px; border-radius: 30px; border-color: rgba(201, 164, 92, 0.28);
    background:
      radial-gradient(ellipse 75% 85% at 50% 100%, rgba(201, 164, 92, 0.085), transparent 72%),
      radial-gradient(ellipse at 50% 0%, rgba(201, 164, 92, 0.14), transparent 60%), var(--glass), var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 56px -34px rgba(0, 0, 0, 0.7), 0 50px 110px -64px rgba(201, 164, 92, 0.45); }
  .cta::before { width: 120%; bottom: -72%; background: radial-gradient(ellipse, rgba(201, 164, 92, 0.16), transparent 68%); } /* wider, softer; same animation */
  .cta h2 { font-size: 3.5rem; margin-bottom: 22px; }
  .cta .lead { font-size: 1.18rem; max-width: 720px; margin-bottom: 44px; color: #b8b2a6; }
  .cta .btn { min-height: 60px; padding: 0 42px; font-size: 1.06rem; }
}

/* Large desktop: one continuous BrandLift canvas below the hero, reusing the footer's lattice SVG
   (same data URI as .site-footer::after in base.css). The opaque hero covers the top of <main>;
   the tile is anchored to the bottom so its phase continues straight into the footer's pattern. */
@media (min-width: 1200px) {
  #main { position: relative; isolation: isolate; }
  #main::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='.7'%3E%3Cpath d='M48 6l9 21 21-9-9 21 21 9-21 9 9 21-21-9-9 21-9-21-21 9 9-21-21-9 21-9-9-21 21 9z'/%3E%3C/g%3E%3C/svg%3E") center bottom / 96px 96px;
    opacity: .11; }
  .section-alt { background: transparent; } /* #paket, #process: no separate graphite blocks */
  /* Seamless canvas: hide their section-level separators (borders stay 1px but transparent, so nothing moves;
     the centred gold hairline is removed). These are the lines around "Ett team..." and before the final CTA. */
  #paket, #process { border-block-color: transparent; }
  #paket::before, #process::before { content: none; }

  /* Main -> footer hand-off, same method as the internal pages (visuals.css): page-tone top border and
     ::before (normally the 1px hairline) as a 200px page-tone overlay under ::after.
     Unlike the internal pages, the footer lattice is NOT faded in: Home's #main lattice (.11, unmasked) already
     meets the footer lattice at the same strength (.3 x .375 radial mask at the top centre), so fading it would
     cut the pattern in a straight line at the boundary. Footer background, cards and content untouched. */
  #main:has(#hero-title) + .site-footer { border-top-color: #0b0b0d; }
  /* Footer base starts at the Home end tone (#0b0b0d) and joins the original linear #101012 -> #070708 gradient
     where that gradient is already ~rgb(12,12,14) (300px into the 713px footer), so from there down it is unchanged.
     The separate colour overlay is no longer needed. */
  #main:has(#hero-title) + .site-footer { background: linear-gradient(180deg, #0b0b0d 0, #0b0b0d 80px, rgb(12, 12, 14) 300px, #070708 100%); }
  #main:has(#hero-title) + .site-footer::before { content: none; }
}

/* Scroll cue */
.scroll-cue { display: none; }
@media (min-width: 1100px) {
  .scroll-cue { display: inline-flex; align-items: center; gap: 12px; position: absolute; right: 0; bottom: 10px; font-size: 0.78rem; color: rgba(244, 239, 230, 0.8); }
}
.scroll-mouse { position: relative; width: 20px; height: 32px; border: 1px solid rgba(244, 239, 230, 0.55); border-radius: 12px; }
.scroll-mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: var(--gold-light); }

/* Motion (all disabled for reduced-motion users) */
@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
  .hero-bg-img { animation: hero-zoom 26s ease-in-out infinite alternate; }
  .hero-copy > * { animation: hero-rise .9s var(--ease, ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .1s; }
  .hero-copy > :nth-child(3) { animation-delay: .35s; }
  .hero-copy > :nth-child(4) { animation-delay: .55s; }
  .hero-stats { animation: hero-rise .9s var(--ease, ease) .75s both; }
  .fc-1 { animation: fc-float 7s ease-in-out infinite alternate; }
  .fc-2 { animation: fc-float 8.5s ease-in-out -2s infinite alternate; }
  .fc-3 { animation: fc-float 7.5s ease-in-out -4s infinite alternate; }
  .fc-4 { animation: fc-float 9s ease-in-out -1s infinite alternate; }
  .hero .btn-primary { animation: gold-breathe 5s ease-in-out infinite alternate; }
  .scroll-mouse::after { animation: scroll-dot 1.8s ease-in-out infinite; }
}
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fc-float { from { translate: 0 -5px; } to { translate: 0 6px; } }
@keyframes gold-breathe { from { filter: brightness(1); } to { filter: brightness(1.06); } }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* Desktop hero: one-time entrances and scroll-driven depth, without layout changes. */
.hero-scene { display: none; }
@media (min-width: 1200px) {
  .hero > .hero-bg { display: none; }
  .hero-scene { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; perspective: 1200px; }
  .hero-scene-depth { position: absolute; inset: 0; transform-style: preserve-3d; }
  .hero-layer { position: absolute; transform-origin: 72% 65%; }
  .hero-layer--building, .hero-layer--platform { transform-origin: 50% 50%; }
  .hero-layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .hero-layer--city { inset: -2%; z-index: 0; }
  .hero-layer--city img { object-fit: cover; object-position: 78% 50%; }
  .hero-layer--building { left: 42%; right: 0; top: 14%; bottom: -5%; z-index: 1; }
  .hero-layer--building img { object-position: 65% 100%; }
  .hero-layer--platform { left: 35%; right: -4%; top: 48%; bottom: -12%; z-index: 2; transform: scale(1.02); }
  .hero-layer--platform img { object-position: 65% 100%; }
  .hero-layer--glow { inset: 0; z-index: 3; opacity: .10; }
  .hero-layer--glow img { object-fit: cover; }
  .hero-layer--particles { inset: 8% -3% -8% 25%; z-index: 4; opacity: .16; }
  .hero-layer--particles img { object-fit: cover; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .hero.hero-motion .hero-copy > * { animation: hero-desktop-rise 1.2s var(--ease, ease) both; }
  .hero.hero-motion .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero.hero-motion .hero-copy > :nth-child(3) { animation-delay: .26s; }
  .hero.hero-motion .hero-copy > :nth-child(4) { animation-delay: .4s; }
  .hero.hero-motion .fc { animation: hero-tag-enter 1.2s var(--ease, ease) both; }
  .hero.hero-motion .fc-1 { animation-delay: .2s; translate: 0 var(--hero-tag-1, 0px); }
  .hero.hero-motion .fc-2 { animation-delay: .3s; translate: 0 var(--hero-tag-2, 0px); }
  .hero.hero-motion .fc-3 { animation-delay: .4s; translate: 0 var(--hero-tag-3, 0px); }
  .hero.hero-motion .fc-4 { animation-delay: .5s; translate: 0 var(--hero-tag-4, 0px); }
  .hero.hero-motion .hero-stats { transform: translate3d(0, var(--hero-stats-y, 0px), 0); }
  .hero.hero-motion:focus-within .hero-copy > *,
  .hero.hero-motion .fc:focus-within { animation: none; }
}
@keyframes hero-tag-enter { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-desktop-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }

/* Motion belongs to the existing showcase image; its caption stays still. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .js .showcase-figure.showcase-motion { opacity: 1; transform: none; transition: none; perspective: 1200px; }
  .showcase-motion > img { transform-origin: 50% 50%; }
  .showcase-motion:not(.showcase-revealed) > img { opacity: 0; translate: 0 36px; scale: .92; }
  .showcase-motion.showcase-revealed > img { animation: showcase-enter 800ms cubic-bezier(.16, 1, .3, 1) both; }
  .showcase-motion::before { opacity: var(--showcase-glow, .75); }
  .showcase-motion::after {
    content: ""; position: absolute; top: 24%; left: 22%; width: 10%; height: 48%;
    pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .28) 25%, rgba(255, 245, 220, .72) 50%, rgba(201, 164, 92, .28) 75%, transparent);
    transform: translate3d(0, 12%, 0) skewX(-20deg);
  }
  .showcase-motion.showcase-revealed::after { animation: showcase-highlight 900ms cubic-bezier(.22, .61, .36, 1) 200ms both; }
  .showcase-motion:not(.showcase-in-view)::after { animation-play-state: paused; }
}
@keyframes showcase-highlight {
  0% { opacity: 0; transform: translate3d(0, 12%, 0) skewX(-20deg); }
  25%, 65% { opacity: .32; }
  100% { opacity: 0; transform: translate3d(450%, -12%, 0) skewX(-20deg); }
}
@keyframes showcase-enter {
  from { opacity: 0; translate: 0 36px; scale: .92; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Signature package: metallic glass surface with a slowly travelling gold edge */
.package {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px);
  position: relative; overflow: hidden; isolation: isolate; min-width: 0;
  border-radius: 26px; padding: clamp(26px, 4.5vw, 60px);
  box-shadow: 0 50px 110px -60px rgba(201, 164, 92, 0.55), 0 0 0 1px rgba(201, 164, 92, 0.18);
}
.package::before { /* travelling edge highlight: only transform animates */
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(201, 164, 92, 0.12) 0deg, rgba(232, 207, 152, 0.95) 28deg, rgba(201, 164, 92, 0.12) 70deg, rgba(201, 164, 92, 0.12) 180deg, rgba(168, 132, 63, 0.6) 215deg, rgba(201, 164, 92, 0.12) 250deg);
}
.package::after { /* inner surface */
  content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 25px;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(201, 164, 92, 0.2), transparent 70%),
    radial-gradient(420px 280px at 0% 100%, rgba(201, 164, 92, 0.08), transparent 70%),
    linear-gradient(160deg, #1d1c18, #0f0f11 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: no-preference) {
  .package::before { animation: edge-travel 14s linear infinite; }
}
@keyframes edge-travel { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.package > * { position: relative; min-width: 0; }
.package-main { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.package-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #0a0a0b;
  background: var(--gold-gradient); box-shadow: 0 6px 22px -8px rgba(201, 164, 92, 0.7);
}
.package-badge .icon { width: 14px; height: 14px; fill: #0a0a0b; stroke: none; }
.package h3 { font-size: clamp(2rem, 3.2vw + .5rem, 3rem); letter-spacing: -0.028em; }
.package .package-price { margin-top: 6px; }
.package .price-label { flex-basis: 100%; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.package .price-now { font-size: clamp(2.6rem, 5vw + 1rem, 4.4rem); line-height: 1; }
.package .price-old { font-size: 1.05rem; }
.package-facts { display: grid; gap: 14px; margin-bottom: 8px; padding-top: 18px; border-top: 1px solid var(--line); width: 100%; }
.package-facts dt { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.package-facts dd { color: var(--text); }
.package-included h4 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.included-list { display: grid; }
.included-list li {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.included-list li:first-child { padding-top: 0; }
.included-list li:last-child { border-bottom: 0; }
.inc-icon {
  grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 21px; color: var(--gold-light);
  background: radial-gradient(circle at 30% 20%, rgba(201, 164, 92, 0.2), rgba(201, 164, 92, 0.03) 75%), var(--surface);
  border: 1px solid rgba(201, 164, 92, 0.25); box-shadow: 0 0 20px -8px var(--gold-glow);
}
.included-name { font-weight: 600; }
.included-note { grid-column: 2; color: var(--muted); font-size: 0.9rem; }

/* Responsive */
@media (max-width: 960px) {
  .hero { min-height: 760px; }
  .hero-bg-img { object-position: 74% 50%; }
  .hero::before { background: linear-gradient(90deg, rgba(8, 8, 9, 0.95) 0%, rgba(8, 8, 9, 0.7) 45%, rgba(8, 8, 9, 0.2) 80%, transparent 100%), linear-gradient(180deg, rgba(8, 8, 9, 0.6) 0%, rgba(8, 8, 9, 0) 20%, rgba(8, 8, 9, 0) 78%, var(--bg) 100%); }
  .hero-stats { grid-template-columns: repeat(4, auto); }
  .hero-stats > div { padding: 14px 18px; }
  .package { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { min-height: 0; padding-bottom: 28px; }
  .hero-bg-img { object-position: 76% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(8, 8, 9, 0.82) 0%, rgba(8, 8, 9, 0.72) 45%, rgba(8, 8, 9, 0.5) 75%, var(--bg) 100%); }
  .hero .button-row .btn { flex: 1 1 100%; }
  .hero-stats { grid-template-columns: 1fr 1fr; width: 100%; }
  .hero-stats > div { padding: 14px 16px; border-left: 0; border-top: 1px solid rgba(244, 239, 230, 0.08); }
  .hero-stats > div:nth-child(-n+2) { border-top: 0; }
  .hero-stats > div:nth-child(even) { border-left: 1px solid rgba(244, 239, 230, 0.08); }
  .hero-stats dd { white-space: normal; }
  .package-main .btn { width: 100%; }
}
@media (max-width: 480px) {
  /* narrow phones: keep all four capability lines on one line so the 2x2 cells match */
  .hero-stats > div { padding: 14px 11px; column-gap: 9px; grid-template-columns: 26px auto; }
  .hero-stats .icon { width: 24px; height: 24px; }
  .hero-stats dd { font-size: 0.72rem; }
}