/* Lunir AI — Editorial landing.
   Warm paper, monospace labels, hairline rules, big tight headlines,
   black (text-on-bg) primary buttons. Token block kept identical to
   assets/common.css so every screen reads as one system. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/InterVariable-Italic.woff2') format('woff2-variations');
}

/* ===== Obsidian design system — tokens (mirror of iOS SKStyle / PremiumWhiteObsidianStyle).
   Light = cold pearl white + obsidian + platinum blue (NO cream/beige undertone).
   Dark  = cold blue-charcoal + graphite + pearl ink + lightened platinum foreground.
   This block is kept byte-identical between landing style.css and assets/common.css. */
:root {
    /* Surfaces */
    --white: #ffffff;
    --bg: #f5f7fa;              /* canvas */
    --card: #ffffff;           /* card surface */
    --elevated: #ffffff;       /* elevated / popover */
    --border: #dce2e8;         /* hairline divider */
    --control-border: #7b8998; /* input / control border (1pt) */
    --text: #191b1f;           /* ink */
    --text2: #526170;          /* ink secondary */
    --text3: #626f7d;          /* ink tertiary */
    --seg: #eef2f6;            /* field / quiet fill */
    --header-bg: rgba(245,247,250,.85);
    /* Platinum-blue accent (adaptive) — icons, links, focus, selected */
    --accent: #40566e;
    --accent-fill: #242c34;    /* solid obsidian fill under white text */
    --accent-soft: #e8eef4;    /* quiet selected / tint fill */
    --accent-border: #242c34;  /* primary CTA border */
    --focus-ring: rgba(64,86,110,.22);
    --blue: #40566e;           /* legacy alias → platinum accent */
    /* Obsidian primary-button gradient (brandPremium) */
    --grad-premium: linear-gradient(135deg,#344150,#171d24);
    --grad-premium-hover: linear-gradient(135deg,#3c4a5b,#1d242d);
    /* AI / feature highlight — the ONE bright cool accent, reserved for the assistant */
    --ai: #2563eb;
    --grad-ai: linear-gradient(135deg,#2563eb,#4f46e5);
    /* Semantic status (cool, muted) — text tokens flip lighter in dark; *-fill stay dark for white text */
    --red: #b42318;    --red-fill: #b42318;
    --green: #237449;  --green-fill: #237449;
    --orange: #b54708; --orange-fill: #b54708;
    --record: #d13b31;         /* recording carmine (constant) */
    /* Status surfaces — opaque, AA-tuned (mirror iOS status*Surface) */
    --status-error-surface: #fbe9e7; --status-warning-surface: #fff0e6; --status-success-surface: #e5f2e9;
    --purple: #4f46e5; --indigo: #4f46e5; --teal: #40566e; --pink: #c9342f; --yellow: #b54708;
    --font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --mono: ui-monospace,'SF Mono','SFMono-Regular',Menlo,monospace;
    --r: 16px;                 /* card radius (iOS 16) */
    --r-btn: 14px;             /* button radius (iOS 14) */
    --rl: 20px;
    --rxl: 22px;
    --max: 1100px;
    --ease: cubic-bezier(.4,0,.2,1);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
    --shadow-md: 0 8px 30px rgba(16,24,40,.08);
    --shadow-lg: 0 24px 60px rgba(16,24,40,.16);
}

[data-theme="dark"] {
    --white: #181d23;
    --bg: #0f1318;
    --card: #181d23;
    --elevated: #212830;
    --border: #353f4a;
    --control-border: #778899;
    --text: #f4f5f6;
    --text2: #b7c1cb;
    --text3: #95a4b3;
    --seg: #12181e;
    --header-bg: rgba(15,19,24,.82);
    --accent: #afc3d6;
    --accent-fill: #35404c;
    --accent-soft: #293542;
    --accent-border: #8b9daf;
    --focus-ring: rgba(175,195,214,.28);
    --blue: #afc3d6;
    --grad-premium: linear-gradient(135deg,#4a5b6c,#303b46);
    --grad-premium-hover: linear-gradient(135deg,#546578,#374350);
    --ai: #3b6edc;
    --grad-ai: linear-gradient(135deg,#2d64dc,#4f46d2);
    --red: #ff9a90;    --red-fill: #b42318;
    --green: #65c98c;  --green-fill: #237449;
    --orange: #ff9f0a; --orange-fill: #b54708;
    --record: #d13b31;
    --status-error-surface: #351f20; --status-warning-surface: #3a2415; --status-success-surface: #193025;
    --purple: #4f46d2; --indigo: #4f46d2; --teal: #afc3d6; --pink: #ff8f87; --yellow: #ff9f0a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.42);
    --shadow-md: 0 8px 30px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
}
[data-theme="dark"] .mask-line .masked { background: var(--text); color: var(--text); }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .3s var(--ease),color .3s var(--ease)}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button,input{font-family:inherit;border:none;background:none;outline:none}
button{cursor:pointer}
input::placeholder{color:var(--text3)}
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
.hidden{display:none!important}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:16px;height:62px}
.logo{display:flex;align-items:center;gap:9px}
/* logo-mark.png already carries the icon shape (squircle, transparent corners) —
   a CSS radius here would clip its own outline at the corners */
.logo-icon{width:30px;height:30px}
[data-theme="dark"] .logo-icon{content:url(assets/logo-mark-dark.png)}
.logo-text{font-weight:800;font-size:1rem;letter-spacing:-.02em}
.nav-desktop{display:flex;gap:26px;margin-left:auto;font-family:var(--mono)}
.nav-desktop a{color:var(--text2);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;transition:color .2s}
.nav-desktop a:hover{color:var(--text)}
.header-right{display:flex;align-items:center;gap:8px;margin-left:8px}
.lang-btn{background:transparent;border:1px solid var(--border);padding:7px 12px;border-radius:8px;font-size:.72rem;font-weight:700;color:var(--text);font-family:var(--mono);transition:.2s}
.lang-btn:hover{border-color:var(--text)}
.theme-btn{background:transparent;border:1px solid var(--border);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--text);transition:.2s;padding:0}
.theme-btn:hover{border-color:var(--text)}
.btn-sm{padding:8px 16px;border-radius:9px;font-size:.76rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--ease)}
.btn-blue{background:var(--grad-premium);color:#fff;border:1px solid var(--accent-border)}
.btn-blue:hover{background:var(--grad-premium-hover)}
.burger{display:none;flex-direction:column;gap:5px;padding:6px;margin-left:2px}
.burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-nav{display:none;position:fixed;top:62px;left:0;right:0;background:var(--header-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;padding:18px 28px;border-bottom:1px solid var(--border);flex-direction:column;gap:16px;font-family:var(--mono)}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:.8rem;font-weight:500;color:var(--text);text-transform:uppercase;letter-spacing:.05em}

/* ===== Anim ===== */
.anim{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim.vis{opacity:1;transform:translateY(0)}

/* ===== Buttons ===== */
.btn{padding:15px 24px;border-radius:var(--r-btn);font-size:.96rem;font-weight:600;display:inline-flex;align-items:center;gap:9px;transition:all .2s var(--ease)}
/* Primary = obsidian gradient + hairline border + calm periodic shimmer (mirrors iOS brandPrimaryButton). */
.btn-blue.btn,.btn-black{position:relative;overflow:hidden;background:var(--grad-premium);color:#fff;border:1px solid var(--accent-border)}
.btn-blue.btn:hover,.btn-black:hover{background:var(--grad-premium-hover);transform:translateY(-1px)}
.btn-black::after,.btn-blue.btn::after{content:'';position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.33),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none;animation:btnShimmer 4.8s var(--ease) infinite}
@keyframes btnShimmer{0%{transform:translateX(-160%) skewX(-18deg)}18%,100%{transform:translateX(360%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.btn-black::after,.btn-blue.btn::after{display:none}}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--text);transform:translateY(-1px)}
.btn-lg{padding:16px 28px;font-size:1rem}
.btn-link{display:inline-flex;align-items:center;gap:6px;padding:15px 8px;color:var(--accent);font-size:.96rem;font-weight:600;transition:gap .2s var(--ease)}
.btn-link:hover{gap:10px}

/* ===== Hero ===== */
.hero{padding:66px 0 56px}
.hero-content{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;align-items:center}
.hero-text{min-width:0}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--text2);margin-bottom:26px}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--record);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(209,59,49,.4)}50%{box-shadow:0 0 0 6px rgba(209,59,49,0)}}
h1{font-size:clamp(2.7rem,7vw,5.4rem);font-weight:700;line-height:.98;letter-spacing:-.035em;margin-bottom:26px}
.hero-sub{color:var(--text2);font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.5;max-width:520px;margin-bottom:34px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-visual{min-width:0}
.hero-figure{display:flex;justify-content:center;align-items:center}
.hero-phone-img{width:230px;max-width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.16));transition:opacity .3s var(--ease)}

