/* Homepage presentation, loaded after the shared public-page styles. */
body[data-sr-surface=home]{
    --home-accent:#2563eb;
    --home-glow:rgba(63,126,245,.08);
    --home-shadow:0 16px 48px rgba(35,76,142,.06);
    background:radial-gradient(ellipse at 85% 7%,var(--home-glow),transparent 33%),var(--bg);
}
[data-theme=dark] body[data-sr-surface=home]{
    --home-accent:#8db8ff;
    --home-glow:rgba(50,113,223,.12);
    --home-shadow:0 16px 48px rgba(0,0,0,.14);
}
body[data-sr-surface=home] .site-header{height:76px;min-height:76px;border-color:var(--line)}
body[data-sr-surface=home] .brand{letter-spacing:-.8px}
body[data-sr-surface=home] .brand-mark{border-radius:11px;box-shadow:0 5px 14px #2563eb25}
body[data-sr-surface=home] .main-nav a{font-size:12px;transition:color .18s}
body[data-sr-surface=home] .header-username{background:var(--paper);border-color:var(--line);padding-inline-end:14px}
body[data-sr-surface=home] .button{border-radius:10px;min-height:48px;box-shadow:0 6px 18px #2563eb20;transition:background .2s,box-shadow .2s,transform .2s}
body[data-sr-surface=home] .button:hover{box-shadow:0 9px 24px #2563eb30;transform:translateY(-2px)}
body[data-sr-surface=home] .button-small{min-height:38px;border-radius:8px}
body[data-sr-surface=home] .theme-toggle{border-radius:8px}
body[data-sr-surface=home] .hero{position:relative;padding-top:76px;padding-bottom:72px}
body[data-sr-surface=home] .hero .eyebrow{font-size:11px;letter-spacing:1.5px;margin-bottom:24px}
body[data-sr-surface=home] .hero .eyebrow>span{box-shadow:0 0 0 5px var(--soft)}
body[data-sr-surface=home] .hero h1{line-height:1.28;font-weight:750;margin-bottom:24px}
body[data-sr-surface=home] .hero h1 em{color:var(--home-accent)}
body[data-sr-surface=home] .hero-description{line-height:1.95;margin-bottom:28px}
body[data-sr-surface=home] .hero-actions{gap:24px}
body[data-sr-surface=home] .hero-note{margin-top:24px;opacity:.85;line-height:1.8}
body[data-sr-surface=home] .space-visual{border-radius:22px;background:radial-gradient(ellipse at 65% 20%,var(--soft),transparent 75%),var(--paper);box-shadow:var(--home-shadow);border-color:var(--line)}
body[data-sr-surface=home] .space-visual:before{background-size:32px 32px;opacity:.3}
body[data-sr-surface=home] .visual-toolbar{padding:20px 22px}
body[data-sr-surface=home] .visual-mode{border-radius:20px;padding:3px 12px;background:var(--surface)}
body[data-sr-surface=home] .visual-caption{border-radius:13px;background:var(--surface);box-shadow:0 8px 24px #142b4a0a}
body[data-sr-surface=home] .visual-icon{border-radius:10px}
body[data-sr-surface=home] .platform-line{padding-block:22px;border-top:0;border-bottom:1px solid var(--line);font-size:12px}
body[data-sr-surface=home] .platform-line>div{gap:20px;font-weight:600}
body[data-sr-surface=home] .features{padding-top:76px;padding-bottom:64px}
body[data-sr-surface=home] .section-heading{margin-bottom:32px;max-width:660px}
body[data-sr-surface=home] .section-heading .eyebrow{margin-bottom:12px;font-size:10px}
body[data-sr-surface=home] h2{font-size:clamp(26px,2.8vw,34px);letter-spacing:-.7px}
body[data-sr-surface=home] .section-heading>p:last-child{line-height:1.9}
body[data-sr-surface=home] .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border:0}
body[data-sr-surface=home] .feature-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 4px 18px #142b4a03;transition:transform .2s,border-color .2s,box-shadow .2s}
body[data-sr-surface=home] .feature-card:hover{transform:translateY(-4px);border-color:var(--home-accent);box-shadow:var(--home-shadow)}
body[data-sr-surface=home] .feature-icon{width:44px;height:44px;border-radius:12px;margin-bottom:24px}
body[data-sr-surface=home] .feature-card h3{font-size:17px;line-height:1.6;margin:0 0 12px}
body[data-sr-surface=home] .feature-card p{font-size:13px;line-height:1.95;grid-column:auto}
body[data-sr-surface=home] .workflow{padding-top:24px;padding-bottom:72px}
body[data-sr-surface=home] .steps{gap:24px}
body[data-sr-surface=home] .steps article{padding:24px 0 0;border-top:2px solid var(--line);position:relative;min-width:0}
body[data-sr-surface=home] .steps article:before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:44px;height:2px;background:var(--home-accent)}
body[data-sr-surface=home] .step-number{font-size:26px;letter-spacing:-1px;margin-bottom:18px;color:var(--home-accent)}
body[data-sr-surface=home] .steps p{max-width:300px}
body[data-sr-surface=home] .developer{padding-bottom:64px}
body[data-sr-surface=home] .developer-panel{padding:40px;border-radius:20px;gap:48px;background:linear-gradient(120deg,var(--paper),var(--surface));border-color:var(--line)}
body[data-sr-surface=home] .developer-panel .eyebrow{margin-bottom:14px}
body[data-sr-surface=home] .code-card{border:1px solid #365079;border-radius:12px;box-shadow:0 16px 32px #07162c12}
body[data-sr-surface=home] .code-toolbar{padding:14px 18px;background:#182c47}
body[data-sr-surface=home] .code-toolbar>span:nth-child(1){background:#f28c86}
body[data-sr-surface=home] .code-toolbar>span:nth-child(2){background:#e7c279}
body[data-sr-surface=home] .code-toolbar>span:nth-child(3){background:#7bc9a3}
body[data-sr-surface=home] .final-cta{width:calc(100% - 80px);max-width:1160px;padding:48px 24px;margin:0 auto 64px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse at 50% 120%,var(--soft),transparent 80%),var(--paper)}
body[data-sr-surface=home] .final-cta .eyebrow{margin-bottom:14px}
body[data-sr-surface=home] .final-cta h2{margin-bottom:24px}
body[data-sr-surface=home] .site-footer{padding-block:28px;border-color:var(--line)}
@media(min-width:901px){
    body[data-sr-surface=home] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:48px;min-height:600px}
    body[data-sr-surface=home] .space-visual{height:432px}
}
@media(max-width:1100px){
    body[data-sr-surface=home] .hero{gap:32px}
    body[data-sr-surface=home] .feature-card{padding:24px}
    body[data-sr-surface=home] .developer-panel{padding:30px;gap:30px}
    body[data-sr-surface=home] .final-cta{width:calc(100% - 56px)}
}
@media(max-width:900px){
    body[data-sr-surface=home] .hero{padding-top:52px;padding-bottom:44px;gap:36px}
    body[data-sr-surface=home] .hero-copy{max-width:650px}
    body[data-sr-surface=home] .space-visual{max-width:650px;height:320px}
    body[data-sr-surface=home] .features{padding-top:56px;padding-bottom:48px}
    body[data-sr-surface=home] .feature-grid{gap:14px}
    body[data-sr-surface=home] .feature-card{padding:22px}
}
@media(max-width:700px){
    body[data-sr-surface=home] .feature-grid{grid-template-columns:1fr}
    body[data-sr-surface=home] .feature-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px 16px;padding:24px}
    body[data-sr-surface=home] .feature-icon{grid-row:1 / 3;margin:0}
    body[data-sr-surface=home] .feature-card h3{margin:0}
    body[data-sr-surface=home] .feature-card p{grid-column:2}
    body[data-sr-surface=home] .developer-panel{grid-template-columns:1fr}
}
@media(max-width:600px){
    body[data-sr-surface=home] .site-header{height:auto;min-height:68px;gap:14px;padding-block:16px}
    body[data-sr-surface=home] .hero{padding-top:40px;padding-bottom:36px}
    body[data-sr-surface=home] .hero h1{font-size:clamp(32px,8.8vw,42px)}
    body[data-sr-surface=home] .hero-actions{gap:18px}
    body[data-sr-surface=home] .hero-description{font-size:14px}
    body[data-sr-surface=home] .space-visual{height:310px;border-radius:16px}
    body[data-sr-surface=home] .space-plan{height:250px}
    body[data-sr-surface=home] .visual-caption{padding:12px;bottom:28px}
    body[data-sr-surface=home] .visual-toolbar{padding:16px}
    body[data-sr-surface=home] .features{padding-top:44px;padding-bottom:40px}
    body[data-sr-surface=home] .steps{grid-template-columns:1fr;gap:24px}
    body[data-sr-surface=home] .steps article{padding-top:20px}
    body[data-sr-surface=home] .steps p{max-width:none}
    body[data-sr-surface=home] .workflow{padding-bottom:44px}
    body[data-sr-surface=home] .developer{padding-bottom:36px}
    body[data-sr-surface=home] .developer-panel{padding:24px;border-radius:16px}
    body[data-sr-surface=home] .final-cta{width:calc(100% - 40px);padding:36px 20px;margin-bottom:40px;border-radius:16px}
    body[data-sr-surface=home] .site-footer{gap:18px}
}
@media(prefers-reduced-motion:reduce){
    body[data-sr-surface=home] .button,body[data-sr-surface=home] .feature-card{transition:none}
    body[data-sr-surface=home] .button:hover,body[data-sr-surface=home] .feature-card:hover{transform:none}
}