:root { --ink:#f7f8fc; --muted:#aeb7c9; --blue:#078cff; --blue-deep:#034cc9; --violet:#a548ff; --violet-deep:#53168e; color-scheme:dark; }
* { box-sizing:border-box; }
html { background:#02040a; scroll-behavior:smooth; }
body { margin:0; background:#02040a; color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }
.site-shell { position:relative; min-height:100svh; overflow:hidden; background:radial-gradient(circle at 50% -20%,rgba(0,87,210,.19),transparent 34%),linear-gradient(180deg,#02040a 0%,#040815 50%,#010207 100%); }
.site-shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.23; background-image:radial-gradient(rgba(255,255,255,.8) .55px,transparent .55px); background-size:19px 19px; mask-image:linear-gradient(to bottom,black,transparent 60%); }
.ambient { position:absolute; width:58vw; height:270px; top:20px; opacity:.72; pointer-events:none; }
.ambient::before,.ambient::after { content:""; position:absolute; inset:0; border-radius:50%; border-top:1px solid currentColor; transform:rotate(12deg); box-shadow:0 -4px 24px currentColor; mask-image:linear-gradient(90deg,transparent 3%,black 40%,transparent 98%); }
.ambient::after { transform:translateY(28px) rotate(16deg); opacity:.45; }
.ambient-left { left:-18vw; color:#007cff; }
.ambient-right { right:-18vw; color:#6e1dff; transform:scaleX(-1); }
.page-frame { width:min(1260px,calc(100% - 48px)); margin:0 auto; padding:34px 0 24px; position:relative; z-index:1; }
.hero-header { text-align:center; }
.eyebrow { margin:0; color:#d7d9e0; font-size:12px; font-weight:500; letter-spacing:.43em; line-height:1.4; }
.signal-dot { display:block; width:11px; height:11px; margin:12px auto 8px; border-radius:999px; background:#00a8ff; box-shadow:0 0 11px #00a8ff,0 0 42px #006dff; }
h1 { margin:0; font-size:clamp(42px,5vw,68px); line-height:.94; letter-spacing:-.045em; font-weight:800; text-wrap:balance; }
h1 span { display:block; } h1 .title-inline { display:inline; } h1 em { color:#087eff; font-style:normal; }
.subtitle { margin:13px auto 14px; color:#c6cbd6; font-size:16px; }
.brand-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.brand-card { --card-accent:var(--blue); --card-accent-deep:var(--blue-deep); position:relative; min-height:395px; display:grid; grid-template-columns:minmax(0,.95fr) minmax(220px,1.05fr); grid-template-rows:1fr auto auto; gap:12px; padding:27px 27px 20px; border:1px solid color-mix(in srgb,var(--card-accent),transparent 38%); border-radius:24px; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--card-accent),transparent 92%),transparent 48%),linear-gradient(145deg,rgba(3,12,29,.97),rgba(1,5,15,.94)); box-shadow:inset 0 0 38px rgba(0,0,0,.26),0 18px 45px rgba(0,0,0,.24); }
.agency-card { --card-accent:var(--violet); --card-accent-deep:var(--violet-deep); background:linear-gradient(135deg,rgba(150,44,255,.08),transparent 48%),linear-gradient(145deg,rgba(15,8,31,.97),rgba(5,4,18,.94)); }
.card-glow { position:absolute; width:320px; height:260px; right:-74px; bottom:-90px; border-radius:50%; background:var(--card-accent); opacity:.11; filter:blur(48px); }
.card-copy { position:relative; z-index:2; }
.brand-icon { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--blue); border-radius:7px; color:#19a3ff; font-size:20px; line-height:1; box-shadow:inset 0 0 14px rgba(0,133,255,.17),0 0 16px rgba(0,133,255,.1); }
.brand-icon.agency { border-color:var(--violet); color:#c064ff; font-size:15px; font-weight:700; box-shadow:inset 0 0 14px rgba(170,67,255,.17),0 0 16px rgba(170,67,255,.1); }
.brand-card h2 { margin:12px 0 3px; font-size:clamp(27px,2.3vw,36px); line-height:1; letter-spacing:.01em; }
.brand-card h2 span,.brand-card h3 strong { color:var(--card-accent); }
.category { margin:0 0 17px; color:var(--card-accent); font-size:11px; font-weight:700; letter-spacing:.075em; }
.brand-card h3 { margin:0; font-size:clamp(19px,1.6vw,24px); line-height:1.08; letter-spacing:-.025em; }
.body-copy { max-width:365px; margin:13px 0 0; color:#bbc3d3; font-size:14px; line-height:1.35; }
.card-art { min-height:240px; align-self:center; position:relative; z-index:1; display:grid; place-items:center; background-position:center; background-repeat:no-repeat; background-size:contain; }
.card-art::before { content:""; position:absolute; width:95%; aspect-ratio:1; border-radius:50%; border:1px solid color-mix(in srgb,var(--card-accent),transparent 65%); box-shadow:inset 0 0 30px color-mix(in srgb,var(--card-accent),transparent 83%),0 0 24px color-mix(in srgb,var(--card-accent),transparent 82%); opacity:.6; }
.card-art img { position:relative; z-index:1; width:170%; max-width:none; height:auto; transform:translateX(-6%); filter:drop-shadow(0 18px 28px rgba(0,0,0,.46)); }
.agency-art img { width:165%; transform:translateX(-5%); }
.tags { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:9px; position:relative; z-index:2; }
.tag { min-height:29px; display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid color-mix(in srgb,var(--card-accent),transparent 70%); border-radius:6px; background:rgba(1,5,14,.54); color:#edf3ff; font-size:9px; font-weight:700; letter-spacing:.025em; white-space:nowrap; }
.tag i { color:var(--card-accent); font-size:13px; font-style:normal; }
.primary-cta { grid-column:1/-1; width:67%; min-height:45px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:28px; border:1px solid color-mix(in srgb,var(--card-accent),white 8%); border-radius:7px; background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent),#10162b 22%),var(--card-accent-deep)); color:white; text-decoration:none; font-size:13px; font-weight:800; letter-spacing:.025em; box-shadow:0 10px 30px color-mix(in srgb,var(--card-accent),transparent 76%); transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.primary-cta:hover,.primary-cta:focus-visible { transform:translateY(-2px); filter:brightness(1.16); box-shadow:0 14px 34px color-mix(in srgb,var(--card-accent),transparent 66%); }
.primary-cta:focus-visible,.language-switch button:focus-visible { outline:2px solid white; outline-offset:3px; }
.primary-cta b { font-size:21px; font-weight:400; }
.language-section { text-align:center; }
.section-divider { width:min(580px,100%); margin:18px auto 10px; display:flex; align-items:center; gap:24px; color:#c7cbd4; font-size:10px; letter-spacing:.25em; white-space:nowrap; }
.section-divider::before,.section-divider::after { content:""; height:1px; flex:1; background:#1a2638; }
.language-switch { display:flex; justify-content:center; gap:18px; }
.language-switch button { min-width:170px; height:39px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid #26344a; border-radius:7px; background:linear-gradient(180deg,#101722,#070b13); color:#dce2ec; font:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.language-switch button.active { border-color:#058cff; background:linear-gradient(180deg,#10213a,#08101e); box-shadow:0 0 17px rgba(0,129,255,.2),inset 0 0 11px rgba(0,129,255,.08); }
.language-switch button span { font-size:20px; }
.language-section>p { margin:8px 0 0; color:#7f899b; font-size:11px; }
footer { margin-top:14px; color:#8e96a7; text-align:center; font-size:9px; letter-spacing:.16em; line-height:1.7; }
footer span { margin:0 8px; }

@media (max-width:1050px) {
  .page-frame { width:min(760px,calc(100% - 32px)); }
  .brand-grid { grid-template-columns:1fr; }
  .brand-card { min-height:350px; grid-template-columns:1fr 1fr; }
  .card-art { min-height:210px; }
  .subtitle { margin-bottom:18px; }
}

@media (max-width:640px) {
  .page-frame { width:min(100% - 24px,430px); padding:22px 0 17px; }
  .ambient { width:95vw; height:150px; top:36px; }
  .ambient-left { left:-46vw; } .ambient-right { right:-46vw; }
  .eyebrow { font-size:7px; letter-spacing:.29em; }
  .signal-dot { width:7px; height:7px; margin:8px auto 7px; }
  h1 { font-size:clamp(31px,10vw,42px); line-height:.97; }
  .subtitle { max-width:310px; margin:9px auto 18px; font-size:12px; line-height:1.4; }
  .brand-grid { gap:11px; }
  .brand-card { min-height:196px; grid-template-columns:minmax(0,1.15fr) minmax(112px,.85fr); grid-template-rows:1fr auto; gap:7px; padding:14px 14px 12px; border-radius:11px; }
  .brand-icon { width:27px; height:27px; border-radius:5px; font-size:14px; }
  .brand-icon.agency { font-size:10px; }
  .brand-card h2 { margin:7px 0 2px; font-size:20px; }
  .category { margin-bottom:8px; font-size:7px; }
  .brand-card h3 { font-size:14px; line-height:1.08; }
  .body-copy { display:none; }
  .card-art { min-height:112px; transform:scale(1.12); }
  .card-art::before { width:115%; }
  .card-art img { width:188%; transform:translateX(-8%); }
  .agency-art img { width:185%; transform:translateX(-7%); }
  .tags { grid-column:1/-1; gap:5px; max-height:31px; overflow:hidden; }
  .tag { min-height:24px; padding:4px 7px; gap:4px; border-radius:4px; font-size:6.5px; }
  .tag i { font-size:9px; }
  .primary-cta { grid-column:1/-1; width:100%; min-height:36px; gap:18px; border-radius:5px; font-size:9px; }
  .primary-cta b { font-size:15px; }
  .section-divider { margin-top:17px; gap:10px; font-size:7px; letter-spacing:.2em; }
  .language-switch { gap:8px; }
  .language-switch button { min-width:0; flex:1; height:34px; gap:7px; font-size:8px; }
  .language-switch button span { font-size:16px; }
  .language-section>p { max-width:280px; margin:7px auto 0; font-size:8px; line-height:1.4; }
  footer { max-width:330px; margin:11px auto 0; font-size:6.5px; letter-spacing:.1em; }
  footer span { margin:0 4px; }
}

@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }