.flagship-case { --md-indigo:#6458d8; --md-indigo-deep:#332d78; --md-rose:#e77e9b; --md-cream:#fff8f5; position:relative; overflow:clip; }
.browser-frame--minhadoula-hero { background:#f8f7fd; }
.project-hero-visual .browser-frame--minhadoula-hero > img { width:101.61%; max-width:none; margin-left:-1.61%; }
.flagship-case::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 12%,rgba(100,88,216,.18),transparent 30%),radial-gradient(circle at 8% 54%,rgba(231,126,155,.11),transparent 26%); }
.flagship-intro { max-width:850px; margin-bottom:48px; }
.flagship-intro h2 { max-width:760px; margin:12px 0 16px; font-size:clamp(2rem,5vw,4.4rem); line-height:.98; }
.flagship-intro p { max-width:700px; color:var(--muted); font-size:clamp(1rem,2vw,1.25rem); }
.flagship-sections { display:grid; gap:clamp(28px,6vw,78px); }
.flagship-block { position:relative; display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.45fr); gap:clamp(26px,5vw,72px); align-items:center; min-height:560px; padding:clamp(28px,5vw,72px); border:1px solid rgba(255,255,255,.10); border-radius:38px; background:linear-gradient(145deg,rgba(12,18,32,.94),rgba(7,11,20,.82)); box-shadow:0 34px 90px rgba(0,0,0,.28); isolation:isolate; }
.flagship-block::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(115deg,rgba(255,255,255,.04),transparent 38%); }
.flagship-block--indigo { background:linear-gradient(145deg,rgba(51,45,120,.96),rgba(15,18,43,.94)); }
.flagship-block--rose { background:linear-gradient(145deg,rgba(76,34,57,.96),rgba(22,15,28,.94)); }
.flagship-block--light { color:#272348; background:linear-gradient(145deg,var(--md-cream),#eeeafe); border-color:rgba(100,88,216,.18); }
.flagship-block--light .flagship-copy p { color:#625d79; }
.flagship-block--light .project-kicker { color:var(--md-indigo-deep); }
.flagship-copy { position:relative; z-index:2; }
.flagship-index { display:block; margin-bottom:38px; color:rgba(255,255,255,.22); font-family:"Michroma",sans-serif; font-size:clamp(2.8rem,7vw,6.4rem); line-height:.8; }
.flagship-block--light .flagship-index { color:rgba(51,45,120,.16); }
.flagship-copy h3 { margin:12px 0 18px; font-size:clamp(1.8rem,3.4vw,3.5rem); line-height:1.02; }
.flagship-copy p { color:rgba(232,236,247,.76); font-size:1.05rem; line-height:1.75; }
.flagship-media { display:flex; justify-content:center; align-items:center; gap:clamp(16px,3vw,34px); min-width:0; }
.flagship-shot { position:relative; display:block; min-width:0; padding:0; overflow:hidden; border:9px solid #171826; border-radius:28px; background:#171826; box-shadow:0 28px 60px rgba(0,0,0,.38); cursor:zoom-in; transition:transform .28s ease,box-shadow .28s ease; }
.flagship-shot:hover { transform:translateY(-7px) rotate(-.4deg); box-shadow:0 36px 76px rgba(0,0,0,.48); }
.flagship-shot img { display:block; width:100%; height:auto; max-height:720px; object-fit:contain; border-radius:18px; }
.flagship-shot--crop-left > img:first-child { width:101.61%; max-width:none; margin-left:-1.61%; }
.flagship-shot .flagship-app-avatar { position:absolute; z-index:2; top:2.18%; right:10.56%; width:11.12%; height:auto; aspect-ratio:1; max-height:none; border:2px solid rgba(255,255,255,.94); border-radius:50%; object-fit:cover; box-shadow:0 2px 7px rgba(39,34,79,.18); pointer-events:none; }
.flagship-zoom { position:absolute; right:13px; bottom:13px; display:inline-flex; align-items:center; gap:5px; padding:8px 11px; border-radius:999px; color:#fff; background:rgba(12,13,23,.82); font-size:.75rem; backdrop-filter:blur(8px); opacity:0; transform:translateY(5px); transition:.2s ease; }
.flagship-shot:hover .flagship-zoom,.flagship-shot:focus-visible .flagship-zoom { opacity:1; transform:none; }
.flagship-block--device-pair .flagship-shot,.flagship-block--mobile-focus .flagship-shot { width:min(265px,48%); border-radius:38px; }
.flagship-block--device-pair { grid-template-columns:minmax(360px,.95fr) minmax(0,1.35fr); gap:clamp(34px,4vw,58px); }
.flagship-block--device-pair .flagship-copy { min-width:0; }
.flagship-block--device-pair .flagship-copy h3 { max-width:13ch; font-size:clamp(1.9rem,3vw,2.65rem); line-height:1.08; letter-spacing:-.025em; }
.flagship-block--device-pair .flagship-shot--secondary { transform:translateY(42px); }
.flagship-block--device-pair .flagship-shot--secondary:hover { transform:translateY(35px) rotate(.6deg); }
.flagship-block--mobile-focus { grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); }
.flagship-block--mobile-focus .flagship-copy { order:2; }
.flagship-block--mobile-focus .flagship-media { order:1; }
.flagship-block--wide { grid-template-columns:1fr; }
.flagship-block--wide .flagship-copy { max-width:760px; }
.flagship-block--wide .flagship-shot { width:100%; border-radius:24px; }
.flagship-block--wide .flagship-shot img { max-height:none; }
.flagship-block--architecture .flagship-media { padding:28px; border:1px solid rgba(255,255,255,.09); border-radius:28px; background:rgba(255,255,255,.04); }
@media (max-width:900px) { .flagship-block,.flagship-block--device-pair,.flagship-block--mobile-focus { grid-template-columns:1fr; min-height:0; border-radius:26px; } .flagship-block--device-pair .flagship-copy h3 { max-width:none; } .flagship-block--mobile-focus .flagship-copy,.flagship-block--mobile-focus .flagship-media { order:initial; } .flagship-index { margin-bottom:22px; } }
@media (max-width:560px) { .flagship-block { padding:24px 18px; } .flagship-media { gap:10px; } .flagship-block--device-pair .flagship-shot,.flagship-block--mobile-focus .flagship-shot { width:49%; border-width:5px; border-radius:24px; } .flagship-shot { border-width:5px; border-radius:18px; } .flagship-shot img { border-radius:12px; } .flagship-block--device-pair .flagship-shot--secondary { transform:translateY(20px); } }
@media (prefers-reduced-motion:reduce) { .flagship-shot { transition:none; } }