/* Ozil visual identity: stadium blue, ice and electric mint. Dime supplies layout, not branding. */
:root{--ink:#132744;--paper:#f5f8fc;--white:#fff;--lime:#b9f582;--pink:#2860ed;--blue:#2055d8;--muted:#53677f;--line:#d6e0ec;--pitch:#10294b}
body{background:var(--paper)}
.header{background:#fff;border-bottom:1px solid var(--line)}
.header .ball{background:var(--blue);color:#fff;border:0;transform:none;border-radius:11px}
.header .brand,.header .brand>span:not(.ball){color:var(--ink)}
.header .account-link{box-shadow:none;border:1px solid var(--line);border-radius:30px;background:#eef4fc}
.language-switch{background:var(--paper)}
.hero,.dime-hero,.dime-article-head{background:radial-gradient(ellipse at 90% 12%,#d4e7ff 0,transparent 55%),linear-gradient(135deg,#f4f8ff,#e8f2ff);border-bottom:1px solid #cadcec}
.tool-hero .intro-copy>h1{font-family:Barlow,Impact,sans-serif;font-style:italic;font-weight:800;line-height:1.02;letter-spacing:-1.2px;font-size:clamp(48px,5.5vw,80px)}
.tool-hero .intro-copy>.display{color:#2354a6;font-size:clamp(30px,3.2vw,47px);line-height:1.1}
.hero-copy h1{font:italic 800 clamp(66px,7vw,104px)/.95 Barlow,Impact,sans-serif;letter-spacing:-1.5px}
.hero .eyebrow,.hero-copy>.eyebrow{color:#2354a6}
.hero-proof{border-color:#b8cce5}.hero-proof span:before{color:#2055d8}
.button,.dime-generator .button{border:1px solid #b3c6dd;box-shadow:none;border-radius:12px;background:#fff;color:var(--ink)}
.button.primary,.dime-generator .button.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 16px #2055d826}
.button:hover,.dime-generator .button:hover{background:#e2efff;color:var(--ink);transform:translateY(-1px)}
.button.primary:hover,.dime-generator .button.primary:hover{background:#1748bd;color:#fff}
.tool-hero .intro-copy>.hero-transformation,.hero-transformation{transform:none;background:#102e53;border:1px solid #244a75;box-shadow:0 22px 55px #183c6522;border-radius:28px;padding:24px;color:#fff;position:relative;isolation:isolate;overflow:hidden}
.hero-transformation:before,.hero-art:before{content:'';position:absolute;inset:0;background:url('/media/ozil-pitch-grid.svg') center/cover no-repeat;opacity:.3;z-index:-1;pointer-events:none}
.transformation-pair{grid-template-columns:1fr 1fr;align-items:start;gap:24px;position:relative}
.hero-transformation .transformation-photo,.hero-transformation .transformation-result{transform:none;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;overflow:visible}
.hero-transformation figure figcaption{color:#e6f1ff;font-size:12px;letter-spacing:1.6px;text-align:left;padding:0 0 14px;line-height:1.2}
.hero-transformation .transformation-photo img,.hero-transformation .transformation-result video{border:3px solid #ffffffd9;border-radius:14px;width:100%;aspect-ratio:9/16;object-fit:cover;box-shadow:0 12px 24px #061a3555}
.hero-transformation .transformation-photo img{filter:none}
.transformation-arrow{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:42px;height:42px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border:4px solid #102e53;border-radius:50%;font-size:26px;z-index:2}
.transformation-footer{margin-top:22px;gap:14px;font-size:12px}.transformation-footer,.transformation-footer button{color:#fff}
.hero-motion{background:#ffffff12;border:1px solid #ffffff55;color:#fff;border-radius:7px}
.dime-generator{background:#fff;border:1px solid #cad9ea;border-radius:22px;box-shadow:0 16px 40px #183c6512}
.dime-generator .upload{background:#f0f6ff;border:2px dashed #9db4d2;border-radius:16px}
.creator-step>span{background:#e8f1ff;border:0;color:var(--blue)}
.trend-option{border:1px solid #cad7e7;border-radius:14px;background:#fff}
.trend-option:has(input:checked){border:2px solid var(--blue);background:#edf4ff;box-shadow:none}
.dime-generator .option-card:has(input:checked){background:#eaf4ff;border:1px solid var(--blue);box-shadow:0 0 0 1px var(--blue)}
.dime-generator .option-card small,.dime-generator .option-card strong{color:var(--ink)}
.pill{background:#e5f7d9;color:#26492a;border:1px solid #c4dfb3}
.showcase,.dime-samples{background:#10294b}.showcase-card,.dime-sample{background:#183759;border:1px solid #4d6c8b;border-radius:20px}
.showcase-heading p,.showcase-note,.showcase-meta,.showcase-detail,.sample-caption p{color:#cadbeb}
.section-head h2 em{color:var(--lime)}
.showcase-source,.sample-media>img{transform:none;border-radius:10px}
.sample-media>img{border:3px solid #fff}.sample-media>video{border:1px solid #7d9bbb;border-radius:10px}
.price-card,.guide-card,.article-card,.creation-card{border:1px solid #cfdeed;box-shadow:0 8px 22px #183c6508;border-radius:16px}
.price-card.recommended{background:#eaf4ff;border:2px solid var(--blue);box-shadow:0 10px 30px #2055d814}
.dime-pricing{background:#eaf1fa}.pricing>.fine{color:var(--muted)}
.guide-card:hover{background:#e7f1ff}.copy-section,.editorial-grid article{border-top:2px solid #b5cce7}
.section-number{color:var(--blue)}.article-meta,.source-line{color:var(--muted)}
.hero-art{height:auto;min-height:390px;max-width:none;width:100%;padding:30px;display:grid;grid-template-columns:.7fr 1.3fr;gap:22px;align-items:center;background:#102e53;border:1px solid #244a75;border-radius:28px;position:relative;isolation:isolate;box-shadow:0 22px 55px #183c6522;overflow:hidden}
.hero-art .blue-slab,.hero-art .doodle,.hero-art .phone-notch{display:none}
.hero-art .hero-input,.hero-art .hero-phone{position:static;top:auto;left:auto;right:auto;width:100%;margin:0;padding:0;transform:none;background:transparent;border:0;border-radius:0;box-shadow:none}
.hero-art .hero-input img{width:100%;aspect-ratio:2/3;object-fit:cover;border:3px solid #fff;border-radius:12px}
.hero-art .hero-phone video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:3px solid #fff;border-radius:12px;background:#061829}
.hero-art figure figcaption{font:600 10px/1.5 DM,Arial,sans-serif;color:#dbeaff;padding:14px 0 0;letter-spacing:.8px;text-align:left}
.footer{background:#0b213d}.footer .brand{color:var(--lime)}.footer p,.footer small{color:#bdcede}
@media(max-width:760px){
 .tool-hero .intro-copy>h1{font-size:49px}.tool-hero .intro-copy>.display{font-size:34px}
 .tool-hero .intro-copy>.hero-transformation{transform:none;padding:18px;border-radius:22px;margin:20px 0}
 .transformation-pair{gap:18px}.transformation-arrow{width:34px;height:34px;font-size:22px;border-width:3px}
 .hero-transformation figure figcaption{font-size:10px;letter-spacing:1px}.transformation-footer{font-size:11px;flex-wrap:wrap}
 .hero-copy h1{font-size:65px;line-height:.97;letter-spacing:-1px}
 .hero-art{min-height:250px;max-width:100%;height:auto;padding:18px;gap:14px;border-radius:22px}
 .hero-art .hero-phone{width:100%;padding:0;border:0}.hero-art figure figcaption{font-size:9px}
 .price-card.recommended{box-shadow:none}.header nav{gap:16px}
}
.hero-art .hero-input img{height:auto}
.dime-generator .generator-top .eyebrow{color:var(--muted)}

/* A complete dance example is visible beside the football showcase on every creator landing page. */
.dance-demo{display:grid;grid-template-columns:.85fr 1.65fr;gap:34px;align-items:center;background:#eaf3ff;color:var(--ink);padding:30px;border:1px solid #a9c4e5;border-radius:22px;margin:32px 0 38px}
.dance-demo h3{font:700 46px/1.05 Barlow,Impact,sans-serif;color:var(--ink);margin:12px 0 18px}
.dance-demo .eyebrow{color:#2354a6}.dance-demo p{font-size:17px;margin:0 0 20px}.dance-demo .dance-demo-spec{font-size:13px;color:var(--muted)}
.dance-demo-media{display:grid;grid-template-columns:.58fr 1.42fr;gap:24px;align-items:center;min-width:0}
.dance-demo-media figure{margin:0}.dance-demo-media figcaption{font-size:12px;color:var(--muted);margin:0 0 10px}
.dance-demo-media img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border:3px solid #fff;border-radius:12px}
.dance-demo-media video{width:100%;aspect-ratio:16/9;object-fit:contain;border:3px solid #fff;border-radius:12px;background:#10294b;box-shadow:0 12px 25px #16345620}
@media(max-width:760px){.dance-demo{grid-template-columns:1fr;gap:24px;padding:22px;margin:24px 0 30px}.dance-demo h3{font-size:36px}.dance-demo-media{gap:14px;grid-template-columns:.55fr 1.45fr}.dance-demo p{font-size:16px}.dance-demo .button{width:100%}}