/* CreatorTools v5 — reference-led, CSS-only blended hero (no wave SVG). */
:root{
  --white:#ffffff;--canvas:#ffffff;--soft:#fff7f9;--ink:#171c29;--muted:#59657e;--red:#eb1944;--ruby:#c90032;--border:#e9ecf2;
  --gradient:linear-gradient(112deg,#ff4e68 0%,#fc294f 42%,#df053a 78%,#c90032 100%);
  --shadow:0 15px 34px rgba(38,31,61,.045);--card-shadow:0 12px 34px rgba(42,50,83,.045);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Roboto,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fa7994;outline-offset:3px}button img,.tool-icon img{pointer-events:none}.layout{width:min(100% - 64px,1120px);margin-inline:auto}.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Navigation */
.site-header{height:69px;background:rgba(255,255,255,.96);border-bottom:1px solid #f0f0f4;position:relative;z-index:30;backdrop-filter:blur(14px)}.nav-layout{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:23px;letter-spacing:-.85px;white-space:nowrap}.brand-accent{color:#d70d39}.brand-mark{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:var(--gradient);box-shadow:inset 0 2px 3px rgba(255,255,255,.32),0 6px 12px #eb255230}.brand-mark svg{width:22px;height:22px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(100,0,28,.2))}.main-nav{display:flex;align-items:center;gap:28px;align-self:stretch}.main-nav a{position:relative;display:inline-flex;align-items:center;height:100%;font-size:13px;font-weight:700;transition:color .2s}.main-nav a:hover,.main-nav a.nav-active{color:#e11442}.main-nav a.nav-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#f3224a}.nav-actions{display:flex;align-items:center;gap:10px}.icon-button{display:grid;place-items:center;width:39px;height:39px;padding:9px;color:#1e2637;background:#fff;border:1px solid #e7eaf1;border-radius:50%;transition:background .25s,transform .25s,border-color .25s}.icon-button:hover{background:#fff0f4;transform:translateY(-2px);border-color:#f7b6c5}.icon-button img,.icon-button svg{width:18px;height:18px}.theme-toggle svg{width:19px;height:19px}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:0;font-weight:800;font-size:13px;border-radius:14px;min-height:43px;padding:12px 24px;text-align:center;transition:transform .24s ease,box-shadow .24s ease,background .24s ease;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden}.button-primary{color:white;background:var(--gradient);background-size:170% 170%;animation:gradientShift 8s ease-in-out infinite;box-shadow:0 8px 19px rgba(239,35,75,.13),inset 0 1px 0 #ffffff80}.button-primary::after{content:"";position:absolute;inset:-80% -45%;background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.3) 48%,transparent 64%);transform:translateX(-125%) rotate(10deg);transition:transform .55s ease;pointer-events:none}.button-primary:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(228,18,67,.27),inset 0 1px 0 #ffffff91}.button-primary:hover::after{transform:translateX(125%) rotate(10deg)}.button-primary:active{transform:translateY(-1px)}.sign-in{min-height:39px;border-radius:14px;padding:10px 21px}.mobile-toggle{display:none}
/* Hero: the entire color field is ONE viewport-wide continuous collection of CSS radial gradients.
   There are deliberately no separate wave tiles, SVG paths, abrupt edges, or clipped corners. */
.hero{--mx:50%;--my:45%;position:relative;min-height:452px;padding:38px 0 56px;overflow:hidden;isolation:isolate;background:#fff}.hero-ambient{position:absolute;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(ellipse 36% 56% at -6% 89%,rgba(254,31,85,.35) 0%,rgba(255,101,142,.23) 35%,rgba(255,186,207,.11) 61%,transparent 100%),radial-gradient(ellipse 39% 59% at 104% 88%,rgba(246,25,73,.36) 0%,rgba(255,104,145,.24) 36%,rgba(255,194,211,.10) 64%,transparent 100%),radial-gradient(ellipse 42% 27% at 5% 82%,rgba(253,59,105,.075),transparent 100%),radial-gradient(ellipse 42% 27% at 95% 79%,rgba(253,59,105,.085),transparent 100%),linear-gradient(180deg,#fff 0%,#fff 38%,#fffafd 77%,#fff 100%);background-size:100% 100%;animation:ambientFlow 11s ease-in-out infinite alternate}.hero-ambient::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,transparent 31%,transparent 74%,rgba(255,255,255,1) 100%)}.hero-pointer-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,75,117,.115),rgba(255,95,138,.03) 45%,transparent 70%);transition:opacity .4s ease}.hero:hover .hero-pointer-glow{opacity:1}.hero-inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center}.section-badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:31px;border-radius:999px;background:#fff0f4;color:#d8073a;font-weight:700;font-size:12px;padding:7px 15px}.hero-badge{margin-top:0}.badge-spark{font-size:15px}.hero h1{font-size:clamp(42px,4.65vw,62px);font-weight:900;letter-spacing:-2.2px;line-height:1.08;margin:16px 0 15px}.hero h1 .title-line{display:inline-block}.gradient-text{color:#e5274d;background:linear-gradient(115deg,#ff4c60 0%,#eb2850 32%,#d80e3d 65%,#fa4565 100%);background-size:220% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textGlow 7s ease-in-out infinite alternate}.hero-description{font-size:15px;font-weight:400;color:#56637b;line-height:1.55;max-width:660px;margin:0 0 24px}.analyze-form{--sx:50%;--sy:50%;width:min(100%,660px);min-height:65px;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #f4cfd9;border-radius:19px;padding:7px 8px 7px 20px;box-shadow:0 0 0 5px rgba(255,246,249,.86),0 12px 30px rgba(213,47,86,.075);position:relative;z-index:3;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}.analyze-form:hover,.analyze-form:focus-within{border-color:#f8a6bd;box-shadow:0 0 0 5px rgba(255,243,247,.95),0 15px 34px rgba(213,47,86,.12);transform:translateY(-1px)}.analyze-form .link-icon{width:22px;height:22px;flex:0 0 auto}.analyze-form input{min-width:0;flex:1;border:0;background:transparent;outline:none;color:#1c2332;font-size:15px}.analyze-form input:focus-visible{outline:0}.analyze-form input::placeholder{color:#78849c;opacity:1}.analyze-btn{min-width:165px;min-height:49px;border-radius:13px;font-size:13px}.mode-switch{display:flex;justify-content:center;gap:10px;margin-top:17px}.mode-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:98px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#314057;min-height:35px;padding:8px 16px;font-size:13px;font-weight:700;box-shadow:0 5px 13px rgba(31,47,81,.06);transition:transform .23s,box-shadow .23s,background .23s}.mode-button svg{width:15px;height:15px}.mode-button:hover{transform:translateY(-2px);box-shadow:0 9px 15px rgba(236,24,69,.13)}.mode-button.is-active{color:white;background:var(--gradient);background-size:170% 170%;animation:gradientShift 8s ease-in-out infinite;border-color:transparent;box-shadow:0 6px 16px rgba(236,24,69,.19)}.hero-helper{margin:13px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#64718a}.hero-helper svg{width:12px;height:12px}.hero-helper span{color:#c5cbd4}.floating-icon{position:absolute;z-index:2;width:84px;pointer-events:none;opacity:.94;filter:drop-shadow(0 8px 13px rgba(240,12,66,.22)) drop-shadow(0 0 14px rgba(250,82,126,.14));animation:floatUp 6.3s ease-in-out infinite}.floating-icon img{width:100%;height:auto;display:block}.float-left-one{left:7.5%;top:19%;width:82px;animation-delay:-.6s}.float-left-two{left:17.2%;bottom:17%;width:60px;animation-delay:-3.2s}.float-right-one{right:9.1%;top:18%;width:66px;animation-delay:-2s}.float-right-two{right:16%;bottom:17%;width:86px;animation-delay:-4.2s}.analysis-result{width:min(100%,660px);text-align:left;margin:20px auto 5px;padding:18px 22px;background:rgba(255,255,255,.96);border:1px solid #ffb6c7;border-radius:16px;box-shadow:0 10px 25px rgba(218,26,70,.09);font-size:13px}.analysis-result[hidden]{display:none}.analysis-result strong{display:block;font-size:15px;margin-bottom:6px}.analysis-result p{margin:6px 0;color:#59647c;line-height:1.6}.analysis-result code{overflow-wrap:anywhere;color:#c90032}.analysis-result .result-tag{display:inline-flex;font-size:11px;color:#d20d3e;padding:4px 10px;border-radius:999px;background:#fff0f4;margin-bottom:8px}
/* Cards and sections */
.tools-section{padding:26px 0 48px;background:#fff}.section-intro{text-align:center;margin-bottom:30px}.section-intro .section-badge{margin-bottom:12px}.section-intro .section-badge svg,.section-intro .section-badge img{width:14px;height:14px}.section-intro h2{font-size:clamp(28px,3.2vw,38px);letter-spacing:-1.35px;font-weight:900;line-height:1.1;margin:0 0 8px}.section-intro p{margin:0;font-size:14px;color:#5e6981}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.tool-card{--rx:0deg;--ry:0deg;--cx:50%;--cy:50%;appearance:none;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:176px;width:100%;border:1px solid #e9ecf3;border-radius:15px;padding:19px 21px 18px;background:radial-gradient(230px circle at var(--cx) var(--cy),rgba(255,216,226,.4),transparent 72%),#fff;box-shadow:var(--card-shadow);color:var(--ink);position:relative;transform:perspective(750px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .22s ease,box-shadow .23s ease,border-color .23s ease;will-change:transform}.tool-card:hover{border-color:#fac5d2;box-shadow:0 16px 33px rgba(215,42,87,.105);transform:perspective(750px) translateY(-5px) rotateX(var(--rx)) rotateY(var(--ry))}.tool-icon,.feature-icon,.step-icon{background:#fff0f4;display:grid;place-items:center;border-radius:13px}.tool-icon{width:47px;height:47px;flex:none;margin-bottom:17px}.tool-icon img{width:28px;height:28px;transition:transform .25s ease}.tool-card:hover .tool-icon img{transform:scale(1.13) rotate(-7deg)}.card-arrow{position:absolute;top:21px;right:18px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffd7e1;background:#fff;color:#e52248;font-size:19px;transition:transform .23s,background .23s,color .23s}.tool-card:hover .card-arrow{background:#e52248;color:#fff;transform:rotate(45deg)}.tool-name{font-weight:900;font-size:15px;letter-spacing:-.2px;line-height:1.25;margin-bottom:7px}.tool-summary{font-size:13px;font-weight:400;line-height:1.5;color:#58647b}.tools-cta{text-align:center;margin:20px 0 35px}.button-outline{border:1px solid #ffb9c9;background:#fff7f9;color:#d50939;box-shadow:0 8px 15px rgba(218,39,75,.04)}.button-outline:hover{background:#fff0f4;transform:translateY(-3px);box-shadow:0 10px 22px rgba(230,33,77,.1)}.feature-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #f3e5eb;box-shadow:0 10px 34px rgba(226,54,94,.035);border-radius:16px;background:#fff;min-height:93px}.feature{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 9px;position:relative}.feature:not(:last-child)::after{content:"";height:42px;position:absolute;right:0;top:calc(50% - 21px);width:1px;background:#e7eaf0}.feature-icon{width:42px;height:42px;flex:none}.feature-icon img{width:25px;height:25px}.feature strong{display:block;font-size:21px;font-weight:900;letter-spacing:-.5px}.feature small{font-size:11px;color:#67738b}
.steps-section{background:#fff;padding:18px 0 70px}.steps-section .section-intro{margin-bottom:34px}.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.step-card{display:flex;align-items:center;gap:16px;min-height:112px;border-radius:15px;border:1px solid #e8ebf2;background:#fff;box-shadow:var(--card-shadow);padding:22px 23px;position:relative;transition:transform .25s,box-shadow .25s}.step-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #df25591a}.step-number{position:absolute;width:29px;height:29px;left:15px;top:-14px;border-radius:50%;background:var(--gradient);display:grid;place-items:center;color:white;font-size:13px;font-weight:900}.step-icon{width:62px;height:62px;border-radius:50%;flex:none}.step-icon img{width:29px;height:29px}.step-card h3{font-size:14px;letter-spacing:-.2px;margin:0 0 6px}.step-card p{font-size:12px;color:#6b7488;line-height:1.45;margin:0}.preview-banner{padding:40px 0;background:linear-gradient(105deg,#fff6f8 0%,#fff 65%,#fff0f5);border-block:1px solid #fae6eb}.banner-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.banner-inner .section-badge{font-size:11px}.banner-inner h2{margin:12px 0 8px;font-size:27px;letter-spacing:-.9px}.banner-inner p{margin:0;color:var(--muted);font-size:13px}.updates-section{padding:46px 0 56px;text-align:center}.updates-section h2{font-size:23px;margin:0 0 9px}.updates-section p{font-size:13px;color:var(--muted);margin:0}.site-footer{border-top:1px solid #eef0f4;padding:25px 0;background:#fff}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;color:#657086}.footer-inner a{color:#e22249;font-weight:700}
/* Dialog */
.info-modal{width:min(94%,440px);max-width:440px;border:1px solid #ffe0e8;border-radius:20px;box-shadow:0 28px 100px rgba(36,18,37,.20);padding:0;color:#1c2230;background:white}.info-modal::backdrop{background:rgba(23,27,39,.42);backdrop-filter:blur(3px)}.modal-inner{padding:34px;text-align:center;position:relative}.modal-close{position:absolute;right:15px;top:12px;background:transparent;border:0;font-size:29px;color:#768095}.modal-illustration{height:64px;width:64px;border-radius:17px;background:#fff0f4;display:grid;place-items:center;margin:0 auto 16px}.modal-illustration img{width:40px;height:40px}.modal-inner h2{margin:0 0 11px;font-size:26px}.modal-inner p{font-size:14px;line-height:1.65;color:#62708a;margin:0 0 23px}.modal-dismiss{min-width:140px}
/* Animation: low-amplitude to preserve the clean reference appearance. */
@keyframes gradientShift{0%{background-position:0% 46%}50%{background-position:95% 54%}100%{background-position:0% 46%}}@keyframes textGlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}@keyframes ambientFlow{0%{filter:hue-rotate(0deg) saturate(1);opacity:.92;transform:translateY(0)}50%{filter:hue-rotate(-5deg) saturate(1.1);opacity:1;transform:translateY(-4px)}100%{filter:hue-rotate(3deg) saturate(1.05);opacity:.95;transform:translateY(3px)}}@keyframes floatUp{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(0,-14px,0) rotate(5deg)}}
@media(min-width:1500px){.float-left-one{left:max(7%,calc((100% - 1500px)/2 + 70px))}.float-right-one{right:max(7%,calc((100% - 1500px)/2 + 80px))}}
@media(max-width:1150px){.layout{width:min(100% - 54px,1040px)}.main-nav{gap:18px}.hero h1{font-size:56px}.floating-icon{opacity:.78}.float-left-one{left:1%}.float-right-one{right:1%}.float-left-two{left:7%;bottom:17%}.float-right-two{right:6%;bottom:16%}.tool-card{padding:18px}}
@media(max-width:800px){.main-nav{display:none;position:absolute;top:69px;left:0;right:0;height:auto;padding:16px max(24px,6vw);background:#fff;box-shadow:0 18px 25px #14203512;flex-direction:column;align-items:flex-start;gap:0}.main-nav.is-open{display:flex}.main-nav a{width:100%;padding:15px 0;border-bottom:1px solid #f3f3f5}.main-nav a.nav-active::after{display:none}.mobile-toggle{display:grid}.theme-toggle{display:none}.hero{padding:47px 0 65px;min-height:450px}.hero h1{font-size:clamp(42px,7vw,57px)}.floating-icon{width:52px!important;opacity:.58}.float-left-one{top:21%;left:-10px}.float-right-one{top:22%;right:-10px}.float-left-two{left:1%;bottom:12%}.float-right-two{right:1%;bottom:12%}.hero-ambient{opacity:.63}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps-grid{gap:12px}.step-card{padding:22px 14px;gap:12px}.step-icon{width:50px;height:50px}.step-icon img{width:26px;height:26px}.feature-strip{grid-template-columns:repeat(2,1fr)}.feature:nth-child(2)::after{display:none}.feature:nth-child(-n+2){border-bottom:1px solid #e7eaf0}.footer-inner{flex-wrap:wrap}}
@media(max-width:530px){.layout{width:calc(100% - 36px)}.site-header{height:66px}.main-nav{top:66px}.brand{font-size:20px}.brand-mark{width:35px;height:35px}.top-search{display:none}.nav-actions{gap:8px}.sign-in{padding:9px 14px;font-size:12px;min-height:35px}.hero{padding:46px 0 61px;min-height:0}.hero h1{font-size:clamp(36px,9vw,49px);letter-spacing:-1.5px;line-height:1.13;margin:19px 0 16px}.hero-description{font-size:13px;max-width:360px;line-height:1.7;margin-bottom:25px}.desktop-break{display:none}.hero-badge{font-size:11px;padding:8px 12px}.analyze-form{flex-wrap:wrap;padding:10px;gap:5px 10px;border-radius:17px}.analyze-form .link-icon{margin-left:4px;width:19px;height:19px}.analyze-form input{font-size:13px;flex:1;min-height:31px}.analyze-btn{min-height:44px;width:100%;margin-top:2px}.mode-switch{margin-top:20px}.hero-helper{font-size:11px}.floating-icon{width:43px!important;opacity:.30}.float-left-one{left:-24px;top:16%}.float-right-one{right:-24px;top:16%}.float-left-two{left:-25px;bottom:14%}.float-right-two{right:-25px;bottom:13%}.hero-ambient{opacity:.48;background:radial-gradient(ellipse 50% 32% at 0% 90%,rgba(255,49,96,.19),transparent),radial-gradient(ellipse 50% 32% at 100% 90%,rgba(255,49,96,.19),transparent)}.tools-section{padding-top:14px}.section-intro{margin-bottom:25px}.section-intro h2{font-size:29px;letter-spacing:-1px}.section-intro p{font-size:13px;line-height:1.55}.tool-grid{gap:10px}.tool-card{padding:14px 13px;min-height:171px}.tool-icon{width:43px;height:43px;margin-bottom:15px}.tool-icon img{width:26px;height:26px}.card-arrow{top:17px;right:12px;width:26px;height:26px;font-size:16px}.tool-name{font-size:13px}.tool-summary{font-size:12px}.feature{gap:9px;padding:14px 8px}.feature-icon{width:39px;height:39px}.feature strong{font-size:18px}.feature small{font-size:10px}.steps-grid{grid-template-columns:1fr;gap:22px}.step-card{max-width:460px;margin-inline:auto;width:100%;padding:20px;min-height:102px}.steps-section{padding-top:12px;padding-bottom:50px}.banner-inner{flex-direction:column;align-items:flex-start}.banner-inner h2{font-size:24px}.footer-inner{flex-direction:column;align-items:flex-start;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.tool-card,.tool-card:hover{transform:none!important}}
/* Optional dark theme retains the requested clean light theme as default. */
body.dark{--ink:#f5f6f8;--muted:#b2b9c8;--canvas:#151822;--border:#3b4050;color:#f5f6f8;background:#151822}body.dark .site-header,body.dark .main-nav,body.dark .tool-card,body.dark .feature-strip,body.dark .step-card,body.dark .site-footer,body.dark .info-modal{background:#1e2230;color:#f5f6f8}body.dark .site-header,body.dark .tool-card,body.dark .feature-strip,body.dark .step-card{border-color:#353b4d}body.dark .hero{background:#151822}body.dark .hero-ambient{opacity:.22}body.dark .hero-ambient::after{display:none}body.dark .tools-section,body.dark .steps-section,body.dark .updates-section{background:#151822}body.dark .hero-description,body.dark .section-intro p,body.dark .tool-summary,body.dark .hero-helper,body.dark .step-card p,body.dark .feature small{color:#aeb9c9}body.dark .analyze-form,body.dark .mode-button:not(.is-active),body.dark .icon-button{background:#222638;color:#f5f6f8;border-color:#444b5d}body.dark input{color:white}body.dark .tool-card{background:#202533}body.dark .preview-banner{background:linear-gradient(100deg,#32212d,#201f2b)}body.dark .section-badge,body.dark .tool-icon,body.dark .feature-icon,body.dark .step-icon{background:#382431}body.dark .analysis-result{background:#282736;color:white}body.dark .modal-inner p{color:#b5c0d2}