@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=Inter:wght@400;500;600;700;800;900&family=Caveat:wght@600;700&display=swap');

      :root {
        --ink: #0a2432; --ink2: #0f3145; --ink3: #154059;
        --celeste: #1c86a8; --celeste-soft: #5fb8d6;
        --coral: #ff6a4d; --coral-deep: #e6522f;
        --gold: #e7b84e; --cream: #faf5ea; --sand: #f0dfc0; --foam: #eaf6f9;
        --shadow-soft: 0 2px 10px -2px rgba(10,36,50,.08), 0 1px 2px rgba(10,36,50,.06);
        --shadow-lift: 0 20px 44px -18px rgba(10,36,50,.28), 0 4px 12px -4px rgba(10,36,50,.1);
        --shadow-glow-coral: 0 10px 30px -8px rgba(255,106,77,.45);
        --shadow-glow-gold: 0 10px 30px -8px rgba(231,184,78,.4);
        --ease-premium: cubic-bezier(.16,.84,.24,1);
      }

      .cs-font-display { font-family: 'Fraunces', serif; letter-spacing: -.01em; }
      .cs-font-display-italic { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
      .cs-font-script { font-family: 'Caveat', cursive; }
      body, input, textarea, select, button { font-family: 'Inter', sans-serif; }

      * { -webkit-tap-highlight-color: transparent; }
      ::selection { background: var(--coral); color: #fff; }
      :focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; border-radius: 8px; }

      .cs-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
      .cs-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }
      .cs-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); }

      /* ---------- Motion tokens ---------- */
      @keyframes cs-kenburns {
        0% { transform: scale(1) translate(0,0); }
        100% { transform: scale(1.16) translate(-1.5%, -1.5%) rotate(.3deg); }
      }
      .cs-kenburns { animation: cs-kenburns 16s var(--ease-premium) forwards; }

      @keyframes cs-kenburns-soft {
        0% { transform: scale(1.03) rotate(0deg); }
        100% { transform: scale(1.1) rotate(-.6deg); }
      }
      .cs-kenburns-soft { animation: cs-kenburns-soft 18s var(--ease-premium) forwards; }

      @keyframes cs-fadein {
        0% { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); }
        100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
      }
      .cs-fadein { animation: cs-fadein .9s var(--ease-premium) both; }

      @keyframes cs-fadein-slow {
        0% { opacity: 0; transform: scale(.92) rotate(6deg); }
        100% { opacity: 1; transform: scale(1) rotate(3deg); }
      }
      .cs-fadein-slow { animation: cs-fadein-slow 1.1s var(--ease-premium) both; }

      @keyframes cs-pulse-ring {
        0% { transform: scale(.9); opacity: .55; }
        70% { transform: scale(1.5); opacity: 0; }
        100% { opacity: 0; }
      }
      .cs-pulse-ring { animation: cs-pulse-ring 2.6s ease-out infinite; }

      @keyframes cs-bob {
        0%,100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(1.5deg); }
      }
      .cs-bob { animation: cs-bob 6s ease-in-out infinite; }

      @keyframes cs-float {
        0%,100% { transform: translate(0,0); }
        50% { transform: translate(14px,-22px); }
      }
      .cs-float-blob { animation: cs-float 12s ease-in-out infinite; }
      .cs-float-blob-rev { animation: cs-float 15s ease-in-out infinite reverse; }

      @keyframes cs-wave {
        0% { background-position-x: 0; }
        100% { background-position-x: 200px; }
      }
      .cs-waveline {
        height: 3px;
        background-image: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 20px);
        animation: cs-wave 3s linear infinite;
        opacity: .8;
      }

      @keyframes cs-progress { from { width: 0%; } to { width: 100%; } }

      @keyframes cs-shimmer {
        0% { background-position: -300px 0; }
        100% { background-position: 300px 0; }
      }
      .cs-shimmer {
        background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
        background-size: 300px 100%;
        background-repeat: no-repeat;
        animation: cs-shimmer 2.6s ease-in-out infinite;
      }

      @keyframes cs-gradient-pan {
        0%,100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }
      .cs-gradient-anim { background-size: 220% 220%; animation: cs-gradient-pan 10s ease infinite; }

      @keyframes cs-pop {
        0% { opacity: 0; transform: scale(.6) rotate(-8deg); }
        60% { opacity: 1; transform: scale(1.08) rotate(2deg); }
        100% { opacity: 1; transform: scale(1) rotate(0deg); }
      }
      .cs-pop { animation: cs-pop .6s var(--ease-premium) both; }

      /* ---------- Scroll reveal (bolt-on, dashboard only) ---------- */
      .cs-reveal { opacity: 0; transform: translateY(26px); animation: cs-reveal-fallback 0s 1.4s forwards; }
      .cs-reveal.cs-in {
        opacity: 1; transform: none;
        transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
      }
      @keyframes cs-reveal-fallback { to { opacity: 1; transform: none; } }

      /* ---------- Glass & depth helpers ---------- */
      .cs-glass-dark {
        background: rgba(10,36,50,.42);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border: 1px solid rgba(255,255,255,.12);
      }
      .cs-glass-light {
        background: rgba(255,255,255,.72);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border: 1px solid rgba(255,255,255,.6);
      }
      .cs-text-gradient {
        background: linear-gradient(120deg, var(--gold), var(--coral) 65%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
      .cs-noise {
        background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px);
        background-size: 26px 26px;
      }

      /* ---------- Global lift for any bordered card, anywhere ---------- */
      .rounded-xl.border, .rounded-2xl.border, .rounded-3xl.border {
        transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), border-color .35s;
      }
      .rounded-xl.border:hover, .rounded-2xl.border:hover, .rounded-3xl.border:hover {
        box-shadow: var(--shadow-lift);
        transform: translateY(-3px);
      }

      .rounded-xl.border.overflow-hidden img,
      .rounded-2xl.border.overflow-hidden img,
      .rounded-3xl.border.overflow-hidden img { transition: transform .6s var(--ease-premium); }
      .rounded-xl.border.overflow-hidden:hover img,
      .rounded-2xl.border.overflow-hidden:hover img,
      .rounded-3xl.border.overflow-hidden:hover img { transform: scale(1.08); }

      /* ---------- Buttons: premium interaction layer (visual only, colors stay inline) ---------- */
      button { cursor: pointer; }
      button:disabled { cursor: not-allowed; opacity: .6; }
      button.rounded-full { transition: transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium), filter .25s; }
      button.rounded-full:active { transform: scale(.94); }
      button.rounded-full:hover { filter: brightness(1.05); }

      /* ---------- Inputs: refined focus + surface ---------- */
      .cs-input {
        width: 100%;
        border: 1.5px solid #e2e6ea;
        border-radius: 12px;
        padding: 10px 13px;
        font-size: 13.5px;
        font-family: 'Inter', sans-serif;
        color: #17313f;
        background: #fbfcfd;
        outline: none;
        transition: border-color .2s var(--ease-premium), box-shadow .2s var(--ease-premium), background .2s;
      }
      .cs-input:hover { border-color: #cfd6dc; }
      .cs-input:focus { border-color: #1c86a8; background: #fff; box-shadow: 0 0 0 4px #1c86a81f; }
      textarea.cs-input { resize: vertical; }

      .cs-line-clamp-2 {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      }
      .cs-line-clamp-3 {
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
      }

      /* ---------- Dashboard ambient background ---------- */
      .cs-app-bg {
        background:
          radial-gradient(ellipse 900px 500px at 8% -10%, #eaf6f9 0%, transparent 60%),
          radial-gradient(ellipse 700px 420px at 105% 10%, #ffe9d9 0%, transparent 55%),
          #faf5ea;
        min-height: 100vh;
      }

      /* ---------- TV screen premium surface helpers ---------- */
      .cs-screen-blob {
        position: absolute; border-radius: 999px; filter: blur(60px); opacity: .5; pointer-events: none;
      }
      .cs-image-frame {
        box-shadow: var(--shadow-lift);
        transition: transform .6s var(--ease-premium);
      }
      .cs-badge-ribbon {
        filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
      }

      .cs-mi-text { width: 100%; }
      .cs-mi-image { width: 100%; }
      @media (min-width: 768px) {
        .cs-mi-text.cs-has-image { width: 54%; }
        .cs-mi-image { width: 46%; }
      }
      @media (max-width: 767px) {
        .cs-image-frame { aspect-ratio: 16/10 !important; transform: none !important; }
        .cs-mi-deco { display: none !important; }
        .cs-mi-text { padding-top: 84px !important; justify-content: flex-start !important; }
        .cs-screen-blob { display: none !important; }
      }

      /* ---------- Utility polyfills (classes not in the precompiled stylesheet) ---------- */
      .h-16 { height:4rem; }
      .h-24 { height:6rem; }
      .w-16 { width:4rem; }
      .w-24 { width:6rem; }
      .mt-10 { margin-top:2.5rem; }
      .mt-7 { margin-top:1.75rem; }
      .pb-8 { padding-bottom:2rem; }
      .pl-2 { padding-left:0.5rem; }
      .pr-4 { padding-right:1rem; }
      .pt-16 { padding-top:4rem; }
      .px-7 { padding-left:1.75rem;padding-right:1.75rem; }
      .py-12 { padding-top:3rem;padding-bottom:3rem; }
      .py-3\.5 { padding-top:0.875rem;padding-bottom:0.875rem; }
      .bottom-0 { bottom:0px; }
      .bottom-4 { bottom:1rem; }
      .left-0 { left:0px; }
      .right-0 { right:0px; }
      .-inset-3 { top:-0.75rem;right:-0.75rem;bottom:-0.75rem;left:-0.75rem; }
      .pointer-events-none { pointer-events:none; }
      .inline-flex { display:inline-flex; }
      .mx-auto { margin-left:auto;margin-right:auto; }
      .z-10 { z-index:10; }
      .text-white\/45 { color:rgba(255,255,255,.45); }
      .text-white\/55 { color:rgba(255,255,255,.55); }
      .text-white\/80 { color:rgba(255,255,255,.8); }
      .leading-relaxed { line-height:1.625; }
      .duration-500 { transition-duration:500ms; }
      .rotate-12 { transform:rotate(12deg); }
      .leading-\[0\.95\] { line-height:0.95; }
      .tracking-\[0\.16em\] { letter-spacing:0.16em; }
      .rounded-\[2rem\] { border-radius:2rem; }
      .rounded-\[28px\] { border-radius:28px; }
      .h-\[3px\] { height:3px; }
      .top-0 { top:0px; }
      @media (min-width: 768px) {
        .md\:h-28 { height:7rem; }
        .md\:w-28 { width:7rem; }
        .md\:h-56 { height:14rem; }
        .md\:w-56 { width:14rem; }
        .md\:bottom-6 { bottom:1.5rem; }
        .md\:left-7 { left:1.75rem; }
        .md\:right-2 { right:0.5rem; }
        .md\:right-7 { right:1.75rem; }
        .md\:top-6 { top:1.5rem; }
        .md\:text-3xl { font-size:1.875rem;line-height:2.25rem; }
        .md\:p-14 { padding:3.5rem; }
        .md\:mx-2 { margin-left:0.5rem;margin-right:0.5rem; }
        .md\:py-2 { padding-top:0.5rem;padding-bottom:0.5rem; }
        .md\:rounded-xl { border-radius:0.75rem; }
      }

      @media (prefers-reduced-motion: reduce) {
        .cs-kenburns, .cs-kenburns-soft, .cs-bob, .cs-pulse-ring, .cs-waveline,
        .cs-float-blob, .cs-float-blob-rev, .cs-shimmer, .cs-gradient-anim, .cs-pop { animation: none !important; }
        .cs-reveal { opacity: 1 !important; transform: none !important; }
      }