/* Ensure Inter font is available (imported in HTML) */
body {
    font-family: 'Inter', sans-serif;
}

/* Newdreader/Newsreader font helper */
.font-newsreader {
    font-family: 'Newsreader', serif;
}


/* Custom styles to override Tailwind or specific needs */

.bg-grid-pattern {
    /* Dotted pattern */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='0.6'/%3E%3C/svg%3E");
    background-size: 18px 18px;

    /* Interactive Spotlight Mask */
    mask-image: radial-gradient(600px circle at var(--x, 50%) var(--y, 50%),
            black,
            transparent 40%);
    -webkit-mask-image: radial-gradient(600px circle at var(--x, 50%) var(--y, 50%),
            black,
            transparent 40%);
}




/* ---- Hero Flow (decorative SVG edges) — minimal ---- */
.hero-flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* never interfere with content */
    z-index: 0;
}

/* SVG edge layer */
.hero-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
}

.flow-node {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #1f2937;
    /* gray-800 */
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.60),
        0 10px 24px rgba(0, 0, 0, 0.40);
    z-index: 1;
}

.flow-node__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Minimal sizes (responsive via clamp) */
.flow-node--sm {
    width: clamp(84px, 6vw, 110px);
    height: clamp(84px, 6vw, 110px);
    border-radius: 18px;
}

.flow-node--bg {
    /* canvas_background card (smaller) */
    width: clamp(88px, 9vw, 135px);
    height: clamp(88px, 12vw, 160px);
    border-radius: 26px;
}

.flow-node--model {
    /* model card (kept larger than background) */
    width: clamp(160px, 13vw, 185px);
    height: clamp(200px, 16vw, 210px);
    border-radius: 18px;
}

.flow-node--preview {
    /* slightly narrower */
    width: clamp(220px, 19vw, 285px);
    height: clamp(360px, 32vw, 470px);
    border-radius: 26px;
}

/* Variables for custom button */
:root {
    --orange: 25 100% 50%;
    /* #FF6B00 approx */
    --yellow: 45 100% 50%;
    --gray-100: 0 0% 96%;
}

.button-primary {
    background-color: hsl(var(--orange));
    color: #000000;
    background-image: linear-gradient(to right, hsl(var(--orange)) 0% 50%, hsl(var(--yellow)));
    transition: 0.5s;
    background-size: 200% auto;
    border: none;
    /* box-shadow removed */
    border-radius: 9999px;
    /* full rounded */
    padding: 0.5rem 1.5rem;
    /* match px-6 py-2 */
    font-weight: 700;
    /* text-transform removed (default mixed case) */
    font-size: 0.875rem;
    /* text-sm */
    display: inline-block;
}

.button-primary:hover {
    background-position: right center;
    /* shift gradient */
    color: #000000;
    text-decoration: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}