/* ==========================================================================
   Magicbrake — landing page styles
   Light mode, Apple-influenced typography (SF Pro, semibold display).
   ========================================================================== */

:root {
	/* Surfaces */
	--bg:           #ffffff;
	--bg-elev:      #f5f5f7;     /* Apple section bg */
	--bg-elev-2:    #ebebed;

	/* Text */
	--fg:           #1d1d1f;     /* Apple primary */
	--fg-muted:     #494950;     /* darker than Apple's secondary for legibility */
	--fg-dim:       #86868b;     /* Apple tertiary */

	/* Brand (Apple button blue) */
	--brand:        #0071e3;
	--brand-hover:  #2178e8;
	--brand-soft:   rgba(0, 113, 227, 0.07);
	--brand-line:   rgba(0, 113, 227, 0.55);

	/* System accents */
	--success:      #34c759;     /* Apple system green */
	--warning:      #ff9500;     /* Apple system orange */

	/* Borders */
	--border:        rgba(0, 0, 0, 0.1);
	--border-strong: rgba(0, 0, 0, 0.18);

	/* Type */
	--font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
	--font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-rounded: "SF Pro Rounded", ui-rounded, -apple-system, system-ui, sans-serif;
	--font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--max-w: 64em;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: 1.0625rem;        /* 17px Apple body */
	line-height: 1.47;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
tt {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 0.35em;
	padding: 0.08em 0.4em;
	letter-spacing: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 1.4em 1.75em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	color: var(--fg);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}
.brand:hover { color: var(--fg); text-decoration: none; }
.brand img { width: 22px; height: 22px; }
.brand span { font-family: var(--font-rounded); }
.site-nav {
	display: flex;
	gap: 1.5em;
	font-size: 0.95rem;
}
.site-nav a {
	color: var(--fg-muted);
	font-weight: 500;
	transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--fg); text-decoration: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	padding: 3.5em 1.75em 5em;
	text-align: center;
	background: var(--bg-elev);
}
h1 {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 6.6vw, 5.2rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--fg);
	max-width: 18ch;
	margin: 0.2em auto 0.5em;
	text-wrap: balance;
}
.lede {
	max-width: 32em;
	margin: 0.2em auto 0;
	color: var(--fg-muted);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	line-height: 1.38;
	letter-spacing: 0;
	text-wrap: balance;
}

.hero-illustration {
	margin: -3em auto 0 auto;
	max-width: 30em;
	width: 100%;
	display: flex;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
}
.hero-illustration .vig-drop {
	max-width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.85em 1.6em;
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0;
	border-radius: 980px;
	border: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
	user-select: none;
}
.btn-primary {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary:hover {
	background: var(--brand-hover);
	color: #fff;
	text-decoration: none;
}
.btn-primary:active { transform: translateY(1px); }
.btn-icon { width: 14px; height: 14px; }

.cta { margin: 3em auto 0; }
.fine-print {
	margin-top: 1.1em;
	font-size: 0.85rem;
	color: var(--fg-dim);
}

/* ==========================================================================
   Feature panels
   ========================================================================== */
.features {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 4em 1.75em;
	display: flex;
	flex-direction: column;
	gap: 6em;
}
.feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4em;
	align-items: center;
}
.feature.reverse .feature-text { order: 2; }
.feature.reverse .feature-vignette { order: 1; }
.feature-text h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.8vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.08;
	margin-bottom: 0.5em;
	color: var(--fg);
	text-wrap: balance;
}
.feature-text p {
	color: var(--fg-muted);
	font-size: 1.0625rem;
	line-height: 1.47;
	max-width: 28em;
}
.feature-vignette {
	width: 100%;
	min-height: 16em;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
}