/* ===== Section head — border-top rule, mono tag left, big headline right ===== */
section{scroll-margin-top:80px}
.section-head{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--border);padding-top:18px;margin-bottom:6px}
.section-head .tag{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);flex-shrink:0}
.section-head .tag-new{color:var(--accent)}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.03em;margin-left:auto;text-align:right;max-width:62%}

/* ===== Features (numbered editorial list) ===== */
.features{padding:36px 0 20px}
.feature-list{margin-top:14px}
.feature-row{display:flex;gap:22px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--border);transition:color .2s var(--ease)}
.feature-row:last-child{border-bottom:1px solid var(--border)}
.feature-row:hover{color:var(--blue)}
.feature-num{font-family:var(--mono);font-size:.9rem;color:currentColor;opacity:.5;flex:none;width:44px;padding-top:5px}
.feature-body{flex:1;min-width:0}
.feature-row-head{display:flex;align-items:center;gap:12px;margin-bottom:5px;flex-wrap:wrap}
.feature-row h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:currentColor}
.feature-row p{color:var(--text2);font-size:.92rem;line-height:1.5;max-width:640px}
.feature-row--lead{padding-top:26px}
.feature-row--lead h3{font-size:1.55rem;font-weight:700}
.feature-row--lead p{font-size:.96rem}
.fcard-badge{font-family:var(--mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);border:1px solid var(--blue);padding:3px 8px;border-radius:6px}

