:root{--grain-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
/* Shared recipes keep the cards and full-color hero backgrounds consistent. */
.hero{
  --gradient-linear:linear-gradient(135deg,#176bca 0%,#8ce6c5 100%);
  --gradient-radial:radial-gradient(circle at 50% 50%,#ffbf77 0%,#341d4c 100%);
  --gradient-mesh:radial-gradient(circle at 14.0% 18.0%, #F97316EB 0%, #F9731694 18.1%, transparent 61.2%),
  radial-gradient(circle at 68.0% 54.0%, #EC4899BD 0%, #EC48996B 18.1%, transparent 61.2%),
  radial-gradient(circle at 46.0% 84.0%, #FEF3C7BD 0%, #FEF3C76B 18.1%, transparent 61.2%),
  radial-gradient(circle at 83.0% 72.0%, #FDBA74BD 0%, #FDBA746B 18.1%, transparent 61.2%),
  radial-gradient(circle at 17.0% 77.0%, #C084FCBD 0%, #C084FC6B 18.1%, transparent 61.2%),
  radial-gradient(circle at 85.0% 20.0%, #FB7185BD 0%, #FB71856B 18.1%, transparent 61.2%),
  radial-gradient(circle at 52.0% 31.0%, #FACC15BD 0%, #FACC156B 18.1%, transparent 61.2%),
  linear-gradient(135deg, #F97316 0%, #EC4899 100%);
}
:root{font-family:Manrope,Arial,sans-serif;color:#10132a;--gradialy-edge-margin:clamp(24px,4vw,68px);--muted:#56557d;--accent:#6540dc;--line:#deddf0;font-synthesis:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:#f9f9ff}
a{color:inherit;text-decoration:none}
button{font:inherit}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
a:focus-visible,button:focus-visible{outline:3px solid #6540dc;outline-offset:5px}
 .skip-link{position:fixed;top:8px;left:8px;padding:12px;background:#fff;z-index:100;transform:translateY(-160%)}
.skip-link:focus{transform:none}

.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;background:#edf5fc;overflow:clip}
.hero-background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scene{position:absolute;inset:-15%;opacity:0;transition:opacity 950ms ease;animation:float-scene 18s ease-in-out infinite alternate;will-change:transform}
.scene-idle{opacity:1;background:radial-gradient(ellipse at 12% 38%,#b9d9f2 0%,transparent 51%),radial-gradient(ellipse at 90% 10%,#d0cfee 0%,transparent 48%),radial-gradient(ellipse at 20% 100%,#c9c2eb 0%,transparent 40%),#e7f1fb}
.scene-linear{background:var(--gradient-linear);animation:linear-drift 9s ease-in-out infinite alternate}
.scene-radial{background:var(--gradient-radial);animation:radial-breathe 7s ease-in-out infinite alternate}
.scene-mesh{background:var(--gradient-mesh);animation:mesh-drift 10s ease-in-out infinite alternate}
.hero[data-background=linear] .scene-linear,.hero[data-background=radial] .scene-radial,.hero[data-background=mesh] .scene-mesh{opacity:1}
.readability{opacity:1;transition:opacity 500ms ease;position:absolute;inset:0;background:linear-gradient(#f5f8ffdd 0%,#f5f8ffbd 30%,#f5f8ff25 58%,#f5f8ffb8 100%)}
.grain{position:absolute;inset:0;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");pointer-events:none}

.hero main{flex:1;display:flex;align-items:center}
.hero-content{width:min(1248px,calc(100% - 2 * var(--gradialy-edge-margin)));margin:0 auto;padding:48px 0 35px}
.hero-heading{text-align:center;margin:0 auto 30px}
.hero-heading h1{font-size:clamp(38px,4.3vw,66px);line-height:1.12;font-weight:800;letter-spacing:-.055em;margin:0 0 22px}
.hero-heading h1 span{color:#35206a}
.hero-heading p{font-size:clamp(16px,1.45vw,21px);line-height:1.6;color:var(--muted);margin:0}
.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;scroll-margin-top:30px}
.type-card{display:block;padding:14px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.94);border-radius:17px;box-shadow:0 8px 28px #41357908;transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.type-card:hover,.type-card:focus-visible{transform:translateY(-5px);border-color:#9977ff;background:rgba(255,255,255,.76);box-shadow:0 14px 30px #45337823}
.gradient-preview{height:clamp(170px,15vw,232px);position:relative;overflow:hidden;border-radius:12px}
.preview-linear{background:var(--gradient-linear)}
.preview-radial{background:var(--gradient-radial)}
.preview-mesh{background:var(--gradient-mesh)}
.direction-guide{width:100%;height:100%;stroke:white;stroke-width:1.7}
.direction-guide circle{fill:#68ccc9}
.angle-label{position:absolute;left:53%;top:45%;background:#ffffffb8;border-radius:9px;padding:5px 9px;font-size:12px;font-weight:800;color:#5e3a9f}
.radial-guide{position:absolute;width:49%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ffffff45;border-radius:50%;display:grid;place-items:center}
.radial-guide i,.mesh-point{width:16px;height:16px;border:2px solid white;border-radius:50%;box-shadow:0 1px 6px #0000000d}
.mesh-point{position:absolute;transform:translate(-50%,-50%)}
.palette{position:absolute;bottom:17px;left:17px;display:flex;gap:5px;padding:6px;background:#ffffffbe;border-radius:9px}
.palette i{width:16px;height:16px;border-radius:50%;background:#563071}
.palette i+i{background:#ffbf77}
.card-copy{padding:16px 9px 8px}
.card-copy h2{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:24px;letter-spacing:-.04em}
.card-copy p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 22px}
.card-action{display:flex;gap:12px;align-items:center;color:#6836eb;font-size:15px;font-weight:700}
.card-action span{transition:transform .2s}
.type-card:hover .card-action span{transform:translateX(4px)}
.hover-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin:27px 0 28px;font-size:12px;color:var(--muted)}
.hover-hint svg{width:19px}
.touch-hint{display:none}
.benefits{display:flex;justify-content:center;list-style:none;padding:0;margin:0;color:#444568;font-size:13px}
.benefits li{display:flex;align-items:center;gap:14px;padding:0 30px}
.benefits li+li{border-left:1px solid #827aaf55}
.discover{display:flex;justify-content:center;gap:12px;margin:36px auto 0;width:fit-content;font-size:13px;color:#4e5073}
.discover:hover{color:#6836eb}
.motion-toggle{position:absolute;bottom:20px;right:24px;display:grid;place-items:center;width:32px;height:32px;background:#ffffff66;border:1px solid #ffffffaa;border-radius:50%;cursor:pointer;color:#555778}
.motion-toggle svg{width:15px;height:15px}
.hero.motion-paused .scene{animation-play-state:paused}

.below-hero{background:linear-gradient(120deg,#fbfbff,#f7f7fe)}
.content-width{width:min(1380px,calc(100% - 2 * var(--gradialy-edge-margin)));margin-inline:auto}
.inspiration{padding:68px 0 40px;border-bottom:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}
.section-heading h2,.workflow h2{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.045em;line-height:1.2;margin:0 0 12px;font-weight:800}
.section-heading p,.section-lead{margin:0;color:#6b6a8b;font-size:18px;line-height:1.65}
.outline-link{display:flex;gap:14px;align-items:center;white-space:nowrap;background:#ffffff77;border:1px solid #cecee5;border-radius:8px;padding:14px 18px;font-size:13px;font-weight:600}
.outline-link:hover{background:#fff;border-color:#9686c5}
.examples-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.example-preview{height:166px;border-radius:9px;transition:transform .3s,box-shadow .3s}
.example:hover .example-preview{transform:translateY(-4px);box-shadow:0 10px 24px #34205b16}
.example h3{font-size:17px;letter-spacing:-.025em;margin:12px 0 4px;display:flex;justify-content:space-between}
.example h3 svg{width:15px;opacity:0}
.example:hover h3 svg,.example:focus-visible h3 svg{opacity:1}
.example>span{font-size:14px;color:#73718f}
.workflow{padding:64px 0 78px}
.section-lead{max-width:1060px}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:46px}
.feature-icon{width:60px;height:60px;border:1px solid #a68afc;border-radius:50%;display:grid;place-items:center;color:#7344f5;margin-bottom:19px}
.feature-icon svg{width:29px;height:29px}
.features h3{font-size:21px;letter-spacing:-.03em;margin:0 0 10px}
.features p{font-size:15px;line-height:1.7;color:#6b6a8b;margin:0}
.footer{border-top:1px solid var(--line);padding:30px 0 38px;display:flex;justify-content:space-between;align-items:center}
.footer nav{display:flex;flex-wrap:wrap;gap:14px 32px;font-size:12px;color:#646381}
.footer nav a:hover{text-decoration:underline}






@media(min-width:851px) and (max-height:800px){.hero-content{padding:30px 0}
.hero-heading h1{font-size:52px}
.hero-heading{margin-bottom:24px}
.hero-heading h1{margin-bottom:15px}
.gradient-preview{height:180px}
.hover-hint{margin:20px 0}
.discover{margin-top:25px}
}

@media(max-width:850px){.hero-content{padding:42px 0 30px}
.type-grid{gap:12px}
.type-card{padding:9px;border-radius:13px}
.gradient-preview{height:160px}
.card-copy{padding:14px 5px 6px}
.card-copy h2{font-size:21px}
.card-copy p{min-height:66px;font-size:13px;margin-bottom:14px}
.hero-heading h1{font-size:44px}
.hero-heading p{font-size:16px}
.benefits li{padding:0 17px;gap:8px;font-size:12px}
.section-heading{align-items:flex-start}
.section-heading h2,.workflow h2{font-size:29px}
.section-heading p,.section-lead{font-size:16px}
.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
.features{gap:24px}
.features h3{font-size:18px}
.features p{font-size:14px}
.inspiration{padding-top:48px}
}

@media(max-width:580px){.hero-content{width:calc(100% - 40px);padding-top:38px}
.hero-heading h1{font-size:clamp(32px,8.4vw,44px);line-height:1.15;letter-spacing:-.055em}
.hero-heading p{font-size:15px;max-width:350px;margin-inline:auto}
.desktop-break{display:none}
.type-grid{grid-template-columns:1fr;gap:18px}
.type-card{padding:12px}
.gradient-preview{height:190px}
.card-copy{padding:14px 6px 8px}
.card-copy h2{font-size:23px}
.card-copy p{min-height:0;font-size:14px;margin-bottom:16px}
.hover-hint{margin:24px 0}
.benefits{flex-wrap:wrap;gap:14px 20px}
.benefits li{padding:0;border:0!important;font-size:11px;gap:7px}
.benefits svg{width:17px}
.discover{margin:28px auto 20px}
.motion-toggle{bottom:12px;right:12px}
.section-heading{display:block}
.outline-link{width:fit-content;margin-top:22px}
.section-heading h2,.workflow h2{font-size:29px}
.example-preview{height:125px}
.examples-grid{gap:22px 14px}
.example h3{font-size:14px}
.example>span{font-size:12px}
.features{grid-template-columns:1fr;gap:30px;margin-top:30px}
.feature-icon{width:48px;height:48px;margin-bottom:14px}
.features h3{font-size:20px}
.features p{font-size:15px}
.workflow{padding:40px 0 44px}
.footer{align-items:flex-start;gap:28px;flex-direction:column}
.footer nav{gap:28px}
.hover-hint svg{display:none}
}

@media(hover:none){.hover-hint>span:not(.touch-hint){display:none}
.touch-hint{display:inline}
.type-card:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.motion-toggle{display:none}
}


/* Only the idle background has a light veil. Active gradients retain full saturation. */
.hero:not([data-background=idle]) .readability{opacity:0}
.type-card{color:#10132a}
.hero:not([data-background=idle]) .type-card{background:rgba(255,255,255,.94)}
.hero-heading,.hero-heading h1 span,.hero-heading p,.hover-hint,.benefits,.discover,.site-header{transition:color 350ms ease}
.hero[data-background=radial],.hero[data-background=mesh]{color:#fff}
.hero[data-background=radial] :is(.hero-heading h1 span,.hero-heading p,.hover-hint,.benefits,.discover),
.hero[data-background=mesh] :is(.hero-heading h1 span,.hero-heading p,.hover-hint,.benefits,.discover){color:#fff;text-shadow:none}
.hero:not([data-background=idle]) .brand-by{opacity:.9}
.hero[data-background=radial] .benefits li+li,.hero[data-background=mesh] .benefits li+li{border-color:#ffffff66}
.hero[data-background=radial] .motion-toggle,.hero[data-background=mesh] .motion-toggle{color:white;background:#21053844}
.hero[data-background=radial] .site-header,.hero[data-background=mesh] .site-header{border-color:#ffffff44}
.hero[data-background=radial] .nav-open,.hero[data-background=mesh] .nav-open{color:#10132a}
.gradient-preview::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:var(--grain-image)}
.scene-linear{animation:linear-drift 6s ease-in-out infinite alternate}
.scene-radial{animation:radial-breathe 5s ease-in-out infinite alternate}
.scene-mesh{animation:mesh-drift 7s ease-in-out infinite alternate}




.hero[data-background=linear] :is(.hero-heading h1 span,.hero-heading p,.hover-hint,.benefits,.discover){color:#10132a}

/* Grain follows the editor/export texture, scale and overlay compositing. */
.grain,.gradient-preview::after{background-size:96px 96px;mix-blend-mode:overlay;opacity:.56}
.gradient-preview{isolation:isolate}
.hero:not([data-background=idle]){color:#fff}
.hero:not([data-background=idle]) :is(.hero-heading h1 span,.hero-heading p,.hover-hint,.benefits,.discover){color:#fff;text-shadow:none}
.hero *{text-shadow:none}
.hero:not([data-background=idle]) .nav-open{color:#10132a}
.hero:not([data-background=idle]) .motion-toggle{color:#fff;background:#21053844}
.scene-linear{animation-duration:3s}
.scene-radial{animation-duration:3s}
.scene-mesh{animation-duration:3.5s}

/* Composited fades; no rotation can expose the rectangular layer corners.
   15% overscan covers translation (at most 9% of the 130% layer).
   Scale never drops below 1, including at animation endpoints. */
.scene{will-change:transform,opacity;transition:opacity 550ms ease-in-out;backface-visibility:hidden}
.readability{transition:opacity 550ms ease-in-out}




.scene-linear,.scene-radial{animation-duration:2.5s;animation-timing-function:cubic-bezier(.3,.15,.7,.85)}
.scene-mesh{animation-duration:2.8s;animation-timing-function:cubic-bezier(.3,.15,.7,.85)}

.type-card[data-gradient=linear]{--card-highlight:#adf5e5}
.type-card[data-gradient=radial]{--card-highlight:#ffdaa7}
.type-card[data-gradient=mesh]{--card-highlight:#ffd3be}
.type-card:hover,.type-card:focus-visible{border-color:var(--card-highlight);box-shadow:0 0 0 2px var(--card-highlight),0 14px 30px #30204026}
.type-card:focus-visible{outline:2px solid var(--card-highlight);outline-offset:5px}

/* Neutral action color keeps attention on the gradient palette. */
.card-action{color:#29283e}
.type-card:hover .card-action,.type-card:focus-visible .card-action{color:#10132a}

/* Card affordances stay quiet until pointer or keyboard interaction. */
.card-copy h2 svg{opacity:0;transform:translate(-3px,3px);transition:opacity .2s ease,transform .2s ease}
.type-card:hover .card-copy h2 svg,.type-card:focus-visible .card-copy h2 svg{opacity:1;transform:translate(0,0)}
.card-copy p{min-height:3.2em}
.hero[data-background=idle] .hero-heading h1 span{color:#7957bd}
.hero[data-background=idle] .hero-heading p{color:#706c8c}

/* Wider movement makes the color fields readable as motion, without rotation.
   Minimum scale 1.35 covers +/-18% translation within the existing overscan. */
.scene-idle{animation-duration:5s;animation-delay:-1.5s}
.scene-linear{animation-duration:3.5s;animation-delay:-1s}
.scene-radial{animation-duration:4s;animation-delay:-1.2s}
.scene-mesh{animation-duration:4s;animation-delay:-1s}
@keyframes float-scene{from{transform:translate3d(-15%,10%,0) scale(1.35)}to{transform:translate3d(15%,-10%,0) scale(1.35)}}
/* 135deg changes along x+y: opposite x/y travel nearly cancels the color change. */
@keyframes linear-drift{from{transform:translate3d(-18%,-18%,0) scale(1.35)}to{transform:translate3d(18%,18%,0) scale(1.35)}}
@keyframes radial-breathe{from{transform:translate3d(-16%,-12%,0) scale(1.35)}to{transform:translate3d(16%,12%,0) scale(1.6)}}
/* Zoom through the full composition, then travel diagonally across its color fields.
   Endpoint scale 1.45 covers 20% translation; center retains the full overscan. */
@keyframes mesh-drift{0%{transform:translate3d(-20%,-16%,0) scale(1.45)}50%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(20%,16%,0) scale(1.45)}}

/* Distinct filled badges communicate editing, motion and export. */
.feature-icon{border:0;border-radius:50%;color:#fff;background:#218f9c;box-shadow:0 6px 16px #218f9c1a}
.features article:nth-child(2) .feature-icon{background:#92613f;box-shadow:0 6px 16px #92613f1a}
.features article:nth-child(3) .feature-icon{background:#f97316;box-shadow:0 6px 16px #f973161a}
.feature-icon svg{width:28px;height:28px;stroke-width:1.8}

/* A restrained violet-to-blue accent on the light idle hero only. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
.hero[data-background=idle] .hero-heading h1 span{
  background-image:linear-gradient(105deg,#7952b8 10%,#8964c5 48%,#557fba 90%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
}

/* Slightly deeper idle backdrop; keep the editor's fine-grain texture. */
.hero[data-background=idle] .readability{opacity:.55}
.hero[data-background=idle] .grain{opacity:.8}
.grain{transition:opacity 550ms ease-in-out}