@import url("/assets/codee/tier3-visual-assets.css");

@layer codee-suite {
  :root {
    --codee-suite-accent: #58dce8;
    --codee-suite-accent-2: #e6bd58;
    --codee-suite-ink: #f8fbff;
    --codee-suite-muted: rgba(238, 245, 255, .78);
    --codee-suite-panel: rgba(9, 15, 24, .74);
    --codee-suite-panel-strong: rgba(6, 10, 16, .92);
    --codee-suite-surface: rgba(8, 12, 18, .82);
    --codee-suite-line: rgba(255, 255, 255, .18);
  }

  body[data-codee-sector="food"] {
    --codee-suite-panel-strong: rgba(24, 13, 7, .92);
    --codee-suite-surface: rgba(30, 17, 8, .84);
  }

  body[data-codee-sector="medical"] {
    --codee-suite-panel-strong: rgba(3, 18, 28, .92);
    --codee-suite-surface: rgba(4, 28, 38, .84);
  }

  body[data-codee-sector="trades"] {
    --codee-suite-panel-strong: rgba(9, 10, 13, .94);
    --codee-suite-surface: rgba(12, 14, 18, .86);
  }

  body[data-codee-sector="beauty"] {
    --codee-suite-panel-strong: rgba(30, 8, 25, .92);
    --codee-suite-surface: rgba(38, 10, 32, .84);
  }

  body[data-codee-sector="professional"] {
    --codee-suite-panel-strong: rgba(5, 12, 26, .94);
    --codee-suite-surface: rgba(8, 16, 34, .86);
  }

  body[data-codee-sector="fitness"] {
    --codee-suite-panel-strong: rgba(8, 20, 8, .93);
    --codee-suite-surface: rgba(8, 28, 13, .84);
  }

  body[data-codee-sector="pet"] {
    --codee-suite-panel-strong: rgba(7, 18, 18, .93);
    --codee-suite-surface: rgba(8, 26, 28, .84);
  }

  body[data-codee-sector="nonprofit"] {
    --codee-suite-panel-strong: rgba(10, 13, 27, .93);
    --codee-suite-surface: rgba(12, 17, 34, .84);
  }

  body[data-codee-suite] {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    line-height: 1.45;
    background:
      linear-gradient(180deg, rgba(4,8,13,.9), rgba(4,8,13,.78) 38%, rgba(4,8,13,.94)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--codee-suite-accent) 24%, transparent), transparent 34%),
      radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--codee-suite-accent-2) 20%, transparent), transparent 30%),
      linear-gradient(180deg, #060a11, #101925 48%, #06080d) !important;
    background-size: cover, cover, auto, auto, auto !important;
    background-position: center top, center top, center, center, center !important;
    background-attachment: fixed, fixed, scroll, scroll, scroll !important;
  }

  body[data-codee-suite] :where(
    .topbar,
    .main-header,
    .site-header,
    .site-nav,
    .nav,
    .brand,
    .brand-copy,
    .hero,
    .hero-section,
    .catering-hero,
    .btn,
    .button,
    .cta,
    button,
    input,
    select,
    textarea,
    .codee-demo-shellbar,
    .codee-demo-buybar,
    .codee-demo-buybar *,
    .codee-suite-proof-rail,
    .codee-suite-proof-rail *
  ) {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body[data-codee-suite]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, black, transparent 82%);
  }

  body[data-codee-suite]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.09), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.04), transparent 34%, rgba(255,255,255,.03));
  }

  body[data-codee-suite] .site-shell,
  body[data-codee-suite] main,
  body[data-codee-suite] .container {
    position: relative;
  }

  body[data-codee-suite] .topbar,
  body[data-codee-suite] .main-header,
  body[data-codee-suite] .site-header,
  body[data-codee-suite] header.topbar {
    border: 1px solid var(--codee-suite-line) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
      rgba(6, 10, 16, .72) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3) !important;
    backdrop-filter: blur(22px) saturate(1.25);
  }

  body[data-codee-suite] .site-shell,
  body[data-codee-suite] main,
  body[data-codee-suite] .container {
    isolation: isolate;
  }

  body[data-codee-suite] .brand-mark,
  body[data-codee-suite] .brand-initials {
    background: linear-gradient(135deg, var(--codee-suite-accent), var(--codee-suite-accent-2)) !important;
    color: #081018 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.34), 0 18px 50px color-mix(in srgb, var(--codee-suite-accent) 28%, transparent) !important;
  }

  body[data-codee-suite] .brand,
  body[data-codee-suite] .brand-copy {
    color: var(--codee-suite-ink) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.46) !important;
  }

  body[data-codee-suite] .site-nav a,
  body[data-codee-suite] .nav a,
  body[data-codee-suite] .topbar a,
  body[data-codee-suite] .main-header a {
    color: rgba(248, 251, 255, .88) !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  body[data-codee-suite] .btn,
  body[data-codee-suite] .button,
  body[data-codee-suite] .cta,
  body[data-codee-suite] button {
    border: 1px solid color-mix(in srgb, var(--codee-suite-accent) 32%, rgba(255,255,255,.22)) !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--codee-suite-accent) 72%, #fff 12%), color-mix(in srgb, var(--codee-suite-accent-2) 76%, #fff 8%)) !important;
    color: #061018 !important;
    border-radius: 999px !important;
    box-shadow: 0 20px 50px color-mix(in srgb, var(--codee-suite-accent) 22%, transparent) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  body[data-codee-suite] .btn:hover,
  body[data-codee-suite] .button:hover,
  body[data-codee-suite] .cta:hover,
  body[data-codee-suite] button:hover {
    transform: translateY(-2px);
    filter: saturate(1.08) brightness(1.04);
  }

  body[data-codee-suite] .hero,
  body[data-codee-suite] .hero-section,
  body[data-codee-suite] .catering-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--codee-suite-line) !important;
    border-radius: clamp(22px, 4vw, 40px) !important;
    padding: clamp(28px, 5vw, 72px) !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.08) 52%, rgba(0,0,0,.32)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--codee-suite-accent) 24%, transparent), transparent 36%),
      radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--codee-suite-accent-2) 22%, transparent), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center, center, center, center, center, center !important;
    min-height: clamp(460px, 72vh, 760px);
    box-shadow: 0 38px 110px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  }

  body[data-codee-suite] .hero::before,
  body[data-codee-suite] .hero-section::before,
  body[data-codee-suite] .catering-hero::before {
    content: attr(data-codee-watermark);
    position: absolute;
    right: -4vw;
    top: 4%;
    opacity: .06;
    color: #fff;
    font-size: clamp(74px, 13vw, 190px);
    font-weight: 950;
    line-height: .8;
    letter-spacing: 0;
    text-transform: uppercase;
    pointer-events: none;
  }

  body[data-codee-suite] .hero::after,
  body[data-codee-suite] .hero-section::after,
  body[data-codee-suite] .catering-hero::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(90deg, rgba(0,0,0,.46), transparent 48%, rgba(0,0,0,.22)),
      radial-gradient(circle at 12% 55%, rgba(0,0,0,.42), transparent 34%);
  }

  body[data-codee-suite] .hero > *,
  body[data-codee-suite] .hero-section > *,
  body[data-codee-suite] .catering-hero > * {
    position: relative;
    z-index: 1;
  }

  body[data-codee-suite] .hero-copy,
  body[data-codee-suite] .hero-content,
  body[data-codee-suite] .hero-text,
  body[data-codee-suite] .hero-panel,
  body[data-codee-suite] .hero-info,
  body[data-codee-suite] .intro-copy,
  body[data-codee-suite] .headline-block {
    width: min(760px, 100%);
    max-width: min(760px, 100%);
    border: 1px solid color-mix(in srgb, var(--codee-suite-accent) 28%, rgba(255,255,255,.14)) !important;
    border-radius: clamp(18px, 3vw, 30px) !important;
    background:
      linear-gradient(135deg, rgba(3,7,12,.9), rgba(10,16,24,.7)),
      var(--codee-suite-surface) !important;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    padding: clamp(18px, 3vw, 34px);
    animation: codee-suite-rise .74s ease both;
  }

  body[data-codee-suite] .hero-copy::before,
  body[data-codee-suite] .hero-content::before,
  body[data-codee-suite] .hero-text::before,
  body[data-codee-suite] .hero-panel::before,
  body[data-codee-suite] .hero-info::before,
  body[data-codee-suite] .intro-copy::before,
  body[data-codee-suite] .headline-block::before {
    content: "MiniCodeeSite $499 shell preview";
    display: inline-flex;
    width: fit-content;
    margin: 0 0 12px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--codee-suite-accent) 42%, rgba(255,255,255,.16));
    border-radius: 999px;
    color: var(--codee-suite-accent);
    background: rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,.55);
  }

  body[data-codee-suite] h1,
  body[data-codee-suite] .hero h1,
  body[data-codee-suite] .hero-section h1 {
    font-size: clamp(42px, 5vw, 78px) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
    opacity: 1 !important;
    color: var(--codee-suite-ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, .12),
      0 3px 4px rgba(0, 0, 0, .86),
      0 18px 52px rgba(0, 0, 0, .56),
      0 0 36px color-mix(in srgb, var(--codee-suite-accent) 24%, transparent) !important;
  }

  body[data-codee-suite] h2,
  body[data-codee-suite] h3,
  body[data-codee-suite] h4 {
    color: var(--codee-suite-ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .58) !important;
  }

  body[data-codee-suite] .eyebrow,
  body[data-codee-suite] .section-label,
  body[data-codee-suite] .mini-label,
  body[data-codee-suite] .tag,
  body[data-codee-suite] .card-tag {
    color: var(--codee-suite-accent) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    font-weight: 900 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.55) !important;
  }

  body[data-codee-suite] .hero p:not(.eyebrow),
  body[data-codee-suite] .hero-section p:not(.eyebrow),
  body[data-codee-suite] .hero-text,
  body[data-codee-suite] .hero-sub,
  body[data-codee-suite] .hero li,
  body[data-codee-suite] .hero span:not(.brand-mark):not(.brand-initials),
  body[data-codee-suite] .hero-section li,
  body[data-codee-suite] .hero-section span:not(.brand-mark):not(.brand-initials) {
    color: var(--codee-suite-ink) !important;
    opacity: .96 !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .74) !important;
  }

  body[data-codee-suite] p,
  body[data-codee-suite] li,
  body[data-codee-suite] .card-copy,
  body[data-codee-suite] .section-copy,
  body[data-codee-suite] .muted,
  body[data-codee-suite] .feature-text {
    color: rgba(248, 251, 255, .92) !important;
    text-shadow: 0 2px 3px rgba(0,0,0,.62) !important;
  }

  body[data-codee-suite] .btn,
  body[data-codee-suite] .header-cta,
  body[data-codee-suite] button,
  body[data-codee-suite] .package-cta {
    border: 1px solid color-mix(in srgb, var(--codee-suite-accent) 52%, rgba(255,255,255,.2)) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--codee-suite-accent) 72%, #ffffff 8%), var(--codee-suite-accent-2)) !important;
    color: #061018 !important;
    text-shadow: none !important;
    box-shadow: 0 16px 44px color-mix(in srgb, var(--codee-suite-accent) 28%, transparent) !important;
    backdrop-filter: blur(18px);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  body[data-codee-suite] .btn:hover,
  body[data-codee-suite] .header-cta:hover,
  body[data-codee-suite] button:hover,
  body[data-codee-suite] .package-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--codee-suite-accent) 34%, transparent) !important;
  }

  body[data-codee-suite] .service-card,
  body[data-codee-suite] .package-card,
  body[data-codee-suite] .story-card,
  body[data-codee-suite] .quote-card,
  body[data-codee-suite] .contact-card,
  body[data-codee-suite] .doctor-card,
  body[data-codee-suite] .hero-card,
  body[data-codee-suite] .collage-panel,
  body[data-codee-suite] .faq-card,
  body[data-codee-suite] .feature-card,
  body[data-codee-suite] .pricing-card,
  body[data-codee-suite] .panel {
    border: 1px solid var(--codee-suite-line) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
      var(--codee-suite-panel) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .26) !important;
    backdrop-filter: blur(20px) saturate(1.18);
  }

  body[data-codee-suite] :where(.service-card, .package-card, .feature-card, .pricing-card, .story-card, .quote-card, .contact-card, .panel) {
    position: relative;
    overflow: hidden;
  }

  body[data-codee-suite] :where(.service-card, .package-card, .feature-card, .pricing-card, .story-card, .quote-card, .contact-card, .panel)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(135deg, rgba(0,0,0,.62), rgba(0,0,0,.18)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent));
    background-size: cover;
    background-position: center;
    opacity: .18;
    filter: saturate(1.08) contrast(1.04);
  }

  body[data-codee-suite] :where(
    .media-card,
    .menu-card,
    .gallery-card,
    .showcase-card,
    .product-card,
    .service-card,
    .package-card,
    .feature-card,
    .pricing-card,
    .story-card,
    .quote-card,
    .contact-card,
    .panel
  ) :where(h2, h3, h4, strong, p, span, li) {
    color: rgba(250, 252, 255, .96) !important;
    opacity: 1 !important;
    text-shadow:
      0 2px 3px rgba(0,0,0,.78),
      0 12px 28px rgba(0,0,0,.36) !important;
  }

  body[data-codee-suite] :where(.media-card, .gallery-card, .showcase-card, .product-card)::after {
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.74) 100%) !important;
  }

  body[data-codee-suite] .service-card,
  body[data-codee-suite] .package-card,
  body[data-codee-suite] .feature-card,
  body[data-codee-suite] .pricing-card,
  body[data-codee-suite] .faq-card,
  body[data-codee-suite] .story-card,
  body[data-codee-suite] .contact-card {
    border-radius: 22px !important;
    padding: clamp(18px, 2.4vw, 28px) !important;
  }

  body[data-codee-suite] .service-card strong,
  body[data-codee-suite] .package-card strong,
  body[data-codee-suite] .hero-strip strong {
    color: var(--codee-suite-accent-2) !important;
    font-weight: 950 !important;
  }

  body[data-codee-suite] .service-card p,
  body[data-codee-suite] .package-card p,
  body[data-codee-suite] .story-card p,
  body[data-codee-suite] .quote-card p,
  body[data-codee-suite] .contact-card p,
  body[data-codee-suite] .doctor-card p,
  body[data-codee-suite] .hero-card p,
  body[data-codee-suite] .collage-panel p,
  body[data-codee-suite] .faq-card p,
  body[data-codee-suite] .feature-card p,
  body[data-codee-suite] .pricing-card p,
  body[data-codee-suite] .panel p {
    color: rgba(248, 251, 255, .92) !important;
  }

  body[data-codee-suite] .service-card:nth-child(3n+1),
  body[data-codee-suite] .package-card:nth-child(3n+2) {
    transform: translateY(-3px);
  }

  body[data-codee-suite] img,
  body[data-codee-suite] .hero-card,
  body[data-codee-suite] .hero-image,
  body[data-codee-suite] .hero-image-card,
  body[data-codee-suite] .visual-panel,
  body[data-codee-suite] .collage-panel,
  body[data-codee-suite] .phone-frame,
  body[data-codee-suite] .mockup,
  body[data-codee-suite] .device {
    filter: saturate(1.08) contrast(1.04);
    transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
  }

  body[data-codee-suite] img:hover,
  body[data-codee-suite] .hero-card:hover,
  body[data-codee-suite] .hero-image-card:hover,
  body[data-codee-suite] .visual-panel:hover,
  body[data-codee-suite] .collage-panel:hover,
  body[data-codee-suite] .phone-frame:hover,
  body[data-codee-suite] .mockup:hover,
  body[data-codee-suite] .device:hover {
    transform: translateY(-4px) scale(1.015);
    filter: saturate(1.16) contrast(1.08);
  }

  body[data-codee-suite] .hero img,
  body[data-codee-suite] .hero-section img,
  body[data-codee-suite] .catering-hero img,
  body[data-codee-suite] .hero-card,
  body[data-codee-suite] .hero-image-card,
  body[data-codee-suite] .phone-frame {
    animation: codee-suite-float-img 8s ease-in-out infinite;
  }

  body[data-codee-sector="food"] .hero,
  body[data-codee-sector="food"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.08) 54%, rgba(0,0,0,.34)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 15% 10%, rgba(255, 214, 102, .22), transparent 34%),
      radial-gradient(circle at 90% 15%, rgba(255, 125, 101, .18), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="trades"] .hero,
  body[data-codee-sector="trades"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.1) 54%, rgba(0,0,0,.36)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px),
      radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--codee-suite-accent-2) 24%, transparent), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="medical"] .hero,
  body[data-codee-sector="medical"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.08) 54%, rgba(0,0,0,.3)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 14% 18%, rgba(125, 249, 255, .2), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="beauty"] .hero,
  body[data-codee-sector="beauty"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.44), rgba(0,0,0,.08) 54%, rgba(0,0,0,.32)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 16% 14%, rgba(244, 114, 182, .24), transparent 34%),
      radial-gradient(circle at 92% 8%, rgba(192, 132, 252, .2), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="professional"] .hero,
  body[data-codee-sector="professional"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.08) 54%, rgba(0,0,0,.32)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 15% 12%, rgba(230, 189, 88, .2), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="fitness"] .hero,
  body[data-codee-sector="fitness"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.08) 54%, rgba(0,0,0,.36)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 15% 12%, rgba(163, 230, 53, .22), transparent 32%),
      radial-gradient(circle at 88% 10%, rgba(56, 189, 248, .18), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="pet"] .hero,
  body[data-codee-sector="pet"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.08) 54%, rgba(0,0,0,.34)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 14% 18%, rgba(94, 234, 212, .22), transparent 34%),
      radial-gradient(circle at 92% 8%, rgba(230, 189, 88, .18), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center !important;
  }

  body[data-codee-sector="nonprofit"] .hero,
  body[data-codee-sector="nonprofit"] .hero-section {
    background:
      linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.08) 54%, rgba(0,0,0,.36)),
      var(--codee-suite-photo, linear-gradient(135deg, transparent, transparent)),
      radial-gradient(circle at 15% 12%, rgba(230, 189, 88, .2), transparent 32%),
      radial-gradient(circle at 88% 10%, rgba(88, 220, 232, .16), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
      var(--codee-suite-panel-strong) !important;
    background-size: cover, cover, auto, auto, auto, auto !important;
    background-position: center !important;
  }

  .codee-suite-visual-dock {
    width: min(1180px, calc(100vw - 28px));
    margin: clamp(14px, 3vw, 26px) auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr .9fr;
    gap: 12px;
  }

  .codee-suite-visual-card {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid var(--codee-suite-line);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.68)),
      var(--codee-suite-photo, linear-gradient(135deg, var(--codee-suite-accent), var(--codee-suite-accent-2)));
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.3);
  }

  .codee-suite-visual-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    pointer-events: none;
  }

  .codee-suite-visual-card span {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    color: var(--codee-suite-ink);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 3px 14px rgba(0,0,0,.82);
  }

  .codee-suite-visual-card:nth-child(2) {
    background:
      linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
      radial-gradient(circle at 25% 18%, color-mix(in srgb, var(--codee-suite-accent) 32%, transparent), transparent 34%),
      var(--codee-suite-panel-strong);
  }

  .codee-suite-visual-card:nth-child(3) {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--codee-suite-accent) 34%, rgba(255,255,255,.1)), color-mix(in srgb, var(--codee-suite-accent-2) 28%, rgba(0,0,0,.54))),
      var(--codee-suite-panel-strong);
  }

  .codee-suite-proof-rail {
    width: min(1180px, calc(100vw - 28px));
    margin: clamp(14px, 3vw, 28px) auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--codee-suite-line);
    border-radius: 999px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
      rgba(6, 10, 16, .76);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
    backdrop-filter: blur(24px) saturate(1.22);
    padding: 10px;
  }

  .codee-suite-proof-rail span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--codee-suite-ink);
    background: rgba(255,255,255,.07);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  .codee-suite-proof-rail span:first-child {
    color: #061018;
    background: linear-gradient(135deg, var(--codee-suite-accent), var(--codee-suite-accent-2));
  }

  .codee-suite-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--codee-suite-line);
    border-radius: 999px;
    color: var(--codee-suite-ink);
    background: rgba(8, 12, 18, .84);
    box-shadow: 0 20px 60px rgba(0,0,0,.34);
    backdrop-filter: blur(18px);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
  }

  .codee-suite-float::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--codee-suite-accent);
    box-shadow: 0 0 20px var(--codee-suite-accent);
  }

  @keyframes codee-suite-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes codee-suite-float-img {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  body[data-codee-suite] .service-card,
  body[data-codee-suite] .package-card,
  .codee-suite-proof-rail {
    animation: codee-suite-rise .7s ease both;
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-codee-suite] *,
    body[data-codee-suite] *::before,
    body[data-codee-suite] *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .001ms !important;
    }
  }

  @media (max-width: 760px) {
    body[data-codee-suite] .hero,
    body[data-codee-suite] .hero-section,
    body[data-codee-suite] .catering-hero {
      padding: 22px !important;
    }

    body[data-codee-suite] h1,
    body[data-codee-suite] .hero h1,
    body[data-codee-suite] .hero-section h1 {
      font-size: clamp(36px, 10.8vw, 56px) !important;
      line-height: 1.03 !important;
      max-width: 12ch;
    }

    body[data-codee-suite] .hero-copy,
    body[data-codee-suite] .hero-content,
    body[data-codee-suite] .hero-text,
    body[data-codee-suite] .hero-panel,
    body[data-codee-suite] .hero-info,
    body[data-codee-suite] .intro-copy,
    body[data-codee-suite] .headline-block {
      width: auto;
      max-width: 100%;
      padding: 18px;
    }

    .codee-suite-proof-rail {
      width: min(100vw - 18px, 1180px);
      border-radius: 22px;
      justify-content: flex-start;
    }

    .codee-suite-visual-dock {
      width: min(100vw - 18px, 1180px);
      grid-template-columns: 1fr;
    }

    .codee-suite-visual-card {
      min-height: 128px;
    }

    .codee-suite-float {
      left: 12px;
      right: 12px;
      justify-content: center;
    }
  }
}