.bento-grid{display:grid;grid-template-columns:1fr;gap:var(--size-lg)}@media(min-width: 768px){.bento-grid{grid-template-columns:repeat(12, 1fr)}}.bento-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,3vw,2.25rem);background-color:var(--bg-elevated);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}.bento-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px hsl(var(--color-primary)/0.16),var(--shadow-md);border-color:color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border))}.bento-card .bento-header{margin-block-end:var(--size-md)}.bento-card .bento-header .bento-title{font-size:var(--text-heading-md);font-weight:700;letter-spacing:-0.02em;color:var(--color-fg);margin-block-start:0;margin-block-end:var(--size-xs-up)}.bento-card .bento-header .bento-desc{font-size:var(--text-body-md);color:var(--fg-muted);margin:0;line-height:1.55}.bento-card .bento-visual{margin-block-start:var(--size-lg);border-radius:var(--radius-lg);overflow:hidden}.bento-card .bento-visual.bento-pill-group{display:flex;gap:var(--size-xs);flex-wrap:wrap}.bento-card .bento-visual.bento-type-sample{padding:var(--size-lg)}.bento-card .bento-visual.bento-type-sample .type-display{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:800;line-height:1.2}.bento-card .bento-visual.bento-type-sample .type-code{margin-block-start:var(--size-xs);margin-block-end:0;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg-muted)}.bento-card .bento-visual.bento-glass-sample{padding:var(--size-md);text-align:center}.bento-card .bento-visual.bento-glass-sample .badge-dot{margin-inline:auto;margin-block-end:var(--size-xs)}.bento-card .bento-visual.bento-glass-sample small{color:var(--fg-muted)}.bento-card .bento-visual.bento-code-sample{padding:var(--size-md);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6}.bento-card .bento-visual.bento-code-sample .token-tag{color:hsl(var(--color-primary))}.bento-card .bento-visual.bento-code-sample .token-attr{color:hsl(var(--color-success, 150 80% 40%))}@media(min-width: 768px)and (min-width: 768px){.bento-span-4{grid-column:span 4}}@media(min-width: 768px)and (min-width: 768px){.bento-span-5{grid-column:span 5}}@media(min-width: 768px)and (min-width: 768px){.bento-span-6{grid-column:span 6}}@media(min-width: 768px)and (min-width: 768px){.bento-span-7{grid-column:span 7}}@media(min-width: 768px)and (min-width: 768px){.bento-span-8{grid-column:span 8}}@media(min-width: 768px)and (min-width: 768px){.bento-span-12{grid-column:span 12}}@media(min-width: 768px)and (min-width: 768px){.bento-row-span-2{grid-row:span 2}}.ambient-glow-top{position:relative}.ambient-glow-top::before{content:"";position:absolute;inset-inline-start:50%;top:-10rem;transform:translateX(-50%);width:clamp(20rem,80vw,65rem);height:clamp(15rem,40vw,35rem);background:radial-gradient(ellipse at center, hsl(var(--color-primary)/var(--spotlight-opacity, 0.18)) 0%, hsl(var(--color-primary)/calc(var(--spotlight-opacity, 0.18) * 0.4)) 45%, transparent 70%);filter:blur(60px);pointer-events:none;z-index:0}.ambient-glow-top>*{position:relative;z-index:1}.ambient-glow-bottom{position:relative}.ambient-glow-bottom::after{content:"";position:absolute;inset-inline-start:50%;bottom:-10rem;transform:translateX(-50%);width:clamp(20rem,80vw,65rem);height:clamp(15rem,40vw,30rem);background:radial-gradient(ellipse at center, hsl(var(--color-primary)/var(--spotlight-opacity, 0.15)) 0%, transparent 70%);filter:blur(60px);pointer-events:none;z-index:0}.ambient-glow-bottom>*{position:relative;z-index:1}.pattern-dots{background-image:radial-gradient(color-mix(in srgb, var(--color-border) 60%, transparent) 1px, transparent 1px);background-size:24px 24px}.pattern-grid{background-image:linear-gradient(to right, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px),linear-gradient(to bottom, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px);background-size:40px 40px}.glass-panel{background-color:color-mix(in srgb, var(--bg-elevated) 72%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:var(--border-width) solid color-mix(in srgb, var(--color-border) 65%, transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.glow-hover{transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}.glow-hover:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px hsl(var(--color-primary)/0.18),0 0 1px 1px color-mix(in srgb, hsl(var(--color-primary)) 35%, transparent),var(--shadow-md);border-color:color-mix(in srgb, hsl(var(--color-primary)) 45%, transparent)}.mockup-frame{position:relative;background-color:var(--bg-elevated);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-xl);box-shadow:0 25px 60px -15px rgba(0,0,0,.3),var(--shadow-xl);overflow:hidden}.mockup-frame .mockup-bar{display:flex;align-items:center;gap:.375rem;padding:var(--size-xs-up) var(--size-md);background-color:color-mix(in srgb, var(--bg-recessed) 80%, var(--bg-elevated));border-bottom:var(--border-width) solid var(--color-border)}.mockup-frame .mockup-bar .mockup-dot{width:.625rem;height:.625rem;border-radius:var(--radius-full);background-color:var(--color-border)}.mockup-frame .mockup-bar .mockup-dot:nth-child(1){background-color:#ff5f56}.mockup-frame .mockup-bar .mockup-dot:nth-child(2){background-color:#ffbd2e}.mockup-frame .mockup-bar .mockup-dot:nth-child(3){background-color:#27c93f}.mockup-frame .mockup-bar .mockup-url{margin-inline-start:auto;margin-inline-end:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-muted);background-color:var(--bg-base);padding:.125rem 1rem;border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border)}.mockup-frame .mockup-body{padding:var(--size-lg);background-color:var(--bg-base)}.mockup-stage{min-height:17.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(2rem,5vw,3rem) var(--size-lg)}.mockup-stage-card{padding:var(--size-xl);max-width:32rem;width:100%}.mockup-stage-card .stage-badge{margin-block-end:var(--size-sm)}.mockup-stage-card .stage-title{margin-block-start:0;margin-block-end:var(--size-xs);font-size:var(--text-heading-sm)}.mockup-stage-card .stage-desc{margin-block-start:0;margin-block-end:var(--size-md);font-size:var(--text-sm);color:var(--fg-muted)}@keyframes subtle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.animate-float{animation:subtle-float 6s ease-in-out infinite}#bento-id-showcase{display:grid;grid-template-columns:1fr;gap:var(--size-lg)}@media(min-width: 768px){#bento-id-showcase{grid-template-columns:repeat(12, 1fr)}}#bento-id-showcase article{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,3vw,2.25rem);background-color:var(--bg-elevated);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}#bento-id-showcase article:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px hsl(var(--color-primary)/0.16),var(--shadow-md);border-color:color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border))}#bento-id-showcase article .bento-header{margin-block-end:var(--size-md)}#bento-id-showcase article .bento-header .bento-title{font-size:var(--text-heading-md);font-weight:700;letter-spacing:-0.02em;color:var(--color-fg);margin-block-start:0;margin-block-end:var(--size-xs-up)}#bento-id-showcase article .bento-header .bento-desc{font-size:var(--text-body-md);color:var(--fg-muted);margin:0;line-height:1.55}#bento-id-showcase article .bento-visual{margin-block-start:var(--size-lg);border-radius:var(--radius-lg);overflow:hidden}#bento-id-showcase article .bento-visual.bento-pill-group{display:flex;gap:var(--size-xs);flex-wrap:wrap}#bento-id-showcase article .bento-visual.bento-type-sample{padding:var(--size-lg)}#bento-id-showcase article .bento-visual.bento-type-sample .type-display{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:800;line-height:1.2}#bento-id-showcase article .bento-visual.bento-type-sample .type-code{margin-block-start:var(--size-xs);margin-block-end:0;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg-muted)}#bento-id-showcase article .bento-visual.bento-glass-sample{padding:var(--size-md);text-align:center}#bento-id-showcase article .bento-visual.bento-glass-sample .badge-dot{margin-inline:auto;margin-block-end:var(--size-xs)}#bento-id-showcase article .bento-visual.bento-glass-sample small{color:var(--fg-muted)}#bento-id-showcase article .bento-visual.bento-code-sample{padding:var(--size-md);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6}#bento-id-showcase article .bento-visual.bento-code-sample .token-tag{color:hsl(var(--color-primary))}#bento-id-showcase article .bento-visual.bento-code-sample .token-attr{color:hsl(var(--color-success, 150 80% 40%))}#bento-id-showcase article{transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}#bento-id-showcase article:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px hsl(var(--color-primary)/0.18),0 0 1px 1px color-mix(in srgb, hsl(var(--color-primary)) 35%, transparent),var(--shadow-md);border-color:color-mix(in srgb, hsl(var(--color-primary)) 45%, transparent)}@media(min-width: 768px){#bento-id-showcase #bento-card-performance{grid-column:span 7}}@media(min-width: 768px){#bento-id-showcase #bento-card-theming{grid-column:span 5}}@media(min-width: 768px){#bento-id-showcase #bento-card-motion{grid-column:span 5}}@media(min-width: 768px){#bento-id-showcase #bento-card-semantics{grid-column:span 7}}#testimonials blockquote{font-size:var(--text-body-md);line-height:1.6;color:var(--color-fg);font-style:normal;margin:0;margin-block-end:var(--size-xl)}#testimonials blockquote p{margin:0}#faq-accordion{max-width:800px;margin-inline:auto}.brand-logo{display:inline-flex;align-items:center;justify-content:center}.brand-logo img{border-radius:var(--radius-sm, 4px);display:block}.brand-logo .brand-logo-dark{display:block}.brand-logo .brand-logo-light{display:none}:root[data-mode=light] .brand-logo .brand-logo-dark{display:none}:root[data-mode=light] .brand-logo .brand-logo-light{display:block}@media(prefers-color-scheme: light){:root:not([data-mode=dark]) .brand-logo .brand-logo-dark{display:none}:root:not([data-mode=dark]) .brand-logo .brand-logo-light{display:block}}