/* ===== Demos ===== */
.demos{padding:36px 0 20px}
.demos .section-head{margin-bottom:26px}
.demo-block{display:grid;grid-template-columns:340px 1fr;gap:36px;padding:28px 0;border-top:1px solid var(--border)}
.demo-block:last-child{border-bottom:1px solid var(--border)}
.demo-info{min-width:0}
.demo-num{font-family:var(--mono);font-size:.72rem;color:var(--blue);margin-bottom:12px;letter-spacing:.06em}
.demo-info h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.demo-info p{color:var(--text2);font-size:.94rem;line-height:1.55}
.demo-info .tag{display:none}
.demo-widget{min-width:0;border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:20px}

/* Widget tabs */
.widget-tabs{display:flex;gap:5px;background:var(--seg);border-radius:12px;padding:4px;margin-bottom:15px}
.wtab{flex:1;padding:9px 0;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--text3);text-align:center;transition:.2s}
.wtab.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.1)}
[data-theme="dark"] .wtab.active{box-shadow:0 1px 4px rgba(0,0,0,.5)}
.widget-body{min-height:150px}

/* Chat */
.chat-msg{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;margin-bottom:9px;font-size:.9rem;line-height:1.45;animation:fadeUp .4s var(--ease) both}
.chat-user{background:var(--seg)}
.chat-ai{background:var(--bg);border:1px solid var(--border);line-height:1.55}
[data-theme="dark"] .chat-ai{background:var(--bg)}
.chat-label{font-family:var(--mono);font-size:.58rem;font-weight:700;padding:4px 8px;border-radius:6px;flex-shrink:0;text-transform:uppercase}
.chat-user .chat-label{background:var(--bg);color:var(--text2)}
.chat-ai .chat-label{background:var(--ai);color:#fff}
.cursor{animation:blink 1s step-end infinite;color:var(--ai)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Translate */
.translate-row{display:flex;gap:14px;align-items:stretch}
.translate-col{flex:1;border-radius:12px;padding:14px}
.translate-col:first-child{background:var(--seg)}
.translate-col:last-child{background:var(--bg);border:1px solid var(--border)}
.translate-label{font-family:var(--mono);font-size:.62rem;font-weight:600;color:var(--text3);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.translate-text{font-size:.9rem;line-height:1.5;min-height:54px;color:var(--text)}
.translate-highlight{color:var(--blue);font-weight:500}
.translate-arrow{display:flex;align-items:center;font-size:1.3rem;color:var(--text3)}

/* Search */
.search-bar{display:flex;align-items:center;gap:9px;background:var(--seg);border-radius:12px;padding:11px 15px;margin-bottom:14px;transition:.2s}
.search-bar:focus-within{box-shadow:0 0 0 3px var(--focus-ring)}
.search-bar svg{color:var(--text3);flex-shrink:0}
.search-bar input{flex:1;font-size:.9rem;color:var(--text);background:none}
.search-empty{text-align:center;color:var(--text3);font-size:.9rem;padding:38px 0;font-family:var(--mono)}
.search-result{padding:14px;background:var(--seg);border-radius:12px;margin-bottom:9px;animation:fadeUp .3s var(--ease) both}
.search-result h5{font-size:.86rem;font-weight:700;margin-bottom:4px}
.search-result p{font-size:.82rem;color:var(--text2);line-height:1.4}
.search-meta{display:flex;gap:14px;margin-top:6px;font-family:var(--mono);font-size:.66rem;color:var(--text3)}

/* Extract */
.extract-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--seg);border-radius:12px;margin-bottom:9px;animation:fadeUp .3s var(--ease) both}
.extract-emoji{font-size:1.3rem;flex-shrink:0}
.extract-content{flex:1;min-width:0}
.extract-content h5{font-size:.85rem;font-weight:600;margin-bottom:2px}
.extract-content p{font-size:.74rem;color:var(--text2);line-height:1.35}
.extract-action{font-size:.66rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:6px 13px;border-radius:100px;white-space:nowrap;cursor:pointer;transition:.2s;border:none}
.extract-action:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.extract-action.done{color:var(--green);background:var(--status-success-surface)}

/* Mask */
.mask-line{padding:11px 15px;background:var(--seg);border-radius:11px;margin-bottom:7px;font-size:.9rem;line-height:1.55;transition:all .4s var(--ease)}
.mask-line .masked{background:var(--text);color:var(--text);border-radius:4px;padding:0 5px;transition:all .4s var(--ease);user-select:none}
.mask-line.active .masked{background:var(--text);color:var(--text)}

/* Export (legacy transcription demo — retained) */
.export-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.export-card{background:var(--seg);border-radius:12px;padding:16px 8px;text-align:center;cursor:pointer;transition:.2s;border:1px solid transparent}
.export-card:hover{border-color:var(--blue)}
.export-card.active{border-color:var(--blue)}
.export-icon{font-size:1.8rem;margin-bottom:6px}
.export-name{font-size:.75rem;font-weight:700;display:block}
.export-desc{font-family:var(--mono);font-size:.65rem;color:var(--text3);margin-top:2px}

/* ===== MCP ===== */
.mcp{padding:36px 0 20px}
.mcp .section-head{margin-bottom:16px}
.mcp-sub{color:var(--text2);font-size:1rem;line-height:1.55;max-width:720px;margin-bottom:24px}
.mcp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.mcp-card{border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:20px;display:flex;flex-direction:column}
.mcp-icon{font-size:1.5rem;display:block;margin-bottom:10px}
.mcp-card h4{font-size:1rem;font-weight:700;margin-bottom:6px}
.mcp-card p{font-size:.83rem;color:var(--text2);line-height:1.5;margin-bottom:16px}
.mcp-card code{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:.72rem;color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:7px}
.mcp-note{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;background:var(--card)}
.mcp-note-icon{font-size:1.3rem;flex-shrink:0}
.mcp-note p{font-size:.86rem;color:var(--text2);line-height:1.5}

/* ===== All features (3-col numbered) ===== */
.all-features{padding:36px 0 20px}
.all-features .section-head{margin-bottom:16px}
.af-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:34px}
.af-item{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--border)}
.af-num{font-family:var(--mono);font-size:.66rem;color:var(--text3);padding-top:3px;flex:none}
.af-item h4{font-size:.94rem;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
.af-item p{font-size:.8rem;color:var(--text2);line-height:1.45}
.af-icon{display:none}

/* ===== Platforms ===== */
.platforms{padding:36px 0 20px}
.platforms .section-head{margin-bottom:22px}
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:22px}
.pcard-emoji{display:none}
.pcard h4{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.pcard p{color:var(--text2);font-size:.85rem;line-height:1.5}

/* ===== CTA ===== */
.cta{padding:26px 0}
.cta-inner{border:1px solid var(--border);border-radius:var(--rxl);background:var(--card);padding:clamp(40px,6vw,64px) 40px;text-align:center}
.cta-inner h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin-bottom:14px}
.cta-inner p{color:var(--text2);font-size:clamp(1rem,1.6vw,1.18rem);margin-bottom:32px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}

