@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bodoni+Moda:opsz,wght@6..96,400;6..96,700&family=Cormorant+Garamond:wght@400;600&family=DM+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&family=Noto+Serif+JP:wght@400;600&family=Playfair+Display:wght@500;700&family=Space+Grotesk:wght@400;500;700&family=Syne:wght@500;700;800&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; touch-action: pan-y; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; display: block; }
.demo-shell { min-height: 100vh; }
.demo-nav { display: flex; align-items: center; justify-content: space-between; }
.demo-nav__links { display: flex; align-items: center; gap: 28px; }
.demo-nav__links a { transition: opacity .25s, transform .25s; }
.demo-nav__links a:hover { opacity: .65; }
.demo-brand { font-weight: 800; letter-spacing: -.04em; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .25s, box-shadow .25s, background .25s; }
.demo-button:hover { transform: translateY(-3px); }
.demo-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; }
.demo-hero h1 { margin: 0; line-height: .94; letter-spacing: -.06em; }
.demo-hero p { line-height: 1.7; }
.demo-stat strong { display: block; font-size: 1.8rem; }
.demo-grid { display: grid; min-height: 72vh; align-content: center; }
.demo-card { position: relative; overflow: hidden; }
.demo-content { min-height: 100vh; display: grid; align-content: center; gap: 50px; padding: clamp(70px,10vw,130px) clamp(18px,4vw,60px); margin: 70px calc(clamp(18px,4vw,60px) * -1) 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.demo-content__intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(35px,8vw,110px); align-items: start; }
.demo-content__eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.demo-content h2 { margin: 8px 0 0; font-size: clamp(3rem,7vw,7rem); line-height: .88; letter-spacing: -.06em; }
.demo-content__copy { max-width: 720px; font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.8; }
.demo-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border: 1px solid currentColor; background: currentColor; }
.demo-fact { min-height: 150px; padding: 24px; background: var(--content-surface, #fff); color: var(--content-ink, #111); }
.demo-fact strong { display: block; margin-bottom: 10px; font-size: clamp(1.7rem,3vw,3rem); line-height: 1; }
.demo-fact span { font-size: .78rem; line-height: 1.5; opacity: .72; }
.demo-process { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.demo-process article { padding-top: 20px; border-top: 2px solid currentColor; }
.demo-process b { display: block; margin-bottom: 12px; font-size: .7rem; letter-spacing: .15em; opacity: .6; }
.demo-process h3 { margin: 0 0 10px; font-size: 1.3rem; }
.demo-process p { margin: 0; line-height: 1.65; opacity: .72; }
.demo-quote { max-width: 950px; margin: 0; font-size: clamp(2rem,4.5vw,4.5rem); line-height: 1.05; letter-spacing: -.045em; }
.demo-footer { display: flex; justify-content: space-between; gap: 30px; padding: 45px 0 10px; margin-top: 20px; font-size: .78rem; opacity: .7; }
.glass,.retro,.cyber,.deco,.cinematic,.spatial { --content-surface:#101322; --content-ink:#f4f6ff; }
.japan,.brutal,.swiss,.organic,.neumorph,.maximal,.y2k,.bauhaus,.scandi,.collage,.memphis,.corporate,.mediterranean,.newspaper { --content-surface:#f6f2e8; --content-ink:#171717; }
.glass .demo-content,.retro .demo-content,.cyber .demo-content,.deco .demo-content,.cinematic .demo-content,.spatial .demo-content { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.16); }
.japan .demo-content,.swiss .demo-content,.organic .demo-content,.scandi .demo-content,.mediterranean .demo-content,.newspaper .demo-content { background:rgba(0,0,0,.025); border-color:rgba(0,0,0,.18); }
.brutal .demo-content,.maximal .demo-content,.collage .demo-content,.memphis .demo-content { border-width:4px; border-left:0; border-right:0; }
.neumorph .demo-content,.corporate .demo-content,.y2k .demo-content { border:0; border-radius:40px; background:rgba(255,255,255,.26); }
.demo-back { position: fixed; z-index: 30; right: 18px; bottom: 18px; padding: 10px 14px; border-radius: 999px; background: rgba(12,12,20,.8); color: #fff; font: 600 12px/1 'DM Sans', sans-serif; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.reveal { animation: rise .8s both; }
.reveal:nth-child(2) { animation-delay: .1s; }
.reveal:nth-child(3) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 01 — Glassmorphic SaaS */
.glass { color: #eff4ff; font-family: 'Space Grotesk', sans-serif; background: #070b20; }
.glass .demo-shell { padding: 24px clamp(22px,5vw,80px) 70px; background: radial-gradient(circle at 15% 12%,#5635c9 0,transparent 28%), radial-gradient(circle at 88% 30%,#006a8d 0,transparent 26%), linear-gradient(145deg,#090b22,#090e1c); position: relative; }
.glass .demo-shell::before { content:""; position: fixed; inset:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; }
.glass .demo-nav { position:relative; z-index:2; max-width:1200px; margin:auto; padding:14px 18px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.06); backdrop-filter:blur(24px); }
.glass .demo-brand { font-size:1.25rem; }.glass .demo-brand span { color:#8ee9ff; }
.glass .demo-button { padding:13px 20px; border-radius:12px; background:linear-gradient(135deg,#9a7cff,#5ddcff); color:#081024; font-weight:800; box-shadow:0 12px 35px rgba(93,220,255,.2); }
.glass .demo-hero { max-width:1200px; margin:90px auto 50px; display:grid; grid-template-columns:1.05fr .95fr; gap:55px; align-items:center; }
.glass .demo-hero h1 { font-size:clamp(3.4rem,7vw,7.2rem); }.glass .demo-hero h1 em { font-style:normal; color:#82eaff; }
.glass .demo-hero p { max-width:560px; color:#aeb7d5; font-size:1.08rem; }
.glass .orbital { min-height:430px; border:1px solid rgba(255,255,255,.14); border-radius:40px; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.025)); backdrop-filter:blur(20px); box-shadow:inset 0 1px rgba(255,255,255,.2),0 40px 80px rgba(0,0,0,.28); display:grid; place-items:center; transform:rotate(2deg); }
.glass .orbital::before { content:"AI"; display:grid; place-items:center; width:150px; height:150px; border-radius:42px; font-size:3.4rem; font-weight:800; background:linear-gradient(145deg,#8d6cff,#65e6ff); box-shadow:0 0 80px #7659dd; }
.glass .demo-grid { max-width:1200px; margin:auto; grid-template-columns:repeat(3,1fr); gap:18px; }.glass .demo-card { padding:25px; min-height:150px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(255,255,255,.055); backdrop-filter:blur(15px); }.glass .demo-card p{color:#9ca7c9;}

/* 02 — Japanese ryokan */
.japan { color:#27231e; font-family:'Noto Serif JP',serif; background:#eee9df; }
.japan .demo-shell { max-width:1440px; margin:auto; padding:30px clamp(22px,6vw,100px) 90px; background:linear-gradient(90deg,transparent 49.8%,rgba(70,50,30,.08) 50%,transparent 50.2%); }
.japan .demo-nav { border-bottom:1px solid #b8ad9d; padding-bottom:20px; }.japan .demo-brand { letter-spacing:.25em; font-weight:600; }.japan .demo-nav__links { font-size:.8rem; letter-spacing:.12em; }
.japan .demo-button { border:1px solid #363029; padding:12px 24px; }
.japan .demo-hero { min-height:650px; display:grid; grid-template-columns:1fr 1.15fr; gap:7vw; align-items:center; }
.japan .demo-hero h1 { font-size:clamp(3.7rem,8vw,8.5rem); font-weight:400; letter-spacing:-.08em; writing-mode:vertical-rl; height:480px; justify-self:center; }
.japan .demo-hero p { color:#70675b; max-width:430px; }.japan .ensō { width:min(430px,80vw); aspect-ratio:1; border:34px solid #25221d; border-right-color:transparent; border-radius:50%; display:grid; place-items:center; position:relative; }
.japan .ensō::after { content:"静けさの宿"; letter-spacing:.35em; font-size:1rem; }
.japan .demo-grid { grid-template-columns:repeat(3,1fr); border-top:1px solid #b8ad9d; }.japan .demo-card { padding:30px 24px; border-right:1px solid #b8ad9d; }.japan .demo-card:last-child{border:0}.japan .demo-card span{color:#a34d35;font-size:2rem;}

/* 03 — Neo-brutalist architecture */
.brutal { font-family:Arial,sans-serif; color:#101010; background:#d7ff43; }
.brutal .demo-shell { padding:18px; }.brutal .demo-nav { border:4px solid #111; padding:15px 18px; background:#fff; box-shadow:7px 7px 0 #111; text-transform:uppercase; }
.brutal .demo-brand { font:900 1.35rem 'Archivo Black',sans-serif; letter-spacing:-.04em; }.brutal .demo-button{padding:12px 20px;border:3px solid #111;background:#ff5c39;box-shadow:4px 4px 0 #111;font-weight:900;text-transform:uppercase;}
.brutal .demo-hero { min-height:590px; display:grid; grid-template-columns:1.25fr .75fr; gap:18px; padding:45px 0 18px; }.brutal .demo-hero h1{font:900 clamp(4rem,10vw,10rem)/.78 'Archivo Black';text-transform:uppercase;}
.brutal .demo-hero p{font-weight:700;font-size:1.2rem;max-width:540px}.brutal .block-art{height:100%;min-height:400px;background:#4b45ff;border:4px solid #111;box-shadow:10px 10px 0 #111;position:relative}.brutal .block-art::before{content:"+";font:900 14rem/1 Arial;position:absolute;right:8%;top:10%;color:#ffdf2b}.brutal .block-art::after{content:"FORM / FUNCTION";position:absolute;bottom:20px;left:20px;background:#fff;border:3px solid;padding:10px;font-weight:900}
.brutal .demo-grid{grid-template-columns:repeat(3,1fr);gap:16px}.brutal .demo-card{padding:22px;border:4px solid #111;background:#fff;box-shadow:7px 7px 0 #111;text-transform:uppercase}.brutal .demo-card:nth-child(2){background:#ff8ecc}.brutal .demo-card:nth-child(3){background:#62d9ff}

/* 04 — Swiss editorial */
.swiss { font-family:'DM Sans',sans-serif; color:#111; background:#f4f2ed; }
.swiss .demo-shell{padding:28px clamp(22px,5vw,75px) 80px}.swiss .demo-nav{padding-bottom:18px;border-bottom:1px solid #111}.swiss .demo-brand{font-size:1.5rem}.swiss .demo-brand::before{content:"■";color:#ec321e;margin-right:10px}.swiss .demo-button{background:#ec321e;color:white;padding:12px 18px}
.swiss .demo-hero{padding:65px 0;display:grid;grid-template-columns:2fr 1fr;gap:8vw;align-items:end}.swiss .demo-hero h1{font-size:clamp(4.5rem,11vw,11rem);line-height:.78;letter-spacing:-.085em}.swiss .demo-kicker{color:#ec321e}.swiss .demo-hero p{font-size:1.1rem;border-top:4px solid #111;padding-top:18px}
.swiss .demo-grid{grid-template-columns:repeat(12,1fr);gap:16px;border-top:1px solid;padding-top:25px}.swiss .demo-card{min-height:220px;padding:18px;background:#ddd9d0}.swiss .demo-card:nth-child(1){grid-column:span 5}.swiss .demo-card:nth-child(2){grid-column:span 3;background:#ec321e;color:#fff}.swiss .demo-card:nth-child(3){grid-column:span 4;background:#111;color:#fff}.swiss .demo-card strong{font-size:3rem;display:block}

/* 05 — Retro-futurist travel */
.retro { font-family:'Space Grotesk',sans-serif;color:#ffefc7;background:#19052e; }
.retro .demo-shell{min-height:100vh;padding:25px clamp(20px,5vw,70px) 80px;background:linear-gradient(180deg,#18052e 0,#3b0750 60%,#ff4e83 100%);position:relative}.retro .demo-shell::after{content:"";position:absolute;inset:45% 0 0;background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,223,103,.22) 36px),repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,223,103,.2) 71px);transform:perspective(300px) rotateX(55deg);transform-origin:bottom;pointer-events:none}
.retro .demo-nav{position:relative;z-index:2;text-transform:uppercase}.retro .demo-brand{font-family:'IBM Plex Mono';letter-spacing:.12em;color:#7cfaff}.retro .demo-button{border:1px solid #7cfaff;padding:11px 18px;color:#7cfaff;box-shadow:0 0 18px rgba(124,250,255,.35)}
.retro .demo-hero{position:relative;z-index:2;text-align:center;padding:95px 0 75px}.retro .demo-hero h1{font-size:clamp(4rem,10vw,9.5rem);font-style:italic;text-transform:uppercase;text-shadow:5px 5px 0 #e7229d,10px 10px 0 #303bd5}.retro .demo-hero p{max-width:600px;margin:28px auto;color:#ffd9eb}.retro .sun{width:210px;height:210px;border-radius:50%;margin:0 auto -70px;background:repeating-linear-gradient(#ffd45e 0 17px,#ff6f64 18px 25px);box-shadow:0 0 60px #ff5c88}
.retro .demo-grid{position:relative;z-index:3;grid-template-columns:repeat(3,1fr);gap:18px}.retro .demo-card{padding:22px;border:1px solid rgba(124,250,255,.6);background:rgba(23,5,46,.68);backdrop-filter:blur(8px);box-shadow:6px 6px 0 #df259e}.retro .demo-card b{color:#7cfaff;font-family:'IBM Plex Mono'}

/* 06 — Organic wellness */
.organic { font-family:'DM Sans',sans-serif;color:#173a2c;background:#f1eadc; }
.organic .demo-shell{padding:25px clamp(22px,6vw,90px) 80px;background:radial-gradient(ellipse at 85% 10%,#cadfb9 0,transparent 33%),#f1eadc}.organic .demo-nav{max-width:1300px;margin:auto}.organic .demo-brand{font-family:'Cormorant Garamond';font-size:2rem}.organic .demo-button{padding:13px 22px;border-radius:50% 42% 48% 45%;background:#245d45;color:#fff}
.organic .demo-hero{max-width:1300px;margin:60px auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw}.organic .demo-hero h1{font:600 clamp(4rem,8vw,8rem)/.86 'Cormorant Garamond';letter-spacing:-.05em}.organic .demo-hero p{max-width:490px;color:#557064}.organic .leaf-art{aspect-ratio:1;border-radius:63% 37% 67% 33%/44% 56% 44% 56%;background:linear-gradient(145deg,#a9ca8d,#2e7950);position:relative;box-shadow:inset 30px 20px 80px rgba(255,255,255,.25)}.organic .leaf-art::before{content:"";position:absolute;width:48%;height:65%;left:24%;top:17%;border:2px solid rgba(255,255,255,.7);border-radius:100% 0 100% 0;transform:rotate(-25deg)}
.organic .demo-grid{max-width:1300px;margin:auto;grid-template-columns:1.2fr .8fr 1fr;gap:22px}.organic .demo-card{min-height:190px;padding:26px;border-radius:40px 15px 40px 15px;background:#e1dbc8}.organic .demo-card:nth-child(2){background:#245d45;color:#fff}.organic .demo-card:nth-child(3){background:#d6b87b}

/* 07 — Cyberpunk gaming */
.cyber { font-family:'IBM Plex Mono',monospace;color:#e6ff00;background:#050509; }
.cyber .demo-shell{padding:18px clamp(18px,4vw,58px) 70px;background:radial-gradient(circle at 70% 20%,rgba(245,0,116,.22),transparent 32%),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.018) 5px)}.cyber .demo-nav{border-bottom:1px solid #e6ff00;padding:14px 0;text-transform:uppercase;font-size:.8rem}.cyber .demo-brand{letter-spacing:.15em}.cyber .demo-button{padding:11px 18px;background:#e6ff00;color:#050509;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cyber .demo-hero{min-height:580px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px}.cyber .demo-hero h1{font:800 clamp(4rem,9vw,9rem)/.82 'Syne';text-transform:uppercase;position:relative;text-shadow:4px 0 #ff006e,-4px 0 #00efff}.cyber .demo-hero p{color:#9da398;max-width:570px}.cyber .glitch-art{height:410px;border:1px solid #00efff;clip-path:polygon(0 35px,35px 0,100% 0,100% calc(100% - 50px),calc(100% - 50px) 100%,0 100%);background:linear-gradient(135deg,transparent 35%,#ff006e 36% 48%,transparent 49%),linear-gradient(45deg,#111 30%,#00efff 31% 32%,#111 33%);box-shadow:20px 20px 0 rgba(230,255,0,.12)}
.cyber .demo-grid{grid-template-columns:repeat(3,1fr);gap:12px}.cyber .demo-card{padding:22px;border:1px solid #353836;background:#0b0b0f;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}.cyber .demo-card::after{content:"// ONLINE";font-size:.65rem;color:#00efff;position:absolute;right:12px;top:10px}

/* 08 — Art deco hotel */
.deco { color:#e8d7a4;font-family:'Bodoni Moda',serif;background:#102b27; }
.deco .demo-shell{padding:25px clamp(20px,6vw,90px) 80px;background:radial-gradient(circle at 50% 20%,#1c5145,#0e2725 60%)}.deco .demo-nav{border-top:1px solid #bda76c;border-bottom:1px solid #bda76c;padding:16px 4px;text-transform:uppercase;letter-spacing:.15em;font-size:.74rem}.deco .demo-brand{font-size:1.5rem;letter-spacing:.18em}.deco .demo-button{border:1px solid #bda76c;padding:11px 20px}
.deco .demo-hero{text-align:center;padding:85px 0 65px;position:relative}.deco .demo-kicker{color:#c0a968}.deco .demo-hero h1{font-size:clamp(4rem,9vw,8.5rem);font-weight:500;letter-spacing:-.05em}.deco .demo-hero p{max-width:650px;margin:20px auto;color:#bdb89f}.deco .fan{width:280px;height:140px;margin:45px auto 0;border:1px solid #bda76c;border-radius:280px 280px 0 0;background:repeating-conic-gradient(from 270deg at 50% 100%,transparent 0 10deg,#bda76c 11deg 11.5deg,transparent 12deg 20deg)}
.deco .demo-grid{grid-template-columns:repeat(3,1fr);gap:25px;border-top:1px solid #bda76c;padding-top:30px}.deco .demo-card{text-align:center;padding:30px 20px;border:1px solid rgba(189,167,108,.45)}.deco .demo-card::before{content:"◇";display:block;font-size:2rem;margin-bottom:10px}

/* 09 — Neumorphic finance */
.neumorph { font-family:'DM Sans',sans-serif;color:#30405a;background:#e7edf5; }
.neumorph .demo-shell{padding:28px clamp(22px,5vw,76px) 80px}.neumorph .demo-nav{max-width:1250px;margin:auto;padding:16px 22px;border-radius:24px;box-shadow:10px 10px 25px #c5cbd2,-10px -10px 25px #fff}.neumorph .demo-brand{color:#5668ed}.neumorph .demo-button{padding:13px 22px;border-radius:15px;background:#e7edf5;color:#5668ed;box-shadow:6px 6px 15px #c5cbd2,-6px -6px 15px #fff;font-weight:700}
.neumorph .demo-hero{max-width:1250px;margin:65px auto;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}.neumorph .demo-hero h1{font-size:clamp(4rem,8vw,7.8rem);color:#34425c}.neumorph .demo-hero p{color:#6d7a90;max-width:520px}.neumorph .balance{padding:35px;border-radius:40px;box-shadow:18px 18px 40px #c3cad3,-18px -18px 40px #fff}.neumorph .balance strong{font-size:3.5rem;display:block;color:#5668ed}.neumorph .chart{height:140px;margin-top:25px;border-radius:20px;background:linear-gradient(160deg,transparent 46%,#5668ed 47% 50%,transparent 51%),linear-gradient(25deg,transparent 50%,#75d5bd 51% 54%,transparent 55%)}
.neumorph .demo-grid{max-width:1250px;margin:auto;grid-template-columns:repeat(3,1fr);gap:28px}.neumorph .demo-card{padding:26px;border-radius:25px;box-shadow:10px 10px 25px #c5cbd2,-10px -10px 25px #fff}.neumorph .demo-card b{color:#5668ed}

/* 10 — Maximalist fashion */
.maximal { font-family:'Syne',sans-serif;color:#17110d;background:#ffbdcf; }
.maximal .demo-shell{padding:18px clamp(16px,4vw,55px) 70px;background:radial-gradient(circle at 15% 25%,#ff5c35 0 11%,transparent 11.5%),radial-gradient(circle at 85% 42%,#6947ff 0 14%,transparent 14.5%),#ffbdcf}.maximal .demo-nav{border:3px solid #17110d;padding:14px;background:#f9ff58;transform:rotate(-.4deg)}.maximal .demo-brand{font:800 1.4rem 'Syne';text-transform:uppercase}.maximal .demo-button{padding:12px 19px;background:#17110d;color:#fff;border-radius:50% 10%}
.maximal .demo-hero{min-height:610px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:25px}.maximal .demo-hero h1{font-size:clamp(4.5rem,11vw,11rem);text-transform:uppercase;line-height:.72;text-shadow:6px 6px 0 #f9ff58}.maximal .demo-hero p{max-width:500px;font-weight:700;background:white;padding:20px;border:3px solid;transform:rotate(2deg)}.maximal .fashion-art{height:450px;border:4px solid;background:linear-gradient(45deg,#f9ff58 25%,#17110d 25% 50%,#6947ff 50% 75%,#ff5c35 75%);border-radius:48% 48% 8px 8px;transform:rotate(4deg);box-shadow:14px 14px 0 #17110d}
.maximal .demo-grid{grid-template-columns:repeat(3,1fr);gap:16px}.maximal .demo-card{padding:22px;border:3px solid;background:#fff;box-shadow:7px 7px 0 #17110d}.maximal .demo-card:nth-child(2){background:#6947ff;color:white;transform:translateY(18px)}.maximal .demo-card:nth-child(3){background:#f9ff58}

@media (max-width: 800px) {
  .demo-nav__links a:not(.demo-button) { display:none; }
  .glass .demo-hero,.japan .demo-hero,.brutal .demo-hero,.swiss .demo-hero,.organic .demo-hero,.cyber .demo-hero,.neumorph .demo-hero,.maximal .demo-hero { grid-template-columns:1fr; }
  .glass .demo-grid,.japan .demo-grid,.brutal .demo-grid,.retro .demo-grid,.organic .demo-grid,.cyber .demo-grid,.deco .demo-grid,.neumorph .demo-grid,.maximal .demo-grid { grid-template-columns:1fr; }
  .japan .demo-hero h1 { writing-mode:horizontal-tb;height:auto; }
  .swiss .demo-card:nth-child(n){grid-column:1/-1}.glass .orbital,.cyber .glitch-art,.maximal .fashion-art{min-height:300px;height:300px}
  .demo-content__intro,.demo-facts,.demo-process { grid-template-columns:1fr; }
  .demo-content { margin-left:-10px; margin-right:-10px; padding-left:22px; padding-right:22px; }
  .demo-fact { min-height:120px; }
}

/* 11 — Y2K music */
.y2k { font-family:'Space Grotesk',sans-serif;color:#172047;background:#b9e9ff; }
.y2k .demo-shell{padding:20px clamp(18px,4vw,58px) 75px;background:radial-gradient(circle at 20% 15%,#ff9de2,transparent 25%),radial-gradient(circle at 80% 40%,#a9ffab,transparent 25%),linear-gradient(135deg,#d4f8ff,#c5bbff)}.y2k .demo-nav{padding:12px 18px;border:2px solid #fff;border-radius:999px;background:rgba(255,255,255,.35);box-shadow:inset 0 0 18px #fff,0 5px 0 #8395d8}.y2k .demo-brand{font-style:italic;text-transform:lowercase}.y2k .demo-button{padding:11px 20px;border-radius:999px;background:linear-gradient(#fff,#9ad2ff);border:1px solid #7a89c7;box-shadow:inset 0 2px 3px #fff,0 3px 0 #7584c0}
.y2k .demo-hero{min-height:590px;text-align:center;padding:90px 0 50px}.y2k .demo-hero h1{font-size:clamp(4.5rem,12vw,11rem);font-style:italic;color:#535bd9;text-shadow:4px 4px 0 #fff,-3px -3px 0 #ff6ac7}.y2k .demo-hero p{max-width:570px;margin:25px auto;background:rgba(255,255,255,.5);padding:14px 22px;border-radius:999px}.y2k .disc{width:220px;height:220px;margin:30px auto;border-radius:50%;background:radial-gradient(circle,#d8ffff 0 8%,#6675cb 9% 14%,transparent 15%),conic-gradient(#75f4ff,#ff86e1,#fff48b,#8e98ff,#75f4ff);box-shadow:0 0 35px white;animation:spin 9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.y2k .demo-grid{grid-template-columns:repeat(3,1fr);gap:18px}.y2k .demo-card{padding:24px;border:2px solid white;border-radius:25px;background:rgba(255,255,255,.4);box-shadow:5px 7px 0 #8292d2}.y2k .demo-card::before{content:"★";color:#ff59bd;margin-right:8px}

/* 12 — Bauhaus furniture */
.bauhaus { font-family:'DM Sans',sans-serif;color:#111;background:#eee9df; }
.bauhaus .demo-shell{padding:24px clamp(20px,5vw,75px) 80px;background:linear-gradient(90deg,transparent 0 74%,#f0c928 74%)}.bauhaus .demo-nav{max-width:1300px;margin:auto;border-bottom:5px solid;padding-bottom:16px}.bauhaus .demo-brand{font-size:1.5rem}.bauhaus .demo-button{padding:12px 22px;border-radius:50%;background:#0d52a3;color:#fff}
.bauhaus .demo-hero{max-width:1300px;margin:auto;min-height:610px;display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.bauhaus .demo-hero h1{font:800 clamp(4rem,9vw,9rem)/.8 'Syne';text-transform:lowercase}.bauhaus .demo-hero p{max-width:480px}.bauhaus .shape-art{height:460px;position:relative}.bauhaus .shape-art::before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;background:#d93126;top:20px;right:20px}.bauhaus .shape-art::after{content:"";position:absolute;width:220px;height:330px;background:#0d52a3;bottom:0;left:20px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.bauhaus .demo-grid{max-width:1300px;margin:auto;grid-template-columns:2fr 1fr 1fr;border:4px solid}.bauhaus .demo-card{padding:25px;border-right:4px solid;min-height:170px}.bauhaus .demo-card:nth-child(2){background:#d93126;color:white}.bauhaus .demo-card:last-child{border:0;background:#f0c928}

/* 13 — Dark cinematic automotive */
.cinematic { font-family:'DM Sans',sans-serif;color:#f5f5f2;background:#080808; }
.cinematic .demo-shell{padding:22px clamp(20px,5vw,75px) 75px;background:radial-gradient(ellipse at 65% 40%,#2b2b2b 0,transparent 38%),#080808}.cinematic .demo-nav{position:relative;z-index:2;text-transform:uppercase;font-size:.76rem;letter-spacing:.15em}.cinematic .demo-brand{font-size:1.35rem;letter-spacing:.25em}.cinematic .demo-button{padding:12px 20px;border:1px solid #777}
.cinematic .demo-hero{min-height:680px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-bottom:55px}.cinematic .demo-hero::before{content:"";position:absolute;width:min(800px,90vw);height:260px;right:-3vw;top:22%;background:linear-gradient(165deg,transparent 25%,#3a3a3b 26% 45%,#111 46% 58%,transparent 59%),radial-gradient(circle at 25% 82%,#050505 0 10%,#666 11% 13%,transparent 14%),radial-gradient(circle at 76% 82%,#050505 0 10%,#666 11% 13%,transparent 14%);filter:drop-shadow(0 35px 30px #000)}.cinematic .demo-hero h1{font:500 clamp(4rem,10vw,10rem)/.8 'Bodoni Moda';text-transform:uppercase;max-width:900px;position:relative}.cinematic .demo-hero p{color:#999;max-width:480px;position:relative}.cinematic .demo-kicker{color:#dc3f2e}
.cinematic .demo-grid{grid-template-columns:repeat(3,1fr);border-top:1px solid #333}.cinematic .demo-card{padding:30px;border-right:1px solid #333}.cinematic .demo-card:last-child{border:0}.cinematic .demo-card b{display:block;color:#dc3f2e;font-size:.7rem;letter-spacing:.15em}

/* 14 — Scandinavian interiors */
.scandi { font-family:'DM Sans',sans-serif;color:#32342f;background:#f5f3ec; }
.scandi .demo-shell{padding:28px clamp(22px,6vw,95px) 90px}.scandi .demo-nav{max-width:1280px;margin:auto}.scandi .demo-brand{font-weight:500;letter-spacing:.08em}.scandi .demo-button{padding:12px 22px;background:#333c35;color:white;border-radius:2px}
.scandi .demo-hero{max-width:1280px;margin:70px auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}.scandi .demo-hero h1{font:400 clamp(4rem,8vw,8rem)/.9 'Cormorant Garamond';letter-spacing:-.04em}.scandi .demo-hero p{color:#777b73;max-width:440px}.scandi .room-art{height:520px;background:linear-gradient(90deg,transparent 68%,#d8d1c2 68%),linear-gradient(#e9e4da 72%,#b8a68c 72%);position:relative}.scandi .room-art::before{content:"";position:absolute;width:55%;height:28%;bottom:14%;left:10%;background:#687066;border-radius:8px 8px 2px 2px;box-shadow:0 16px 0 -10px #423d36}.scandi .room-art::after{content:"";position:absolute;width:90px;height:90px;border:18px solid #c9b27c;border-radius:50%;right:10%;top:12%}
.scandi .demo-grid{max-width:1280px;margin:auto;grid-template-columns:repeat(3,1fr);gap:1px;background:#c9c6bd}.scandi .demo-card{padding:28px;background:#f5f3ec;min-height:170px}.scandi .demo-card span{font-family:'Cormorant Garamond';font-size:2rem}

/* 15 — Handcrafted collage agency */
.collage { font-family:'DM Sans',sans-serif;color:#222;background:#eee7d4; }
.collage .demo-shell{padding:18px clamp(18px,4vw,60px) 80px;background-image:radial-gradient(#c7bda7 1px,transparent 1px);background-size:18px 18px}.collage .demo-nav{background:#f7f1df;padding:14px 18px;border:1px solid #777;box-shadow:4px 5px 0 rgba(0,0,0,.18);transform:rotate(.2deg)}.collage .demo-brand{font-family:'Courier New';text-transform:uppercase}.collage .demo-button{padding:11px 18px;background:#e84c38;color:#fff;transform:rotate(-2deg)}
.collage .demo-hero{min-height:620px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:35px}.collage .demo-hero h1{font:800 clamp(4rem,10vw,9rem)/.8 'Syne';text-transform:uppercase}.collage .demo-hero h1 span{display:inline-block;background:#f1d64f;padding:0 10px;transform:rotate(-2deg)}.collage .demo-hero p{max-width:500px;background:#fff;padding:20px;box-shadow:5px 7px 0 rgba(0,0,0,.15);transform:rotate(1deg)}.collage .paper-art{height:440px;background:#3878bd;clip-path:polygon(3% 4%,97% 0,100% 94%,4% 100%);position:relative;transform:rotate(3deg)}.collage .paper-art::before{content:"IDEAS";position:absolute;inset:20% 8%;display:grid;place-items:center;border:6px dashed #fff;color:#fff;font:800 4rem 'Syne';transform:rotate(-8deg)}
.collage .demo-grid{grid-template-columns:repeat(3,1fr);gap:24px}.collage .demo-card{padding:24px;background:#fff;box-shadow:6px 8px 0 rgba(0,0,0,.18)}.collage .demo-card:nth-child(2){background:#f1d64f;transform:rotate(-1.5deg)}.collage .demo-card:nth-child(3){background:#e84c38;color:#fff;transform:rotate(1.5deg)}

/* 16 — Memphis education */
.memphis { font-family:'Space Grotesk',sans-serif;color:#292344;background:#fff7e9; }
.memphis .demo-shell{padding:22px clamp(18px,5vw,72px) 80px;background:radial-gradient(circle at 8% 30%,#ffca3a 0 5%,transparent 5.2%),radial-gradient(circle at 92% 60%,#8ac926 0 7%,transparent 7.2%),#fff7e9}.memphis .demo-nav{max-width:1250px;margin:auto}.memphis .demo-brand{font-size:1.4rem;color:#6a4c93}.memphis .demo-button{padding:13px 22px;border-radius:13px 13px 13px 2px;background:#ff595e;color:#fff;box-shadow:5px 5px 0 #292344}
.memphis .demo-hero{max-width:1250px;margin:60px auto;display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}.memphis .demo-hero h1{font:800 clamp(4rem,8vw,8rem)/.86 'Syne';color:#292344}.memphis .demo-hero h1 em{color:#ff595e;font-style:normal}.memphis .demo-hero p{max-width:490px}.memphis .learn-art{height:430px;border:4px solid #292344;border-radius:50% 50% 12% 12%;background:repeating-linear-gradient(135deg,#1982c4 0 24px,#fff 25px 48px);box-shadow:15px 15px 0 #ffca3a;position:relative}.memphis .learn-art::after{content:"A+";position:absolute;inset:25%;display:grid;place-items:center;border-radius:50%;background:#ff595e;color:white;font:800 5rem 'Syne';border:4px solid #292344}
.memphis .demo-grid{max-width:1250px;margin:auto;grid-template-columns:repeat(3,1fr);gap:20px}.memphis .demo-card{padding:25px;border:3px solid #292344;border-radius:25px 25px 6px 25px;background:#fff;box-shadow:7px 7px 0 #292344}.memphis .demo-card:nth-child(2){background:#8ac926}.memphis .demo-card:nth-child(3){background:#ffca3a}

/* 17 — Corporate modernism */
.corporate { font-family:'DM Sans',sans-serif;color:#10223f;background:#f3f6fb; }
.corporate .demo-shell{padding:24px clamp(22px,6vw,90px) 80px}.corporate .demo-nav{max-width:1300px;margin:auto}.corporate .demo-brand{color:#175cd3;font-size:1.35rem}.corporate .demo-button{padding:13px 21px;border-radius:8px;background:#175cd3;color:#fff;box-shadow:0 8px 20px rgba(23,92,211,.2)}
.corporate .demo-hero{max-width:1300px;margin:65px auto;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.corporate .demo-hero h1{font-size:clamp(3.8rem,7vw,7rem);letter-spacing:-.065em}.corporate .demo-hero h1 span{color:#175cd3}.corporate .demo-hero p{color:#60708c;max-width:540px}.corporate .data-art{height:430px;border-radius:18px;background:#fff;box-shadow:0 25px 70px rgba(16,34,63,.12);padding:35px;display:flex;align-items:end;gap:18px}.corporate .data-art i{display:block;flex:1;border-radius:8px 8px 0 0;background:linear-gradient(#66a1ff,#175cd3)}.corporate .data-art i:nth-child(1){height:35%}.corporate .data-art i:nth-child(2){height:65%}.corporate .data-art i:nth-child(3){height:48%}.corporate .data-art i:nth-child(4){height:88%}
.corporate .demo-grid{max-width:1300px;margin:auto;grid-template-columns:repeat(3,1fr);gap:20px}.corporate .demo-card{padding:26px;border:1px solid #dbe2ee;border-radius:13px;background:#fff}.corporate .demo-card b{color:#175cd3}

/* 18 — Mediterranean restaurant */
.mediterranean { font-family:'DM Sans',sans-serif;color:#143f45;background:#fbf1da; }
.mediterranean .demo-shell{padding:24px clamp(20px,6vw,90px) 85px;background:radial-gradient(circle at 90% 15%,#e8b949 0 12%,transparent 12.2%),#fbf1da}.mediterranean .demo-nav{max-width:1300px;margin:auto;border-bottom:1px solid #8aa3a0;padding-bottom:16px}.mediterranean .demo-brand{font:600 1.8rem 'Cormorant Garamond';color:#d45032}.mediterranean .demo-button{padding:12px 22px;border-radius:999px;background:#143f45;color:#fff}
.mediterranean .demo-hero{max-width:1300px;margin:60px auto;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.mediterranean .demo-hero h1{font:600 clamp(4rem,8vw,8rem)/.87 'Cormorant Garamond';color:#143f45}.mediterranean .demo-hero p{max-width:470px;color:#617b79}.mediterranean .plate{aspect-ratio:1;border:28px solid #fff;border-radius:50%;background:radial-gradient(circle,#e8b949 0 8%,transparent 9%),repeating-conic-gradient(#d45032 0 12deg,#fbf1da 13deg 25deg);box-shadow:0 25px 50px rgba(39,64,59,.18)}
.mediterranean .demo-grid{max-width:1300px;margin:auto;grid-template-columns:repeat(3,1fr);gap:20px}.mediterranean .demo-card{padding:28px;border-top:2px solid #d45032}.mediterranean .demo-card span{font:600 2rem 'Cormorant Garamond';color:#d45032}

/* 19 — Newspaper journalism */
.newspaper { font-family:Georgia,serif;color:#171717;background:#f4f0e7; }
.newspaper .demo-shell{padding:18px clamp(18px,4vw,58px) 70px}.newspaper .demo-nav{border-top:4px double;border-bottom:4px double;padding:10px 0}.newspaper .demo-brand{font:700 2rem 'Playfair Display';letter-spacing:-.03em}.newspaper .demo-button{font-family:Arial;padding:9px 15px;background:#b51f24;color:#fff}.newspaper .demo-nav__links{font-family:Arial;font-size:.75rem;text-transform:uppercase}
.newspaper .demo-hero{padding:40px 0 30px;border-bottom:1px solid}.newspaper .demo-kicker{font-family:Arial;color:#b51f24}.newspaper .demo-hero h1{font:700 clamp(4rem,9vw,9rem)/.85 'Playfair Display';letter-spacing:-.06em;max-width:1200px}.newspaper .demo-hero p{font-size:1.2rem;max-width:780px;columns:2;column-gap:35px}.newspaper .press-art{height:260px;margin-top:28px;background:linear-gradient(135deg,#777,#ddd);filter:grayscale(1);position:relative}.newspaper .press-art::after{content:"SPECIAL REPORT · ISSUE 024";position:absolute;bottom:0;left:0;background:#171717;color:#fff;padding:10px 15px;font:700 .75rem Arial}
.newspaper .demo-grid{grid-template-columns:1.4fr 1fr 1fr}.newspaper .demo-card{padding:24px;border-right:1px solid}.newspaper .demo-card:last-child{border:0}.newspaper .demo-card h3{font:700 1.8rem 'Playfair Display';margin-top:0}.newspaper .demo-card p{line-height:1.55}

/* 20 — Spatial 3D interface */
.spatial { font-family:'Space Grotesk',sans-serif;color:#f0f3ff;background:#03040a;perspective:1000px; }
.spatial .demo-shell{padding:22px clamp(18px,5vw,75px) 80px;background:radial-gradient(circle at 50% 40%,#182563 0,transparent 36%),radial-gradient(circle at 80% 10%,#592661 0,transparent 25%),#03040a;position:relative}.spatial .demo-nav{position:relative;z-index:3;padding:13px 18px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);backdrop-filter:blur(20px)}.spatial .demo-brand{letter-spacing:.08em}.spatial .demo-button{padding:11px 20px;border-radius:999px;background:#fff;color:#101224}
.spatial .demo-hero{min-height:650px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.spatial .demo-hero h1{font-size:clamp(4rem,10vw,9rem);max-width:1100px;position:relative;z-index:2;background:linear-gradient(#fff,#8e9bd0);background-clip:text;color:transparent}.spatial .demo-hero p{color:#98a0c4;max-width:610px;position:relative;z-index:2}.spatial .cube{position:absolute;width:330px;height:330px;border:1px solid rgba(143,173,255,.5);background:linear-gradient(145deg,rgba(112,99,255,.22),rgba(255,255,255,.02));transform:rotateX(58deg) rotateZ(42deg);box-shadow:inset 0 0 80px rgba(95,132,255,.25),0 0 90px rgba(111,86,255,.2);animation:float 6s ease-in-out infinite}@keyframes float{50%{transform:rotateX(62deg) rotateZ(48deg) translateZ(30px)}}
.spatial .demo-grid{grid-template-columns:repeat(3,1fr);gap:20px}.spatial .demo-card{padding:25px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));backdrop-filter:blur(16px);transform:rotateX(3deg)}.spatial .demo-card b{color:#91a9ff}

@media (max-width:800px){
  .y2k .demo-grid,.bauhaus .demo-grid,.cinematic .demo-grid,.scandi .demo-grid,.collage .demo-grid,.memphis .demo-grid,.corporate .demo-grid,.mediterranean .demo-grid,.newspaper .demo-grid,.spatial .demo-grid{grid-template-columns:1fr}
  .bauhaus .demo-hero,.scandi .demo-hero,.collage .demo-hero,.memphis .demo-hero,.corporate .demo-hero,.mediterranean .demo-hero{grid-template-columns:1fr}
  .newspaper .demo-hero p{columns:1}.cinematic .demo-hero::before{opacity:.45}.bauhaus .demo-card{border-right:0;border-bottom:4px solid}.bauhaus .demo-card:last-child{border:0}
}