/* Moonyr theme styles: base, components, motion and scene. */

/* Self-hosted fonts (no request to Google) with size-matched fallbacks to avoid layout shift. */
@font-face{font-family:'Unbounded';font-style:normal;font-display:swap;font-weight:500 700;src:url(../fonts/unbounded-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-display:swap;font-weight:500 700;src:url(../fonts/unbounded-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400 700;src:url(../fonts/manrope-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400 700;src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Unbounded Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arial');font-weight:700;size-adjust:133.4%;ascent-override:74.6%;descent-override:18.4%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:104.1%;ascent-override:102.4%;descent-override:28.8%;line-gap-override:0%}


:root {
	--bg: #07080D; --bg2: #0B0D14; --card: #11141D; --line: #1E2230;
	--text: #EEF0F6; --muted: #9CA2B6;
	--accent: #8FE3F0; --accent-text: #8FE3F0; --accent-ink: #04131A;
	--accent-soft: rgba(143,227,240,0.08); --accent-line: rgba(143,227,240,0.32);
	--nav-bg: rgba(14,16,24,0.72); --scan: rgba(255,255,255,0.025);
	--cta-bg: #8FE3F0; --cta-ink: #04131A; --pill: #EEF0F6; --pill-ink: #07080D;
	--moon-text: #FFB860; --moon-soft: rgba(255,170,80,0.07); --moon-line: rgba(255,170,80,0.34);
	--orbit: #4EA8FF; --trail: #EAF6FF;
	--stars: radial-gradient(1px 1px at 24px 36px, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 140px 84px, rgba(255,255,255,0.3), transparent), radial-gradient(1.6px 1.6px at 206px 190px, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 82px 222px, rgba(255,255,255,0.3), transparent), radial-gradient(1.2px 1.2px at 176px 18px, rgba(255,255,255,0.3), transparent);
	--font-display: 'Unbounded', 'Unbounded Fallback', sans-serif;
	--font-body: 'Manrope', 'Manrope Fallback', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
	color-scheme: dark;
}
[data-theme="light"] {
	--bg: #F5F6F9; --bg2: #ECEEF3; --card: #FFFFFF; --line: #DADDE6;
	--text: #0A0C12; --muted: #4A5065;
	--accent: #0B7A90; --accent-text: #086A7D; --accent-ink: #FFFFFF;
	--accent-soft: rgba(11,122,144,0.07); --accent-line: rgba(11,122,144,0.32);
	--nav-bg: rgba(255,255,255,0.78); --scan: rgba(10,12,18,0.03);
	--cta-bg: #0A0C12; --cta-ink: #F5F6F9; --pill: #0A0C12; --pill-ink: #F5F6F9;
	--moon-text: #A04E0D; --moon-soft: rgba(230,130,40,0.07); --moon-line: rgba(200,110,30,0.36);
	--orbit: #2A7BE4; --trail: #1E6FD9;
	--stars: radial-gradient(1px 1px at 24px 36px, rgba(10,12,18,0.16), transparent), radial-gradient(1px 1px at 140px 84px, rgba(10,12,18,0.08), transparent), radial-gradient(1.6px 1.6px at 206px 190px, rgba(10,12,18,0.16), transparent), radial-gradient(1px 1px at 82px 222px, rgba(10,12,18,0.08), transparent), radial-gradient(1.2px 1.2px at 176px 18px, rgba(10,12,18,0.08), transparent);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0; background-color: var(--bg); background-image: var(--stars); background-size: 260px 260px;
	color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6;
	-webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
.mono { font-family: var(--font-mono); letter-spacing: .04em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--pill); color: var(--pill-ink); border-radius: 999px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mn-site { position: relative; overflow-x: clip; min-height: 100vh; }

/* Layout */
.mn-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.mn-section { padding: 104px 0; }
.mn-band { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr)); gap: 20px; }
.mn-stack { display: flex; flex-direction: column; gap: 40px; }

/* Type */
.mn-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-text); text-transform: uppercase; }
.mn-eyebrow--moon { color: var(--moon-text); }
.mn-h1 { font-size: clamp(38px, 5.6vw, 76px); line-height: 1.04; font-weight: 700; max-width: 12em; }
.mn-h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; max-width: 16em; }
.mn-h3 { font-size: 20px; line-height: 1.25; }
.mn-lead { font-size: 19px; color: var(--muted); max-width: 34em; }
.mn-muted { color: var(--muted); }
.mn-moon { color: var(--moon-text); }
.mn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.mn-head__titles { display: flex; flex-direction: column; gap: 14px; }
.mn-head__text { max-width: 28em; color: var(--muted); }
.mn-head--center { flex-direction: column; align-items: center; text-align: center; }
.mn-head--center .mn-head__titles { align-items: center; }
.mn-head--center .mn-h2 { max-width: 18em; }

