/* Demetra product composition; shared header, form and footer retain their styles. */
.demetra-page { background:#f7f4fa; }
.demetra-shell { width:min(100%,1280px); margin-inline:auto; padding-inline:32px; }
.demetra-section { padding-block:96px; }
.demetra-kicker { margin:0 0 20px; color:#76528b; font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.demetra-page main h2 { margin:0 0 28px; font-size:clamp(32px,4vw,52px); line-height:1.13; letter-spacing:-.045em; overflow-wrap:anywhere; }
.demetra-page main h3 { margin:0 0 20px; font-size:23px; line-height:1.3; letter-spacing:-.035em; }
.demetra-intro { font-size:18px; line-height:1.75; color:#63516e; }
.demetra-page .primary-button { min-height:50px; padding:12px 22px; font-size:14px; line-height:1.45; text-align:center; }
.demetra-page main a:focus-visible { outline:3px solid #bd43e5; outline-offset:5px; }
.demetra-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; padding-block:86px 60px; }
.demetra-hero h1 { margin:0; max-width:660px; font-size:clamp(42px,4.7vw,68px); line-height:1.07; letter-spacing:-.055em; overflow-wrap:anywhere; }
.demetra-hero h1::first-line { color:#7626d6; }
.demetra-hero-copy .demetra-intro { max-width:540px; margin-block:26px 30px; }
.demetra-timing { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px; margin-top:38px; padding-top:24px; border-top:1px solid #dfd2e8; }
.demetra-timing strong { font-size:19px; color:#512076; }
.demetra-timing p { margin:10px 0 0; font-size:12px; line-height:1.7; color:#705e7b; }
.demetra-visual { position:relative; min-width:0; padding:40px 0 56px; isolation:isolate; }
.demetra-visual::before { content:''; position:absolute; z-index:-1; inset:-30px -24px; border-radius:50%; background:radial-gradient(ellipse,#b951e638,transparent 65%); }
.demetra-browser { overflow:hidden; border:1px solid #674279; border-radius:20px; background:#140c21; box-shadow:0 32px 70px #35124a24; transform:rotate(-3deg); color:#fff; }
.demetra-browser-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #ffffff20; font:10px var(--mono); letter-spacing:.1em; }
.demetra-browser-bar>span:first-child { display:flex; gap:5px; }
.demetra-browser-bar i { width:5px; height:5px; border-radius:50%; background:#af8abd; }
.demetra-browser-content { padding:24px; }
.demetra-preview-banner { position:relative; min-height:180px; padding:24px; overflow:hidden; border-radius:14px; background:linear-gradient(130deg,#51208e,#9624c2 70%,#d658e2); }
.demetra-preview-banner>span { display:block; font-size:12px; }
.demetra-preview-banner strong { display:block; position:relative; z-index:1; max-width:62%; margin-top:20px; font-size:24px; line-height:1.2; }
.demetra-preview-banner svg { position:absolute; inset-inline-end:0; top:8px; width:140px; height:165px; fill:#eec5ff; stroke:#fff; stroke-width:2; }
.demetra-preview-banner svg path { fill:#8721c0; stroke:none; }
.demetra-preview-games { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.demetra-preview-games>div { display:grid; place-items:center; height:104px; border:1px solid #ffffff20; border-radius:12px; background:radial-gradient(circle at 50% 20%,#8c3cb3,#241330); }
.demetra-preview-games svg { width:46px; height:46px; fill:#e7c3ff; }
.demetra-preview-games>div:nth-child(2) { background:radial-gradient(circle at 50% 20%,#54679b,#181b38); }
.demetra-preview-games>div:nth-child(3) { background:radial-gradient(circle at 50% 20%,#a1678f,#301526); }
.demetra-preview-lines { display:flex; gap:12px; margin-top:20px; }
.demetra-preview-lines i { height:6px; width:28%; border-radius:4px; background:#584365; }
.demetra-mobile-preview { position:absolute; inset-inline-end:-8px; bottom:12px; width:124px; padding:10px; border:5px solid #23122f; border-radius:24px; background:#f4eafb; box-shadow:0 15px 35px #150a3240; transform:rotate(7deg); }
.demetra-mobile-preview b { color:#7626d6; font-size:17px; }
.demetra-mobile-banner { height:70px; margin-top:8px; border-radius:9px; background:linear-gradient(135deg,#5c1a8e,#da62e8); }
.demetra-mobile-games { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.demetra-mobile-games i { height:31px; border-radius:5px; background:#c9acd9; }
.demetra-mobile-preview>span { display:block; height:7px; width:35px; margin:12px auto 0; border-radius:10px; background:#baa5c8; }
.demetra-visual-note { position:absolute; bottom:12px; inset-inline-start:20px; display:flex; align-items:center; gap:12px; max-width:70%; padding:14px 18px; border:1px solid #dfc9ea; border-radius:14px; background:#fff; box-shadow:0 12px 25px #441b6410; font-size:13px; font-weight:800; }
.demetra-visual-note svg { width:28px; height:28px; fill:none; stroke:#8e2abd; stroke-width:1.5; flex:none; }
.demetra-visual-caption { grid-column:2; text-align:center; margin:-34px 0 0; color:#786283; font:10px var(--mono); }
.demetra-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding-block:28px; border-block:1px solid #dfd2e8; }
.demetra-benefits article { padding:16px 24px; border-inline-end:1px solid #dfd2e8; }
.demetra-benefits article:last-child { border:0; }
.demetra-benefits svg { width:28px; height:28px; fill:none; stroke:#7626d6; stroke-width:1.5; margin-bottom:14px; }
.demetra-page .demetra-benefits h2 { margin:0 0 10px; font-size:19px; line-height:1.4; letter-spacing:-.02em; }
.demetra-benefits p { margin:0; font-size:13px; color:#705e7b; }
.demetra-about { display:grid; grid-template-columns:1.2fr 1fr; gap:100px; align-items:center; }
.demetra-about>div>p:last-child { color:#705e7b; }
.demetra-receive { padding:34px; border:1px solid #decaea; border-radius:22px; background:linear-gradient(145deg,#fff,#efe3f7); }
.demetra-page main ul { margin:0; padding:0; list-style:none; }
.demetra-page main li { position:relative; padding-inline-start:25px; margin-top:15px; line-height:1.6; }
.demetra-page main li::before { content:''; position:absolute; inset-inline-start:0; top:.55em; width:8px; height:8px; border:2px solid #a345d2; border-radius:3px; }
.demetra-dark { background:radial-gradient(ellipse at 80% 0,#61258a40,transparent 50%),#130b1e; color:#fff; }
.demetra-dark .demetra-kicker { color:#cba9db; }
.demetra-dark .demetra-intro { color:#c4b4ce; }
.demetra-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:40px; }
.demetra-feature { padding:34px; border:1px solid #ffffff20; border-radius:22px; background:linear-gradient(140deg,#ffffff08,#ffffff02); }
.demetra-feature svg,.demetra-related svg { width:38px; height:38px; margin-bottom:28px; fill:none; stroke:#c95ce6; stroke-width:1.4; }
.demetra-feature li { color:#c9bbd2; font-size:15px; }
.demetra-boundaries { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; }
.demetra-boundaries article { padding:32px; border:1px solid #dcccE5; border-radius:20px; background:#fff; }
.demetra-boundaries article:last-child { background:#ebe4f1; }
.demetra-deeper { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; margin-top:28px; padding:24px 28px; border-inline-start:3px solid #ae39d8; background:#efe6f5; border-radius:0 12px 12px 0; }
.demetra-deeper p { flex-basis:100%; margin:0; color:#6c5378; }
.demetra-deeper a { font-size:14px; font-weight:800; text-underline-offset:5px; }
.demetra-deeper a:hover { color:#7626d6; }
.demetra-ecosystem { padding-block:80px 64px; }
.demetra-ecosystem .demetra-intro { max-width:720px; margin-bottom:36px; }
.demetra-payment-note { display:flex; align-items:center; gap:20px; padding-top:32px; }
.demetra-payment-note svg { flex:none; width:40px; height:40px; fill:none; stroke:#c95ce6; stroke-width:1.4; }
.demetra-payment-note p { max-width:730px; margin:0; font-size:16px; color:#c9bbd2; }
.demetra-audience { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.demetra-audience article { display:flex; align-items:center; gap:24px; padding:28px; border:1px solid #dfd2e8; border-radius:18px; background:#fff; }
.demetra-audience article>span { font:14px var(--mono); color:#9852b8; }
.demetra-audience h3 { margin:0!important; font-size:18px!important; line-height:1.6!important; }
.demetra-launch { display:flex; align-items:center; justify-content:space-between; gap:48px; padding:48px; border:1px solid #d9b5ea; border-radius:26px; background:radial-gradient(ellipse at 90% 0,#d48cf842,transparent 65%),#eae0f2; }
.demetra-launch>div { max-width:700px; }
.demetra-launch h2 { margin-bottom:16px!important; }
.demetra-launch p { color:#6d537b; margin:0; font-size:17px; }
.demetra-launch .primary-button { flex:none; }
.demetra-related { padding-bottom:40px; }
.demetra-related a { position:relative; padding:28px; border:1px solid #dfd2e8; border-radius:18px; background:#fff; text-decoration:none; transition:border-color .2s,background .2s; }
.demetra-related a:hover { border-color:#b16ad1; background:#f1e6f8; }
.demetra-related a h3 { margin:0; font-size:21px; }
.demetra-related a>span { position:absolute; inset-inline-end:24px; top:28px; color:#9852b8; }
[dir="rtl"] .demetra-page { font-family:'Noto Sans Arabic',Manrope,sans-serif; }
[dir="rtl"] .demetra-page main h1,[dir="rtl"] .demetra-page main h2,[dir="rtl"] .demetra-page main h3 { letter-spacing:0; line-height:1.5; }
@media (max-width:1000px) {
 .demetra-hero { gap:32px; padding-block:64px 48px; }
 .demetra-about { gap:40px; }
 .demetra-feature { padding:24px; }
 .demetra-benefits article { padding:12px 16px; }
 .demetra-launch { margin-inline:32px; width:calc(100% - 64px); padding:32px; }
 .demetra-preview-banner strong { font-size:18px; }
 .demetra-preview-banner svg { width:110px; }
}
@media (max-width:800px) {
 .demetra-shell { padding-inline:24px; }
 .demetra-section { padding-block:64px; }
 .demetra-hero { grid-template-columns:1fr; gap:24px; }
 .demetra-hero h1 { max-width:600px; font-size:clamp(40px,7.5vw,60px); }
 .demetra-hero-copy .demetra-intro { max-width:650px; }
 .demetra-visual { width:min(100%,530px); margin-inline:auto; }
 .demetra-visual-caption { grid-column:1; margin-top:0; }
 .demetra-benefits { grid-template-columns:1fr 1fr; }
 .demetra-benefits article { padding:20px; }
 .demetra-benefits article:nth-child(2) { border-inline-end:0; }
 .demetra-about { grid-template-columns:1fr; gap:28px; }
 .demetra-product-grid { gap:14px; }
 .demetra-feature { padding:20px; }
 .demetra-feature h3 { font-size:20px!important; }
 .demetra-feature li { font-size:14px; }
 .demetra-launch { flex-direction:column; align-items:flex-start; gap:24px; }
 .demetra-related a { padding:20px; }
}
@media (max-width:600px) {
 .demetra-shell { padding-inline:20px; }
 .demetra-section { padding-block:56px; }
 .demetra-hero { padding-top:48px; }
 .demetra-hero h1 { font-size:42px; }
 .demetra-intro { font-size:16px; }
 .demetra-timing { gap:18px; }
 .demetra-timing strong { font-size:16px; }
 .demetra-timing p { font-size:12px; }
 .demetra-visual { padding-top:16px; }
 .demetra-browser-content { padding:16px; }
 .demetra-preview-banner { min-height:150px; padding:18px; }
 .demetra-preview-banner svg { width:104px; height:130px; }
 .demetra-preview-banner strong { font-size:20px; }
 .demetra-preview-games { gap:8px; }
 .demetra-preview-games>div { height:76px; }
 .demetra-mobile-preview { width:104px; inset-inline-end:0; }
 .demetra-mobile-banner { height:55px; }
 .demetra-mobile-games i { height:24px; }
 .demetra-visual-note { inset-inline-start:0; padding:12px; font-size:11px; max-width:65%; }
 .demetra-benefits article { padding:16px 12px; }
 .demetra-page .demetra-benefits h2 { font-size:16px; }
 .demetra-benefits p { font-size:12px; }
 .demetra-receive,.demetra-boundaries article { padding:24px; }
 .demetra-product-grid,.demetra-boundaries,.demetra-audience { grid-template-columns:1fr; margin-top:28px; }
 .demetra-feature { padding:28px; }
 .demetra-ecosystem { padding-block:56px; }
 .demetra-audience article { padding:24px; gap:16px; }
 .demetra-launch { margin-inline:20px; width:calc(100% - 40px); padding:28px 24px; border-radius:22px; }
 .demetra-deeper { padding:20px; }
 .demetra-related { padding-bottom:20px; }
}
@media (prefers-reduced-motion:reduce) { .demetra-page main a { transition:none; } }