/* Demo index: shared ITTI header, type, themes and spacing tokens. */
.demo-wrap{padding-inline:var(--gutter);max-width:1760px;margin-inline:auto}
.demo-topline{display:flex;justify-content:space-between;gap:24px;padding:30px 0;font-size:10px;letter-spacing:.08em}
.demo-topline .demo-back{display:flex;align-items:center;gap:15px}
.demo-lang{color:var(--muted);margin-left:auto}.demo-lang [aria-current]{color:var(--ink)}.demo-lang a{text-decoration:underline;text-underline-offset:3px}.demo-lang a:hover{color:var(--ink)}
.demo-hero-grid{display:grid;grid-template-columns:1.3fr .75fr;gap:8vw;padding:58px 0 90px;align-items:end;border-bottom:1px solid var(--line)}
.demo-hero h1{font-size:clamp(62px,7.5vw,120px);font-weight:500;line-height:.99;letter-spacing:-.065em}
.demo-hero h1 span{color:var(--muted)}
.demo-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:520px;margin:32px 0}
.demo-button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:52px;padding:16px 22px;background:var(--ink);color:var(--paper);font-size:14px}
.demo-button:hover{outline:1px solid var(--ink);outline-offset:4px}
.demo-notice{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:25px 0 20px}
.demo-kicker,.demo-section-label{font-size:10px;letter-spacing:.12em}
.demo-notice-title{font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.03em;margin:22px 0 16px}
.demo-notice>p:not(.demo-notice-title){font-size:14px;line-height:1.7;color:var(--muted)}
.demo-notice dl{margin:26px 0 0}
.demo-notice dl>div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:13px 0;font-size:12px}
.demo-notice dd{margin:0;color:var(--muted);text-align:right}
.demo-section{padding-block:100px;border-bottom:1px solid var(--line)}
.demo-page section[id]{scroll-margin-top:24px}
.demo-section-label{margin-bottom:40px;color:var(--muted)}
.demo-page h2{font-size:clamp(36px,4.3vw,65px);font-weight:500;letter-spacing:-.045em;line-height:1.08}
.demo-projects{display:grid;gap:90px;margin-top:70px}
.demo-card{display:grid;grid-template-columns:1.35fr 1fr;gap:6vw;align-items:center}
.demo-card:nth-child(even) .demo-shot{order:2}
.demo-shot{position:relative;display:block;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--line)}
.demo-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--slow) var(--ease)}
.demo-shot:hover img,.demo-shot:focus-visible img{transform:scale(1.035)}
.demo-badge{position:absolute;left:16px;top:16px;padding:7px 10px;background:var(--paper);color:var(--ink);font-size:9px;letter-spacing:.12em}
.demo-card-meta{display:flex;gap:22px;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.demo-card h3{font-size:clamp(48px,5.4vw,88px);font-weight:500;letter-spacing:-.06em;line-height:1;margin:22px 0 18px}
.demo-claim{font-size:clamp(20px,1.8vw,26px);line-height:1.35;letter-spacing:-.02em;max-width:440px}
.demo-desc{font-size:15px;line-height:1.75;color:var(--muted);margin:20px 0 26px;max-width:480px}
.demo-features{list-style:none;margin:0 0 34px;padding:0;max-width:480px}
.demo-features li{border-top:1px solid var(--line);padding:11px 0 11px 26px;font-size:13px;line-height:1.5;position:relative}
.demo-features li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:1px;background:currentColor}
.demo-open{display:inline-flex;align-items:center;gap:26px;min-height:52px;padding:16px 22px;border:1px solid var(--ink);font-size:14px;transition:background var(--fast),color var(--fast)}
.demo-open:hover,.demo-open:focus-visible{background:var(--ink);color:var(--paper)}
.demo-open svg{transition:transform var(--fast)}.demo-open:hover svg{transform:translate(3px,-3px)}
.demo-split{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.demo-rules article{display:grid;grid-template-columns:26px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line)}.demo-rules article:first-child{padding-top:0;border-top:0}.demo-rules article>span{font-size:11px;color:var(--muted);padding-top:5px}.demo-rules h3{font-size:25px;font-weight:500;margin-bottom:14px;letter-spacing:-.025em}.demo-rules p{font-size:15px;color:var(--muted);line-height:1.7}
.demo-contact{background:var(--contact-bg);max-width:none;padding-block:70px}.demo-contact h2{font-size:clamp(43px,6.8vw,100px)}.demo-contact-bottom{display:flex;justify-content:space-between;gap:40px;margin-top:50px}.demo-contact-bottom p{font-size:15px;line-height:1.7;color:var(--muted)}.demo-email{font-size:clamp(16px,2.3vw,30px);letter-spacing:-.02em;overflow-wrap:anywhere}.demo-email:hover{text-decoration:underline;text-underline-offset:5px}.demo-email svg{margin-left:10px}
@media(max-width:1000px){.demo-hero-grid{gap:5vw}.demo-card{gap:4vw}}
@media(max-width:800px){.demo-hero-grid{grid-template-columns:1fr;padding:30px 0 56px;gap:44px}.demo-hero h1{font-size:clamp(56px,14vw,92px)}.demo-section{padding-block:64px}.demo-section-label{margin-bottom:30px}.demo-projects{margin-top:44px;gap:70px}.demo-card{grid-template-columns:1fr;gap:28px}.demo-card:nth-child(even) .demo-shot{order:0}.demo-split{grid-template-columns:1fr;gap:36px}.demo-contact{padding-block:54px}.demo-contact-bottom{flex-direction:column;gap:28px;margin-top:32px}.demo-topline{font-size:8px;padding-top:24px}.demo-topline .demo-back{display:none}}
@media(max-width:380px){.demo-hero h1{font-size:52px}.demo-lead{font-size:15px}.demo-open{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.demo-shot img{transition:none}.demo-shot:hover img{transform:none}}