/* Buttons & chips */
.mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 1px solid transparent; transition: transform .2s ease, opacity .2s ease; }
.mn-btn:hover { opacity: 1; transform: translateY(-1px); }
.mn-btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 32px var(--accent-line); }
.mn-btn--ghost { border-color: var(--line); background: var(--nav-bg); color: var(--text); }
.mn-btn--pill { background: var(--pill); color: var(--pill-ink); }
.mn-btn--wa { background: #25D366; color: #06290F; }
.mn-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mn-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); background: var(--nav-bg); border-radius: 999px; font-size: 14px; font-weight: 600; }
.mn-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 6px 10px; border-radius: 99px; background: rgba(5,6,10,0.62); color: #F4F5F8; }

/* Cards */
.mn-card { padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 12px; }
.mn-card p { color: var(--muted); font-size: 15px; }

/* Header */
.mn-header { position: sticky; top: 0; z-index: 30; padding: 16px 24px; }
.mnav { max-width: 1000px; margin: 0 auto; padding: 10px 10px 10px 22px; border: 1px solid var(--line); border-radius: 28px; background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.navlogo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.navword { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.navlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; flex: 1 1 auto; font-weight: 600; font-size: 15px; }
.navlinks a { color: var(--muted); }
.navlinks a[aria-current="page"] { color: var(--text); }
.navright { display: flex; align-items: center; gap: 10px; }
.mn-iconbtn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.mn-iconbtn .mn-ico--moon { color: var(--moon-text); }
.mn-theme-toggle .mn-ico-light { display: none; }
[data-theme="light"] .mn-theme-toggle .mn-ico-light { display: block; }
[data-theme="light"] .mn-theme-toggle .mn-ico-dark { display: none; }
.navcta { padding: 12px 20px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.mn-menu { display: none; max-width: 1000px; margin: 8px auto 0; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); flex-direction: column; gap: 4px; font-weight: 700; font-size: 18px; }
.mn-menu.is-open { display: flex; }
.mn-menu a { padding: 12px 6px; color: var(--text); }
.mn-menu__foot { display: flex; gap: 12px; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line); }
.mn-menu__foot button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-weight: 700; font-size: 14px; }

/* Hero */
.mn-hero { position: relative; z-index: 1; padding: 72px 0 40px; }
.mn-hero__inner { max-width: 980px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.mn-pillrow { display: flex; justify-content: center; padding: 0 24px; }
.mn-pillrow > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; padding: 12px 22px; border: 1px solid var(--line); background: var(--nav-bg); border-radius: 999px; font-size: 15px; font-weight: 600; }
.mn-pillrow span { display: inline-flex; align-items: center; gap: 8px; }
.mn-pillrow .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--moon-text); }
.mn-glowline { max-width: 1240px; height: 1px; margin: 72px auto 0; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }

