.demos-page{--project-accent:var(--copper)}
.demo-page-hero{position:relative;min-height:min(520px,calc(100svh - var(--header-h,118px)));display:flex;align-items:center;padding:clamp(52px,6vw,78px) clamp(24px,5vw,72px);overflow:hidden;border-bottom:1px solid var(--line)}
.demo-page-hero::after{content:"";position:absolute;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);top:clamp(52px,6vw,78px);height:1px;background:linear-gradient(90deg,var(--copper),rgba(255,122,42,.08) 28%,rgba(255,255,255,.08) 70%,transparent)}
.demo-page-glow{position:absolute;left:31%;top:50%;width:min(760px,72vw);height:min(760px,72vw);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,122,42,.11),transparent 66%);filter:blur(22px);pointer-events:none}
.demo-page-hero-inner{position:relative;width:min(var(--max),100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.62fr);column-gap:clamp(48px,8vw,112px);align-items:end}
.demo-page-hero h1{grid-column:1;grid-row:1;font-size:clamp(54px,6.2vw,88px);line-height:.94;letter-spacing:-.068em;margin:28px 0 0;max-width:820px}
.demo-page-hero h1 span{color:var(--copper)}
.demo-page-hero p:last-child{grid-column:2;grid-row:1;max-width:420px;margin:28px 0 7px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.7}
.demo-project{position:relative;border-bottom:1px solid var(--line);overflow:hidden;--project-accent:#ff7a2a;--project-rgb:255,122,42}
.demo-project.theme-hazelton{--project-accent:#c7a25b;--project-rgb:199,162,91}
.demo-project.theme-compass{--project-accent:#ef3434;--project-rgb:239,52,52}
.demo-project.theme-bostin{--project-accent:#b6ff27;--project-rgb:182,255,39}
.demo-project.theme-sheila{--project-accent:#f28bc7;--project-rgb:242,139,199}
.demo-project.theme-piteras{--project-accent:#f4f0ea;--project-rgb:244,240,234}
.demo-project::before{content:"";position:absolute;right:-18%;top:8%;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(var(--project-rgb),.085),transparent 68%);pointer-events:none}
.demo-project-main{position:relative;display:grid;grid-template-columns:minmax(340px,.96fr) minmax(380px,1.04fr);gap:clamp(52px,8vw,110px);align-items:center;padding-top:clamp(90px,10vw,140px);padding-bottom:clamp(90px,10vw,140px)}
.demo-project:nth-child(even) .demo-project-visual{order:2}
.demo-project-visual{position:relative;aspect-ratio:1.52/1;border:1px solid rgba(var(--project-rgb),.28);border-radius:30px;display:grid;place-items:center;padding:clamp(28px,5vw,66px);overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(var(--project-rgb),.12),transparent 54%),linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 45px rgba(var(--project-rgb),.055),inset 0 1px rgba(255,255,255,.035)}
.demo-project-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.035) 48%,transparent 61%);transform:translateX(-100%);transition:transform .8s var(--ease)}
.demo-project:hover .demo-project-visual::after{transform:translateX(100%)}
.demo-project-visual img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.demo-project-copy{position:relative;z-index:1}
.demo-project .demo-type{color:var(--project-accent);margin-bottom:20px}
.demo-project h2{font-size:clamp(43px,5.5vw,76px);line-height:.98;letter-spacing:-.06em;margin:0 0 25px}
.demo-lead{max-width:620px;margin:0;color:var(--muted);font-size:clamp(17px,1.8vw,20px);line-height:1.7}
.demo-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.demo-project .button{border-color:var(--project-accent)}
.demo-project .button:hover{background:rgba(var(--project-rgb),.07);box-shadow:0 0 32px rgba(var(--project-rgb),.14)}

.project-story{position:relative;padding-top:0;padding-bottom:clamp(90px,10vw,140px)}
.project-story-inner{border-top:1px solid rgba(255,255,255,.13);padding-top:clamp(42px,5vw,68px)}
.story-label{margin:0 0 30px;color:var(--project-accent);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.details-intro{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(320px,1fr);gap:clamp(32px,7vw,100px);align-items:start;margin-bottom:clamp(42px,6vw,72px)}
.details-intro h3{max-width:520px;font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.055em;margin:0}
.details-intro p{max-width:650px;margin:4px 0 0;color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.75}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden}
.feature-grid>div{min-height:250px;padding:clamp(24px,3vw,36px);background:rgba(5,5,5,.94)}
.feature-grid span{color:var(--project-accent);font-size:10px;font-weight:850;letter-spacing:.24em}
.feature-grid h4{font-size:clamp(18px,1.6vw,22px);line-height:1.15;margin:24px 0 12px}
.feature-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.project-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.project-tags span{padding:8px 12px;border:1px solid rgba(var(--project-rgb),.24);border-radius:999px;color:rgba(244,240,234,.72);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.demo-page-cta{text-align:center;padding-top:clamp(100px,11vw,150px);padding-bottom:clamp(100px,11vw,150px)}
.demo-page-cta h2{font-size:clamp(42px,6vw,78px);line-height:1;letter-spacing:-.06em;margin:0 auto;max-width:850px}
.demo-page-cta>p:not(.eyebrow){max-width:650px;margin:28px auto 32px;color:var(--muted);font-size:18px;line-height:1.65}
.demo-page-cta .button{margin-inline:auto}
@media(max-width:900px){
.demo-page-hero{min-height:auto;padding-top:50px;padding-bottom:64px}
.demo-page-hero::after{top:50px}
.demo-page-hero-inner{grid-template-columns:1fr}
.demo-page-hero h1,.demo-page-hero p:last-child{grid-column:1}
.demo-page-hero h1{font-size:clamp(52px,12vw,76px)}
.demo-page-hero p:last-child{grid-row:auto;margin:24px 0 0;max-width:620px}
.demo-project-main{grid-template-columns:1fr;gap:44px;padding-top:78px;padding-bottom:78px}
.demo-project:nth-child(even) .demo-project-visual{order:0}
.demo-project-visual{aspect-ratio:1.45/1;border-radius:24px;padding:36px}
.demo-project h2{font-size:clamp(42px,12vw,64px)}
.details-intro{grid-template-columns:1fr;gap:18px}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-grid>div{min-height:220px}
}
@media(max-width:620px){
.demo-page-hero{text-align:left}
.demo-page-hero p:last-child{margin-left:0}
.demo-page-hero h1{font-size:clamp(48px,14vw,68px)}
.demo-project-main{padding-inline:22px}
.demo-project-visual{aspect-ratio:1.3/1;padding:24px;border-radius:20px}
.feature-grid{grid-template-columns:1fr}
.feature-grid>div{min-height:0}
.project-story{padding-inline:22px}
.demo-actions .button{width:100%;justify-content:center}
.demo-page-cta{text-align:left;padding-inline:22px}
.demo-page-cta .button{margin-inline:0}
}
@media(prefers-reduced-motion:reduce){.demo-project-visual::after{display:none}}