:root{ --bg:#000000;--bg-surface:#131314;--bg-elevated:#1e1e1e;--text-main:#FFFFFF;--text-muted:#9AA0A6;--border:rgba(255, 255, 255, 0.12);--border-light:rgba(255, 255, 255, 0.25);--accent-gold-light:#ebd197;--accent-gold-dark:#c9a84c;--accent-gradient:linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold-dark));--max-w:1440px;} *{ box-sizing:border-box;margin:0;padding:0;} body{ background-color:var(--bg);color:var(--text-main);font-family:'Inter', -apple-system, sans-serif;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw;} html{ overflow-x:hidden;max-width:100vw;} h1, h2, h3, h4, h5, h6{ font-weight:500;letter-spacing:-0.03em;line-height:1.1;} a{ color:var(--text-main);text-decoration:none;transition:background 0.2s, opacity 0.2s;} .nano-banana-nav{ position:fixed;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2.5rem;background:rgba(0, 0, 0, 0.8);backdrop-filter:blur(12px);z-index:100;border-bottom:1px solid var(--border);} .nano-banana-nav-left{ display:flex;align-items:center;gap:2rem;font-weight:500;font-size:0.95rem;} .nano-banana-nav-links{ display:flex;gap:1.5rem;color:var(--text-muted);} .nano-banana-nav-links a:hover{ color:var(--text-main);} .nano-banana-logo{ display:flex;gap:0.5rem;align-items:center;font-size:1.25rem;font-weight:500;} .nano-banana-pill-btn{ background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border);padding:0.6rem 1.25rem;border-radius:99px;font-size:0.85rem;font-weight:500;cursor:pointer;transition:background 0.2s, border 0.2s;} .nano-banana-pill-btn:hover{ background:var(--bg-elevated);border-color:var(--border-light);} .nano-banana-pill-btn.primary{ background:var(--text-main);color:var(--bg);border:none;} .nano-banana-pill-btn.primary:hover{ opacity:0.9;} .nano-banana-hero{ padding:12rem 2.5rem 6rem;text-align:center;position:relative;overflow:hidden;} .nano-banana-hero-content{ pointer-events:none;max-width:1200px;margin:0 auto;position:relative;z-index:10;} .nano-banana-hero h1{ font-size:clamp(3rem, 8vw, 6.5rem);font-weight:500;margin-bottom:1rem;letter-spacing:-0.04em;} .hero-title-split{ position:relative;display:inline-block;max-width:100%;--split:50%;pointer-events:auto;} .hero-title-base{ position:relative;font-family:'Inter', sans-serif;font-weight:500;color:#ffffff;letter-spacing:-0.04em;line-height:1.1;margin-bottom:1rem;clip-path:inset(0 calc(100% - var(--split)) 0 0);transition:clip-path 0.05s linear;} .hero-title-reveal{ position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(-50% 0 -50% var(--split));transition:clip-path 0.05s linear;display:flex;justify-content:center;align-items:center;pointer-events:none;} .hero-title-line{ position:absolute;top:5%;left:var(--split);width:2px;height:90%;background:linear-gradient(to bottom, transparent 0%, rgba(201,168,76,0.6) 15%, rgba(201,168,76,0.9) 50%, rgba(201,168,76,0.6) 85%, transparent 100%);box-shadow:0 0 12px rgba(201,168,76,0.3), 0 0 30px rgba(201,168,76,0.1);transform:translateX(-50%);pointer-events:none;z-index:5;transition:left 0.05s linear;opacity:1;} .hero-title-split:hover .hero-title-line{ box-shadow:0 0 16px rgba(201,168,76,0.4), 0 0 40px rgba(201,168,76,0.15);} .nano-banana-hero-actions{ display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-top:3rem;} .nano-banana-hero-links a{ text-decoration:underline;color:var(--text-muted);margin:0 0.25rem;} .nano-banana-hero-links a:hover{ color:var(--text-main);} .nano-banana-hero-bg{ position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;} .fh-bg-img{ position:absolute;border-radius:16px;object-fit:cover;box-shadow:0 8px 30px rgba(0,0,0,0.5), 0 0 15px rgba(201,168,76,0.15);opacity:0.92;scale:1.03;transform:translate(var(--px-tx, 0px), var(--px-ty, 0px)) rotate(var(--px-r, 0deg));transition:scale 0.35s cubic-bezier(.25,.46,.45,.94), box-shadow 0.35s ease;will-change:transform, scale, translate;cursor:pointer;pointer-events:auto;} .fh-bg-img:hover{ opacity:1;box-shadow:0 20px 60px rgba(201,168,76,0.25), 0 0 30px rgba(201,168,76,0.4);scale:1.6;} @keyframes floatCard1{ 0%,100%{ translate:0px 0px;rotate:-4deg;} 50%{ translate:6px -10px;rotate:-2deg;} } @keyframes floatCard2{ 0%,100%{ translate:0px 0px;rotate:5deg;} 50%{ translate:-8px -12px;rotate:3deg;} } @keyframes floatCard3{ 0%,100%{ translate:0px 0px;rotate:-3deg;} 50%{ translate:10px 8px;rotate:-1deg;} } @keyframes floatCard4{ 0%,100%{ translate:0px 0px;rotate:6deg;} 50%{ translate:-6px -8px;rotate:4deg;} } @keyframes floatCard5{ 0%,100%{ translate:0px 0px;rotate:-5deg;} 50%{ translate:8px 10px;rotate:-3deg;} } @keyframes floatCard6{ 0%,100%{ translate:0px 0px;rotate:3deg;} 50%{ translate:-10px -6px;rotate:5deg;} } .bg-card-1{ top:5%;left:3%;width:12%;aspect-ratio:3/4;z-index:5;animation:floatCard1 6s ease-in-out infinite;} .bg-card-2{ top:8%;right:4%;width:10%;aspect-ratio:4/5;z-index:6;animation:floatCard2 7s ease-in-out infinite;} .bg-card-3{ top:45%;left:2%;width:13%;aspect-ratio:1;z-index:15;animation:floatCard3 8s ease-in-out infinite;} .bg-card-4{ top:40%;right:3%;width:11%;aspect-ratio:1;z-index:15;animation:floatCard4 6.5s ease-in-out infinite;} .bg-card-5{ bottom:8%;left:12%;width:10%;aspect-ratio:1;z-index:5;animation:floatCard5 7.5s ease-in-out infinite;} .bg-card-6{ bottom:5%;right:10%;width:14%;aspect-ratio:4/3;z-index:6;animation:floatCard6 8.5s ease-in-out infinite;} .nano-banana-capabilities{ padding:6rem 0;background:var(--bg);position:relative;overflow:hidden;} .cap-tabs{ display:flex;gap:clamp(2rem, 6vw, 5rem);padding:0 5vw;margin-bottom:1.5rem;align-items:baseline;} .cap-tab{ font-size:clamp(2.5rem, 6vw, 5rem);font-weight:400;color:rgba(255,255,255,0.15);cursor:pointer;transition:all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);filter:blur(3px);user-select:none;letter-spacing:-0.03em;line-height:1.1;border:none;background:none;padding:0;border-radius:0;} .cap-tab:hover{ color:rgba(255,255,255,0.35);filter:blur(1.5px);border-color:transparent;} .cap-tab.active{ color:var(--text-main);filter:blur(0);font-weight:400;background:none;border-color:transparent;} .cap-description{ text-align:left;max-width:700px;padding:0 5vw;margin:0 0 2.5rem;font-size:1.1rem;color:var(--text-main);transition:opacity 0.3s ease;min-height:2rem;line-height:1.5;font-weight:400;} .cap-carousel-wrapper{ width:100%;overflow:hidden;} .cap-carousel{ display:flex;justify-content:center;padding:1rem 5vw 2rem;scrollbar-width:none;} .cap-carousel::-webkit-scrollbar{ display:none;} .cap-card{ flex:0 0 100%;max-width:900px;display:flex;flex-direction:column;gap:0;background:none;border:none;border-radius:0;overflow:visible;} @media(max-width:768px){ .cap-card{ flex:0 0 100%;} } .cap-card-media{ width:100%;aspect-ratio:16 / 11;position:relative;background:#060606;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);} .cap-card-media img:not(.anim-result, .anim-base, .anim-left, .anim-right, .anim-inner-img){ width:100%;height:100%;object-fit:cover;} .cap-card-title{ padding:1rem 0.25rem 0;font-size:1rem;font-weight:400;color:var(--text-main);background:none;} .cap-card-title:empty{ display:none;} .anim-container{ width:100%;height:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#060606;} .anim-container img{ width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;} .anim-create{ display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem 1.5rem 0;gap:0;} .anim-create .anim-prompt-box{ position:relative;z-index:10;background:rgba(12, 12, 12, 0.95);backdrop-filter:blur(16px);padding:0.9rem 1.4rem;border-radius:12px;border:1px solid rgba(180, 150, 80, 0.2);display:flex;align-items:center;gap:0.5rem;width:90%;max-width:600px;opacity:0;animation:c-boxSlide 12s infinite ease-out;margin-bottom:0;} .anim-create .anim-cursor-blink{ width:2px;height:1.1em;background:#c9a84c;animation:c-cursorBlink 0.6s infinite step-end;flex-shrink:0;} .anim-create .anim-typing-text{ font-family:'Inter', sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.85);overflow:hidden;white-space:nowrap;width:0;animation:c-typeReveal 12s infinite steps(80, end);} .anim-create .anim-gold-glow{ position:relative;z-index:5;width:70%;height:3px;margin:0.8rem 0;background:linear-gradient(90deg, transparent, rgba(201,168,76,0.6), rgba(201,168,76,0.9), rgba(201,168,76,0.6), transparent);border-radius:2px;opacity:0;animation:c-goldBurst 12s infinite ease-in-out;box-shadow:0 0 20px rgba(201,168,76,0.3), 0 0 60px rgba(201,168,76,0.1);} .anim-create .anim-image-frame{ position:relative;width:90%;max-width:600px;flex:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:#0a0a0a;opacity:0;animation:c-frameAppear 12s infinite ease-in-out;} .anim-create .anim-gen-blur{ position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(201,168,76,0.12) 0%, rgba(100,80,30,0.06) 40%, transparent 70%);filter:blur(50px);opacity:0;animation:c-genBlur 12s infinite ease-in-out;z-index:1;} .anim-create .anim-image-frame .anim-result{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(30px) saturate(0.3);transform:scale(1.06);animation:c-imageGen 12s infinite ease-in-out;z-index:2;} .anim-create .anim-prompt-box::after{ content:'';position:absolute;inset:-1px;border-radius:13px;background:linear-gradient(135deg, rgba(201,168,76,0.5), transparent 40%, rgba(201,168,76,0.3));z-index:-1;opacity:0;animation:c-borderGlow 12s infinite ease-in-out;} @keyframes c-boxSlide{ 0%, 3%{ opacity:0;transform:translateY(10px);} 6%, 88%{ opacity:1;transform:translateY(0);} 94%, 100%{ opacity:0;} } @keyframes c-typeReveal{ 0%, 6%{ width:0;} 35%{ width:100%;} 88%{ width:100%;} 94%, 100%{ width:100%;} } @keyframes c-cursorBlink{ 0%, 49%{ opacity:1;} 50%, 100%{ opacity:0;} } @keyframes c-goldBurst{ 0%, 34%{ opacity:0;} 38%{ opacity:1;} 48%{ opacity:0.7;} 56%, 100%{ opacity:0;} } @keyframes c-borderGlow{ 0%, 34%{ opacity:0;} 38%, 50%{ opacity:1;} 56%, 100%{ opacity:0;} } @keyframes c-frameAppear{ 0%, 5%{ opacity:0;} 10%, 88%{ opacity:1;} 94%, 100%{ opacity:0;} } @keyframes c-genBlur{ 0%, 38%{ opacity:0;} 44%{ opacity:0.9;} 54%{ opacity:0.3;} 62%, 100%{ opacity:0;} } @keyframes c-imageGen{ 0%, 40%{ opacity:0;filter:blur(30px) saturate(0.3);transform:scale(1.06);} 50%{ opacity:0.4;filter:blur(16px) saturate(0.5);transform:scale(1.04);} 58%{ opacity:0.7;filter:blur(6px) saturate(0.8);transform:scale(1.02);} 66%, 88%{ opacity:1;filter:blur(0) saturate(1);transform:scale(1);} 94%, 100%{ opacity:0;filter:blur(0);transform:scale(1);} } .anim-refine{ display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem 1.5rem 0;gap:0;} .anim-refine .anim-prompt-box{ position:relative;z-index:10;background:rgba(12, 12, 12, 0.95);backdrop-filter:blur(16px);padding:0.9rem 1.4rem;border-radius:12px;border:1px solid rgba(180, 150, 80, 0.2);display:flex;align-items:center;gap:0.5rem;width:90%;max-width:600px;opacity:0;animation:r-boxSlide 12s infinite ease-out;margin-bottom:0;} .anim-refine .anim-cursor-blink{ width:2px;height:1.1em;background:#c9a84c;animation:c-cursorBlink 0.6s infinite step-end;flex-shrink:0;} .anim-refine .anim-typing-text{ font-family:'Inter', sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.85);overflow:hidden;white-space:nowrap;width:0;animation:r-typeReveal 12s infinite steps(60, end);} .anim-refine .anim-prompt-box::after{ content:'';position:absolute;inset:-1px;border-radius:13px;background:linear-gradient(135deg, rgba(201,168,76,0.5), transparent 40%, rgba(201,168,76,0.3));z-index:-1;opacity:0;animation:r-borderGlow 12s infinite ease-in-out;} .anim-refine .anim-gen-blur{ position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(201,168,76,0.12) 0%, rgba(100,80,30,0.06) 40%, transparent 70%);filter:blur(50px);opacity:0;animation:r-genBlur 12s infinite ease-in-out;z-index:2;} .anim-refine .anim-image-frame .anim-result{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(30px) saturate(0.3);transform:scale(1.06);animation:r-imageGen 12s infinite ease-in-out;z-index:3;} .anim-refine .anim-gold-glow{ position:relative;z-index:5;width:70%;height:3px;margin:0.8rem 0;background:linear-gradient(90deg, transparent, rgba(201,168,76,0.6), rgba(201,168,76,0.9), rgba(201,168,76,0.6), transparent);border-radius:2px;opacity:0;animation:r-goldBurst 12s infinite ease-in-out;box-shadow:0 0 20px rgba(201,168,76,0.3), 0 0 60px rgba(201,168,76,0.1);} .anim-refine .anim-image-frame{ position:relative;width:90%;max-width:600px;flex:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:#0a0a0a;opacity:0;animation:r-frameAppear 12s infinite ease-in-out;} .anim-refine .anim-upload-border{ position:absolute;inset:8%;border:2px dashed rgba(201,168,76,0.3);border-radius:12px;z-index:20;opacity:0;animation:r-uploadBorder 12s infinite ease-in-out;pointer-events:none;} .anim-refine .anim-image-frame .anim-base{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(0.65) contrast(0.8) saturate(0.6);animation:r-baseAppear 12s infinite ease-in-out;z-index:1;} .anim-refine .anim-scan{ position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.5) 20%, rgba(201,168,76,1) 50%, rgba(201,168,76,0.5) 80%, transparent 100%);box-shadow:0 0 25px rgba(201,168,76,0.5), 0 0 80px rgba(201,168,76,0.2);z-index:18;opacity:0;animation:r-scanSweep 12s infinite ease-in-out;} .anim-refine .anim-scan-glow{ position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(201,168,76,0.06) 0%, transparent 40%);z-index:12;opacity:0;animation:r-glowFollow 12s infinite ease-in-out;} @keyframes r-boxSlide{ 0%, 3%{ opacity:0;transform:translateY(10px);} 6%, 88%{ opacity:1;transform:translateY(0);} 94%, 100%{ opacity:0;} } @keyframes r-typeReveal{ 0%, 6%{ width:0;} 35%{ width:100%;} 88%{ width:100%;} 94%, 100%{ width:100%;} } @keyframes r-borderGlow{ 0%, 34%{ opacity:0;} 38%, 50%{ opacity:1;} 56%, 100%{ opacity:0;} } @keyframes r-goldBurst{ 0%, 34%{ opacity:0;} 38%{ opacity:1;} 48%{ opacity:0.7;} 56%, 100%{ opacity:0;} } @keyframes r-frameAppear{ 0%, 5%{ opacity:0;} 10%, 88%{ opacity:1;} 94%, 100%{ opacity:0;} } @keyframes r-uploadBorder{ 0%, 2%{ opacity:0;} 5%, 12%{ opacity:1;} 18%, 100%{ opacity:0;} } @keyframes r-baseAppear{ 0%, 8%{ opacity:0;transform:scale(0.97);} 16%{ opacity:1;transform:scale(1);filter:brightness(0.65) contrast(0.8) saturate(0.6);} 52%{ opacity:1;filter:brightness(0.65) contrast(0.8) saturate(0.6);} 60%, 88%{ opacity:0;} 100%{ opacity:0;} } @keyframes r-scanSweep{ 0%, 32%{ opacity:0;top:0;} 36%{ opacity:1;top:0;} 56%{ opacity:1;top:100%;} 60%, 100%{ opacity:0;top:100%;} } @keyframes r-glowFollow{ 0%, 34%{ opacity:0;} 40%, 54%{ opacity:1;} 60%, 100%{ opacity:0;} } @keyframes r-genBlur{ 0%, 38%{ opacity:0;} 44%{ opacity:0.9;} 54%{ opacity:0.3;} 62%, 100%{ opacity:0;} } @keyframes r-imageGen{ 0%, 40%{ opacity:0;filter:blur(30px) saturate(0.3);transform:scale(1.06);} 50%{ opacity:0.4;filter:blur(16px) saturate(0.5);transform:scale(1.04);} 58%{ opacity:0.7;filter:blur(6px) saturate(0.8);transform:scale(1.02);} 66%, 88%{ opacity:1;filter:blur(0) saturate(1);transform:scale(1);} 94%, 100%{ opacity:0;filter:blur(0);transform:scale(1);} } .anim-edit-v2{ display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem 1.5rem 0;gap:0;} .anim-edit-v2 .anim-prompt-box{ position:relative;z-index:10;background:rgba(12, 12, 12, 0.95);backdrop-filter:blur(16px);padding:0.9rem 1.4rem;border-radius:12px;border:1px solid rgba(180, 150, 80, 0.2);display:flex;align-items:center;gap:0.5rem;width:90%;max-width:600px;opacity:0;animation:e-boxSlide 12s infinite ease-out;margin-bottom:0;} .anim-edit-v2 .anim-cursor-blink{ width:2px;height:1.1em;background:#c9a84c;animation:c-cursorBlink 0.6s infinite step-end;flex-shrink:0;} .anim-edit-v2 .anim-typing-text{ font-family:'Inter', sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.85);overflow:hidden;white-space:nowrap;width:0;animation:e-typeReveal 12s infinite steps(90, end);} .anim-edit-v2 .anim-prompt-box::after{ content:'';position:absolute;inset:-1px;border-radius:13px;background:linear-gradient(135deg, rgba(201,168,76,0.5), transparent 40%, rgba(201,168,76,0.3));z-index:-1;opacity:0;animation:e-borderGlow 12s infinite ease-in-out;} .anim-edit-v2 .anim-gen-blur{ position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(201,168,76,0.12) 0%, rgba(100,80,30,0.06) 40%, transparent 70%);filter:blur(50px);opacity:0;animation:e-genBlur 12s infinite ease-in-out;z-index:2;} .anim-edit-v2 .anim-gold-glow{ position:relative;z-index:5;width:70%;height:3px;margin:0.8rem 0;background:linear-gradient(90deg, transparent, rgba(201,168,76,0.6), rgba(201,168,76,0.9), rgba(201,168,76,0.6), transparent);border-radius:2px;opacity:0;animation:e-goldBurst 12s infinite ease-in-out;box-shadow:0 0 20px rgba(201,168,76,0.3), 0 0 60px rgba(201,168,76,0.1);} .anim-edit-v2 .anim-image-frame{ position:relative;width:90%;max-width:600px;flex:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:#0a0a0a;opacity:0;animation:e-frameAppear 12s infinite ease-in-out;} .anim-edit-v2 .anim-upload-border{ position:absolute;inset:8%;border:2px dashed rgba(201,168,76,0.3);border-radius:12px;z-index:20;opacity:0;animation:e-uploadBorder 12s infinite ease-in-out;pointer-events:none;} .anim-edit-v2 .anim-image-frame .anim-base{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:e-baseShow 12s infinite ease-in-out;z-index:1;} .anim-edit-v2 .anim-highlight-mask{ position:absolute;top:0;left:0;width:100%;height:100%;z-index:12;border:3px solid transparent;border-radius:0;animation:e-highlight 12s infinite ease-in-out;pointer-events:none;} .anim-edit-v2 .anim-transform-overlay{ position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(201,168,76,0.15) 0%, rgba(201,168,76,0.05) 40%, transparent 70%);z-index:8;opacity:0;animation:e-transformFlash 12s infinite ease-in-out;} .anim-edit-v2 .anim-image-frame .anim-result{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(30px) saturate(0.3);transform:scale(1.06);animation:e-imageGen 12s infinite ease-in-out;z-index:3;} @keyframes e-boxSlide{ 0%, 3%{ opacity:0;transform:translateY(10px);} 6%, 88%{ opacity:1;transform:translateY(0);} 94%, 100%{ opacity:0;} } @keyframes e-typeReveal{ 0%, 6%{ width:0;} 35%{ width:100%;} 88%{ width:100%;} 94%, 100%{ width:100%;} } @keyframes e-borderGlow{ 0%, 34%{ opacity:0;} 38%, 50%{ opacity:1;} 56%, 100%{ opacity:0;} } @keyframes e-goldBurst{ 0%, 34%{ opacity:0;} 38%{ opacity:1;} 48%{ opacity:0.7;} 56%, 100%{ opacity:0;} } @keyframes e-frameAppear{ 0%, 5%{ opacity:0;} 10%, 88%{ opacity:1;} 94%, 100%{ opacity:0;} } @keyframes e-uploadBorder{ 0%, 2%{ opacity:0;} 5%, 12%{ opacity:1;} 18%, 100%{ opacity:0;} } @keyframes e-baseShow{ 0%, 8%{ opacity:0;transform:scale(0.97);} 16%{ opacity:1;transform:scale(1);} 48%{ opacity:1;} 56%, 100%{ opacity:0;} } @keyframes e-highlight{ 0%, 30%{ border-color:transparent;box-shadow:none;} 36%{ border-color:rgba(201,168,76,0.5);box-shadow:inset 0 0 40px rgba(201,168,76,0.1), 0 0 20px rgba(201,168,76,0.08);} 44%{ border-color:rgba(201,168,76,0.6);box-shadow:inset 0 0 50px rgba(201,168,76,0.12), 0 0 30px rgba(201,168,76,0.1);} 50%, 100%{ border-color:transparent;box-shadow:none;} } @keyframes e-transformFlash{ 0%, 44%{ opacity:0;} 48%{ opacity:1;} 54%{ opacity:0.5;} 60%, 100%{ opacity:0;} } @keyframes e-genBlur{ 0%, 38%{ opacity:0;} 44%{ opacity:0.9;} 54%{ opacity:0.3;} 62%, 100%{ opacity:0;} } @keyframes e-imageGen{ 0%, 40%{ opacity:0;filter:blur(30px) saturate(0.3);transform:scale(1.06);} 50%{ opacity:0.4;filter:blur(16px) saturate(0.5);transform:scale(1.04);} 58%{ opacity:0.7;filter:blur(6px) saturate(0.8);transform:scale(1.02);} 66%, 88%{ opacity:1;filter:blur(0) saturate(1);transform:scale(1);} 94%, 100%{ opacity:0;filter:blur(0);transform:scale(1);} } .anim-text .anim-text-overlay{ position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:3rem;font-weight:800;color:#fff;opacity:0;animation:fadeEdit 6s infinite ease-in-out;} @keyframes fadeEdit{ 0%, 40%{ opacity:0;} 50%, 90%{ opacity:1;} 100%{ opacity:0;} } .flow-partners{ position:relative;padding:8rem 0;background:#000;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;} .flow-partners-bg{ position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;} .flow-bg-image{ position:absolute;top:50%;left:50%;width:120%;height:120%;transform:translate(-50%, -50%) scale(1.1);object-fit:cover;filter:blur(60px) saturate(1.8) brightness(0.8);opacity:0;transition:opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);will-change:opacity;} .flow-bg-image.visible{ opacity:1;} .flow-bg-overlay{ position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 80%);z-index:1;opacity:0;transition:opacity 0.6s ease;} .flow-partners.bg-active .flow-bg-overlay{ opacity:1;} .flow-partners-bg::after{ content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #000 0%, transparent 12%, transparent 88%, #000 100%), linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.7) 100%);z-index:2;pointer-events:none;} .flow-partners-label{ position:relative;z-index:2;text-align:center;font-size:0.9rem;color:var(--text-muted);letter-spacing:0.02em;margin-bottom:3rem;font-weight:400;} .flow-partners-list{ position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:1200px;padding:0 2rem;} .flow-partner-item{ position:relative;text-align:center;padding:0.6rem 0;cursor:pointer;transition:opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);opacity:1;width:100%;} .flow-partner-name{ font-size:clamp(3rem, 7vw, 6.5rem);font-weight:400;letter-spacing:-0.04em;line-height:1.15;color:rgba(255, 255, 255, 0.3);transition:color 0.4s ease, text-shadow 0.4s ease;display:inline-block;position:relative;} .flow-partners-list.has-hover .flow-partner-item{ opacity:0.35;} .flow-partners-list.has-hover .flow-partner-item.active{ opacity:1;} .flow-partners-list.has-hover .flow-partner-item.active .flow-partner-name{ color:rgba(180, 210, 255, 0.95);text-shadow:0 0 60px rgba(130, 180, 255, 0.15);} .flow-floating-cards{ position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15;} .flow-float-card{ position:absolute;width:300px;border-radius:16px;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,0.7), 0 0 40px rgba(130,180,255,0.08);opacity:0;pointer-events:none;transform:scale(0.85);transition:opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);border:1px solid rgba(255,255,255,0.12);will-change:transform, opacity;background:rgba(10, 10, 10, 0.92);backdrop-filter:blur(12px);} .flow-float-card.visible{ opacity:1;transform:scale(1) rotate(var(--card-rotation, 0deg));pointer-events:auto;} .flow-float-card img{ width:100%;height:auto;display:block;} .flow-card-body{ padding:1rem 1.2rem 0.8rem;} .flow-card-body h3{ font-size:1rem;font-weight:600;color:var(--text-main);margin-bottom:0.4rem;letter-spacing:-0.01em;} .flow-card-body p{ font-size:0.8rem;color:var(--text-muted);line-height:1.45;margin-bottom:0.7rem;} .flow-partner-tag{ display:block;padding:0.5rem 0;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(130, 180, 255, 0.6);border-top:1px solid rgba(255,255,255,0.06);} .flow-partners-cta{ position:relative;z-index:2;text-align:center;margin-top:3.5rem;} .flow-partners-cta .nano-banana-pill-btn{ padding:0.8rem 2rem;font-size:0.9rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(8px);color:var(--text-main);transition:all 0.3s ease;} .flow-partners-cta .nano-banana-pill-btn:hover{ background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);box-shadow:0 0 30px rgba(130,180,255,0.1);} @media (max-width:768px){ .flow-partners{ min-height:auto;padding:5rem 0;} .flow-partner-name{ font-size:clamp(2rem, 9vw, 3.5rem);} .flow-floating-cards{ display:none;} .flow-partners-list.has-hover .flow-partner-item.active .flow-partner-name{ color:rgba(201, 168, 76, 0.9);} .flow-bg-image{ filter:blur(60px) saturate(1.2) brightness(0.4);} } .nano-banana-section{ padding:8rem 2rem;max-width:var(--max-w);margin:0 auto;} .nano-banana-section-header{ max-width:800px;margin-bottom:4rem;} .nano-banana-section-header h2{ font-size:clamp(2rem, 4vw, 3rem);margin-bottom:1.5rem;} .nano-banana-section-header p{ color:var(--text-muted);font-size:1.15rem;line-height:1.6;} .nano-banana-grid-3{ display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;} .nano-banana-grid-2{ display:grid;grid-template-columns:1fr 1fr;gap:4rem;} @media (max-width:1024px){ .nano-banana-grid-3, .nano-banana-grid-2{ grid-template-columns:1fr;gap:2.5rem;} } .nano-banana-card{ background:var(--bg-surface);border-radius:24px;border:1px solid var(--border);overflow:hidden;transition:transform 0.3s;} .nano-banana-card:hover{ transform:translateY(-8px);} .nano-banana-card img{ max-height:400px;object-fit:cover;} .nano-banana-card h3{ font-size:1.35rem;font-weight:600;margin-bottom:0.75rem;letter-spacing:-0.02em;} .nano-banana-card p{ color:var(--text-muted);font-size:0.95rem;line-height:1.7;} .nano-banana-gallery{ padding:8rem 0;text-align:center;} .nano-banana-standout-grid{ display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:0.75rem;padding:0 2rem;max-width:var(--max-w);margin:0 auto;} .nano-banana-g-item{ position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4 / 5;display:block;max-height:320px;} .nano-banana-g-item img{ width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);} .nano-banana-g-item:hover img{ transform:scale(1.08);} .nano-banana-g-meta{ position:absolute;bottom:0;left:0;width:100%;padding:2rem 1rem 1rem;background:linear-gradient(to top, rgba(0,0,0,0.9), transparent);text-align:left;opacity:0;transition:opacity 0.3s;} .nano-banana-g-item:hover .nano-banana-g-meta{ opacity:1;} .nano-banana-g-meta strong{ font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.2rem;color:var(--text-main);display:block;} .nano-banana-g-meta p{ color:var(--text-muted);font-size:0.75rem;} .original-target{ grid-column:span 2;grid-row:span 2;max-height:660px;} .nano-banana-prompt-item{ padding:1.25rem 0;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:1rem;line-height:1.6;font-style:italic;} .nano-banana-step{ padding:2.5rem 2rem;display:flex;flex-direction:column;min-height:280px;} .nano-banana-step-num{ font-size:2.5rem;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:0.75rem;line-height:1;display:block;} .nano-banana-step h3{ font-size:1.25rem;font-weight:500;margin-bottom:1rem;} .nano-banana-step p{ color:var(--text-muted);line-height:1.6;font-size:0.95rem;} .nano-banana-pricing{ padding:8rem 2rem;text-align:center;} .nano-banana-pricing-header{ margin:0 auto 4rem;max-width:800px;} .nano-banana-pricing-grid{ display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;max-width:1200px;margin:0 auto;} @media(max-width:900px){ .nano-banana-pricing-grid{ grid-template-columns:1fr;} } .nano-banana-plan{ background:var(--bg-surface);border:1px solid var(--border);border-radius:24px;padding:3rem 2rem;display:flex;flex-direction:column;text-align:left;} .nano-banana-plan h3{ font-size:1.8rem;margin-bottom:1.5rem;} .nano-banana-plan.pro{ background:#121008;border-color:rgba(201, 168, 76, 0.4);position:relative;transform:scale(1.02);box-shadow:0 10px 40px rgba(201, 168, 76, 0.1);} .nano-banana-faq-item{ padding:1.5rem 0;border-bottom:1px solid var(--border);} .nano-banana-footer{ max-width:var(--max-w);margin:0 auto;border-top:1px solid var(--border);padding:0 2rem 2rem;} @media (max-width:768px){ .nano-banana-standout-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));} .original-target{ grid-column:span 2;grid-row:span 2;max-height:400px;} .nano-banana-g-item{ max-height:220px;} } @media (hover:hover) and (pointer:fine){ body.cursor-ready, body.cursor-ready *{ cursor:none !important;} body.cursor-selecting, body.cursor-selecting *{ cursor:auto !important;} } .cursor-dot, .cursor-ring, .cursor-spotlight{ position:fixed;top:0;left:0;pointer-events:none;z-index:99999;will-change:transform, opacity;} .cursor-dot{ width:6px;height:6px;background:#c9a84c;border-radius:50%;transform:translate3d(-50%, -50%, 0);opacity:0;transition:width 0.2s ease, height 0.2s ease, border-radius 0.2s ease, background 0.2s ease, opacity 0.15s ease;} .cursor-dot.visible{ opacity:1;} .cursor-dot.text-mode{ width:2px;height:20px;border-radius:1px;background:#c9a84c;} .cursor-dot.btn-mode{ width:8px;height:8px;} .cursor-dot.pressing{ width:4px;height:4px;} .cursor-dot.label-mode{ width:auto;height:auto;background:none;border-radius:0;font-family:'Inter', sans-serif;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(201, 168, 76, 0.7);white-space:nowrap;display:flex;align-items:center;justify-content:center;} .cursor-ring{ width:36px;height:36px;border:1.5px solid rgba(201, 168, 76, 0.35);border-radius:50%;transform:translate3d(-50%, -50%, 0);opacity:0;box-shadow:0 0 8px rgba(201, 168, 76, 0.08);transition:width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.25s ease, background 0.35s ease;mix-blend-mode:screen;} .cursor-ring.visible{ opacity:1;} .cursor-ring.btn-mode{ width:52px;height:52px;border-color:rgba(201, 168, 76, 0.55);box-shadow:0 0 18px rgba(201, 168, 76, 0.12);} .cursor-ring.card-mode{ width:44px;height:44px;border-color:rgba(201, 168, 76, 0.3);background:rgba(201, 168, 76, 0.03);} .cursor-ring.text-mode{ opacity:0.15;} .cursor-ring.pressing{ width:28px;height:28px;transition:width 0.1s ease-in, height 0.1s ease-in;} .cursor-ripple{ position:fixed;pointer-events:none;z-index:99997;border-radius:50%;border:1.5px solid rgba(201, 168, 76, 0.2);width:0;height:0;transform:translate(-50%, -50%);animation:cursorRippleExpand 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;} @keyframes cursorRippleExpand{ 0%{ width:0;height:0;opacity:1;border-width:1.5px;} 100%{ width:60px;height:60px;} } .cursor-spotlight{ z-index:1;width:100vw;height:100vh;background:radial-gradient(circle 200px at var(--cx, -100px) var(--cy, -100px), rgba(201, 168, 76, 0.02), transparent);opacity:1;} @media (max-width:1024px), (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring, .cursor-spotlight, .cursor-ripple{ display:none !important;} } @media (max-width:1024px){ .nano-banana-nav{ padding:1rem 1.5rem;} .nano-banana-nav-links{ display:none;} .nano-banana-hero{ padding:9rem 1.5rem 4rem;} .bg-card-1, .bg-card-2, .bg-card-5, .bg-card-6{ width:18%;} .bg-card-3, .bg-card-4{ width:20%;} .cap-tabs{ flex-wrap:wrap;gap:1rem 2rem;} .nano-banana-pricing-grid{ grid-template-columns:1fr;max-width:500px;} .nano-banana-plan.pro{ transform:scale(1);} .nano-banana-standout-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));padding:0 1.5rem;} .nano-banana-footer{ flex-direction:column;gap:2.5rem;} } @media (max-width:768px){ .nano-banana-nav{ padding:0.9rem 1.25rem;} .nano-banana-hero{ padding:7rem 1.25rem 3rem;} .nano-banana-hero-bg{ display:none;} .nano-banana-hero-content{ pointer-events:auto;} .hero-title-split{ pointer-events:none;} .hero-title-reveal, .hero-title-line{ display:none;} .hero-title-base{ clip-path:none !important;} .cap-tabs{ gap:1rem 1.5rem;padding:0 1.25rem;flex-wrap:wrap;} .cap-tab{ font-size:clamp(1.8rem, 8vw, 3rem);} .cap-description{ padding:0 1.25rem;font-size:0.95rem;} .cap-carousel{ padding:1rem 1.25rem 2rem;} .cap-card-media{ aspect-ratio:4 / 3;border-radius:14px;} .flow-floating-cards{ display:none !important;} .flow-partners{ min-height:auto;padding:4rem 0 3rem;} .flow-partner-name{ font-size:clamp(1.8rem, 9vw, 3rem);} .nano-banana-section{ padding:5rem 1.25rem;} .nano-banana-gallery{ padding:5rem 0;} .nano-banana-standout-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:0.5rem;padding:0 1.25rem;} .nano-banana-g-item{ max-height:200px;} .original-target{ grid-column:span 2;grid-row:span 2;max-height:360px;} .nano-banana-g-meta{ opacity:1;} .nano-banana-faq-item h3{ font-size:1rem;} .nano-banana-pricing{ padding:5rem 1.25rem;} .nano-banana-pricing-grid{ max-width:100%;} .nano-banana-footer{ padding:0 1.25rem 2rem;flex-direction:column;gap:2rem;} .nano-banana-grid-3, .nano-banana-grid-2{ grid-template-columns:1fr;gap:2rem;} } @media (max-width:480px){ .nano-banana-nav{ padding:0.8rem 1rem;} .nano-banana-logo{ font-size:1rem;} .nano-banana-pill-btn{ padding:0.5rem 1rem;font-size:0.8rem;} .nano-banana-hero{ padding:6rem 1rem 3rem;} .nano-banana-section{ padding:4rem 1rem;} .nano-banana-section-header h2{ font-size:clamp(1.6rem, 7vw, 2.2rem);} .nano-banana-standout-grid{ grid-template-columns:repeat(2, 1fr);gap:0.4rem;padding:0 1rem;} .original-target{ grid-column:span 2;max-height:280px;} .nano-banana-g-item{ max-height:160px;} .nano-banana-pricing{ padding:4rem 1rem;} .nano-banana-plan{ padding:2rem 1.5rem;} #referral{ padding:1rem 1rem 4rem;} } @media (hover:none){ .nano-banana-pill-btn, .cap-tab, .flow-partner-item{ min-height:44px;} .nano-banana-g-meta{ opacity:1;} .nano-banana-card:hover{ transform:none;} .nano-banana-g-item:hover img{ transform:none;} } @media (max-width:768px){ .nano-banana-capabilities{ padding:4rem 0;} .cap-tabs{ gap:0.75rem 1.5rem;padding:0 1.25rem;margin-bottom:1rem;} .cap-tab{ font-size:clamp(1.6rem, 7vw, 2.5rem);} .cap-card-media{ aspect-ratio:unset;height:320px;border-radius:14px;} .anim-typing-text{ white-space:normal;overflow:visible;width:auto !important;animation:none !important;font-size:0.78rem;opacity:0.85;display:block;} .anim-cursor-blink{ display:none;} .anim-create .anim-prompt-box, .anim-refine .anim-prompt-box, .anim-edit-v2 .anim-prompt-box{ width:95%;opacity:1 !important;transform:none !important;animation:none !important;white-space:normal;} .anim-create .anim-image-frame, .anim-refine .anim-image-frame, .anim-edit-v2 .anim-image-frame{ opacity:1 !important;animation:none !important;} .anim-create .anim-result, .anim-refine .anim-result, .anim-edit-v2 .anim-result{ opacity:1 !important;filter:none !important;transform:none !important;animation:none !important;} .anim-refine .anim-base, .anim-edit-v2 .anim-base{ opacity:1 !important;animation:none !important;} .anim-gold-glow{ display:none;} .anim-gen-blur{ display:none;} .anim-scan, .anim-scan-glow{ display:none;} .anim-highlight-mask, .anim-transform-overlay{ display:none;} } @media (max-width:768px){ .flow-partner-name{ font-size:clamp(1.6rem, 7.5vw, 2.8rem) !important;} .flow-partners-list{ gap:0.25rem;} .flow-partner-item{ padding:0.6rem 1.5rem;} .flow-partners-label{ font-size:0.75rem;padding:0 1.5rem;margin-bottom:1.5rem;} } @media (max-width:768px){ #cta{ padding:5rem 1.25rem 3rem !important;} #cta h2{ font-size:clamp(2rem, 9vw, 3rem) !important;margin-bottom:1.5rem;} #cta p{ font-size:1rem;margin-bottom:2rem;} } @media (max-width:600px){ #referral .nano-banana-pill-btn{ width:100%;justify-content:center;text-align:center;} } @media (max-width:768px){ .nano-banana-pricing-grid{ max-width:100% !important;padding:0;} .nano-banana-pricing-header h2{ font-size:clamp(1.5rem, 6vw, 2rem);} } html, body{ overflow-x:hidden;} @media (max-width:768px){ .anim-prompt-box{ overflow:hidden !important;max-width:100% !important;box-sizing:border-box !important;} .anim-typing-text{ white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important;display:block !important;} .cap-card{ border-radius:14px;overflow:hidden;} .cap-description{ font-size:0.9rem;line-height:1.5;} } @media (max-width:480px){ .flow-partner-name{ font-size:clamp(1.3rem, 6.5vw, 2rem) !important;} .flow-partner-item{ padding:0.4rem 1rem !important;} .flow-partners-label{ font-size:0.7rem !important;padding:0 1rem !important;} .flow-partners{ padding:3rem 0 2.5rem !important;} } @media (max-width:768px){ .nano-banana-pricing{ padding:5rem 1.5rem !important;} .nano-banana-pricing-grid{ gap:1.5rem;padding:0 !important;} .nano-banana-plan{ padding:2rem 1.75rem;border-radius:16px;} } @media (max-width:768px){ .nano-banana-standout-grid{ grid-template-columns:repeat(2, 1fr) !important;gap:0.5rem !important;padding:0 1.25rem !important;} .original-target{ grid-column:span 2 !important;grid-row:span 2 !important;} .nano-banana-g-item{ max-height:180px;} } @media (max-width:768px){ .nano-banana-step{ min-height:auto;padding:2rem 1.5rem;} .nano-banana-step-num{ font-size:2rem;} } @media (max-width:480px){ #cta h2{ font-size:clamp(1.5rem, 8vw, 2.5rem) !important;line-height:1.15;} } @media (max-width:480px){ .nano-banana-footer{ text-align:center;gap:1.5rem;} .nano-banana-footer a{ display:block;padding:0.5rem 0;} } @media (max-width:768px){ .nano-banana-standout-grid{ grid-template-columns:repeat(2, 1fr) !important;} } @media (max-width:768px){ .cap-card-media{ overflow:hidden !important;position:relative;} .cap-card{ overflow:hidden !important;} .anim-create .anim-prompt-box, .anim-refine .anim-prompt-box, .anim-edit-v2 .anim-prompt-box{ width:88% !important;max-width:none !important;left:6% !important;box-sizing:border-box !important;overflow:hidden !important;} .anim-typing-text{ white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important;width:100% !important;display:block !important;} } @media (max-width:600px){ #referral > div > div:last-child > div{ flex-direction:column !important;align-items:stretch !important;gap:0.75rem !important;} #referral .nano-banana-pill-btn{ width:100% !important;text-align:center !important;justify-content:center !important;} } @media (max-width:600px){ .referral-actions{ flex-direction:column !important;align-items:stretch !important;gap:0.75rem !important;} .referral-actions .nano-banana-pill-btn{ text-align:center !important;display:block !important;} } @media (max-width:768px){ .cap-carousel{ padding:1rem 1.25rem 2rem !important;} .anim-create .anim-prompt-box, .anim-refine .anim-prompt-box, .anim-edit-v2 .anim-prompt-box{ width:100% !important;max-width:100% !important;left:auto !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important;} } .referral-actions{ display:flex;justify-content:center;gap:1rem;align-items:center;} @media (max-width:600px){ .referral-actions{ flex-direction:column;align-items:stretch;gap:0.75rem;} .referral-actions .nano-banana-pill-btn{ text-align:center;display:block;} } @media (max-width:768px){ .cap-carousel-wrapper{ overflow:hidden !important;max-width:100vw !important;} .cap-carousel{ overflow:hidden !important;max-width:100% !important;} .cap-card{ max-width:100% !important;overflow:hidden !important;} .anim-create .anim-prompt-box, .anim-refine .anim-prompt-box, .anim-edit-v2 .anim-prompt-box{ margin:0 auto !important;position:relative !important;left:0 !important;right:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;} } @media (max-width:768px){ .anim-prompt-box{ display:none !important;} } @media (max-width:768px){ .referral-actions{ flex-direction:column !important;align-items:stretch !important;gap:0.75rem !important;} .referral-actions .nano-banana-pill-btn{ text-align:center !important;display:block !important;width:100% !important;box-sizing:border-box !important;} } @media (max-width:768px){ .flow-partners{ min-height:auto !important;padding:3rem 1.25rem 2.5rem !important;} .flow-partners-label{ font-size:0.8rem !important;margin-bottom:1.25rem !important;padding:0 !important;letter-spacing:0.05em;} .flow-partners-list{ gap:0 !important;padding:0 !important;} .flow-partner-item{ padding:0.65rem 0 !important;border-bottom:1px solid rgba(255,255,255,0.06);} .flow-partner-item:last-child{ border-bottom:none;} .flow-partner-name{ font-size:1.35rem !important;font-weight:500 !important;color:rgba(255,255,255,0.75);letter-spacing:-0.01em !important;} .flow-floating-cards{ display:flex !important;position:relative !important;top:auto !important;left:auto !important;width:calc(100% + 2.5rem) !important;height:auto !important;margin:1.5rem -1.25rem 0 !important;padding:0 1.25rem !important;overflow-x:auto !important;overflow-y:hidden !important;gap:0.75rem;z-index:2 !important;pointer-events:auto !important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .flow-floating-cards::-webkit-scrollbar{ display:none;} .flow-float-card{ position:relative !important;top:auto !important;left:auto !important;width:200px !important;min-width:200px !important;opacity:1 !important;transform:none !important;pointer-events:auto !important;scroll-snap-align:start;flex-shrink:0;border-radius:12px !important;box-shadow:0 4px 20px rgba(0,0,0,0.5) !important;border:1px solid rgba(255,255,255,0.1) !important;background:rgba(15,15,15,0.95) !important;} .flow-float-card img{ height:130px;object-fit:cover;border-radius:12px 12px 0 0;} .flow-card-body{ padding:0.6rem 0.8rem 0.5rem;} .flow-card-body h3{ font-size:0.8rem;margin-bottom:0.2rem;} .flow-card-body p{ font-size:0.65rem;line-height:1.35;margin-bottom:0.4rem;} .flow-partner-tag{ font-size:0.55rem;padding:0.3rem 0;} .flow-partners-cta{ margin-top:1.5rem;} .flow-partners-bg{ opacity:0.3;} } @media (max-width:768px){ .flow-partners-list{ display:none !important;} } @media (max-width:768px){ .nano-banana-standout-grid{ grid-template-columns:repeat(2, 1fr) !important;gap:0.4rem !important;padding:0 0.75rem !important;} .original-target{ grid-column:1 / -1 !important;grid-row:span 1 !important;aspect-ratio:3 / 2 !important;max-height:220px !important;border-radius:16px !important;} .nano-banana-g-item{ aspect-ratio:1 / 1 !important;max-height:none !important;border-radius:10px !important;} .nano-banana-g-item:nth-child(6), .nano-banana-g-item:nth-child(13), .nano-banana-g-item:nth-child(20), .nano-banana-g-item:nth-child(27){ grid-column:1 / -1 !important;aspect-ratio:16 / 7 !important;} .nano-banana-g-meta{ opacity:1 !important;padding:1.5rem 0.6rem 0.5rem !important;background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%) !important;} .nano-banana-g-meta p{ display:none !important;} .nano-banana-g-meta strong{ font-size:0.6rem !important;letter-spacing:0.08em !important;} .nano-banana-gallery-header{ margin-bottom:2rem !important;padding:0 1rem !important;} } .nano-banana-section, .nano-banana-gallery, .flow-partners, .nano-banana-pricing, .nano-banana-faq, .nano-banana-referral{ content-visibility:auto;contain-intrinsic-size:auto 800px;} @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;} .fh-bg-img{ animation:none !important;} } @media (max-width:768px){ .nano-banana-hero-bg{ display:block !important;mask-image:radial-gradient(ellipse at center, black 0%, transparent 85%);-webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 85%);z-index:0;opacity:0.6;} .flow-floating-cards{ mask-image:linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);padding:0 1.5rem 1rem !important;} .flow-float-card{ background:rgba(18, 18, 18, 0.75) !important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important;border:1px solid rgba(255, 255, 255, 0.15) !important;box-shadow:0 8px 32px rgba(0, 0, 0, 0.6) !important;} } @media (max-width:768px){ .flow-floating-cards{ display:flex !important;gap:0 !important;padding:2rem 50vw 4rem 1.5rem !important;align-items:center !important;overflow-x:auto !important;scroll-snap-type:x mandatory;mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);} .flow-float-card{ position:relative !important;top:auto !important;left:auto !important;transform:none !important;flex-shrink:0;width:250px !important;min-width:250px !important;margin-left:-60px !important;scroll-snap-align:center;border-radius:16px !important;background:linear-gradient(135deg, rgba(30,30,30,0.6) 0%, rgba(10,10,10,0.8) 100%) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border:1px solid rgba(255, 255, 255, 0.15) !important;border-top:1px solid rgba(255, 255, 255, 0.3) !important;box-shadow:-15px 15px 40px rgba(0, 0, 0, 0.8) !important;transition:transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0.4s;} .flow-float-card:first-child{ margin-left:0 !important;} .flow-float-card:nth-child(odd){ align-self:flex-start !important;transform:rotate(-4deg) translateY(-15px) !important;} .flow-float-card:nth-child(even){ align-self:flex-end !important;transform:rotate(5deg) translateY(15px) !important;} .flow-float-card:nth-child(3n+1){ width:230px !important;} .flow-float-card:nth-child(3n+2){ width:260px !important;} .flow-float-card:nth-child(3n+3){ width:280px !important;} .flow-float-card img{ height:180px !important;width:100% !important;object-fit:cover !important;border-radius:16px 16px 0 0 !important;border-bottom:1px solid rgba(255,255,255,0.08) !important;} .flow-card-body{ padding:1.25rem 1rem 1rem !important;} .flow-card-body h3{ font-size:1.15rem !important;font-weight:500 !important;margin-bottom:0.4rem !important;letter-spacing:-0.01em;} .flow-card-body p{ font-size:0.8rem !important;opacity:0.75;line-height:1.4;} .flow-float-card:active{ transform:rotate(0deg) translateY(0) scale(1.05) !important;z-index:50 !important;border-color:rgba(201, 168, 76, 0.4) !important;box-shadow:0 20px 50px rgba(0, 0, 0, 1), 0 0 30px rgba(201, 168, 76, 0.15) !important;} .flow-floating-cards{ perspective:900px;gap:1rem !important;} .flow-float-card{ margin-left:0 !important;align-self:center !important;transform:none !important;animation:coverFlow3D linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%;} } } @media (max-width:768px){ .fh-bg-img{ animation:none !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;position:relative !important;} .nano-banana-hero-bg{ display:flex !important;flex-wrap:nowrap;align-items:center;gap:1rem;overflow:hidden;position:absolute;bottom:-2rem;width:200%;height:40%;mask-image:linear-gradient(to top, black 0%, black 70%, transparent 100%);-webkit-mask-image:linear-gradient(to top, black 0%, black 70%, transparent 100%);z-index:0;opacity:0.6;animation:mobileHeroScroll 40s linear infinite alternate;} @keyframes mobileHeroScroll{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-40%);} } .bg-card-1{ height:75%;aspect-ratio:3/4;transform:rotate(-5deg) translateY(-10px) !important;margin-left:-1rem;border-radius:12px;} .bg-card-2{ height:90%;aspect-ratio:4/5;transform:rotate(3deg) translateY(10px) !important;margin-left:-1.5rem;border-radius:12px;} .bg-card-3{ height:80%;aspect-ratio:1;transform:rotate(-2deg) !important;margin-left:-1rem;border-radius:12px;} .bg-card-4{ height:70%;aspect-ratio:1;transform:rotate(5deg) translateY(-5px) !important;margin-left:-1.5rem;border-radius:12px;} .bg-card-5{ height:85%;aspect-ratio:1;transform:rotate(-4deg) translateY(15px) !important;margin-left:-1rem;border-radius:12px;} .bg-card-6{ height:95%;aspect-ratio:4/3;transform:rotate(2deg) !important;margin-left:-2rem;border-radius:12px;} } @media (max-width:768px){ .nano-banana-hero{ overflow:hidden;} .nano-banana-hero-bg{ display:block !important;column-count:2 !important;column-gap:12px !important;position:absolute !important;top:-10% !important;left:-10% !important;width:120% !important;height:120% !important;mask-image:linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.1) 80%, transparent 100%) !important;-webkit-mask-image:linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.1) 80%, transparent 100%) !important;opacity:0.55 !important;z-index:0 !important;animation:heroMasonryDrift 20s ease-in-out infinite alternate !important;} @keyframes heroMasonryDrift{ 0%{ transform:translate(0, 0) scale(1);} 100%{ transform:translate(-3%, -3%) scale(1.05);} } .fh-bg-img{ break-inside:avoid !important;position:relative !important;width:100% !important;height:auto !important;margin:0 0 12px 0 !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;animation:none !important;border-radius:14px !important;box-shadow:0 10px 30px rgba(0,0,0,0.6) !important;border:1px solid rgba(255, 255, 255, 0.08) !important;} .fh-bg-img:nth-child(odd){ animation:parallaxOdd 12s ease-in-out infinite alternate !important;} .fh-bg-img:nth-child(even){ animation:parallaxEven 15s ease-in-out infinite alternate !important;} @keyframes parallaxOdd{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-8px);} } @keyframes parallaxEven{ 0%{ transform:translateY(0);} 100%{ transform:translateY(12px);} } .nano-banana-hero-content{ position:relative;z-index:10;text-shadow:0 4px 20px rgba(0,0,0,0.8);} } @media (max-width:768px){ .nano-banana-hero{ display:flex !important;flex-direction:column;align-items:center;padding:6rem 1rem 4rem !important;} .nano-banana-hero-content{ display:contents !important;} .hero-title-split{ order:1 !important;position:relative !important;margin-bottom:0 !important;z-index:10;} .hero-subtitle-container{ order:2 !important;margin-top:1.5rem !important;margin-bottom:2.5rem !important;z-index:10;} .nano-banana-hero-bg{ display:block !important;order:3 !important;position:relative !important;top:auto !important;left:auto !important;width:280px !important;height:350px !important;margin-bottom:3rem !important;border-radius:28px !important;border:1px solid rgba(255, 255, 255, 0.25) !important;border-top:1px solid rgba(255, 255, 255, 0.4) !important;box-shadow:0 0 60px rgba(255, 255, 255, 0.15), 0 30px 60px rgba(0, 0, 0, 0.8) !important;align-self:center !important;mask-image:none !important;-webkit-mask-image:none !important;opacity:1 !important;pointer-events:auto !important;overflow:hidden !important;} .nano-banana-hero-actions{ order:4 !important;margin-top:0 !important;margin-bottom:2rem !important;z-index:10;} .fh-bg-img:hover{ scale:1 !important;transform:none !important;box-shadow:none !important;} .nano-banana-hero-bg:hover{ box-shadow:0 0 60px rgba(255, 255, 255, 0.15), 0 30px 60px rgba(0, 0, 0, 0.8) !important;} .fh-bg-img{ position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;margin:0 !important;border-radius:28px !important;object-fit:cover !important;box-shadow:none !important;transform:none !important;animation:frameCrossfade 24s infinite both !important;} .bg-card-1{ animation-delay:0s !important;} .bg-card-2{ animation-delay:4s !important;} .bg-card-3{ animation-delay:8s !important;} .bg-card-4{ animation-delay:12s !important;} .bg-card-5{ animation-delay:16s !important;} .bg-card-6{ animation-delay:20s !important;} @keyframes frameCrossfade{ 0%{ opacity:0;transform:scale(1.05);z-index:1;filter:blur(4px);} 4%{ opacity:1;transform:scale(1.02);z-index:5;filter:blur(0px);} 16%{ opacity:1;transform:scale(1);z-index:5;filter:blur(0px);} 20%{ opacity:0;transform:scale(0.98);z-index:1;filter:blur(4px);} 100%{ opacity:0;transform:scale(0.98);z-index:1;filter:blur(4px);} } } .hero-color-bleed{ display:none;} @media (max-width:768px){ .hero-color-bleed{ display:block !important;position:absolute !important;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;} .hero-bleed-layer{ position:absolute;top:50%;left:50%;width:140%;height:140%;transform:translate(-50%, -50%) scale(1.15);object-fit:cover;filter:blur(70px) saturate(2) brightness(0.6);opacity:0;transition:opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);will-change:opacity;} .hero-bleed-layer.visible{ opacity:1;} .hero-bleed-overlay{ position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 80%);z-index:1;} .nano-banana-hero{ display:flex !important;flex-direction:column;align-items:center;padding:6rem 1rem 4rem !important;overflow:hidden;} .nano-banana-hero-content{ display:contents !important;} .hero-title-split{ order:1 !important;position:relative !important;margin-bottom:0 !important;z-index:10;} .hero-subtitle-container{ order:2 !important;margin-top:1.5rem !important;margin-bottom:2rem !important;z-index:10;} .nano-banana-hero-bg{ display:block !important;order:3 !important;position:relative !important;top:auto !important;left:auto !important;width:300px !important;height:380px !important;margin-bottom:2.5rem !important;border-radius:24px !important;border:1px solid rgba(255, 255, 255, 0.2) !important;border-top:1px solid rgba(255, 255, 255, 0.35) !important;box-shadow:0 0 50px rgba(255, 255, 255, 0.08), 0 25px 50px rgba(0, 0, 0, 0.7) !important;align-self:center !important;mask-image:none !important;-webkit-mask-image:none !important;opacity:1 !important;overflow:hidden !important;pointer-events:none !important;background:#080808 !important;} .nano-banana-hero-actions{ order:4 !important;margin-top:0 !important;margin-bottom:2rem !important;z-index:10;} .fh-bg-img{ position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;margin:0 !important;border-radius:24px !important;object-fit:cover !important;box-shadow:none !important;border:none !important;opacity:0 !important;transform:translateX(100%) !important;transition:transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease !important;animation:none !important;} .fh-bg-img.hero-slide-active{ opacity:1 !important;transform:translateX(0) !important;z-index:5 !important;} .fh-bg-img.hero-slide-exit{ opacity:0 !important;transform:translateX(-100%) !important;z-index:4 !important;} .fh-bg-img:hover{ scale:1 !important;transform:translateX(0) !important;box-shadow:none !important;} } .hero-floating-chips{ display:none;} @media (max-width:768px){ .hero-subtitle-desktop{ display:none !important;} .hero-floating-chips{ display:block !important;order:2 !important;position:relative;width:340px;height:340px;align-self:center;z-index:5;margin:1rem 0 0.5rem;} .nano-banana-hero-bg{ order:99 !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%, -50%) !important;width:280px !important;height:280px !important;margin:0 !important;z-index:6;} .hero-chip{ position:absolute;font-family:'Inter', sans-serif;font-size:0.7rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255, 255, 255, 0.85);background:rgba(255, 255, 255, 0.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.15);padding:0.4rem 0.9rem;border-radius:99px;white-space:nowrap;pointer-events:none;z-index:10;animation:chipFloat 6s ease-in-out infinite alternate;} .hero-chip-1{ top:2%;left:0%;animation-delay:0s;animation-name:chipFloat1;} .hero-chip-2{ top:0%;right:2%;animation-delay:-1s;animation-name:chipFloat2;} .hero-chip-3{ top:30%;left:-8%;animation-delay:-2s;animation-name:chipFloat3;} .hero-chip-4{ top:35%;right:-5%;animation-delay:-3s;animation-name:chipFloat4;} .hero-chip-5{ bottom:18%;left:-3%;animation-delay:-0.5s;animation-name:chipFloat5;} .hero-chip-6{ bottom:22%;right:-2%;animation-delay:-4s;animation-name:chipFloat6;} .hero-chip-7{ bottom:2%;left:8%;animation-delay:-1.5s;animation-name:chipFloat7;color:rgba(201, 168, 76, 0.9);border-color:rgba(201, 168, 76, 0.25);background:rgba(201, 168, 76, 0.08);} .hero-chip-8{ bottom:5%;right:10%;animation-delay:-2.5s;animation-name:chipFloat8;} @keyframes chipFloat1{ 0%{ transform:translate(0, 0) rotate(-2deg);} 100%{ transform:translate(5px, -8px) rotate(1deg);} } @keyframes chipFloat2{ 0%{ transform:translate(0, 0) rotate(1deg);} 100%{ transform:translate(-6px, -6px) rotate(-2deg);} } @keyframes chipFloat3{ 0%{ transform:translate(0, 0) rotate(-1deg);} 100%{ transform:translate(-4px, 10px) rotate(2deg);} } @keyframes chipFloat4{ 0%{ transform:translate(0, 0) rotate(2deg);} 100%{ transform:translate(6px, 8px) rotate(-1deg);} } @keyframes chipFloat5{ 0%{ transform:translate(0, 0) rotate(1deg);} 100%{ transform:translate(8px, -5px) rotate(-2deg);} } @keyframes chipFloat6{ 0%{ transform:translate(0, 0) rotate(-2deg);} 100%{ transform:translate(-5px, -10px) rotate(1deg);} } @keyframes chipFloat7{ 0%{ transform:translate(0, 0) rotate(0deg);} 100%{ transform:translate(4px, -6px) rotate(-1deg);} } @keyframes chipFloat8{ 0%{ transform:translate(0, 0) rotate(-1deg);} 100%{ transform:translate(-8px, 5px) rotate(2deg);} } .nano-banana-hero-actions{ order:3 !important;} } .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;} @media (max-width:768px){ .nano-banana-hero{ contain:layout style;} .hero-bleed-layer{ will-change:opacity;} .fh-bg-img.hero-slide-active, .fh-bg-img.hero-slide-exit{ will-change:transform, opacity;} .hero-chip{ will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;} .hero-subtitle-desktop{ position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important;} } 
/* ── Nano Banana responsive nav ── */

/* Override the base nav-links to use flex flow instead of absolute centering */
.nano-banana-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.5rem);
  color: var(--text-muted);
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
.nano-banana-nav-links a,
.nano-banana-nav-links > div > a {
  font-size: clamp(0.65rem, 0.85vw, 0.85rem);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Make the right-side CTA also flex-shrink-proof */
.nano-banana-nav-right {
  flex-shrink: 0;
}

/* Between 1024–1200: shrink link gap, reduce font */
@media (max-width:1200px) and (min-width:1025px) {
  .nano-banana-nav-links {
    gap: 0.6rem;
  }
  .nano-banana-nav-links a,
  .nano-banana-nav-links > div > a {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }
}

/* <= 1024px: collapse to mobile hamburger */
@media (max-width:1024px){
  .nano-banana-nav-links { display:none !important; }
  .nano-banana-nav-right .nano-banana-pill-btn { display:none; }
  .nano-banana-nav-right > button:first-of-type { display:none; }
  .nano-banana-mobile-menu-btn { display:block !important; }
}
@media (max-width:768px){
  .nano-banana-nav-right .nano-banana-pill-btn { display:none; }
  .nano-banana-nav-right > button:first-of-type { display:none; }
  .nano-banana-mobile-menu-btn { display:block !important; }
}

/* Footer mobile reset — override the minified styles that center everything */
@media (max-width:480px){
  .nano-banana-footer { text-align: left !important; }
  .nano-banana-footer a { display: inline !important; padding: 0 !important; }
}
@media (max-width:768px){
  .nano-banana-footer { flex-direction: column !important; text-align: left !important; gap: 0 !important; }
}
@media (max-width:1024px){
  .nano-banana-footer { flex-direction: column !important; text-align: left !important; gap: 0 !important; }
}

/* ── Boxed layout — constrain all NB landing sections to 1280px ── */
:root { --max-w: 1280px; }

/* Hero stays full-width for seamless bg, but floating images are contained */
.nano-banana-hero-bg {
  max-width: 1440px;
  left: 50% !important;
  transform: translateX(-50%);
  overflow: hidden;
}
/* Scale down the hero content block uniformly */
.nano-banana-hero-content {
  transform: scale(0.85);
  transform-origin: center top;
}
.nano-banana-capabilities { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.nano-banana-capabilities .cap-tabs { padding: 0 2rem; }
.nano-banana-capabilities .cap-description { padding: 0 2rem; }
.nano-banana-capabilities .cap-carousel { padding: 1rem 2rem 2rem; }
.nano-banana-pricing { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.nano-banana-gallery { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
/* flow-partners stays full-width — uses absolute-positioned bg elements */
#cta { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
#referral { max-width: var(--max-w); margin-left: auto; margin-right: auto; }

/* ── NB Footer 4-column grid ── */
.nb-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  text-align: left;
}
.nb-footer-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.nb-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.nb-footer-links a {
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.2s;
}
.nb-footer-links a:hover {
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .nb-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .nb-footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .nb-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ── Logo fix: prevent text wrapping on small screens ── */
.nano-banana-logo {
  white-space: nowrap;
  flex-shrink: 0;
}
.nb-footer-brand .nano-banana-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .nano-banana-logo {
    font-size: 1rem !important;
  }
}

/* Hide elements on mobile (moved to hamburger menu) */
@media (max-width: 1024px) {
  .nb-desktop-only {
    display: none !important;
  }
}