/* Curved video wall */
.mn-wallwrap { overflow: hidden; padding: 56px 0 28px; margin-top: 8px; }
.wall { display: flex; justify-content: center; align-items: center; gap: 18px; perspective: 1100px; height: 640px; }
.wcard { flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
.wcard .mn-media, .reelcard .mn-media, .mn-workcard .mn-media, .mn-long .mn-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mn-playbtn { position: relative; border-radius: 99px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; }
.wcard .mn-chip { position: absolute; top: 14px; left: 14px; }
.has-video .mn-playbtn { opacity: 0; transition: opacity .3s; }

/* Niche strip */
.mn-niches { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); }
.nichestatic { max-width: 1240px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; font-size: 13px; color: var(--muted); }
.nichemq { overflow: hidden; padding: 20px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.nichetrack { display: flex; gap: 22px; width: max-content; font-size: 13px; color: var(--muted); white-space: nowrap; padding-right: 22px; }
.nichetrack span { flex: 0 0 auto; }
.mn-star { color: var(--moon-text); }

/* Anatomy timeline */
.mn-timeline { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 18px; }
.mn-timeline__top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 10px; letter-spacing: .04em; }
.mn-segs { display: flex; gap: 4px; height: 46px; }
.mn-seg { min-width: 0; border-radius: 8px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.mn-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-seg--hook { flex: 1.4; background: var(--moon-text); color: #1A0E02; }
[data-theme="light"] .mn-seg--hook { color: #fff; }
.mn-seg--setup { flex: 1.6; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); }
.mn-seg--body { flex: 5; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(78,168,255,0.55) 46px 48px), var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
.mn-seg--payoff { flex: 1.6; background: var(--accent); color: var(--accent-ink); }
.mn-seg--end { flex: 2; background: var(--moon-soft); border: 1px solid var(--moon-line); color: var(--moon-text); }
.tlhead { position: absolute; top: 40px; height: 58px; width: 2px; background: var(--moon-text); }
.tlhead::before { content: ""; position: absolute; top: -5px; left: -5px; width: 12px; height: 9px; border-radius: 2px 2px 6px 6px; background: var(--moon-text); }
.mn-steps5 { --min: 210px; }
.mn-steps5 .mn-card { padding: 26px; }

/* Work carousel */
.mn-workhead { max-width: 1240px; margin: 0 auto; padding: 104px 24px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.mn-workhead .mn-h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.05; max-width: 12em; }
.marq { overflow: hidden; padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.track { display: flex; gap: 16px; width: max-content; }
.reelcard { flex: 0 0 auto; width: 280px; height: 500px; border-radius: 22px; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--card); color: #F4F5F8; display: block; }
.mn-cardtop { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 2; }
.mn-cardplay { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; z-index: 2; }
.mn-cardinfo { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px; background: linear-gradient(180deg, rgba(5,6,10,0), rgba(5,6,10,0.92) 45%); display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mn-cardinfo strong { font-size: 18px; line-height: 1.25; }
.mn-cardinfo p { font-size: 14px; line-height: 1.45; color: rgba(244,245,248,0.74); }
.mn-cardwho { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.mn-cardwho .mn-logo-mark { flex: 0 0 auto; }
.mn-long { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding: 20px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.mn-long__media { position: relative; flex: 1 1 420px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.mn-long__media .mn-chip { position: absolute; top: 12px; left: 12px; z-index: 2; }
.mn-long__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; padding: 8px; }

/* Promise */
.mn-promise { border-radius: 28px; border: 1px solid var(--moon-line); background: var(--moon-soft); padding: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.mn-promise__text { flex: 1 1 400px; display: flex; flex-direction: column; gap: 16px; }
.mn-promise__stats { flex: 1 1 440px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.mn-stat { padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.mn-stat b { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 700; }
.mn-stat span { font-size: 14px; color: var(--muted); }

/* Services list */
.mn-servgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.mn-servgrid > div { background: var(--card); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.mn-servgrid p { color: var(--muted); font-size: 15px; }

/* Pricing */
.mn-pricebox { border-radius: 28px; border: 1px solid var(--line); background: var(--card); padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.mn-pricebox__left { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
.mn-pricebox label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.mn-pricebox label output { font-family: var(--font-display); font-size: 40px; color: var(--accent-text); }
.mn-range { width: 100%; height: 28px; accent-color: var(--accent); cursor: pointer; }
.mn-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.mn-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mn-tier { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); color: var(--text); }
.mn-tier.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mn-tier b { display: block; font-size: 15px; }
.mn-tier small { display: block; font-family: var(--font-mono); font-size: 11px; opacity: .85; }
.mn-tier span { display: block; font-size: 14px; margin-top: 4px; }
.mn-plan { flex: 1 1 300px; padding: 32px; border-radius: 22px; background: var(--bg); border: 1px solid var(--accent-line); display: flex; flex-direction: column; gap: 14px; }
.mn-plan__total { display: flex; align-items: baseline; gap: 8px; }
.mn-plan__total b { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; }
.mn-plan ul { margin: 4px 0 8px; padding-left: 18px; color: var(--muted); font-size: 15px; }
.mn-pricenotes { display: flex; flex-wrap: wrap; gap: 16px; }
.mn-pricenotes > div { flex: 1 1 380px; padding: 24px 28px; border-radius: 20px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.mn-pricenotes > div:first-child { border-style: dashed; border-color: var(--moon-line); }
.mn-pricenotes b { font-size: 17px; }
.mn-pricenotes p { color: var(--muted); font-size: 15px; }
.mn-pricenotes a { color: var(--accent-text); font-weight: 700; }

/* Process */
.mn-process { --min: 220px; }
.mn-step { display: flex; flex-direction: column; gap: 14px; }
.mn-step__num { display: flex; align-items: center; gap: 12px; }
.mn-step__num span { width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.mn-step__num i { flex: 1; height: 1px; background: var(--line); }
.mn-step p { color: var(--muted); font-size: 15px; }

/* Why list */
.mn-why { display: flex; gap: 14px; align-items: flex-start; }
.mn-why__ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 99px; background: var(--moon-soft); border: 1px solid var(--moon-line); display: flex; align-items: center; justify-content: center; color: var(--moon-text); }
.mn-why b { display: block; font-size: 17px; }
.mn-why p { color: var(--muted); font-size: 15px; }

/* FAQ */
.mn-faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); }
.mn-faq details { border-bottom: 1px solid var(--line); }
.mn-faq summary { list-style: none; min-height: 64px; padding: 20px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 700; cursor: pointer; }
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--accent-text); }
.mn-faq details[open] summary::after { content: "–"; }
.mn-faq details p { padding: 0 4px 22px; color: var(--muted); }

/* CTA */
.mn-cta { border-radius: 32px; background: var(--cta-bg); color: var(--cta-ink); padding: clamp(32px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.mn-cta__mark { position: absolute; right: -110px; top: -110px; width: 460px; height: 460px; opacity: .16; }
.mn-cta__text { flex: 1 1 460px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.mn-cta__text h2 { font-size: clamp(32px, 5vw, 58px); line-height: 1.04; }
.mn-cta__text p { font-size: 18px; max-width: 28em; opacity: .85; }
.mn-cta__btns { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.mn-cta__btns a { padding: 18px 24px; border-radius: 999px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.mn-cta__primary { background: var(--cta-ink); color: var(--cta-bg); }
.mn-cta__secondary { border: 1.5px solid var(--cta-ink); color: var(--cta-ink); }
.mn-cta__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-family: var(--font-mono); font-size: 13px; padding-top: 6px; opacity: .85; }

/* Footer */
.mn-footer { border-top: 1px solid var(--line); background: var(--bg); }
.mn-footer__inner { max-width: 1240px; margin: 0 auto; padding: 36px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.mn-footer__brand { display: flex; align-items: center; gap: 10px; }
.mn-footer__brand b { font-family: var(--font-display); }
.mn-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.mn-footer__links a, .mn-footer small { color: var(--muted); }
.mn-footer small { font-size: 14px; }
.mn-langlinks { display: flex; gap: 10px; font-size: 14px; color: var(--muted); }
.mn-langlinks a[aria-current="true"] { color: var(--text); font-weight: 700; }

/* WhatsApp floating button */
.wafab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #25D366; color: #06290F; font-weight: 700; font-size: 15px; box-shadow: 0 10px 30px rgba(37,211,102,0.35); }

/* Inner pages */
.mn-pagehero { position: relative; z-index: 1; padding: 72px 24px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mn-pagehero .mn-h1 { font-size: clamp(36px, 5vw, 64px); max-width: 14em; }
.mn-prose { max-width: 760px; margin: 0 auto; padding: 24px 24px 104px; font-size: 17px; line-height: 1.75; }
.mn-prose h2 { font-size: 26px; margin: 2em 0 .6em; }
.mn-prose h3 { font-size: 20px; margin: 1.6em 0 .5em; }
.mn-prose p, .mn-prose ul, .mn-prose ol { margin: 0 0 1.1em; color: var(--muted); }
.mn-prose a { color: var(--accent-text); text-decoration: underline; }
.mn-prose strong { color: var(--text); }

/* Work page */
.mn-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mn-filter { min-height: 44px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: transparent; color: var(--text); }
.mn-filter.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mn-workgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.mn-workcard { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--card); color: #F4F5F8; display: block; }
.mn-workcard.is-wide { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .mn-workcard.is-wide { grid-column: span 1; } }
.mn-workcard[hidden] { display: none; }

/* Single work */
.mn-single { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 48px 24px 104px; }
.mn-single__media { flex: 0 1 380px; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--card); position: relative; }
.mn-single__media.is-wide { flex: 1 1 640px; aspect-ratio: 16 / 9; }
.mn-single__media video, .mn-single__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-single__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; }

/* Contact */
.mn-contactgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.mn-contactcard { padding: 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 16px; }
.mn-form { display: grid; gap: 14px; }
.mn-form .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.mn-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.mn-form input, .mn-form select, .mn-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-weight: 500; }
.mn-form textarea { min-height: 130px; resize: vertical; }
.mn-form .hp { position: absolute; left: -9999px; }
.mn-notice { padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.mn-notice--ok { background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.4); }
.mn-notice--err { background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.4); }

/* 404 */
.mn-404 { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 80px 24px; position: relative; z-index: 1; }
.mn-404 b { font-family: var(--font-display); font-size: clamp(90px, 18vw, 200px); line-height: 1; color: var(--moon-text); }

@media (max-width: 980px) { .mn-servgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobile */
@media (max-width: 760px) {
	.mn-servgrid { grid-template-columns: 1fr; }
	.mn-section { padding: 72px 0; }
	.mn-workhead { padding-top: 72px; }
	.mn-plan__total b { font-size: 42px; }
	.mn-faq summary { font-size: 16px; }
}

/* ---- Motion, scene and responsive rules ---- */

body{margin:0}
.mn a{text-decoration:none}
.mn a:hover{opacity:.8}
.mn button{font-family:inherit;cursor:pointer}
.mn .card:hover{transform:translateY(-4px)}
.mn .card{transition:transform .25s ease}
.mn .wcard{transition:transform .4s ease}
.mn h1,.mn h2,.mn h3{font-family:'Unbounded','Unbounded Fallback',sans-serif;margin:0;letter-spacing:-0.02em}
.mn .mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.mn .moon{position:absolute;z-index:0;top:-280px;left:-270px;width:760px;height:760px;pointer-events:none}
.mn .orbitmoon{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;offset-path:path('M 79.3 270.6 A 320 85 20 1 1 680.7 489.4 A 320 85 20 1 1 79.3 270.6');offset-rotate:0deg;animation:mnorbit 42.36s linear -18.36s infinite}
.mn .moontex{position:absolute;inset:0;border-radius:50%;background-image:url(../img/moon-hq.webp);background-size:auto 100%;background-repeat:repeat-x;animation:mnspin 140s linear infinite}
@keyframes mnspin{from{background-position:0 0}to{background-position:-240px 0}}
@keyframes mnorbit{0%{offset-distance:0%;z-index:4;transform:scale(.8)}7.93%{z-index:4}8.03%{z-index:1}20.96%{offset-distance:18.5%;transform:scale(.64)}22.38%{offset-distance:31.5%;transform:scale(.64)}35.41%{z-index:1}35.51%{z-index:4}43.34%{offset-distance:50%;transform:scale(.8)}71.67%{transform:scale(1.35)}100%{offset-distance:100%;z-index:4;transform:scale(.8)}}
.mn .orbitmoon{isolation:isolate}
@media (max-width: 760px){.mn .wafab{padding:14px !important}.mn .wafab-label{display:none}}
.mn .nichemq{display:none}
.mn .nichetrack{animation:mnmq 26s linear infinite}
@media (prefers-reduced-motion: reduce){.mn .nichetrack{animation:none}}
@media (max-width: 760px){.mn .nichestatic{display:none !important}.mn .nichemq{display:block}}
.mn .navburger{display:none}
@media (max-width: 760px){.mn .navlinks,.mn .navctl{display:none !important}.mn .navburger{display:flex;width:42px !important;height:42px !important}.mn header{padding:12px !important}.mn .mnav{flex-wrap:nowrap !important;justify-content:space-between;gap:8px !important;padding:7px 7px 7px 14px !important}.mn .navlogo{gap:8px !important;flex:0 0 auto}.mn .navlogo svg{width:28px;height:28px}.mn .navword{font-size:17px !important}.mn .navright{gap:8px !important;margin-left:auto;flex:0 0 auto}.mn .navcta{padding:10px 13px !important;font-size:13px !important;white-space:nowrap}}
.mn .tlhead{left:18px;animation:mntl 9s linear infinite}
@keyframes mntl{from{left:18px}to{left:calc(100% - 20px)}}
@media (prefers-reduced-motion: reduce){.mn .tlhead{animation:none;left:30%}}
.mn .ph-realestate{background-image:url(../img/ph-realestate.webp);background-size:cover;background-position:center}
.mn .ph-restaurant{background-image:url(../img/ph-restaurant.webp);background-size:cover;background-position:center}
.mn .ph-coach{background-image:url(../img/ph-coach.webp);background-size:cover;background-position:center}
.mn .ph-beauty{background-image:url(../img/ph-beauty.webp);background-size:cover;background-position:center}
.mn .ph-fitness{background-image:url(../img/ph-fitness.webp);background-size:cover;background-position:center}
.mn .ph-ecommerce{background-image:url(../img/ph-ecommerce.webp);background-size:cover;background-position:center}
.mn .ph-automotive{background-image:url(../img/ph-automotive.webp);background-size:cover;background-position:center}
.mn .ph-podcast{background-image:url(../img/ph-podcast.webp);background-size:cover;background-position:center}
.mn .ph-longform{background-image:url(../img/ph-longform.webp);background-size:cover;background-position:center}
.mn .trail.r0{animation:mnr0 42.36s linear -18.36s infinite}
@keyframes mnr0{0%{stroke-dashoffset:470}20.96%{stroke-dashoffset:214.3}22.38%{stroke-dashoffset:34.7}43.34%{stroke-dashoffset:-221.0}100%{stroke-dashoffset:-911.9}}
.mn .trail.r1{animation:mnr1 42.36s linear -18.36s infinite}
@keyframes mnr1{0%{stroke-dashoffset:442.5}20.96%{stroke-dashoffset:186.8}22.38%{stroke-dashoffset:7.2}43.34%{stroke-dashoffset:-248.5}100%{stroke-dashoffset:-939.4}}
.mn .trail.r2{animation:mnr2 42.36s linear -18.36s infinite}
@keyframes mnr2{0%{stroke-dashoffset:415}20.96%{stroke-dashoffset:159.3}22.38%{stroke-dashoffset:-20.3}43.34%{stroke-dashoffset:-276.0}100%{stroke-dashoffset:-966.9}}
.mn .trail.r3{animation:mnr3 42.36s linear -18.36s infinite}
@keyframes mnr3{0%{stroke-dashoffset:387.5}20.96%{stroke-dashoffset:131.8}22.38%{stroke-dashoffset:-47.8}43.34%{stroke-dashoffset:-303.5}100%{stroke-dashoffset:-994.4}}
.mn .trail.r4{animation:mnr4 42.36s linear -18.36s infinite}
@keyframes mnr4{0%{stroke-dashoffset:360}20.96%{stroke-dashoffset:104.3}22.38%{stroke-dashoffset:-75.3}43.34%{stroke-dashoffset:-331.0}100%{stroke-dashoffset:-1021.9}}
.mn .trail.r5{animation:mnr5 42.36s linear -18.36s infinite}
@keyframes mnr5{0%{stroke-dashoffset:332.5}20.96%{stroke-dashoffset:76.8}22.38%{stroke-dashoffset:-102.8}43.34%{stroke-dashoffset:-358.5}100%{stroke-dashoffset:-1049.4}}
.mn .trail.r6{animation:mnr6 42.36s linear -18.36s infinite}
@keyframes mnr6{0%{stroke-dashoffset:305}20.96%{stroke-dashoffset:49.3}22.38%{stroke-dashoffset:-130.3}43.34%{stroke-dashoffset:-386.0}100%{stroke-dashoffset:-1076.9}}
.mn .trail.r7{animation:mnr7 42.36s linear -18.36s infinite}
@keyframes mnr7{0%{stroke-dashoffset:277.5}20.96%{stroke-dashoffset:21.8}22.38%{stroke-dashoffset:-157.8}43.34%{stroke-dashoffset:-413.5}100%{stroke-dashoffset:-1104.4}}
.mn .trail.r8{animation:mnr8 42.36s linear -18.36s infinite}
@keyframes mnr8{0%{stroke-dashoffset:250}20.96%{stroke-dashoffset:-5.7}22.38%{stroke-dashoffset:-185.3}43.34%{stroke-dashoffset:-441.0}100%{stroke-dashoffset:-1131.9}}
.mn .trail.r9{animation:mnr9 42.36s linear -18.36s infinite}
@keyframes mnr9{0%{stroke-dashoffset:222.5}20.96%{stroke-dashoffset:-33.2}22.38%{stroke-dashoffset:-212.8}43.34%{stroke-dashoffset:-468.5}100%{stroke-dashoffset:-1159.4}}
.mn .trail.r10{animation:mnr10 42.36s linear -18.36s infinite}
@keyframes mnr10{0%{stroke-dashoffset:195}20.96%{stroke-dashoffset:-60.7}22.38%{stroke-dashoffset:-240.3}43.34%{stroke-dashoffset:-496.0}100%{stroke-dashoffset:-1186.9}}
.mn .trail.r11{animation:mnr11 42.36s linear -18.36s infinite}
@keyframes mnr11{0%{stroke-dashoffset:167.5}20.96%{stroke-dashoffset:-88.2}22.38%{stroke-dashoffset:-267.8}43.34%{stroke-dashoffset:-523.5}100%{stroke-dashoffset:-1214.4}}
.mn .trail.r12{animation:mnr12 42.36s linear -18.36s infinite}
@keyframes mnr12{0%{stroke-dashoffset:140}20.96%{stroke-dashoffset:-115.7}22.38%{stroke-dashoffset:-295.3}43.34%{stroke-dashoffset:-551.0}100%{stroke-dashoffset:-1241.9}}
.mn .trail.r13{animation:mnr13 42.36s linear -18.36s infinite}
@keyframes mnr13{0%{stroke-dashoffset:112.5}20.96%{stroke-dashoffset:-143.2}22.38%{stroke-dashoffset:-322.8}43.34%{stroke-dashoffset:-578.5}100%{stroke-dashoffset:-1269.4}}
.mn .trail.r14{animation:mnr14 42.36s linear -18.36s infinite}
@keyframes mnr14{0%{stroke-dashoffset:85}20.96%{stroke-dashoffset:-170.7}22.38%{stroke-dashoffset:-350.3}43.34%{stroke-dashoffset:-606.0}100%{stroke-dashoffset:-1296.9}}
.mn .trail.r15{animation:mnr15 42.36s linear -18.36s infinite}
@keyframes mnr15{0%{stroke-dashoffset:57.5}20.96%{stroke-dashoffset:-198.2}22.38%{stroke-dashoffset:-377.8}43.34%{stroke-dashoffset:-633.5}100%{stroke-dashoffset:-1324.4}}
.mn .trail.rh{animation:mnrh 42.36s linear -18.36s infinite}
@keyframes mnrh{0%{stroke-dashoffset:36}20.96%{stroke-dashoffset:-219.7}22.38%{stroke-dashoffset:-399.3}43.34%{stroke-dashoffset:-655.0}100%{stroke-dashoffset:-1345.9}}
.mn .trail.rg{animation:mnrg 42.36s linear -18.36s infinite}
@keyframes mnrg{0%{stroke-dashoffset:420}20.96%{stroke-dashoffset:164.3}22.38%{stroke-dashoffset:-15.3}43.34%{stroke-dashoffset:-271.0}100%{stroke-dashoffset:-961.9}}
.mn .mglow{position:absolute;inset:0;border-radius:50%}
.mn .mglow.cool{box-shadow:0 0 28px 8px rgba(225,232,255,0.38),0 0 90px 28px rgba(190,205,255,0.14);animation:mncool 42.36s linear -18.36s infinite}
.mn .mglow.warm{box-shadow:0 0 30px 10px rgba(255,160,70,0.55),0 0 90px 30px rgba(255,120,50,0.2);animation:mnwarm 42.36s linear -18.36s infinite}
@keyframes mnwarm{0%{opacity:1}20.96%{opacity:1}22.38%{opacity:0}37.68%{opacity:0}100%{opacity:1}}
@keyframes mncool{0%{opacity:0}20.96%{opacity:0}22.38%{opacity:1}37.68%{opacity:1}100%{opacity:0}}
.mn .earthclouds{position:absolute;inset:0;border-radius:50%;background-image:url(../img/clouds.webp);background-size:auto 100%;background-repeat:repeat-x;opacity:.7;-webkit-mask-image:radial-gradient(circle at 60% 58%, #000 38%, transparent 74%);mask-image:radial-gradient(circle at 60% 58%, #000 38%, transparent 74%);animation:mnclouds 240s linear infinite}
@keyframes mnclouds{from{background-position:0 0}to{background-position:-720px 0}}

.mn .moontint{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 38%, #FFD89A 0%, #FFB15A 55%, #F58A3A 100%);mix-blend-mode:multiply;animation:mntint 42.36s linear -18.36s infinite}
@keyframes mntint{0%{opacity:.85}20.96%{opacity:.85}22.38%{opacity:0}37.68%{opacity:0}100%{opacity:.85}}
/* Moon editing details: live timecode, crater play icon, hover play */
.mn .orbitmoon .tc{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#EAF6FF;padding:5px 9px;border-radius:8px;background:rgba(7,8,13,0.72);border:1px solid rgba(78,168,255,0.45);box-shadow:0 0 18px rgba(78,168,255,0.25);display:flex;align-items:center;gap:6px;animation:mntc 42.36s linear -18.36s infinite}
.mn .orbitmoon .tc .rec{width:7px;height:7px;border-radius:50%;background:#FF4D5E;box-shadow:0 0 8px #FF4D5E;animation:mnrec 1.2s steps(2) infinite}
@keyframes mnrec{50%{opacity:.2}}
@keyframes mntc{0%{opacity:1}6.8%{opacity:1}10.2%{opacity:0}33.14%{opacity:0}36.54%{opacity:1}100%{opacity:1}}
.mn .crclip{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.mn .crplay{position:absolute;right:7%;top:50%;width:32px;height:36px;transform:translateY(-50%);display:block}
.mn .crplay svg{width:100%;height:100%;display:block}
.mn .orbitmoon .playov{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);transition:opacity .3s ease,transform .3s ease;z-index:5}
.mn .orbitmoon .playov span{width:46px;height:46px;border-radius:50%;background:rgba(7,8,13,0.55);border:1.5px solid rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(78,168,255,0.6)}
.mn .orbitmoon.is-hover .playov{opacity:1;transform:scale(1)}
body.mn-moon-hover{cursor:pointer}
@media (max-width: 760px){.mn .orbitmoon .tc{font-size:18px;padding:6px 11px;left:calc(100% + 14px)}}
@media (prefers-reduced-motion: reduce){.mn .orbitmoon{animation:none;offset-distance:75%;z-index:4}.mn .moontex{animation:none}.mn .moontint{animation:none;opacity:.45}.mn .mglow.warm,.mn .mglow.cool{animation:none;opacity:.6}.mn .earthclouds{animation:none}.mn .trail{animation:none;display:none}.mn .orbitmoon .tc,.mn .orbitmoon .tc .rec{animation:none}}
@keyframes mnmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mn .track{animation:mnmq 60s linear infinite}
.mn .marq:hover .track{animation-play-state:paused}
.mn .reelcard{transition:transform .3s ease}
.mn .reelcard:hover{transform:scale(1.02)}
@media (prefers-reduced-motion: reduce){.mn .track{animation:none}}
@media (max-width: 760px){.mn .wall{transform:scale(.58);margin:-120px 0}.mn .moon{transform:scale(.55);transform-origin:0 0;top:-150px;left:-150px}}

/* Earth + moon grow with large screens (scaled around Earth's centre). */
@media (min-width: 1600px){.mn .moon{transform:scale(1.15);transform-origin:380px 380px}}
@media (min-width: 1900px){.mn .moon{transform:scale(1.35)}}
@media (min-width: 2200px){.mn .moon{transform:scale(1.55)}}
@media (min-width: 2500px){.mn .moon{transform:scale(1.75)}}
@media (min-width: 3000px){.mn .moon{transform:scale(2.05)}}
@media (min-width: 3600px){.mn .moon{transform:scale(2.4)}}

/* Video wall grows with wide screens so the outer cards always run off both edges. */
@media (min-width: 1800px){.mn .wall{transform:scale(1.06);margin:19px 0}}
@media (min-width: 2000px){.mn .wall{transform:scale(1.14);margin:45px 0}}
@media (min-width: 2200px){.mn .wall{transform:scale(1.24);margin:77px 0}}
@media (min-width: 2400px){.mn .wall{transform:scale(1.35);margin:112px 0}}
@media (min-width: 2600px){.mn .wall{transform:scale(1.46);margin:147px 0}}
@media (min-width: 2900px){.mn .wall{transform:scale(1.62);margin:198px 0}}
@media (min-width: 3300px){.mn .wall{transform:scale(1.85);margin:272px 0}}
@media (min-width: 3800px){.mn .wall{transform:scale(2.12);margin:358px 0}}