/* ===== Footer ===== */
footer{margin-top:20px}
.footer-inner{padding:30px 0 44px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.9rem}
.footer-brand .logo-icon{width:24px;height:24px}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono)}
.footer-links a{color:var(--text2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;transition:.2s}
.footer-links a:hover{color:var(--text)}
.footer-copy{color:var(--text3);font-size:.72rem;width:100%;text-align:center;margin-top:6px;font-family:var(--mono)}
/* Реквизиты юрлица — см. комментарий у .app-footer-legal в assets/common.css */
.footer-legal{color:var(--text3);font-size:.66rem;width:100%;text-align:center;margin-top:4px;opacity:.75;font-family:var(--mono)}

/* ===== Responsive ===== */
@media(max-width:900px){
    .section-head h2{max-width:none}
    .hero-content{grid-template-columns:1fr;gap:36px}
    .hero-visual{order:-1;max-width:360px;margin:0 auto}
    .demo-block{grid-template-columns:1fr;gap:20px}
    .mcp-grid{grid-template-columns:repeat(2,1fr)}
    .af-grid{grid-template-columns:repeat(2,1fr)}
    .platform-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .nav-desktop,.header-right .btn-sm{display:none}
    .burger{display:flex;margin-left:auto}
    .container{padding:0 20px}
    .hero{padding:44px 0 40px}
    .section-head{flex-direction:column;align-items:flex-start;gap:6px}
    .section-head h2{text-align:left;margin-left:0}
    .feature-row{gap:14px}
    .feature-num{width:30px}
    .translate-row{flex-direction:column}
    .translate-arrow{justify-content:center;transform:rotate(90deg)}
    .cta-actions .btn,.hero-actions .btn{width:100%;justify-content:center}
    .btn-link{width:100%;justify-content:center}
}
@media(max-width:560px){
    .mcp-grid,.af-grid,.platform-grid{grid-template-columns:1fr}
    .export-grid{grid-template-columns:repeat(3,1fr)}
    .footer-inner{flex-direction:column;text-align:center}
    .footer-links{justify-content:center}
}