:root {
  --bg: #090a0d;
  --surface: #14161c;
  --text: #ffffff;
  --muted: #a8abb4;
  --accent: #3154ff;
  --accent2: #e3b54d;
  --paper: #f3f0e8;
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

body.theme-ai { --bg:#07100f; --surface:#10211e; --text:#f4fff9; --muted:#a7c5bc; --accent:#72ffb8; --accent2:#52a8ff; --paper:#eafff4; }
body.theme-inc { --bg:#170b10; --surface:#26151b; --text:#fff9f2; --muted:#c9aeb7; --accent:#a41f3d; --accent2:#e9c98c; --paper:#f5ede4; }
body.theme-holding { --bg:#12100d; --surface:#201c16; --text:#fbf7ef; --muted:#bcb3a3; --accent:#ff6a26; --accent2:#d4c29e; --paper:#eee8dc; }
body.theme-news { --bg:#080808; --surface:#151515; --text:#fff; --muted:#b0b0b0; --accent:#ff3b2f; --accent2:#f7d541; --paper:#f4f1ea; }
body.theme-tv { --bg:#060713; --surface:#111329; --text:#fff; --muted:#aeb0ce; --accent:#7657ff; --accent2:#ff3d81; --paper:#ecebff; }
body.theme-capital { --bg:#061323; --surface:#10243a; --text:#f7fbff; --muted:#a9bfd4; --accent:#d9aa4b; --accent2:#5ea8d6; --paper:#edf3f7; }
body.theme-realty { --bg:#0c1a15; --surface:#183027; --text:#f7faf3; --muted:#aec2b7; --accent:#c4d08d; --accent2:#dca866; --paper:#f1f1e7; }
body.theme-network { --bg:#050505; --surface:#111; --text:#fff; --muted:#a9a9a9; --accent:#d6ff3f; --accent2:#37c9ff; --paper:#f4f4ed; }
body.theme-art { --bg:#f4f2ed; --surface:#fff; --text:#0b0b0c; --muted:#68686e; --accent:#1640ff; --accent2:#ff5d3b; --paper:#111; }
body.theme-fineart { --bg:#221713; --surface:#34241d; --text:#fff8ec; --muted:#c9b8a7; --accent:#a84936; --accent2:#ddb97b; --paper:#f2e7d5; }
body.theme-lojc { --bg:#f5f1e8; --surface:#fff; --text:#17212c; --muted:#65707a; --accent:#315f91; --accent2:#c7a66a; --paper:#13263a; }

.preview-ribbon { background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 900; letter-spacing: .13em; padding: 8px 18px; text-align: center; text-transform: uppercase; }
.brand-header { align-items:center; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); display:flex; height:76px; justify-content:space-between; padding:0 clamp(20px,5vw,76px); position:sticky; top:0; z-index:20; }
.brand-wordmark { font-size:18px; font-weight:900; letter-spacing:.07em; }
.brand-header nav { display:flex; gap:28px; }
.brand-header nav a { color:var(--muted); font-size:13px; font-weight:800; }
.brand-header nav a:hover { color:var(--accent); }
.brand-actions { align-items:center; display:flex; gap:16px; }
.brand-actions .ecosystem-link { font-size:12px; font-weight:800; }
.brand-pill { align-items:center; background:var(--accent); border-radius:999px; color:var(--bg); display:inline-flex; font-size:13px; font-weight:900; min-height:48px; padding:0 24px; }

.brand-hero { min-height:720px; overflow:hidden; position:relative; }
.brand-hero img { height:100%; inset:0; object-fit:cover; position:absolute; }
.brand-hero::after { background:linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg) 38%, transparent) 65%, transparent), linear-gradient(0deg, var(--bg), transparent 50%); content:""; inset:0; position:absolute; }
.brand-hero-content { bottom:80px; left:clamp(22px,7vw,106px); max-width:850px; position:absolute; right:22px; z-index:2; }
.brand-kicker { color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.16em; margin:0 0 18px; text-transform:uppercase; }
.brand-hero h1 { font-size:clamp(58px,8vw,124px); letter-spacing:-.065em; line-height:.87; margin:0; }
.brand-hero p.brand-deck { color:color-mix(in srgb, var(--text) 82%, transparent); font-size:clamp(19px,2vw,28px); line-height:1.4; margin:28px 0 34px; max-width:760px; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.brand-pill.secondary { background:transparent; border:1px solid color-mix(in srgb, var(--text) 45%, transparent); color:var(--text); }

.brand-section { padding:clamp(74px,9vw,138px) clamp(22px,6vw,94px); }
.brand-section.paper { background:var(--paper); color:var(--bg); }
.brand-section-head { align-items:end; display:flex; justify-content:space-between; margin-bottom:50px; }
.brand-section h2 { font-size:clamp(46px,6vw,90px); letter-spacing:-.055em; line-height:.93; margin:0; max-width:960px; }
.brand-section-head p { color:var(--muted); line-height:1.55; max-width:480px; }
.brand-section.paper .brand-section-head p { color:color-mix(in srgb, var(--bg) 65%, transparent); }
.pillar-grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
.pillar { background:var(--surface); border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:var(--radius); min-height:330px; padding:34px; position:relative; }
.brand-section.paper .pillar { background:color-mix(in srgb, var(--bg) 6%, var(--paper)); border-color:color-mix(in srgb, var(--bg) 12%, transparent); }
.pillar span { color:var(--accent); font-size:11px; font-weight:900; letter-spacing:.15em; }
.pillar h3 { font-size:32px; letter-spacing:-.035em; margin:60px 0 16px; }
.pillar p { color:var(--muted); line-height:1.55; }
.brand-section.paper .pillar p { color:color-mix(in srgb, var(--bg) 65%, transparent); }
.pillar a { bottom:30px; font-size:13px; font-weight:900; position:absolute; }

.feature-band { display:grid; grid-template-columns:1.1fr .9fr; min-height:700px; }
.feature-image { min-height:650px; overflow:hidden; }
.feature-image img { height:100%; object-fit:cover; }
.feature-copy { align-content:center; background:var(--accent); color:var(--bg); display:grid; padding:clamp(48px,7vw,110px); }
.feature-copy small { font-size:11px; font-weight:900; letter-spacing:.15em; }
.feature-copy h2 { font-size:clamp(48px,6vw,92px); letter-spacing:-.06em; line-height:.92; margin:18px 0 26px; }
.feature-copy p { font-size:18px; line-height:1.55; max-width:580px; }

.brand-ticker { border-bottom:1px solid color-mix(in srgb, var(--text) 16%, transparent); border-top:1px solid color-mix(in srgb, var(--text) 16%, transparent); display:flex; gap:38px; overflow:hidden; padding:20px 0; white-space:nowrap; }
.brand-ticker span { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.brand-ticker span::after { color:var(--accent); content:"●"; margin-left:38px; }

.connected-section { background:var(--bg); padding:clamp(70px,8vw,120px) clamp(22px,6vw,94px); }
.connected-head { align-items:end; display:flex; justify-content:space-between; margin-bottom:38px; }
.connected-head h2 { font-size:clamp(42px,5vw,76px); letter-spacing:-.055em; line-height:.94; margin:0; }
.connected-head p { color:var(--muted); line-height:1.5; margin:0; max-width:430px; }
.connection-grid { display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
.connection-card { background:var(--surface); border:1px solid color-mix(in srgb,var(--text) 13%,transparent); border-radius:22px; display:grid; min-height:215px; padding:24px; transition:transform .18s ease,border-color .18s ease; }
.connection-card:hover { border-color:var(--accent); transform:translateY(-4px); }
.connection-card small { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.connection-card strong { align-self:end; font-size:24px; letter-spacing:-.035em; margin:40px 0 8px; }
.connection-card span { color:var(--muted); font-size:12px; line-height:1.4; }
.connection-card b { align-self:end; font-size:13px; margin-top:22px; }

.brand-cta { align-items:center; background:var(--surface); display:flex; gap:60px; justify-content:space-between; padding:clamp(60px,8vw,120px) clamp(22px,6vw,94px); }
.brand-cta h2 { font-size:clamp(48px,6vw,90px); letter-spacing:-.06em; line-height:.92; margin:0; }
.brand-cta p { color:var(--muted); line-height:1.55; max-width:470px; }

.brand-footer { align-items:center; border-top:1px solid color-mix(in srgb, var(--text) 14%, transparent); color:var(--muted); display:flex; font-size:11px; justify-content:space-between; padding:30px clamp(22px,6vw,94px); }

.ecosystem-page { background:#08090c; min-height:100vh; }
.ecosystem-hero { padding:90px clamp(22px,6vw,92px) 70px; }
.ecosystem-hero p { color:#aeb1b9; font-size:20px; line-height:1.5; max-width:750px; }
.ecosystem-hero h1 { color:white; font-size:clamp(60px,9vw,142px); letter-spacing:-.07em; line-height:.86; margin:20px 0 34px; max-width:1100px; }
.ecosystem-note { border-left:3px solid #3154ff; color:#aeb1b9; font-size:13px; padding:4px 0 4px 18px; }
.ecosystem-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); padding:0 clamp(22px,6vw,92px) 100px; }
.ecosystem-card { background:#15171d; border:1px solid #292c35; border-radius:26px; display:grid; min-height:300px; overflow:hidden; padding:28px; position:relative; transition:transform .18s ease, border-color .18s ease; }
.ecosystem-card:hover { border-color:#536fff; transform:translateY(-5px); }
.ecosystem-card span { color:#7288ff; font-size:10px; font-weight:900; letter-spacing:.13em; }
.ecosystem-card h2 { color:#fff; font-size:34px; letter-spacing:-.045em; margin:70px 0 12px; }
.ecosystem-card p { color:#9ba0aa; line-height:1.5; margin:0; }
.ecosystem-card strong { align-self:end; color:white; font-size:13px; margin-top:30px; }
.ecosystem-card.featured { background:linear-gradient(145deg,#102c9d,#07102d); grid-column:span 2; }

@media(max-width:1000px){ .brand-header nav{display:none}.pillar-grid,.ecosystem-grid{grid-template-columns:1fr 1fr}.connection-grid{grid-template-columns:1fr 1fr}.feature-band{grid-template-columns:1fr}.feature-image{min-height:520px}.brand-section-head,.brand-cta,.connected-head{align-items:start;display:grid;gap:22px}.ecosystem-card.featured{grid-column:span 2} }
@media(max-width:650px){ .brand-header{height:66px}.brand-wordmark{font-size:13px}.brand-actions .ecosystem-link{display:none}.brand-hero{min-height:690px}.brand-hero h1{font-size:58px}.brand-hero-content{bottom:38px}.pillar-grid,.ecosystem-grid,.connection-grid{grid-template-columns:1fr}.ecosystem-card.featured{grid-column:span 1}.brand-section-head{align-items:start;display:grid;gap:20px}.pillar{min-height:300px}.feature-image{min-height:430px}.brand-cta{gap:30px}.brand-footer{align-items:start;display:grid;gap:10px}.ecosystem-hero{padding-top:60px}.ecosystem-hero h1{font-size:64px} }
