/* ==========================================================================
   MicroFish · App Studio
   A modern, restrained product-studio look. Light, cool-neutral canvas; ink
   text; one quiet accent; screenshots and app icons carry the visual weight.
   System font stacks only (no CDN). Fully RTL-aware via logical properties.
   ========================================================================== */

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --ink: #14181d;
    --ink-2: #4b535d;
    --ink-3: #838c97;
    --line: rgba(20, 24, 29, 0.10);
    --line-2: rgba(20, 24, 29, 0.18);
    --accent: #2f6f7e;
    --accent-ink: #21525d;
    --dark: #12161b;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(20, 24, 29, .04), 0 12px 32px -20px rgba(20, 24, 29, .40);
    --shadow-lg: 0 2px 6px rgba(20, 24, 29, .07), 0 30px 60px -32px rgba(20, 24, 29, .5);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans Arabic",
        "Noto Sans Devanagari", sans-serif;
    --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
main { flex: 1 0 auto; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip-link {
    position: absolute; inset-inline-start: -999px; inset-block-start: 8px;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { inset-inline-start: 16px; }

/* Buttons ----------------------------------------------------------------- */
.btn-primary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    padding: 14px 26px; border-radius: 999px; min-height: 48px;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-primary:hover { transform: translateY(-2px); background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-primary.sm, .btn-ghost.sm { padding: 10px 18px; min-height: 42px; font-size: .92rem; }
.text-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Header ------------------------------------------------------------------ */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(245, 246, 248, .82);
    -webkit-backdrop-filter: saturate(1.3) blur(12px);
    backdrop-filter: saturate(1.3) blur(12px);
    border-block-end: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.wordmark-mark {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background:
        radial-gradient(circle at 30% 30%, #6fb3c2, transparent 60%),
        linear-gradient(150deg, var(--accent), var(--dark));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.wordmark-text { font-size: 1.12rem; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav > a { text-decoration: none; color: var(--ink-2); font-size: .95rem; }
.site-nav > a:hover { color: var(--ink); }

.lang-picker { position: relative; }
.lang-picker summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    color: var(--ink-2); font-size: .92rem; padding: 8px 12px;
    border: 1px solid var(--line-2); border-radius: 999px; min-height: 40px;
}
.lang-picker summary::-webkit-details-marker { display: none; }
.lang-picker summary:hover { color: var(--ink); border-color: var(--accent); }
.globe { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.globe::before { content: ""; position: absolute; inset: -1.5px 3px; border-radius: 50%; border: 1.5px solid currentColor; }
.lang-menu {
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 8px; display: grid; gap: 2px;
    grid-template-columns: 1fr 1fr; min-width: 260px; z-index: 60;
}
.lang-menu a {
    text-decoration: none; color: var(--ink-2); font-size: .9rem;
    padding: 9px 12px; border-radius: 9px;
}
.lang-menu a:hover { background: var(--bg); color: var(--ink); }
.lang-menu a.active { color: var(--accent-ink); font-weight: 700; background: rgba(47, 111, 126, .08); }

/* Hero -------------------------------------------------------------------- */
.hero { padding-block: clamp(60px, 9vw, 116px) clamp(28px, 5vw, 56px); }
.hero-inner { max-width: 780px; }
.hero-eyebrow {
    margin: 0 0 20px; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--accent-ink); font-weight: 700;
}
.hero-title { margin: 0 0 22px; font-size: clamp(2.3rem, 6vw, 4.1rem); }
.hero-lede { margin: 0 0 30px; font-size: clamp(1.02rem, 2.2vw, 1.22rem); color: var(--ink-2); max-width: 62ch; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--ink-2); font-size: .95rem; }
.hero-meta strong { color: var(--ink); font-weight: 700; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.hero .btn-primary { margin-block-start: 32px; }

/* Section heads ----------------------------------------------------------- */
.section-head { margin-block-end: 28px; }
.kicker { margin: 0 0 8px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }
.section-title { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.section-sub { margin: 8px 0 0; color: var(--ink-2); }

/* Featured editorial rows ------------------------------------------------- */
.featured { padding-block: clamp(28px, 5vw, 56px); }
.feature-row { padding-block: clamp(28px, 4vw, 52px); border-block-start: 1px solid var(--line); }
.feature-row:first-of-type { border-block-start: none; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature-row:nth-child(even) .feature-copy { order: 2; }
.feature-idcard { display: flex; align-items: center; gap: 16px; margin-block-end: 18px; }
.feature-icon { width: 66px; height: 66px; border-radius: 15px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.feature-name { margin: 0 0 4px; font-size: 1.5rem; }
.feature-tagline { margin: 0; color: var(--ink-2); font-size: 1rem; }
.feature-overview { margin: 0 0 18px; color: var(--ink-2); }
.feature-highlights { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; }
.feature-highlights li { position: relative; padding-inline-start: 24px; color: var(--ink); }
.feature-highlights li::before {
    content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .62em;
    width: 8px; height: 8px; border-radius: 3px; background: var(--accent); transform: rotate(45deg);
}
.feature-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.feature-shots {
    display: flex; gap: 14px; justify-content: center;
    padding: 22px; border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(47, 111, 126, .10), rgba(18, 22, 27, .05));
}
.feature-shots img {
    width: clamp(96px, 15vw, 150px); height: auto; border-radius: 16px;
    box-shadow: var(--shadow-lg); background: var(--surface);
}
.feature-shots img:nth-child(2) { transform: translateY(-14px); }
.feature-shots img:nth-child(3) { transform: translateY(8px); }
.feature-row:nth-child(3) { --accent: #7a5ea8; }
.feature-row:nth-child(4) { --accent: #b06a4f; }
.feature-row:nth-child(5) { --accent: #5f9463; }

/* Work list --------------------------------------------------------------- */
.worklist { padding-block: clamp(40px, 6vw, 80px); border-block-start: 1px solid var(--line); }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.app-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding-inline-end: 14px; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.app-row:hover { box-shadow: var(--shadow); border-color: var(--line-2); transform: translateY(-2px); }
.app-row-main { display: flex; align-items: center; gap: 16px; flex: 1; text-decoration: none; color: inherit; padding: 14px 16px; min-width: 0; }
.app-row-icon { width: 56px; height: 56px; border-radius: 13px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.app-row-text { display: flex; flex-direction: column; min-width: 0; }
.app-row-name { font-weight: 700; font-size: 1.08rem; }
.app-row-tagline { color: var(--ink-2); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; }
.app-row-cue { margin-inline-start: auto; color: var(--ink-3); font-size: 1.1rem; transition: transform .2s ease, color .2s ease; }
.app-row:hover .app-row-cue { color: var(--accent); transform: translateX(3px); }
.app-row-store {
    flex: none; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--ink);
    padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
}
.app-row-store:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* About ------------------------------------------------------------------- */
.about { padding-block: clamp(40px, 6vw, 80px); border-block-start: 1px solid var(--line); }
.about-inner { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.about-text p { color: var(--ink-2); }
.about-facts { margin: 0; display: grid; gap: 14px; }
.about-facts > div { display: flex; justify-content: space-between; gap: 16px; padding-block-end: 14px; border-block-end: 1px solid var(--line); }
.about-facts dt { margin: 0; color: var(--ink-3); }
.about-facts dd { margin: 0; font-weight: 700; font-size: 1.1rem; }

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb { padding-block: 22px 4px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: var(--ink-3); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:first-child)::before { content: "/"; color: var(--line-2); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* Detail ------------------------------------------------------------------ */
.detail-hero { padding-block: 16px clamp(24px, 4vw, 40px); }
.detail-hero-inner { display: flex; gap: clamp(20px, 4vw, 36px); align-items: center; flex-wrap: wrap; }
.detail-icon { width: 118px; height: 118px; border-radius: 26px; flex: none; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.detail-head { min-width: 260px; flex: 1; }
.detail-title { margin: 0 0 12px; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.detail-tagline { margin: 0 0 22px; color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Gallery ----------------------------------------------------------------- */
.gallery-wrap { padding-block: clamp(20px, 3vw, 36px); }
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-block-end: 16px; }
.gallery-hint { margin: 0; color: var(--ink-3); font-size: .9rem; }
.gallery {
    list-style: none; margin: 0; padding: 4px 24px 20px;
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    max-width: var(--wrap); margin-inline: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.gallery li { flex: none; scroll-snap-align: center; }
.gallery img {
    width: clamp(180px, 42vw, 244px); height: auto; border-radius: 18px;
    box-shadow: var(--shadow-lg); background: var(--surface); border: 1px solid var(--line);
}

.detail-body { padding-block: clamp(24px, 4vw, 44px) clamp(40px, 6vw, 72px); max-width: 760px; }
.detail-body section + section { margin-block-start: 36px; }
.block-title { font-size: 1.3rem; margin: 0 0 14px; }
.answer-panel {
    position: relative;
    padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 38px);
    border-inline-start: 4px solid var(--accent);
    background:
        linear-gradient(115deg, rgba(47, 111, 126, .09), rgba(255, 255, 255, .72) 62%),
        var(--surface);
    box-shadow: var(--shadow);
}
.answer-panel::after {
    content: "";
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 20px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(47, 111, 126, .28);
    border-radius: 8px;
    transform: rotate(45deg);
}
.answer-kicker {
    margin: 0 0 10px;
    color: var(--accent-ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.answer-panel h2 {
    max-width: 26ch;
    margin: 0 0 14px;
    padding-inline-end: 32px;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}
.detail-overview { color: var(--ink-2); font-size: 1.05rem; margin: 0; }
.answer-audience {
    display: grid;
    grid-template-columns: minmax(110px, .35fr) 1fr;
    gap: 16px;
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--line);
}
.answer-audience h3,
.answer-audience p { margin: 0; }
.answer-audience h3 { font-size: .88rem; color: var(--ink); }
.answer-audience p { color: var(--ink-2); }
.feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.feature-list li { position: relative; padding-inline-start: 28px; color: var(--ink); }
.feature-list li::before {
    content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: .6em;
    width: 9px; height: 9px; border-radius: 3px; background: var(--accent); transform: rotate(45deg);
}
.bestfor p { margin: 0; color: var(--ink-2); }
.detail-legal { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 36px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.detail-legal a { text-decoration: none; color: var(--ink-2); font-weight: 600; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; }
.detail-legal a:hover { border-color: var(--accent); color: var(--accent-ink); }

.related { padding-block: clamp(36px, 5vw, 64px); border-block-start: 1px solid var(--line); background: var(--surface); }
.related-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.related-card a { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: inherit; background: var(--bg); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.related-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.related-card img { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.related-name { font-weight: 700; }
.related-tagline { color: var(--ink-2); font-size: .88rem; }

/* Legal ------------------------------------------------------------------- */
.legal-inner { max-width: 760px; padding-block: 12px clamp(56px, 9vw, 96px); }
.legal-title { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 8px 0 12px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-3); margin: 0 0 16px; font-size: .9rem; }
.legal-content { color: var(--ink-2); }
.legal-content h2 { color: var(--ink); font-size: 1.2rem; margin: 30px 0 10px; }
.legal-content ul { padding-inline-start: 22px; display: grid; gap: 8px; }
.legal-content p { margin: 0 0 14px; }
.legal-pending { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 28px; background: var(--surface); color: var(--ink-2); }
.legal-pending-tag { display: inline-block; margin: 0 0 12px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); padding: 4px 12px; border: 1px solid var(--accent); border-radius: 999px; }
.legal-pending p { margin: 0 0 12px; }
.legal-back { margin-block-start: 36px; }

/* 404 --------------------------------------------------------------------- */
.notfound { padding-block: clamp(72px, 14vw, 160px); text-align: center; }
.notfound-inner { max-width: 560px; margin-inline: auto; }
.notfound-code { font-size: clamp(4rem, 16vw, 8rem); font-weight: 800; margin: 0; color: var(--accent); line-height: 1; letter-spacing: -0.04em; }
.notfound-title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 8px 0 16px; }
.notfound-lede { color: var(--ink-2); margin: 0 0 28px; }

/* Footer ------------------------------------------------------------------ */
.site-footer { border-block-start: 1px solid var(--line); background: var(--dark); color: #cdd4dc; margin-block-start: auto; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(28px, 5vw, 60px); padding: clamp(40px, 6vw, 64px) 24px 32px; }
.site-footer .wordmark { color: #fff; }
.footer-brand p { color: #9aa4af; margin: 14px 0 0; max-width: 42ch; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.footer-col h2 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #7d8794; margin: 0 0 14px; font-weight: 700; }
.footer-col a { display: block; color: #cdd4dc; text-decoration: none; padding: 5px 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 20px 24px 28px; border-block-start: 1px solid rgba(255, 255, 255, .08); color: #7d8794; font-size: .85rem; }
.footer-bottom a { color: #9aa4af; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* RTL fine-tuning --------------------------------------------------------- */
[dir="rtl"] .app-row-cue,
[dir="rtl"] .notfound-code { transform: scaleX(-1); }
[dir="rtl"] .app-row:hover .app-row-cue { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .legal-back .text-link,
[dir="rtl"] .breadcrumb { direction: rtl; }

/* Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .hero-eyebrow, .hero-title, .hero-lede, .hero-meta, .hero .btn-primary {
        animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
    }
    .hero-title { animation-delay: .05s; }
    .hero-lede { animation-delay: .12s; }
    .hero-meta { animation-delay: .18s; }
    .hero .btn-primary { animation-delay: .24s; }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
    .feature-grid { grid-template-columns: 1fr; gap: 26px; }
    .feature-row:nth-child(even) .feature-copy { order: 0; }
    .feature-shots { order: -1; }
    .about-inner { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap { padding-inline: 18px; }
    .header-inner { height: 60px; }
    .site-nav { gap: 12px; }
    .site-nav > a:first-child { display: none; }
    .lang-menu { grid-template-columns: 1fr; min-width: 200px; }
    .detail-icon { width: 92px; height: 92px; border-radius: 20px; }
    .gallery { padding-inline: 18px; }
    .gallery img { width: clamp(170px, 62vw, 220px); }
    .feature-shots img { width: clamp(88px, 28vw, 130px); }
    .answer-audience { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 380px) {
    .hero-meta { font-size: .88rem; }
    .app-row-store { display: none; }
}