@font-face{font-family:Dana;src:url('assets/Dana-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Dana;src:url('assets/Dana-Medium.woff2') format('woff2');font-weight:500 600;font-display:swap}@font-face{font-family:Dana;src:url('assets/Dana-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap} :root{--purple:#b664e9;--purple-strong:#a643e4;--purple-soft:#cd94f0;--bg:#140f17;--panel:#1a131e;--panel-2:#211826;--panel-3:#291f2f;--stroke:#362a3e;--text:#f6f3ff;--muted:#a89ab1;--subtle:#80708a;--white:#fff;--danger:#ffb9a2;--focus:#e1b1ff;--radius:24px;--shadow:0 20px 80px #0006;color-scheme:dark} html[data-theme=light]{--bg:#fcfcfd;--panel:#fff;--panel-2:#f6f4f8;--panel-3:#f1ecf4;--stroke:#e6dfeb;--text:#201925;--muted:#5d6370;--subtle:#767c89;--white:#fff;--shadow:0 20px 70px #34213f15;color-scheme:light} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.75 Dana,system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}::selection{background:#b664e966;color:#fff}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.skip{position:absolute;top:-60px;right:16px;z-index:200;padding:10px 18px;background:var(--purple);color:#fff;border-radius:10px}.skip:focus{top:10px} .app-shell{display:block}.workspace{min-width:0;overflow:hidden}.rail{position:sticky;top:0;height:100vh;z-index:20;background:var(--panel);border-left:1px solid var(--stroke);display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 8px 20px}.rail-logo{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--purple);border-radius:15px;margin-bottom:20px;box-shadow:0 10px 25px #b664e955}.brand-glyph{font-size:30px;line-height:1}.rail-group-label{color:var(--subtle);font-size:10px;margin:0 0 6px}.rail-link{background:none;border:0;color:var(--muted);width:64px;height:59px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:10px;line-height:1.5;transition:background .25s,color .25s,transform .25s}.rail-link:hover,.rail-link:focus-visible{background:var(--panel-3);color:var(--text);transform:translateY(-2px)}.rail-link.active{color:var(--purple-soft);background:#b664e91b}.rail-icon{font-size:23px;height:29px;line-height:29px}.rail-divider{width:34px;height:1px;background:var(--stroke);margin:8px 0}.rail-spacer{flex:1}.site-header{height:74px;display:flex;align-items:center;gap:28px;padding:0 clamp(18px,3.3vw,58px);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(18px);position:sticky;top:0;z-index:18;border-bottom:1px solid var(--stroke)}.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;min-width:166px}.brand img{width:105px;height:auto;filter:brightness(0) invert(1)}html[data-theme=light] .brand img{filter:none}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;background:var(--purple);font-size:21px}.header-nav{display:flex;gap:clamp(15px,2vw,30px);align-items:center;flex:1}.header-nav a{font-size:13px;color:var(--muted);white-space:nowrap;transition:color .2s}.header-nav a:hover{color:var(--text)}.header-actions{display:flex;align-items:center;gap:9px}.btn{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:13px;padding:9px 17px;line-height:1.4;font-weight:700;font-size:13px;white-space:nowrap;transition:transform .22s,background .22s,box-shadow .22s,border-color .22s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--purple);color:#fff;box-shadow:0 7px 26px #b664e935}.btn-primary:hover{background:var(--purple-strong);box-shadow:0 10px 32px #b664e960}.btn-ghost{color:var(--text);border-color:var(--stroke);background:var(--panel)}.btn-ghost:hover,.btn-outline:hover{border-color:var(--purple-soft)}.btn-outline{color:#fff;border-color:#ffffff6a;background:#100a1390}.btn-large{min-height:50px;padding:12px 22px}.icon-btn{width:37px;height:37px;display:grid;place-items:center;background:none;border:1px solid var(--stroke);color:var(--text);border-radius:11px;font-size:18px}.icon-btn:hover{background:var(--panel-3)} .hero{position:relative;min-height:min(650px,calc(100svh - 74px));background:#100c13;isolation:isolate;overflow:hidden;color:#fff}.hero-image{position:absolute;inset:0;background:url('assets/hero-film.webp') center 47%/cover no-repeat;transform:scaleX(-1);z-index:-2}.hero-shade{position:absolute;inset:0;background:linear-gradient(270deg,#0c080fdc 0%,#0c080fb6 35%,#0c080f29 66%,#0c080f05 100%),linear-gradient(0deg,#0f0913ac,transparent 30%);z-index:-1}.hero-content{position:relative;width:min(690px,63%);padding:clamp(90px,12vw,160px) clamp(28px,6vw,95px) 75px 20px}.eyebrow{display:flex;align-items:center;gap:11px;font-size:12px;color:#eac7ff;font-weight:700;white-space:nowrap}.pulse-dot{width:8px;height:8px;background:#d89aff;box-shadow:0 0 0 5px #d89aff25;border-radius:50%;animation:pulse 2.5s infinite}.eyebrow-line{height:1px;width:20px;background:#ffffff66}.hero h1{font-size:clamp(45px,5.6vw,89px);letter-spacing:-.055em;line-height:1.13;margin:28px 0 18px;font-weight:900}.hero h1 em{font-style:normal;color:#dba2ff}.hero p{font-size:clamp(15px,1.32vw,19px);line-height:2;color:#e5dfe9;max-width:600px;margin:0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.hero-index{display:flex;align-items:center;gap:14px;margin-top:61px;color:#d5cdda;font-size:11px}.line-number{direction:ltr;font:700 13px Arial,sans-serif}.hero-rule{height:1px;width:45px;background:#ffffff75}.hero-edge{position:absolute;left:24px;bottom:26px;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.21em;color:#ffffffa5;font:700 10px Arial,sans-serif}.hero-scroll{position:absolute;left:52px;bottom:34px;width:48px;height:48px;border:1px solid #ffffff88;border-radius:50%;display:grid;place-items:center;font-size:26px;transition:transform .2s}.hero-scroll:hover{transform:translateY(5px)} .model-ticker{display:flex;align-items:center;height:58px;border-bottom:1px solid var(--stroke);background:var(--panel);overflow:hidden}.ticker-label{font-size:11px;color:var(--muted);padding:0 40px;white-space:nowrap;border-left:1px solid var(--stroke)}.ticker-window{overflow:hidden;flex:1;direction:ltr}.ticker-track{display:flex;align-items:center;gap:30px;width:max-content;white-space:nowrap;animation:marquee 24s linear infinite;color:var(--muted);font:700 12px Arial,sans-serif;letter-spacing:.08em}.ticker-track b{color:var(--purple-soft);font-size:12px}.model-ticker:hover .ticker-track{animation-play-state:paused} .section{padding:104px clamp(24px,4.1vw,74px)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:36px}.section-kicker{display:block;color:var(--purple-soft);font-weight:700;font-size:12px;letter-spacing:.035em;margin-bottom:14px}.section h2,.feature-banner h2,.seo-section h2{font-size:clamp(32px,3.6vw,59px);line-height:1.26;letter-spacing:-.045em;margin:0;font-weight:900}.accent{color:var(--purple-soft)}.section-head p{margin:12px 0 0;color:var(--muted);max-width:620px}.section-aside{color:var(--subtle);font-size:12px;white-space:nowrap}.studio-section{background:radial-gradient(ellipse at 90% 20%,#b664e913,transparent 35%),var(--bg)}.creator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.creator-card{background:var(--panel);border:1px solid var(--stroke);border-radius:23px;padding:23px;min-width:0;position:relative;transition:border-color .25s,transform .25s,box-shadow .25s;overflow:visible}.creator-card:hover,.creator-card:focus-within{border-color:#b664e985;box-shadow:var(--shadow);transform:translateY(-3px)}.creator-card.video{background:linear-gradient(128deg,#b664e913,transparent 44%),var(--panel)}.creator-card.image{background:linear-gradient(128deg,#f0a07a0d,transparent 44%),var(--panel)}.creator-card.text{background:linear-gradient(128deg,#c584ed0b,transparent 44%),var(--panel)}.creator-card.audio{background:linear-gradient(128deg,#f9eb5709,transparent 44%),var(--panel)}.card-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}.card-symbol{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;background:#b664e924;color:var(--purple-soft);font-size:25px;flex:none}.image .card-symbol{background:#ffac7820;color:#ffb89b}.text .card-symbol{background:#c584ed1c;color:#c584ed}.audio .card-symbol{background:#f9eb5719;color:#f9eb57}.card-top h3{margin:0;font-size:19px;line-height:1.5}.card-top p{color:var(--muted);font-size:12px;margin:1px 0 0}.card-status{margin-right:auto;color:#9edcba;font-size:10px;border:1px solid #9edcba4a;background:#9edcba10;border-radius:20px;padding:3px 9px;white-space:nowrap}.card-fields{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:13px}.field label{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.select-root{position:relative}.select-trigger{width:100%;min-height:44px;text-align:right;border:1px solid var(--stroke);color:var(--text);background:var(--panel-2);border-radius:10px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;white-space:nowrap}.select-trigger:hover,.select-trigger[aria-expanded=true]{border-color:var(--purple)}.select-trigger .chev{color:var(--purple-soft);font-size:18px;transition:transform .2s}.select-trigger[aria-expanded=true] .chev{transform:rotate(180deg)}.select-menu{position:absolute;top:calc(100% + 5px);right:0;left:0;z-index:15;max-height:225px;overflow:auto;margin:0;padding:5px;list-style:none;border:1px solid var(--stroke);border-radius:11px;background:var(--panel-3);box-shadow:0 16px 45px #0008}.select-menu[hidden]{display:none}.select-menu li{padding:8px 10px;border-radius:7px;color:var(--muted);font-size:12px;cursor:pointer;line-height:1.4}.select-menu li:hover,.select-menu li[aria-selected=true],.select-menu li[data-active=true]{background:#b664e930;color:var(--text)}.select-menu li:focus-visible{outline:2px solid var(--focus)}.prompt-label{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.prompt{display:block;width:100%;resize:vertical;min-height:82px;background:var(--panel-2);border:1px solid var(--stroke);border-radius:10px;padding:11px 12px;color:var(--text);font-size:12px;line-height:1.8}.prompt:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px #b664e924}.prompt::placeholder{color:var(--subtle)}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.hint-btn{border:0;background:none;color:var(--purple-soft);font-size:11px;padding:7px 0;text-align:right}.hint-btn:hover{text-decoration:underline}.create-btn{border:0;background:var(--purple);color:#fff;border-radius:10px;padding:10px 14px;font-weight:700;font-size:12px;white-space:nowrap;transition:background .2s,transform .2s}.create-btn:hover{background:var(--purple-strong);transform:translateY(-2px)}.card-footnote{margin-top:12px;font-size:10px;color:var(--subtle);border-top:1px solid var(--stroke);padding-top:9px}.studio-note{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--subtle);font-size:11px}.studio-note span{color:var(--purple-soft)} .feature-banner{min-height:375px;position:relative;display:flex;align-items:center;overflow:hidden;color:#fff;background:#151018}.feature-photo{position:absolute;inset:0;background:url('assets/tehran-film.webp') 20% 38%/cover no-repeat;opacity:.72}.feature-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0e0a11fa 4%,#0e0a11d9 38%,#0e0a116a 70%,#0e0a111c)}.feature-content{position:relative;z-index:1;padding:62px clamp(24px,7vw,105px);max-width:720px}.feature-banner h2{font-size:clamp(34px,4vw,60px)}.feature-content p{max-width:470px;color:#e2dce5;line-height:2}.inline-link{border:0;background:none;color:var(--purple-soft);padding:0;font:700 13px Dana;display:inline-flex;align-items:center;gap:22px;white-space:nowrap}.inline-link span{font-size:19px;transition:transform .2s}.inline-link:hover span{transform:translate(-4px,-3px)} .gallery-section{background:var(--panel)}.gallery-tabs{display:flex;gap:5px;padding:5px;border:1px solid var(--stroke);border-radius:14px;background:var(--bg)}.gallery-tabs button{border:0;background:none;color:var(--muted);font:700 12px Dana;padding:9px 16px;border-radius:10px;white-space:nowrap}.gallery-tabs button[aria-selected=true]{background:var(--purple);color:#fff}.gallery-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:15px;min-height:360px}.gallery-item{position:relative;background:var(--panel-2);border:1px solid var(--stroke);border-radius:18px;overflow:hidden;min-height:350px;display:flex;align-items:end;isolation:isolate;transition:transform .25s,border-color .25s}.gallery-item:hover{transform:translateY(-5px);border-color:var(--purple)}.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#08080cd9,transparent 57%);z-index:-1}.gallery-caption{padding:20px;color:#fff;width:100%}.gallery-caption strong{display:block;font-size:16px}.gallery-caption small{color:#dfd8e7;font-size:11px}.gallery-num{position:absolute;top:16px;right:16px;border:1px solid #ffffff88;border-radius:30px;color:#fff;background:#0e0b1080;padding:3px 9px;font:700 10px Arial}.gallery-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ffffffb0;background:#ffffff26;backdrop-filter:blur(8px);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px}.gallery-item.text-sample,.gallery-item.audio-sample{align-items:stretch}.gallery-item.text-sample:after,.gallery-item.audio-sample:after{display:none}.text-art{width:100%;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#321e3e,#1a141e)}.text-art .sample-type,.audio-art .sample-type{font-weight:700;font-size:12px;letter-spacing:0;color:#dba1ff}.text-art .sample-quote{font-size:clamp(18px,2vw,28px);font-weight:700;line-height:1.7;color:#fff}.text-art .sample-line{width:36px;height:3px;background:var(--purple);margin-bottom:8px}.text-art small{color:#bdb6cb}.audio-art{width:100%;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 50% 40%,#9a4eca77,transparent 45%),linear-gradient(145deg,#2a1935,#17111b);color:#fff}.audio-art .record{font-size:100px;line-height:1;text-align:center;color:#d3a2f2;text-shadow:0 0 50px #b664e9aa}.wave{display:flex;gap:4px;align-items:center;justify-content:center;height:52px}.wave i{width:4px;border-radius:9px;background:#d99cff;height:var(--h);animation:wave 1.1s ease-in-out infinite alternate;animation-delay:var(--d)}.audio-art strong{display:block;font-size:16px}.audio-art small{color:#cec4da}.gallery-foot{display:flex;justify-content:space-between;gap:20px;margin-top:18px;color:var(--subtle);font-size:11px} .tools-section{background:var(--bg)}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.tool-card{position:relative;min-height:195px;border:1px solid var(--stroke);border-radius:18px;background:var(--panel);display:flex;flex-direction:column;padding:22px;transition:transform .22s,border-color .22s,box-shadow .22s}.tool-card:hover{transform:translateY(-4px);border-color:#b664e99c;box-shadow:var(--shadow)}.tool-icon{width:39px;height:39px;border-radius:10px;display:grid;place-items:center;background:#b664e926;color:var(--purple-soft);font-size:22px;margin-bottom:auto}.tool-label{font-size:10px;color:var(--purple-soft);font-weight:700;margin:8px 0 3px}.tool-card strong{font-size:16px;line-height:1.55}.tool-card small{color:var(--muted);font-size:11px}.tool-arrow{position:absolute;top:16px;left:19px;color:var(--muted);font-size:20px}.tool-image .tool-icon{background:#ffaf8b24;color:#ffaf8b}.tool-text .tool-icon{background:#c584ed20;color:#c584ed}.tool-audio .tool-icon{background:#f9eb5720;color:#f9eb57}.tool-music .tool-icon{background:#ff99ce25;color:#ff99ce}.tool-edit .tool-icon{background:#c6f56f21;color:#c6f56f}.coming{margin-top:15px;border:1px dashed var(--stroke);border-radius:15px;padding:16px 21px;display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12px}.coming strong{color:var(--text);font-size:13px}.coming-badge{font-size:10px;border-radius:20px;padding:3px 10px;color:#e1b1ff;background:#b664e924;white-space:nowrap} .pricing-section{background:radial-gradient(circle at 20% 45%,#b664e932,transparent 30%),var(--panel);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:510px}.pricing-visual{position:relative;min-height:330px;display:grid;place-items:center;overflow:hidden}.pricing-orbit{position:absolute;border:1px solid #cd94f082;width:230px;height:230px;border-radius:50%;transform:rotateX(63deg) rotate(-23deg);box-shadow:0 0 70px #b664e94d,inset 0 0 50px #b664e925;animation:orbit 12s linear infinite}.orbit-two{width:315px;height:315px;transform:rotateY(60deg) rotate(22deg);animation-duration:17s}.pricing-center{width:130px;height:130px;border-radius:32px;background:linear-gradient(140deg,#e0afff,#a036e2);display:grid;place-items:center;color:#fff;font-size:80px;box-shadow:0 0 80px #b664e99c;transform:rotate(-10deg)}.pricing-copy p{max-width:540px;color:var(--muted);line-height:2;margin:18px 0 23px}.pricing-points{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}.pricing-points span{font-size:11px;background:#b664e917;color:var(--text);padding:7px 10px;border-radius:8px;border:1px solid #b664e937} .seo-section{padding:80px clamp(24px,4.1vw,74px);background:var(--bg)}.seo-intro{width:100%}.seo-section h2{font-size:clamp(26px,3vw,40px)}.seo-intro p{color:var(--muted);font-size:13px}.seo-toggle{margin-top:10px}.seo-text{box-sizing:border-box;width:100%;margin-top:28px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px;padding:26px 32px;color:var(--muted);font-size:15px;line-height:1.9;max-height:500px;overflow:auto}.seo-text[hidden]{display:none}.seo-text h2{font-size:22px;color:var(--text);margin:18px 0 8px}.seo-text h3{font-size:17px;color:var(--text);margin:18px 0 4px}.seo-text p{margin:5px 0 14px}.seo-text ul{padding-right:21px}.seo-text li{margin:4px 0}.seo-text strong{color:var(--text)}.seo-text a{color:var(--purple-soft);text-decoration:underline} .footer{background:var(--panel);border-top:1px solid var(--stroke);padding:57px clamp(24px,4.1vw,74px) 28px}.footer-top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}.footer-brand{font-size:24px;font-weight:900;color:var(--text)}.footer-brand span{color:var(--purple-soft)}.footer p{color:var(--muted);font-size:12px}.footer-top>div{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.footer-top strong{font-size:13px;margin-bottom:6px}.footer-top a:not(.footer-brand){color:var(--muted);font-size:12px}.footer-top a:hover{color:var(--purple-soft)}.footer-bottom{border-top:1px solid var(--stroke);padding-top:20px;margin-top:40px;display:flex;justify-content:space-between;gap:15px;color:var(--subtle);font-size:11px}.bottom-dock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:19;display:flex;gap:3px;padding:5px;background:#271e2ddf;backdrop-filter:blur(22px);border:1px solid #ffffff2b;border-radius:18px;box-shadow:0 18px 55px #0008;direction:rtl;color:#fff}.bottom-dock a{width:70px;height:54px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;line-height:1.4;transition:background .2s}.bottom-dock a:hover,.bottom-dock .dock-home{background:#b664e9;box-shadow:0 5px 15px #b664e952}.bottom-dock a span{font-size:20px;line-height:26px}.handoff-dialog{border:1px solid var(--stroke);border-radius:22px;background:var(--panel);color:var(--text);padding:30px;max-width:min(480px,calc(100vw - 28px));width:100%;box-shadow:0 30px 100px #000a}.handoff-dialog::backdrop{background:#0e0712b8;backdrop-filter:blur(7px)}.dialog-close{position:absolute;top:15px;left:15px;border:1px solid var(--stroke);border-radius:9px;background:var(--panel-2);color:var(--text);font-size:20px;width:31px;height:31px}.dialog-icon{color:var(--purple-soft);font-size:31px}.handoff-dialog h2{font-size:24px;margin:6px 0}.handoff-dialog p{color:var(--muted);font-size:12px;line-height:1.9}.handoff-summary{background:var(--panel-2);border:1px solid var(--stroke);border-radius:12px;padding:13px 15px;font-size:12px;margin:18px 0;overflow-wrap:anywhere}.handoff-summary div{padding:5px 0}.handoff-summary b{color:var(--purple-soft);margin-left:8px}.dialog-actions{display:flex;gap:9px;flex-wrap:wrap} @keyframes pulse{50%{box-shadow:0 0 0 9px #d89aff0e}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes wave{to{height:10px}}@keyframes orbit{to{rotate:360deg}} @media(max-width:1100px){.header-nav{gap:14px}.header-nav a{font-size:11px}.site-header{padding:0 25px}.hero-content{width:72%}.section{padding:78px 30px}.seo-section{padding:70px 30px}.footer{padding-right:30px;padding-left:30px}} @media(max-width:820px){.app-shell{display:block}.rail{display:none}.site-header{height:64px;padding:0 18px}.brand{min-width:0}.header-nav{display:none}.header-actions{margin-right:auto}.login-link{display:none}.hero{min-height:580px}.hero-content{width:min(690px,85%);padding:110px 30px 70px 10px}.hero h1{font-size:clamp(52px,8vw,74px)}.creator-grid{gap:12px}.creator-card{padding:17px}.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-item{min-height:290px}.tool-grid{grid-template-columns:repeat(2,1fr)}.pricing-section{gap:10px}.pricing-visual{min-height:250px}.footer-top{grid-template-columns:repeat(2,1fr)}.bottom-dock{bottom:8px}} @media(max-width:620px){html{scroll-padding-top:68px}.site-header{height:62px}.brand img{width:95px}.header-cta{padding:9px 11px;font-size:11px}.theme-top{width:34px;height:34px}.hero{min-height:655px}.hero-image{background-position:36% center}.hero-shade{background:linear-gradient(270deg,#0c070fe8 0%,#0c070fa5 70%,#0c070f4d),linear-gradient(0deg,#0c070fde,transparent 52%)}.hero-content{width:100%;padding:100px 24px 65px}.hero h1{font-size:clamp(45px,12.5vw,65px);margin-top:22px}.hero p{max-width:420px;font-size:14px}.hero-actions{gap:8px}.btn-large{padding:11px 15px;font-size:12px}.hero-index{margin-top:65px}.hero-edge,.hero-scroll{display:none}.eyebrow{font-size:10px;gap:7px}.model-ticker{height:48px}.ticker-label{padding:0 15px;font-size:10px}.ticker-track{font-size:10px;gap:19px}.section{padding:69px 18px}.section-head{display:block;margin-bottom:24px}.section h2{font-size:33px}.section-head p{font-size:12px}.section-aside{display:none}.creator-grid{grid-template-columns:1fr;gap:12px}.creator-card{padding:18px}.card-fields{gap:9px}.studio-note{line-height:1.7}.feature-banner{min-height:385px}.feature-photo{background-position:36% 35%}.feature-banner:after{background:linear-gradient(270deg,#0c080feb,#0c080fb3 72%,#0c080f75)}.feature-content{padding:55px 21px}.feature-banner h2{font-size:36px}.feature-content p{font-size:13px}.gallery-tabs{overflow:auto;width:max-content;max-width:100%;margin-top:20px}.gallery-tabs button{padding:8px 13px}.gallery-grid{grid-template-columns:1fr 1fr;gap:9px}.gallery-item{min-height:240px;border-radius:12px}.gallery-item:first-child{grid-column:1/-1;min-height:310px}.gallery-caption{padding:12px}.gallery-caption strong{font-size:13px}.gallery-caption small{font-size:10px}.text-art,.audio-art{padding:16px}.text-art .sample-quote{font-size:19px}.gallery-foot{display:block;line-height:1.8}.gallery-foot a{margin-top:10px}.tool-grid{gap:9px}.tool-card{min-height:174px;padding:15px;border-radius:13px}.tool-card strong{font-size:13px}.tool-card small{font-size:10px;line-height:1.5}.tool-arrow{left:12px;top:9px;font-size:16px}.coming{flex-wrap:wrap;gap:6px 10px;padding:13px}.pricing-section{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0}.pricing-visual{min-height:200px}.pricing-orbit{height:170px;width:170px}.orbit-two{height:225px;width:225px}.pricing-center{height:90px;width:90px;font-size:60px}.pricing-copy h2{font-size:35px}.pricing-copy p{font-size:12px}.pricing-points span{font-size:10px}.seo-section{display:block;padding:65px 18px}.seo-intro{position:static}.seo-text{margin-top:25px;padding:20px;max-height:600px}.footer{padding:45px 18px 100px}.footer-top{gap:25px 15px}.footer-bottom{display:block}.footer-bottom span{display:block}.bottom-dock{left:8px;right:8px;bottom:7px;transform:none;justify-content:space-around;border-radius:15px}.bottom-dock a{width:auto;flex:1;height:52px}.handoff-dialog{padding:23px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} .feature-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.feature-pill{border:1px solid var(--stroke);background:var(--panel-2);color:var(--muted);font-size:10px;border-radius:20px;padding:5px 10px}.feature-pill:hover{border-color:var(--purple-soft)}.feature-pill[aria-pressed=true]{border-color:var(--purple);background:#b664e924;color:var(--purple-soft)}.card-error{color:var(--danger);font-size:11px;margin-top:9px}.card-error[hidden]{display:none} .menu-toggle{display:none}.mobile-menu[hidden]{display:none}@media(max-width:820px){.menu-toggle{display:grid}.mobile-menu{display:flex;flex-direction:column;position:absolute;top:63px;right:10px;left:10px;background:var(--panel);border:1px solid var(--stroke);box-shadow:var(--shadow);border-radius:14px;padding:10px}.mobile-menu a{padding:10px 13px;border-radius:9px;color:var(--text);font-size:13px}.mobile-menu a:hover{background:var(--panel-3);color:var(--purple-soft)}} html[data-theme=light]{--purple-soft:#a239e3}.hero-image{animation:heroDrift 22s ease-in-out infinite alternate}.hero-content{animation:riseIn .8s both}.creator-card{animation:riseIn .6s both}.creator-card:nth-child(2){animation-delay:.08s}.creator-card:nth-child(3){animation-delay:.16s}.creator-card:nth-child(4){animation-delay:.24s}.gallery-item{animation:riseIn .45s both}.gallery-item:nth-child(2){animation-delay:.07s}.gallery-item:nth-child(3){animation-delay:.14s}@keyframes heroDrift{to{background-position:46% 52%;scale:1.04}}@keyframes riseIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.hero-image,.hero-content,.creator-card,.gallery-item{animation:none}} .price-example{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(320px,88%);padding:27px;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(18px);border:1px solid var(--purple-soft);border-radius:23px;box-shadow:0 20px 65px #0005;transform:rotate(-4deg)}.price-example-label{color:var(--purple-soft);font-weight:700;font-size:12px}.price-example strong{font-size:clamp(31px,4vw,47px);line-height:1.2;white-space:nowrap}.price-example strong small{font-size:17px}.price-example>span:nth-of-type(2){color:var(--text);font-size:12px;direction:ltr;text-align:right}.price-example>small{border-top:1px solid var(--stroke);padding-top:10px;color:var(--muted);font-size:10px;line-height:1.6}@media(max-width:620px){.price-example{padding:18px;width:275px}.price-example strong{font-size:31px}} /* Header: compact category navigation inspired by VidaxAI, with Hoosheno destinations. */ .site-header{--header-h:74px;overflow:visible}.header-nav{gap:3px;align-self:stretch;min-width:0}.nav-item{position:relative;display:flex;align-items:center;flex:none}.nav-trigger,.nav-direct{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid transparent;border-radius:10px;padding:0 11px;background:transparent;color:var(--muted);font:700 12px Dana;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}.header-nav .nav-direct{color:var(--muted);font-size:12px}.nav-trigger:hover,.nav-trigger[aria-expanded=true],.header-nav .nav-direct:hover{background:#b664e91e;color:var(--text);border-color:#b664e931}.nav-trigger[aria-expanded=true]{color:var(--purple-soft)}.nav-chevron{font-size:15px;line-height:1;color:var(--purple-soft);transition:transform .2s}.nav-trigger[aria-expanded=true] .nav-chevron{transform:rotate(180deg)}.header-nav .nav-price{color:var(--purple-soft)}.mega-menu[hidden],.mobile-category-panel[hidden],.menu-scrim[hidden]{display:none}.mega-menu{position:absolute;top:calc(100% + 17px);right:-10px;width:min(590px,calc(100vw - 120px));z-index:25;background:var(--panel);color:var(--text);border:1px solid var(--stroke);border-radius:19px;box-shadow:0 25px 85px #0009;overflow:hidden;animation:megaIn .2s ease-out both}.mega-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;padding:12px}.mega-spotlight{min-height:248px;border-radius:13px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#301a3d}.mega-spotlight:before{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;transition:scale .4s}.mega-spotlight:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0d0810f7,#0d08106b 67%,#0d081026)}.mega-spotlight:hover:before{scale:1.08}.mega-spotlight.video:before{background-image:url('assets/tehran-film-spot.webp')}.mega-spotlight.image:before{background-image:url('assets/perfume-spot.webp')}.mega-spotlight.text:before{background-image:url('assets/studio-text.webp')}.mega-spotlight.audio:before{background-image:url('assets/studio-audio.webp')} .mega-spotlight-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .mega-routes.is-many{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px;align-content:start} .mega-routes.is-many .mega-label{grid-column:1/-1}.mega-spotlight.edit:before{background-image:url('assets/interior-spot.webp')}.mega-eyebrow{font-size:10px;color:#efd4ff;font-weight:700;margin-bottom:11px}.mega-spotlight strong{font-size:20px;line-height:1.5;max-width:180px}.mega-spotlight a{font-size:11px!important;color:#fff!important;background:#b664e9;padding:7px 11px;border-radius:8px;margin-top:13px}.mega-spotlight a:hover{background:#a643e4}.mega-routes{padding:9px 5px 0 0}.mega-label{display:block;color:var(--subtle);font-size:10px;font-weight:700;margin:0 0 7px}.mega-link{display:flex;gap:10px;align-items:center;border-radius:11px;padding:8px;color:var(--text)!important;transition:background .2s}.mega-link:hover{background:var(--panel-2)}.mega-link-icon{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:10px;background:#b664e91f;color:var(--purple-soft);font-size:18px}.mega-link strong{font-size:12px;display:block;line-height:1.45}.mega-link small{font-size:10px;color:var(--muted);display:block;line-height:1.5}.mega-arrow{margin-right:auto;color:var(--purple-soft);font-size:15px}.mega-footer{border-top:1px solid var(--stroke);padding:13px 17px;display:flex;justify-content:space-between;gap:12px;align-items:end}.mega-chips{display:flex;flex-wrap:wrap;gap:6px}.mega-chip{border:1px solid var(--stroke);border-radius:20px;padding:5px 9px;background:var(--panel-2);color:var(--text)!important;font:700 10px Dana!important;white-space:nowrap;transition:background .2s,border-color .2s}.mega-chip:hover{border-color:var(--purple);background:#b664e926}.mega-all{color:var(--purple-soft)!important;font-size:10px!important;white-space:nowrap;padding-bottom:6px}.menu-scrim{display:none}@keyframes megaIn{from{opacity:0;translate:0 -7px}to{opacity:1;translate:0 0}} @media(max-width:1120px){.header-nav{display:none}.menu-toggle{display:grid}.site-header{padding:0 23px}.menu-scrim{display:block;position:fixed;inset:var(--header-h) 0 0;background:#05060ab8;backdrop-filter:blur(4px);z-index:21}.mobile-menu{display:block;position:fixed;top:var(--header-h);right:0;left:auto;bottom:0;width:min(386px,100vw);max-height:none;overflow:auto;border:1px solid var(--stroke);border-top:0;border-radius:0 0 0 20px;padding:20px;background:var(--panel);box-shadow:-25px 15px 65px #0008;z-index:22;animation:drawerIn .23s ease-out both}.mobile-menu[hidden]{display:none}.mobile-menu-head{display:flex;flex-direction:column;gap:2px;padding:5px 3px 17px;border-bottom:1px solid var(--stroke);margin-bottom:10px}.mobile-menu-head strong{font-size:21px;line-height:1.4}.mobile-menu-head span{font-size:11px;color:var(--muted)}.mobile-category{border-bottom:1px solid var(--stroke)}.mobile-category-trigger{width:100%;display:flex;align-items:center;gap:11px;text-align:right;padding:12px 3px;border:0;background:transparent;color:var(--text)}.mobile-category-icon{width:38px;height:38px;border-radius:11px;background:#b664e920;display:grid;place-items:center;color:var(--purple-soft);font-size:20px;flex:none}.mobile-category-trigger strong{display:block;font-size:13px}.mobile-category-trigger small{display:block;font-size:10px;color:var(--muted)}.mobile-category-chevron{font-size:18px;color:var(--purple-soft);margin-right:auto;transition:transform .2s}.mobile-category-trigger[aria-expanded=true] .mobile-category-chevron{transform:rotate(180deg)}.mobile-category-panel{background:var(--panel-2);border-radius:10px;padding:4px 11px;margin:0 0 10px 0}.mobile-category-panel a{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;color:var(--text);border-bottom:1px solid var(--stroke);font-size:11px}.mobile-category-panel a:last-child{border-bottom:0;color:var(--purple-soft);font-weight:700}.mobile-menu-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:19px}.mobile-menu-bottom a{display:block;text-align:center;background:var(--panel-2);border:1px solid var(--stroke);border-radius:9px;padding:9px 6px;color:var(--text);font-size:11px}.mobile-menu-bottom a:hover{border-color:var(--purple)}body.menu-open{overflow:hidden}@keyframes drawerIn{from{opacity:0;translate:30px 0}to{opacity:1;translate:0 0}}} @media(max-width:820px){.site-header{--header-h:64px;padding:0 18px}} @media(max-width:620px){.site-header{--header-h:62px}.mobile-menu{width:min(360px,94vw);padding:17px}.menu-toggle{width:34px;height:34px}} @media(prefers-reduced-motion:reduce){.mega-menu,.mobile-menu{animation:none}.mega-spotlight:before{transition:none}} .workspace{--header-h:74px}@media(max-width:820px){.workspace{--header-h:64px}}@media(max-width:620px){.workspace{--header-h:62px}}@media(max-width:1120px){.menu-scrim{z-index:28}.mobile-menu{z-index:29}} .workspace{overflow:clip} .nav-item[data-nav-item=edit] .mega-menu{right:-10px;left:auto;width:min(590px,calc(100vw - 670px))} /* Updated navigation: hover on desktop, balanced mobile header. */ .mega-menu{top:calc(100% - 1px)} @media(max-width:1120px){ .site-header{display:grid;grid-template-columns:1fr auto 1fr;gap:0;padding-inline:23px} .menu-toggle{grid-column:1;grid-row:1;justify-self:start;min-width:38px;min-height:38px} .brand{grid-column:2;grid-row:1;justify-self:center} .header-actions{grid-column:3;grid-row:1;justify-self:end;margin:0} .header-cta{display:none} .login-link{display:inline-flex;padding:8px 14px} .mobile-menu-bottom button{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;background:var(--panel-2);border:1px solid var(--stroke);border-radius:9px;padding:9px 6px;color:var(--text);font-size:11px;min-height:42px} .mobile-menu-bottom button:hover{border-color:var(--purple)} .mobile-theme-icon{font-size:16px;line-height:1} } @media(max-width:620px){.site-header{padding-inline:15px}.login-link{font-size:12px;padding:7px 12px}.brand img{width:95px}} /* Four concise plan tables; exact prices and allowances are visual placeholders. */ .pricing-preview{display:block;min-height:0;padding-top:78px;padding-bottom:70px;background:radial-gradient(circle at 85% 10%,#b664e91c,transparent 37%),var(--panel)} .pricing-heading{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:28px} .pricing-heading h2{font-size:clamp(30px,3.2vw,48px)} .pricing-heading p{max-width:650px;color:var(--muted);font-size:13px;line-height:1.85;margin:10px 0 0} .pricing-demo-badge{color:var(--purple-soft);border:1px solid #b664e959;background:#b664e912;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:700;white-space:nowrap} .pricing-period-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-4px 0 22px} .pricing-period-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid #b664e970;border-radius:13px;background:#b664e912} .pricing-period-switch button{display:flex;align-items:center;gap:7px;min-height:39px;padding:7px 14px;border:1px solid #b664e94f;border-radius:9px;background:#b664e920;color:#e8c3ff;font-size:12px;font-weight:800;transition:background .2s,color .2s,border-color .2s} .pricing-period-switch button:hover{color:#fff;background:#b664e942;border-color:#cd94f0} .pricing-period-switch button.is-active{color:#fff;background:var(--purple);border-color:var(--purple);box-shadow:0 5px 17px #b664e953} html[data-theme=light] .pricing-period-switch button:not(.is-active){color:#8b2bc7;background:#f7eaff;border-color:#e4b8ff} html[data-theme=light] .pricing-period-switch button:not(.is-active):hover{color:#6e209f;background:#efd5ff;border-color:#bf78ec} .pricing-period-switch small{font-size:10px;font-weight:600;opacity:.8} .pricing-period-switch em{font-size:9px;font-style:normal;padding:3px 6px;border-radius:5px;color:var(--purple-soft);background:#b664e91d} html[data-theme=light] .pricing-period-switch button:not(.is-active) em{color:#8b2bc7;background:#ebcaff} .pricing-period-switch .is-active em{color:#fff;background:#ffffff2b} .pricing-period-caption{font-size:11px;color:var(--muted)} .pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px} .plan-card{min-width:0;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--stroke);border-radius:19px;padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s} .plan-card:hover{transform:translateY(-3px);border-color:#b664e98c;box-shadow:var(--shadow)} .plan-featured{border-color:var(--purple);background:linear-gradient(160deg,#b664e918,transparent 52%),var(--bg);box-shadow:0 9px 40px #b664e91d} .plan-tag{display:inline-block;color:var(--purple-soft);font-size:10px;font-weight:700;min-height:21px} .plan-card h3{font-size:21px;line-height:1.35;margin:5px 0 10px} .plan-price{display:flex;align-items:baseline;gap:6px;min-height:44px} .plan-price strong{font-size:clamp(21px,2vw,28px);line-height:1.4;font-weight:900;white-space:nowrap} .plan-price span{font-size:11px;color:var(--muted)} .plan-period{margin:0;color:var(--muted);font-size:10px} .plan-custom .plan-price strong{font-size:clamp(19px,1.8vw,25px)} .plan-rows{border-top:1px solid var(--stroke);margin-top:12px;padding-top:5px} .plan-rows>div{display:flex;align-items:center;justify-content:space-between;gap:7px;border-bottom:1px solid var(--stroke);padding:7px 0;font-size:10px;line-height:1.5} .plan-rows>div:last-child{border-bottom:0} .plan-rows span{color:var(--muted)} .plan-rows b{font-weight:700;text-align:left} .plan-detail{width:100%;min-height:38px;margin-top:auto;padding:8px 10px;border:1px solid var(--purple);border-radius:10px;background:#b664e914;color:var(--purple-soft);font-weight:700;font-size:11px;transition:background .2s,color .2s} .plan-detail:hover{background:var(--purple);color:#fff} .pricing-disclaimer{font-size:11px;color:var(--muted);line-height:1.75;margin:18px 0 0} .pricing-swipe-hint{display:none} .pricing-dialog{position:fixed;width:min(620px,calc(100vw - 28px));max-width:none;max-height:min(88dvh,790px);height:min(88dvh,790px);padding:0;overflow:hidden;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;color:var(--text);box-shadow:0 30px 100px #0009} .pricing-dialog[open]{display:flex;flex-direction:column} .pricing-dialog::backdrop{background:#0e0712bd;backdrop-filter:blur(6px)} .pricing-dialog-head{flex:none;padding:18px 23px 16px;border-bottom:1px solid var(--stroke);background:radial-gradient(circle at 0 0,#b664e91d,transparent 46%),var(--panel)} .pricing-dialog-eyebrow{display:flex;align-items:center;justify-content:space-between;color:var(--purple-soft);font-size:10px;font-weight:800} .pricing-dialog-eyebrow .dialog-close{position:static;width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:9px;background:var(--panel-2);color:var(--text);font-size:22px;line-height:1} .pricing-dialog h2{font-size:25px;line-height:1.35;margin:2px 0 4px} .pricing-dialog-head>p{margin:0;color:var(--muted);font-size:12px;line-height:1.7} .pricing-dialog-price{display:flex;align-items:baseline;gap:8px;margin-top:10px} .pricing-dialog-price strong{font-size:24px;font-weight:900;color:var(--text)} .pricing-dialog-price span{font-size:11px;color:var(--muted)} .pricing-dialog-body{flex:1;min-height:0;overflow-y:auto;padding:20px 23px 24px;scrollbar-width:thin} .pricing-dialog-body:focus-visible{outline:2px solid var(--purple);outline-offset:-3px} .pricing-dialog-body section+section{margin-top:25px} .pricing-dialog-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px} .pricing-dialog-section-title h3{font-size:15px;line-height:1.5;margin:0} .pricing-dialog-section-title button{flex:none;padding:6px 9px;border:1px solid #b664e94f;border-radius:8px;background:#b664e912;color:var(--purple-soft);font-size:10px;font-weight:700;line-height:1.5} .pricing-dialog-section-title button:hover{color:var(--text);background:#b664e925} .pricing-estimate-explainer{margin:0 0 10px;padding:10px 12px;border:1px solid #b664e94f;border-radius:9px;background:#b664e912;color:var(--text);font-size:11px;line-height:1.8} .pricing-estimate-explainer[hidden]{display:none} .pricing-dialog-table{display:flex;flex-direction:column;gap:6px} .pricing-dialog-table>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;min-width:0;padding:11px 14px;background:var(--panel-2);border:1px solid var(--stroke);border-radius:11px} .pricing-dialog-table>p{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:11px;font-weight:600}.pricing-dialog-table>p::before,.pricing-dialog-table>p::after{content:"";flex:1;height:1px;background:var(--stroke)} .pricing-dialog-table strong{color:var(--text);font-size:14px;line-height:1.6;overflow-wrap:anywhere} .pricing-features-intro{margin:-3px 0 12px;color:var(--muted);font-size:11px;line-height:1.7} .pricing-feature-list{display:grid;gap:2px} .pricing-feature-list>div{display:flex;gap:11px;align-items:flex-start;padding:12px 2px;border-bottom:1px solid var(--stroke)} .pricing-feature-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #b664e942;border-radius:9px;background:#b664e916;color:var(--purple-soft);font-size:17px} .pricing-feature-list strong{display:block;font-size:12px;line-height:1.5} .pricing-feature-list p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.7} .pricing-feature-list small{margin-right:7px;color:var(--purple-soft);font-size:9px} .pricing-feature-soon{opacity:.7} .pricing-dialog .pricing-dialog-note{margin:17px 0 0;color:var(--muted);font-size:10px;line-height:1.8} .pricing-dialog-foot{display:flex;gap:9px;flex:none;padding:13px 23px;background:var(--panel);border-top:1px solid var(--stroke)} .pricing-dialog-foot .btn{flex:1;min-height:41px} .pricing-dialog-done{min-width:125px;padding:10px 14px;border:1px solid var(--stroke);border-radius:9px;color:var(--text);background:var(--panel-2);font-size:11px;font-weight:800} .pricing-dialog-done:hover{border-color:var(--purple);color:var(--purple-soft)} @media(max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.pricing-preview{display:block;padding-top:58px;padding-bottom:54px}.pricing-heading{display:block;margin-bottom:20px}.pricing-heading h2{font-size:31px}.pricing-heading p{font-size:11px}.pricing-demo-badge{display:inline-block;margin-top:12px}.pricing-period-row{display:block;margin:0 0 16px}.pricing-period-switch{width:100%;justify-content:center}.pricing-period-switch button{flex:1;justify-content:center;padding:7px 5px;gap:4px;font-size:11px}.pricing-period-switch em{font-size:8px}.pricing-period-caption{display:block;margin-top:8px;font-size:10px}.pricing-grid{gap:9px}.plan-card{padding:13px;border-radius:14px}.plan-card h3{font-size:17px;margin:1px 0 5px}.plan-price{display:block;min-height:39px}.plan-price strong{font-size:20px;display:block}.plan-price span{display:block;margin-top:-4px;font-size:9px}.plan-custom .plan-price strong{font-size:18px}.plan-rows{margin-top:7px}.plan-rows>div{display:block;padding:5px 0;font-size:9px}.plan-rows b{display:block;text-align:right}.plan-detail{font-size:10px;min-height:34px;margin-top:8px}.pricing-dialog{width:calc(100vw - 20px);height:min(88dvh,760px);max-height:88dvh;border-radius:15px}.pricing-dialog-head{padding:14px 15px}.pricing-dialog h2{font-size:22px}.pricing-dialog-body{padding:16px 15px 20px}.pricing-dialog-foot{padding:11px 15px}.pricing-dialog-done{min-width:105px}} @media(max-width:620px){.pricing-preview{padding-top:50px;padding-bottom:44px}.pricing-heading{margin-bottom:12px}.pricing-swipe-hint{display:block;color:var(--muted);font-size:10px;margin-bottom:12px}.pricing-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(236px,78vw);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-bottom:10px}.plan-card{scroll-snap-align:start}.pricing-disclaimer{margin-top:11px}} /* The same Hoosheno lockup is used in the header and footer; the rail uses its symbol alone. */ .brand,.footer-brand{display:inline-flex;align-items:center;gap:5px;width:max-content;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text);white-space:nowrap} .logo-symbol{display:block;flex:none;width:42px;height:48px;background:url('assets/hoosheno-mark-v2.webp') center/contain no-repeat;filter:drop-shadow(0 2px 7px #b664e950)} .logo-wordmark{font-size:22px;font-weight:900;line-height:1;letter-spacing:-.055em;color:var(--text)} .footer-brand .logo-wordmark{font-size:22px;color:var(--text)} .rail-logo{width:54px;height:54px;flex:none;margin-bottom:14px;border:1px solid #b664e963;border-radius:17px;background:radial-gradient(circle at 50% 30%,#3f2052,#1f1625 70%);box-shadow:0 8px 24px #b664e92b, inset 0 1px #ffffff18} .rail-logo:hover{border-color:var(--purple-soft);box-shadow:0 9px 28px #b664e955} .rail-logo .logo-symbol{filter:drop-shadow(0 2px 7px #0009)} @media(min-width:621px) and (max-width:900px){.pricing-swipe-hint{display:block;color:var(--muted);font-size:11px;margin-bottom:13px}.pricing-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(290px,41vw);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-bottom:10px}.plan-card{scroll-snap-align:start}} @media(max-width:360px){.pricing-dialog-price{display:block}.pricing-dialog-price strong{display:block;font-size:20px}.pricing-dialog-price span{display:block;margin-top:1px}.pricing-dialog-section-title{align-items:flex-start;flex-direction:column;gap:6px}} /* AI support preview: persistent entry point, compact chat, both themes. */ .support-launcher{position:fixed;left:80px;bottom:24px;z-index:26;display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 16px 6px 8px;border:1px solid #d89aff;background:var(--purple);color:#fff;border-radius:15px;box-shadow:0 12px 35px #5b1b836b;font-weight:800;font-size:12px;transition:transform .2s,box-shadow .2s,background .2s} .support-launcher:hover,.support-launcher[aria-expanded=true]{transform:translateY(-3px);background:var(--purple-strong);box-shadow:0 16px 40px #5b1b8380} .support-launcher-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ffffff29;font-size:21px;line-height:1} .support-panel[hidden]{display:none} .support-panel{position:fixed;left:80px;bottom:86px;z-index:27;display:flex;flex-direction:column;width:min(390px,calc(100vw - 36px));height:min(500px,calc(100dvh - 182px));min-height:0;overflow:hidden;background:var(--panel);color:var(--text);border:1px solid var(--stroke);border-radius:20px;box-shadow:0 24px 85px #0009;animation:megaIn .2s ease-out both} .support-head{display:flex;align-items:center;gap:10px;padding:17px 18px 14px;border-bottom:1px solid var(--stroke);background:linear-gradient(110deg,#b664e917,transparent 75%)} .support-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--purple);color:#fff;font-size:24px} .support-head h2{font-size:17px;line-height:1.45;margin:0} .support-head p{font-size:10px;color:var(--muted);line-height:1.5;margin:1px 0 0} .support-close{margin-right:auto;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--stroke);border-radius:9px;background:var(--panel-2);color:var(--text);font-size:22px;line-height:1} .support-close:hover{background:var(--panel-3)} .support-preview-note{margin:12px 16px 0;padding:7px 10px;border-radius:8px;border:1px solid #b664e942;background:#b664e912;color:var(--purple-soft);font-size:10px;text-align:center;line-height:1.5} .support-messages{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;padding:16px;scrollbar-width:thin} .support-message{max-width:87%;padding:11px 13px;border-radius:15px;font-size:12px;line-height:1.85;overflow-wrap:anywhere} .support-message p{margin:4px 0 0} .support-message.assistant{align-self:flex-end;background:var(--panel-2);border:1px solid var(--stroke);border-bottom-left-radius:5px} .support-message.user{align-self:flex-start;background:var(--purple);color:#fff;border-bottom-right-radius:5px} .support-message-label{display:block;font-size:10px;font-weight:800;color:var(--purple-soft)} .support-message.user .support-message-label{color:#f5e4ff} .support-message a{display:inline-block;margin-top:7px;color:var(--purple-soft);font-weight:800;text-decoration:underline;text-underline-offset:3px} .support-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px} .support-suggestions button{min-height:33px;border:1px solid var(--stroke);border-radius:999px;background:var(--panel-2);color:var(--text);padding:5px 10px;font-size:10px;font-weight:700} .support-suggestions button:hover{border-color:var(--purple);color:var(--purple-soft)} .support-form{padding:12px 16px 16px;border-top:1px solid var(--stroke);background:var(--panel)} .support-form label{display:block;font-size:11px;font-weight:700;margin-bottom:7px} .support-composer{display:flex;gap:7px;align-items:end;padding:6px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel-2)} .support-composer:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px #b664e922} .support-composer textarea{flex:1;min-width:0;min-height:42px;max-height:110px;resize:vertical;padding:6px 7px;border:0;outline:0;background:transparent;color:var(--text);font-size:11px;line-height:1.65} .support-composer textarea::placeholder{color:var(--subtle)} .support-composer button{min-width:65px;min-height:37px;border:0;border-radius:9px;background:var(--purple);color:#fff;font-size:11px;font-weight:800} .support-composer button:hover{background:var(--purple-strong)} .support-error{margin:6px 2px 0;color:var(--danger);font-size:10px} .support-error[hidden]{display:none} @media(max-width:620px){.support-launcher{left:12px;bottom:78px;min-height:45px;padding:5px 12px 5px 6px;font-size:10px;border-radius:13px}.support-launcher-symbol{width:31px;height:31px;font-size:19px}.support-panel{left:10px;right:10px;bottom:136px;width:auto;height:min(500px,calc(100dvh - 212px));border-radius:16px}.support-head{padding:13px 14px}.support-preview-note{margin:9px 12px 0}.support-messages{padding:12px}.support-suggestions{padding:0 12px 9px}.support-form{padding:10px 12px 12px}} @media(max-width:360px){.support-launcher-text{max-width:97px;line-height:1.25}.support-panel{bottom:133px}} @media(min-width:621px) and (max-width:900px){.support-launcher{bottom:90px}.support-panel{bottom:152px;height:min(500px,calc(100dvh - 242px))}} @media(prefers-reduced-motion:reduce){.support-panel{animation:none}.support-launcher{transition:none}} /* =================================================================== Hoosheno implementation layer (on top of the approved V2 design) =================================================================== */ /* Dana draws Latin digits as Persian ones, so "GPT Image 2" would read "GPT Image ۲". Only the digit range comes from a system face, and only where Latin text is expected; prices keep Dana's Persian digits. */ @font-face{font-family:"hn-latin-digits";src:local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial");unicode-range:U+0030-0039} [dir=ltr],[dir=auto],.mega-chip,.select-trigger span,.select-menu li,.ticker-track,.tool-card small,.gallery-num,.line-number{font-family:"hn-latin-digits",Dana,system-ui,sans-serif} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Hero: a real (alt text, preloadable, can be the LCP element) instead of a CSS background. */ .hero-image{background:none} .hero-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%} @media(max-width:620px){.hero-image img{object-position:36% center}} /* The heading must never start invisible: it rises in, it does not fade in. */ .hero-content{animation:heroRise .8s both} @keyframes heroRise{from{translate:0 14px}to{translate:0 0}} .hero h1 .hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:9px 11px;font-size:12px;line-height:1.7;letter-spacing:0;color:#eac7ff;font-weight:700;margin-bottom:24px} @media(max-width:620px){.hero h1 .hero-kicker{font-size:10px;gap:6px 8px}} /* Pricing: the real packs */ a.plan-detail{display:flex;align-items:center;justify-content:center;text-decoration:none} .plan-list{border-top:1px solid var(--stroke);margin:12px 0 16px;padding-top:12px} .plan-list-label{display:block;color:var(--purple-soft);font-size:11px;font-weight:800;margin-bottom:6px} .plan-list ul{list-style:none;margin:0;padding:0;display:grid;gap:5px} .plan-list li{position:relative;padding-right:20px;font-size:12px;line-height:1.7;color:var(--text)} .plan-list li:before{content:"";position:absolute;right:2px;top:.55em;width:9px;height:5px;border:solid #3ecf8e;border-width:0 0 2px 2px;transform:rotate(-45deg)} .plan-custom-text{margin:0;color:var(--muted);font-size:12px;line-height:1.9} .plan-price strong{font-size:clamp(20px,1.9vw,26px)} .plan-custom .plan-price strong{font-size:clamp(17px,1.5vw,21px);white-space:normal} /* FAQ */ .faq-section{background:var(--bg)} .faq-list{display:grid;gap:10px;max-width:880px} .faq-item{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;transition:border-color .18s} .faq-item[open]{border-color:#b664e966} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;font-weight:700;font-size:14px;line-height:1.8;border-radius:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:after{content:"⌄";color:var(--purple-soft);font-size:18px;line-height:1;transition:transform .18s} .faq-item[open] summary:after{transform:rotate(180deg)} .faq-item summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .faq-answer{padding:0 20px 18px;color:var(--muted);font-size:13px;line-height:2} .faq-answer p{margin:0} /* Blog */ .blog-section{background:var(--panel);border-top:1px solid var(--stroke)} .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .blog-card{display:flex;flex-direction:column;min-width:0;background:var(--bg);border:1px solid var(--stroke);border-radius:18px;overflow:hidden;transition:border-color .18s,transform .18s} .blog-card:hover{border-color:#b664e980;transform:translateY(-3px)} .blog-card-media{display:block;aspect-ratio:16/9;background:var(--panel-2);overflow:hidden} .blog-card-media img{width:100%;height:100%;object-fit:cover;display:block} .blog-card-body{padding:16px 18px 20px} .blog-card time{font-size:11px;color:var(--subtle)} .blog-card h3{font-size:15px;line-height:1.8;margin:6px 0 6px} .blog-card h3 a{color:var(--text)} .blog-card h3 a:hover{color:var(--purple-soft)} .blog-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.blog-grid{grid-template-columns:minmax(0,1fr)}} /* Intro text: all of it is in the HTML; collapsed only shortens the box. */ .seo-text{max-height:none;overflow:visible} .seo-text.is-collapsed{max-height:440px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)} .seo-section .seo-toggle{margin-top:14px} /* Footer additions */ .footer-socials{display:flex;align-items:center;gap:12px;margin-top:6px} .footer-socials a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--stroke);border-radius:10px;color:var(--muted)} .footer-socials a:hover{border-color:var(--purple-soft);color:var(--purple-soft)} .footer-socials svg{width:16px;height:16px} .footer-seal{margin-top:12px;width:92px;height:92px;background:#fff;border-radius:12px;padding:4px;line-height:0;box-sizing:border-box} .footer-seal img{width:84px;height:84px} /* Several components set their own display (grid, flex), which beats the browser's [hidden] rule; the gallery showed all four tabs at once. */ [hidden]{display:none!important} /* ---- Shared by every public page (2026-09-30, phase 3) ---- */ .logo-symbol{width:40px;height:45px;background:url('assets/hoosheno-mark-v2.webp') center/contain no-repeat} html[data-theme=light] .logo-symbol{filter:drop-shadow(0 2px 6px #b664e933)} .footer-socials{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:340px} .footer-socials li{margin:0} .footer-socials .social-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel-2);color:var(--muted);transition:color .18s,border-color .18s,background .18s} .footer-socials .social-btn:hover{color:var(--text);border-color:var(--purple-soft);background:var(--panel-3)} .footer-socials .social-btn:focus-visible{outline:2px solid var(--purple-soft);outline-offset:2px} .footer-socials svg{width:20px;height:20px;stroke-width:1.7} .social-letter{font:800 16px/1 Dana,sans-serif} .footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px} .footer-col strong{font-size:13px;margin-bottom:4px;color:var(--text)} .footer-col a{color:var(--muted);font-size:13px;line-height:1.7} .footer-col a:hover{color:var(--purple-soft)} .footer-about p{max-width:360px;line-height:1.9;font-size:13px} .footer-hours{color:var(--subtle);font-size:12px;line-height:1.8;margin-top:4px} @media(max-width:620px){.footer-col a{font-size:13px;padding:3px 0}.footer-about{grid-column:1/-1}} /* FAQ answers link into tools and pages */ .faq-answer a{color:var(--purple-soft);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} .faq-answer a:hover{text-decoration-thickness:2px} .faq-answer{font-family:"hn-latin-digits",Dana,system-ui,sans-serif} .hero-edge{font:700 11px Dana,sans-serif;letter-spacing:.04em} /* Home blog cards: the whole card opens the post (the title's link is stretched over it) */ .blog-card{position:relative} .blog-card h3 a:after{content:"";position:absolute;inset:0;border-radius:inherit} .blog-card:focus-within{outline:2px solid var(--focus);outline-offset:3px} .faq-list{max-width:none} /* Dock: only the item in use is purple; Home is not purple all the time */ .bottom-dock .dock-home{background:none;box-shadow:none} .bottom-dock a:hover{background:#ffffff14;box-shadow:none} .bottom-dock a.is-active,.bottom-dock a.is-active:hover{background:#b664e9;box-shadow:0 5px 15px #b664e952} .bottom-dock a:focus-visible{outline:2px solid #e1b1ff;outline-offset:2px} @media(min-width:621px){.bottom-dock a{width:62px}} /* Header: theme switch beside login; login shows at every width now that the start button is gone */ .header-actions .login-link{display:inline-flex} .header-theme{width:40px;height:40px;font-size:18px;border-radius:12px;color:var(--text)} .header-theme:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* ================= Model carousels (home.partials.models) ================= */ .models-section{background:var(--bg)} .model-row+.model-row{margin-top:48px} .model-row-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px} .model-row-head h3{font-size:clamp(18px,2vw,22px);margin:0 0 4px} .model-row-head p{margin:0;color:var(--muted);font-size:13px} .model-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .model-row-actions .inline-link{margin-inline-end:6px;white-space:nowrap} .model-arrow{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--stroke);background:var(--panel);color:var(--text);font-size:22px;line-height:1;cursor:pointer;transition:border-color .18s,opacity .18s} .model-arrow:hover{border-color:var(--purple-soft)} .model-arrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .model-arrow:disabled{opacity:.35;cursor:default} .model-track{list-style:none;margin:0;padding:4px 2px 10px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(170px,19vw,236px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none} .model-track::-webkit-scrollbar{display:none} .model-track:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:18px} .model-card{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:18px;overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s} .model-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 55%,var(--stroke))} .model-card:focus-within{outline:2px solid var(--focus);outline-offset:3px} .model-card-media{aspect-ratio:3/4;background:var(--panel-2);overflow:hidden;display:grid;place-items:center} .model-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .model-card:hover .model-card-media img{transform:scale(1.04)} .model-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px} .model-card-body h4{margin:0;font-size:15px;line-height:1.5;font-family:"hn-latin-digits",Dana,system-ui,sans-serif} .model-card-link{color:var(--text)} .model-card-link:after{content:"";position:absolute;inset:0} .model-card-link:focus-visible{outline:none} .model-card-body p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.8;font-family:"hn-latin-digits",Dana,system-ui,sans-serif} .model-card-body small{color:var(--subtle);font-size:11px} /* Cards without a picture (chat models, new models): the name on a colour field */ .model-card-mark{padding:18px;text-align:center;color:#fff;font:800 clamp(18px,2vw,24px)/1.3 "hn-latin-digits",Dana,system-ui,sans-serif;text-shadow:0 2px 14px #0005} .model-card:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 20% 10%,#cd94f0,transparent 60%),linear-gradient(160deg,#942bd6,#2f1340)} .model-card.tone-video:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 20% 10%,#ff7a59,transparent 60%),linear-gradient(160deg,#b8327a,#220f2e)} .model-card.tone-chat-anthropic:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#f4b393,transparent 60%),linear-gradient(160deg,#c65f3d,#3b1a12)} .model-card.tone-chat-openai:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#7ee0b5,transparent 60%),linear-gradient(160deg,#0f8a64,#062a22)} .model-card.tone-chat-google:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#d19df1,transparent 60%),linear-gradient(160deg,#952cd6,#2a0c3d)} .model-card.tone-chat-deepseek:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#cf99f0,transparent 60%),linear-gradient(160deg,#8d34c5,#280e38)} .model-card.tone-chat-x-ai:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#ab9ab5,transparent 60%),linear-gradient(160deg,#38303d,#07080b)} .model-card.tone-chat-qwen:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#dba2ff,transparent 60%),linear-gradient(160deg,#a13be0,#2b0f3d)} .model-card.tone-chat-moonshotai:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#d29ff1,transparent 60%),linear-gradient(160deg,#6d1ba0,#1f072e)} .model-card.tone-chat-z-ai:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#c9b3d6,transparent 60%),linear-gradient(160deg,#623f77,#1b0d24)} .model-card.tone-chat-tencent:not(:has(img)) .model-card-media{background:radial-gradient(120% 90% at 80% 10%,#d19df1,transparent 60%),linear-gradient(160deg,#881fc9,#230833)} @media(max-width:620px){.model-row-head{align-items:start}.model-row-actions .model-arrow{display:none}.model-track{grid-auto-columns:58vw;margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px}} @media(prefers-reduced-motion:reduce){.model-track{scroll-behavior:auto}.model-card,.model-card-media img{transition:none}.model-card:hover{transform:none}.model-card:hover .model-card-media img{transform:none}} /* Dock: frosted purple glass with a lit edge, so it reads as a menu at first glance on any background */ .bottom-dock{background:linear-gradient(135deg,rgba(182,100,233,.34),rgba(52,22,70,.62) 55%,rgba(33,14,44,.72));-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(225,177,255,.42);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 28px rgba(182,100,233,.28),inset 0 1px 0 rgba(255,255,255,.22)} .bottom-dock a{color:#f8eeff} .bottom-dock a:hover{background:rgba(255,255,255,.12)} @media(max-width:620px){.model-track{grid-auto-columns:44vw}.model-card-body h4{font-size:14px}} .model-track{scroll-snap-type:x proximity} [data-theme=light] .bottom-dock{background:linear-gradient(135deg,rgba(182,100,233,.62),rgba(88,34,122,.86) 55%,rgba(53,22,72,.9));border-color:rgba(182,100,233,.5);box-shadow:0 16px 40px rgba(63,20,90,.28),inset 0 1px 0 rgba(255,255,255,.25)} /* Mouse drag on the model carousels (home.js): no snapping or smooth scroll while the hand moves it */ @media(pointer:fine){.model-track{cursor:grab}} .model-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none} .model-track.is-dragging .model-card{pointer-events:none} .social-mark{width:19px!important;height:19px!important} /* The company's mark in the top corner of a chat model card (App\Support\BrandMarks) */ .model-card-media{position:relative} .model-card-logo{position:absolute;top:12px;inset-inline-start:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff26;border:1px solid #ffffff33;color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .model-card-logo svg{width:22px;height:22px;display:block} /* Video model cards: a short loop over the still, faded in while it plays (home.js) */ .model-card-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .24s cubic-bezier(.2,.8,.2,1);pointer-events:none} .model-card.is-playing .model-card-clip{opacity:1} @media(prefers-reduced-motion:reduce){.model-card-clip{display:none}} /* Pricing cards and dialog (2026-09-30): a one-line estimate on the card; the dialog's cells name the model the figure is priced on */ .plan-headline{margin:12px 0 14px;padding-top:12px;border-top:1px solid var(--stroke);color:var(--muted);font-size:12px;line-height:1.8} button.plan-detail{cursor:pointer;font-family:inherit} .pricing-dialog-table small{color:var(--muted);font-size:11px;line-height:1.6;overflow-wrap:anywhere} .pricing-custom-field{display:grid;gap:6px;margin-top:12px;font-size:12px;color:var(--muted)} .pricing-custom-field[hidden]{display:none} .pricing-custom-field input{min-height:44px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel-2);color:var(--text);padding:8px 12px;font:700 16px/1.4 hn-latin-digits,Dana,sans-serif;text-align:left} .pricing-custom-field input:focus-visible{outline:2px solid var(--purple-soft);outline-offset:2px} .pricing-custom-field input[aria-invalid=true]{border-color:#ff5c68} .pricing-custom-field small{min-height:1em;color:#ff5c68;font-size:11px} .pricing-dialog-body{max-inline-size:none} .pricing-dialog-table small,.pricing-dialog-table strong{font-family:hn-latin-digits,Dana,sans-serif} #pricing-dialog-title:focus{outline:none} /* Header login button: brand gradient with a light sweep every few seconds. Only transform/opacity animate; still for reduced motion. */ .login-cta{position:relative;isolation:isolate;overflow:hidden;gap:8px;color:#fff;border:1px solid #ffffff2e;background:linear-gradient(135deg,#b663e9 0%,#a643e4 48%,#9727dc 100%);box-shadow:0 6px 22px #b664e945,inset 0 1px 0 #ffffff33;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1)} .login-cta::before{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:46%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#fff0 0%,#ffffff0d 25%,#ffffff8a 50%,#ffffff0d 75%,#fff0 100%);transform:translateX(-170%) skewX(-18deg);animation:loginShine 5.6s cubic-bezier(.45,0,.2,1) 1.4s infinite} .login-cta:hover{color:#fff;border-color:#ffffff47;box-shadow:0 0 0 4px #b664e92e,0 12px 34px #b664e985,inset 0 1px 0 #ffffff40} .login-cta:hover::before{animation-duration:2.4s;animation-delay:0s} .login-cta:active{transform:translateY(0) scale(.97)} .login-cta:focus-visible{outline:2px solid var(--focus);outline-offset:3px} .login-cta__icon{flex:none;transition:transform .22s cubic-bezier(.2,.8,.2,1)} .login-cta:hover .login-cta__icon{transform:translateX(-3px)} html[data-theme=light] .login-cta{box-shadow:0 6px 18px #b664e933,inset 0 1px 0 #ffffff40} @media(max-width:620px){.login-cta__icon{display:none}} @keyframes loginShine{0%,64%{transform:translateX(-170%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}} @media(prefers-reduced-motion:reduce){.login-cta::before{animation:none;opacity:0}.login-cta,.login-cta__icon{transition:none}.login-cta:hover,.login-cta:hover .login-cta__icon{transform:none}} /* Trends links (the owner, 2026-10-05): a flame, the same in every theme. */ .hn-flame{color:#ff8a4c;flex:none;filter:drop-shadow(0 0 4px #ff8a4c66)} .nav-trends{gap:5px}.nav-trends .hn-flame{margin-inline-end:1px} .rail-trends .rail-icon{display:grid;place-items:center} .dock-trends span{display:grid;place-items:center;height:26px} @media(prefers-reduced-motion:no-preference){.rail-trends:hover .hn-flame,.nav-trends:hover .hn-flame{animation:hnFlame 1.2s ease-in-out infinite;transform-origin:50% 90%}} @keyframes hnFlame{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12,1.2) rotate(3deg)}} /* One rhythm for the whole landing page (the owner, 2026-10-06): every block - header, hero, ticker, trends banner, sections, feature banner, footer - starts at the same side gutter, and every section keeps the same space above and below. The values are the ones the sections already had (and front.css uses for the other pages). */ :root{--hn-gutter:clamp(24px,4.1vw,74px);--hn-section-y:104px} @media(max-width:1100px){:root{--hn-gutter:30px;--hn-section-y:78px}} @media(max-width:620px){:root{--hn-gutter:18px;--hn-section-y:69px}} .site-header{padding-inline:var(--hn-gutter)} .hero-content{padding-right:var(--hn-gutter)} .ticker-label{padding-right:var(--hn-gutter)} .section,.seo-section,.pricing-preview{padding-inline:var(--hn-gutter);padding-top:var(--hn-section-y);padding-bottom:var(--hn-section-y)} main>.trend-spot{margin:var(--hn-section-y) var(--hn-gutter)} .feature-content{padding-inline:var(--hn-gutter)} .footer{padding-inline:var(--hn-gutter)} /* Desktop brand (2026-10-07): while the side rail is on screen its logo is the mark, so the header shows the name alone, set against the rail as if it were the logo's caption; the rail's logo sits centred on the header bar and a light runs round its edge (violet to cyan, from the mark's own colours). */ @property --hn-rl-a{syntax:'';initial-value:0deg;inherits:false} @media(min-width:821px){ .site-header .brand .logo-symbol{display:none} .rail{padding-top:10px} .rail-logo{position:relative} .rail-logo:before,.rail-logo:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--hn-rl-a),transparent 0 52%,#9222d8 64%,var(--purple-soft) 74%,#a744e4 84%,#fff 88%,transparent 96%);animation:hn-rl-spin 4.2s linear infinite} .rail-logo:before{padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .rail-logo:after{z-index:-1;inset:-3px;filter:blur(8px);opacity:.9} } @media(min-width:1121px){.site-header{padding-inline-start:14px}} @keyframes hn-rl-spin{to{--hn-rl-a:360deg}} @media(prefers-reduced-motion:reduce){.rail-logo:before,.rail-logo:after{animation:none}} .plan-pay{margin:2px 0 0;font-size:12px;color:var(--muted)}.pricing-rate{margin:14px 0 0;font-size:13px;color:var(--text)} /* ---- Sliding banners (home/partials/banners, HomeBanners): two rows on a desktop, one on a phone. ---- */ .hb{padding:22px clamp(24px,4.1vw,74px) clamp(26px,3.2vw,48px);background:var(--bg)} .hb-row{position:relative;--gap:24px} .hb-row+.hb-row{margin-top:6px} .hb-row--featured{--per:3;--ar:16/9} .hb-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:8px;outline-offset:4px} .hb-viewport::-webkit-scrollbar{display:none} @media(hover:hover){.hb-viewport{cursor:grab}} .hb-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none} .hb-viewport.is-dragging .hb-link{pointer-events:none} .hb-row{--hb-glow:#22e39a} .hb-row:before,.hb-row:after{content:"";position:absolute;z-index:2;top:calc(var(--mh,120px) * -.1);height:calc(var(--mh,120px) * 1.2);width:clamp(48px,7vw,110px);pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.2,.8,.2,1)} .hb-row:before{inset-inline-start:-6px;background:radial-gradient(ellipse 100% 55% at 100% 50%,color-mix(in srgb,var(--hb-glow) 62%,transparent),transparent 72%)} .hb-row:after{inset-inline-end:-6px;background:radial-gradient(ellipse 100% 55% at 0% 50%,color-mix(in srgb,var(--hb-glow) 62%,transparent),transparent 72%)} .hb-row:dir(ltr):before{background:radial-gradient(ellipse 100% 55% at 0% 50%,color-mix(in srgb,var(--hb-glow) 62%,transparent),transparent 72%)} .hb-row:dir(ltr):after{background:radial-gradient(ellipse 100% 55% at 100% 50%,color-mix(in srgb,var(--hb-glow) 62%,transparent),transparent 72%)} .hb-row.can-prev:before,.hb-row.can-next:after{opacity:1} .hb-track{display:flex;gap:var(--gap)} .hb-slide{position:relative;flex:0 0 calc((100% - var(--gap) * var(--per)) / (var(--per) + .17));min-width:0;scroll-snap-align:start} .hb-link{display:flex;flex-direction:column;gap:14px;color:var(--text);-webkit-user-drag:none;border-radius:8px} .hb-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .hb-media{position:relative;display:block;aspect-ratio:var(--ar);max-width:100%;border-radius:8px;overflow:hidden;background:var(--panel-2);isolation:isolate} .hb-media picture{position:absolute;inset:0} .hb-media img,.hb-video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .hb-video{position:absolute;inset:0} .hb-link:hover .hb-media img,.hb-link:hover .hb-video{transform:scale(1.035)} .hb-slide.is-broken .hb-media{background:linear-gradient(135deg,var(--purple-strong),var(--panel-3))} .hb-slide.is-broken .hb-media picture,.hb-slide.is-broken .hb-video{display:none} .hb-content{display:flex;flex-direction:column;gap:2px;min-width:0;padding-inline:2px} .hb-title{font-size:17px;line-height:1.6;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s} .hb-link:hover .hb-title{color:var(--purple-soft)} .hb-desc{font-size:14px;line-height:1.8;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hb-cat{color:var(--purple-soft);font-weight:700} .hb-cat:after{content:"·";margin-inline:6px;color:var(--subtle);font-weight:400} .hb-cat:last-child:after{content:none} html[data-theme=light] .hb-cat,html[data-theme=light] .hb-link:hover .hb-title{color:#6e00b3} .hb-play{position:absolute;z-index:2;top:10px;inset-inline-start:10px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff66;background:#110b15a6;color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .18s,transform .18s} .hb-play:hover{background:#110b15d9;transform:scale(1.05)} .hb-play:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .hb-play-icon{width:0;height:0;border-block:7px solid transparent;border-inline-end:11px solid currentColor;margin-inline-end:-3px} .hb-play[aria-pressed=true] .hb-play-icon{width:12px;height:13px;border:0;margin:0;border-inline:4px solid currentColor} .hb-arrow{position:absolute;z-index:3;top:calc(var(--mh,60%) / 2);translate:0 -50%;width:42px;height:42px;border-radius:50%;border:1px solid var(--stroke);background:color-mix(in srgb,var(--panel) 90%,transparent);color:var(--text);display:grid;place-items:center;font-size:17px;line-height:1;box-shadow:0 6px 22px #0000003d;backdrop-filter:blur(8px);opacity:0;transition:opacity .18s,background .18s,border-color .18s} .hb-arrow--prev{inset-inline-start:-14px}.hb-arrow--next{inset-inline-end:-14px} .hb-arrow[hidden]{display:none} .hb-row:hover .hb-arrow,.hb-arrow:focus-visible{opacity:1} .hb-arrow:hover{background:var(--panel-3);border-color:var(--purple-soft)} .hb-arrow:disabled{opacity:0!important;pointer-events:none} @media(hover:none){.hb-arrow{display:none}} @media(max-width:1100px){.hb{padding-inline:30px}.hb-row{--gap:16px}} @media(max-width:900px){.hb-row--featured{--per:2}} @media(max-width:620px){ .hb{padding:12px 0 clamp(26px,3.2vw,48px)} .hb-viewport{border-radius:0;scroll-padding-inline:16px} .hb-row:before{inset-inline-start:0}.hb-row:after{inset-inline-end:0} .hb-track{padding-inline:16px} .hb-slide{flex-basis:84%} .hb-title{font-size:15px} } .hb-h1{margin:0 auto;padding:clamp(26px,3.2vw,48px) clamp(18px,4.1vw,74px) clamp(10px,1.4vw,20px);max-width:1320px;text-align:center;font-size:clamp(22px,2.5vw,38px);font-weight:800;line-height:1.55;color:var(--purple-soft);background:linear-gradient(90deg,var(--purple-soft),var(--purple),var(--text) 50%,var(--purple),var(--purple-soft)) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-wrap:balance;animation:hbShine 7s linear infinite} @keyframes hbShine{to{background-position:200% 0}} @media(max-width:620px){.hb-h1{font-size:21px;line-height:1.65}} @media(prefers-reduced-motion:reduce){.hb-h1{animation:none}.hb-viewport{scroll-behavior:auto}.hb-row:before,.hb-row:after{transition:none}.hb-media img,.hb-video{transition:none}.hb-link:hover .hb-media img,.hb-link:hover .hb-video{transform:none}} /* Studio: four forms in one box with tabs (2026-10-24). Form two thirds at the start, a decorative picture one third. */ .studio-section [hidden]{display:none!important} .studio-box{border:1px solid var(--stroke);border-radius:23px;background:var(--panel);overflow:hidden} .studio-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;border-bottom:1px solid var(--stroke);background:var(--bg)} .studio-tab{min-height:46px;border:0;border-radius:14px;background:none;color:var(--muted);font:700 13px/1.5 Dana,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;white-space:nowrap;transition:background .18s,color .18s} .studio-tab:hover{color:var(--text);background:var(--panel-2)} .studio-tab[aria-selected=true]{background:var(--purple);color:#fff;box-shadow:0 6px 18px #b664e940} .studio-tab-icon{font-size:17px;line-height:1} .studio-stage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .studio-panels{min-width:0} .studio-panels .creator-card{border:0;border-radius:0;animation:none} .studio-panels .creator-card:hover,.studio-panels .creator-card:focus-within{transform:none;box-shadow:none;border-color:transparent} .studio-art{position:relative;margin:0;min-height:100%;border-inline-start:1px solid var(--stroke);background:var(--panel-2);overflow:hidden} .studio-art img,.studio-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .studio-art img.is-vector{object-fit:contain;padding:28px} .studio-art .is-in{animation:studioArtIn .24s cubic-bezier(.2,.8,.2,1)} @keyframes studioArtIn{from{opacity:0}to{opacity:1}} @media(max-width:900px){.studio-stage{grid-template-columns:1fr}.studio-art{order:-1;height:190px;min-height:0;border-inline-start:0;border-bottom:1px solid var(--stroke)}} @media(max-width:620px){.studio-tabs{gap:2px;padding:4px}.studio-tab{font-size:12px;gap:5px;padding:0 4px;min-height:44px}.studio-tab-icon{display:none}.studio-panels .creator-card{padding:18px 16px}} @media(prefers-reduced-motion:reduce){.studio-art .is-in{animation:none}.studio-tab{transition:none}} /* Tool cards with a picture (2026-10-24): two rows, five columns visible on a desktop, the rest scroll sideways. */ .visual-tool-grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 64px)/5);gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--stroke) transparent;padding-block:4px 12px;cursor:grab} .visual-tool-grid:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:14px} .visual-tool-grid.is-dragging{cursor:grabbing;scroll-snap-type:none} .visual-tool{display:flex;flex-direction:column;min-width:0;border:1px solid var(--stroke);border-radius:19px;overflow:hidden;background:var(--panel);scroll-snap-align:start;user-select:none;-webkit-user-drag:none;transition:border-color .18s} .visual-tool:hover{border-color:var(--purple)} .visual-tool:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .tool-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)} .tool-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);-webkit-user-drag:none} .tool-media img.is-vector{object-fit:contain;padding:14px} .visual-tool:hover .tool-media img{transform:scale(1.045)} .visual-tool-grid.is-dragging .tool-media img{transform:none} .tool-tag{position:absolute;top:10px;inset-inline-start:10px;font-size:12px;line-height:1.8;padding:1px 9px;border-radius:7px;color:#fff;background:#110b15a6;backdrop-filter:blur(6px)} .tool-copy{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px} .tool-title{font-size:15px;line-height:1.7} .tool-meta{font-size:12px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere} @media(max-width:1100px){.visual-tool-grid{grid-auto-columns:calc((100% - 32px)/3)}} @media(max-width:760px){.visual-tool-grid{gap:12px;grid-auto-columns:calc((100% - 12px)/2)}.tool-copy{padding:12px}.tool-title{font-size:14px}} @media(max-width:360px){.visual-tool-grid{grid-auto-columns:85%}} @media(prefers-reduced-motion:reduce){.tool-media img{transition:none}.visual-tool:hover .tool-media img{transform:none}} /* Light theme hero: the photo stays, the shade and the text follow the page. It used to stay a black band with white text in light mode. */ html[data-theme=light] .hero{background:var(--bg);color:var(--text)} html[data-theme=light] .hero-shade{background:linear-gradient(270deg,#fcfcfdf2 0%,#fcfcfdd6 38%,#fcfcfd40 68%,#fcfcfd00 100%),linear-gradient(0deg,#fcfcfdc4,transparent 30%)} html[data-theme=light] .hero h1 em{color:#6e00b3} html[data-theme=light] .hero h1 .hero-kicker{color:#6e00b3} html[data-theme=light] .hero p{color:var(--muted)} html[data-theme=light] .hero-index{color:var(--muted)} html[data-theme=light] .hero-rule{background:var(--stroke)} html[data-theme=light] .hero-edge{color:var(--subtle)} html[data-theme=light] .hero-scroll{border-color:var(--stroke);color:var(--text)} html[data-theme=light] .hero .btn-outline{background:#ffffffcc;color:var(--text);border-color:var(--stroke)} @media(max-width:620px){html[data-theme=light] .hero-shade{background:linear-gradient(270deg,#fcfcfdf0 0%,#fcfcfdc2 70%,#fcfcfd66),linear-gradient(0deg,#fcfcfdeb,transparent 52%)}} /* Scrollbars follow the theme instead of the browser default (2026-10-25): thin, a purple-tinted stroke on a clear track. */ *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--purple-soft) 32%,var(--stroke)) transparent} html{scrollbar-color:color-mix(in srgb,var(--purple-soft) 32%,var(--stroke)) var(--bg)}