/* ---------- App window chrome ---------- */
.app-window {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 0.85em;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 24px 60px rgba(0, 0, 0, 0.14);
	transform: perspective(1600px) rotateX(6deg);
	transform-origin: center 75%;
}
.app-window-bar {
	display: flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.7em 0.9em;
	background: linear-gradient(180deg, #ebebed, #e2e2e6);
	border-bottom: 1px solid var(--border);
	border-top-left-radius: calc(0.85em - 1px);
	border-top-right-radius: calc(0.85em - 1px);
}
.app-window-dot {
	width: 0.72em;
	height: 0.72em;
	border-radius: 50%;
}
.app-window-dot:nth-child(1) { background: #ff5f57; }
.app-window-dot:nth-child(2) { background: #febc2e; }
.app-window-dot:nth-child(3) { background: #28c840; }
.app-window-body {
	padding: 0.5em 1em 1em;
	display: flex;
	justify-content: center;
}

/* ---------- Vignette 1 — drop zone ---------- */
.vig-drop {
	width: 100%;
	max-width: 22em;
	aspect-ratio: 5 / 4;
	position: relative;
	font-family: var(--font-mono);
}
.vig-drop-frame {
	position: absolute;
	inset: 10% 8% 8%;
	border: 2px dashed var(--brand-line);
	border-radius: 0.85em;
	background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 113, 227, 0.05), transparent 70%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
}
.vig-drop-icon {
	width: 3em;
	height: auto;
	color: var(--brand);
}
.vig-drop-text {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--brand);
	font-weight: 500;
}
.vig-file {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 5em;
	padding: 0.55em 0.6em;
	border-radius: 0.5em;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #fff;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	offset-anchor: center;
	offset-rotate: 0deg;
}
.vig-file--a {
	background: var(--brand);
	offset-path: ellipse(48% 32% at 50% 50%);
	transform: rotate(-6deg);
	animation: vig-file-orbit 18s linear infinite;
}
.vig-file--b {
	background: var(--warning);
	offset-path: ellipse(42% 28% at 50% 50%);
	transform: rotate(2deg);
	animation: vig-file-orbit 22s linear infinite reverse;
	animation-delay: -8s;
}
.vig-file--c {
	background: var(--success);
	offset-path: ellipse(45% 30% at 50% 50%);
	transform: rotate(7deg);
	animation: vig-file-orbit 20s linear infinite;
	animation-delay: -13s;
}
@keyframes vig-file-orbit {
	from { offset-distance: 0%; }
	to   { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.vig-file--a,
	.vig-file--b,
	.vig-file--c {
		animation: none;
	}
	.vig-file--a { offset-distance: 8%;  }
	.vig-file--b { offset-distance: 42%; }
	.vig-file--c { offset-distance: 73%; }
}

/* ---------- Feature 1 — pile of file-type chips ---------- */
.vig-formats {
	position: relative;
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 22 / 14;
	font-family: var(--font-mono);
}
.vig-format {
	position: absolute;
	width: 5.6rem;
	padding: 0.55rem 0.7rem;
	border-radius: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #fff;
	text-align: center;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.2);
}
.vig-format:nth-child(1) {
	background: var(--brand);
	left: 18%; top: 18%;
	transform: translate(-50%, -50%) rotate(-9deg);
	z-index: 1;
}
.vig-format:nth-child(2) {
	background: #ff9500;
	left: 77%; top: 18%;
	transform: translate(-50%, -50%) rotate(11deg);
	z-index: 2;
}
.vig-format:nth-child(3) {
	background: #34c759;
	left: 16%; top: 50%;
	transform: translate(-50%, -50%) rotate(-3deg);
	z-index: 3;
}
.vig-format:nth-child(4) {
	background: #af52de;
	left: 80%; top: 50%;
	transform: translate(-50%, -50%) rotate(5deg);
	z-index: 4;
}
.vig-format:nth-child(5) {
	background: #ff3b30;
	left: 23%; top: 82%;
	transform: translate(-50%, -50%) rotate(-12deg);
	z-index: 5;
}
.vig-format:nth-child(6) {
	background: #5856d6;
	left: 73%; top: 82%;
	transform: translate(-50%, -50%) rotate(7deg);
	z-index: 6;
}
.vig-format:nth-child(7) {
	background: #ff2d55;
	left: 41%; top: 64%;
	transform: translate(-50%, -50%) rotate(2deg);
	z-index: 7;
}
.vig-format:nth-child(8) {
	background: #32ade6;
	left: 55%; top: 36%;
	transform: translate(-50%, -50%) rotate(-6deg);
	z-index: 8;
}

/* ---------- Vignette 2 — button ---------- */
.vig-btn-wrap {
	width: 100%;
	max-width: 22em;
	display: flex;
	justify-content: center;
}
.vig-btn {
	width: 100%;
	padding: 1em 1.2em;
	background: var(--brand);
	border-radius: 0.6em;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0;
	text-align: center;
	box-shadow:
		0 2px 6px rgba(0, 113, 227, 0.18),
		0 10px 28px rgba(0, 113, 227, 0.18);
}

/* ---------- Vignette 3 — file size shrink ---------- */
.vig-shrink {
	width: 100%;
	max-width: 28em;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 1em;
}
.vig-file-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 1.2em 1em;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 0.7em;
}
.vig-file-card--alert {
	background: rgba(255, 149, 0, 0.09);
	border-color: rgba(255, 149, 0, 0.4);
}
.vig-file-card--alert .vig-file-icon {
	color: var(--warning);
}
.vig-file-card--success {
	background: rgba(52, 199, 89, 0.09);
	border-color: rgba(52, 199, 89, 0.4);
}
.vig-file-card--success .vig-file-icon {
	color: var(--success);
}
.vig-file-icon {
	width: 1.8em;
	height: 1.8em;
}
.vig-file-name {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--fg-muted);
	letter-spacing: 0.04em;
}
.vig-file-size {
	font-family: var(--font-mono);
	font-size: 0.92rem;
	color: var(--fg);
	font-weight: 600;
}
.vig-arrow {
	display: flex;
	align-items: center;
	color: var(--fg-dim);
	font-size: 1.4rem;
	font-family: var(--font-mono);
	flex-shrink: 0;
}

/* ==========================================================================
   Comparison
   ========================================================================== */
.compare {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 4em 1.75em;
}
.compare-head {
	text-align: center;
	margin-bottom: 3em;
}
.compare-head h2 {
	font-family: var(--font-display);
	font-size: clamp(1.85rem, 4vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-wrap: balance;
}
.compare-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2em;
	max-width: 44em;
	margin: 0 auto;
}
.compare-card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 1em;
	padding: 1.8em 1.6em;
}
.compare-card .compare-tag {
	display: block;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--fg);
	letter-spacing: -0.018em;
	line-height: 1.15;
	margin-bottom: 0.4em;
}
.compare-card p {
	color: var(--fg-muted);
	font-size: 1rem;
	line-height: 1.5;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 4em 1.75em 12em;
}
.faq-head {
	text-align: center;
	margin-bottom: 2.5em;
}
.faq-head h2 {
	font-family: var(--font-display);
	font-size: clamp(1.85rem, 4vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-wrap: balance;
}
.faq-list {
	max-width: 44em;
	margin: 0 auto;
	border-top: 1px solid var(--border);
}
.faq-list dt {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--fg);
	letter-spacing: -0.014em;
	line-height: 1.3;
	margin-top: 1.5em;
	margin-bottom: 0.4em;
}
.faq-list dd {
	color: var(--fg-muted);
	font-size: 1.0625rem;
	line-height: 1.5;
	margin: 0;
	padding-bottom: 1.5em;
	border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.closing {
	padding: 6em 1.75em 7em;
	text-align: center;
	background: var(--bg-elev);
}
.closing-inner {
	max-width: 36em;
	margin: 0 auto;
}
.closing h2 {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5.4vw, 3.8rem);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.05;
	margin-bottom: 1em;
	text-wrap: balance;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	padding: 2.5em 1.75em 3.5em;
	text-align: center;
	color: var(--fg-dim);
	font-size: 0.85rem;
	background: var(--bg-elev);
}
.site-footer a {
	color: var(--fg-muted);
	font-weight: 500;
}
.site-footer a:hover { color: var(--fg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 50em) {
	.feature {
		grid-template-columns: 1fr;
		gap: 2em;
	}
	.feature.reverse .feature-text,
	.feature.reverse .feature-vignette { order: initial; }
	.features { gap: 4.5em; padding: 3em 1.75em; }
	.feature-vignette { min-height: 14em; }
	.compare-cards { grid-template-columns: 1fr; }
	.hero { padding: 2em 1.5em 4em; }
	.hero-illustration { margin-top: 2.5em; }
}

@media (max-width: 30em) {
	.site-header { padding: 1.1em 1.25em; }
	.brand span { font-size: 1rem; }
	.site-nav { gap: 1em; }
	.btn { padding: 0.85em 1.5em; font-size: 1rem; }
}