/* Tokens: keep as variables for reuse (from DSL) */
:root {
  /* colors */
  --color-bg: #F9FAFB; /* paint_2:9 */
  --color-surface: #FFFFFF; /* paint_2:24 */
  --color-surface-alt: rgba(0, 0, 0, 0.001); /* paint_2:15[1] */
  --color-text: #1F2937; /* paint_5:0337 as primary text */
  --color-text-muted: #4B5563; /* paint_2:0254 */
  --color-accent: #6366F1; /* paint_2:273 */
  --color-accent-weak: rgba(99, 102, 241, 0.1); /* paint_5:977 */
  --color-border: #E5E7EB; /* paint_2:030 */

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* effect_2:08 */

  /* typography - Roboto */
  --font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; /* font_2:0199 */
  --h1-size: 24px; /* font_5:918 size */
  --h1-line: 32px; /* font_5:918 lineHeight */
  --h2-size: 20px; /* font_5:868 size */
  --h2-line: 28px; /* font_5:868 lineHeight */
  --body-size: 16px; /* font_2:0199 size */
  --body-line: 24px; /* font_2:0199 lineHeight */

  /* second page tokens (from DSL 2) */
  --cp-white: #FFFFFF; /* paint_1:9 */
  --cp-bg-muted: #F9FAFB; /* paint_1:45 */
  --cp-text-strong: #111827; /* paint_1:18 */
  --cp-text: #1F2937; /* paint_1:014 */
  --cp-text-muted: #374151; /* paint_1:857 */
  --cp-text-weaker: #9CA3AF; /* paint_1:988 */
  --cp-accent: #8B5CF6; /* paint_1:0008 */
  --cp-accent-weak: rgba(139, 92, 246, 0.1); /* paint_7:0023 */
  --cp-border: #D1D5DB; /* paint_7:1508 */
  --cp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* effect_7:086 */
  --cp-h1-size: 48px; /* font_1:2144 size */
  --cp-h1-line: 48px; /* font_1:2144 lineHeight */
  --cp-h2-size: 30px; /* font_1:733 size */
  --cp-h2-line: 36px; /* font_1:733 lineHeight */

  /* login page tokens (DSL 3) */
  --lp-bg: #F9FAFB; /* paint_1:45 */
  --lp-overlay: rgba(255, 255, 255, 0.95); /* paint_16:348[0] */
  --lp-overlay-grad-end: rgba(0, 0, 0, 0.001); /* paint_16:348[1] */
  --lp-hero: url('https://image-resource.mastergo.com/171503549649984/171503549649988/8e68252df5402c815de5d2b66f6efd4e.png'); /* paint_16:1649 */
  --lp-shadow-strong: 0 25px 50px -12px rgba(0,0,0,0.25); /* effect_16:342 */
  --lp-brand: #7618E1; /* paint_18:617 */
  --lp-muted: #4B5563; /* paint_1:0272 */
  --lp-label: #374151; /* paint_1:857 */
  --lp-placeholder: #9CA3AF; /* paint_1:993 */
  --lp-icon: #6B7280; /* paint_16:0026 */
  --lp-border: #E5E7EB; /* paint_16:633 */
  --lp-primary: #AD5FFC; /* paint_16:1397 */

  /* portfolio page tokens (DSL 4) */
  --pf-bg: #F9FAFB; /* paint_2:9 */
  --pf-white: #FFFFFF; /* paint_2:18 */
  --pf-text-strong: #111827; /* paint_2:197 */
  --pf-text: #374151; /* paint_2:245 */
  --pf-text-weak: #9CA3AF; /* paint_2:0464 */
  --pf-border: #D1D5DB; /* paint_2:078 */
  --pf-accent: #6366F1; /* paint_2:019 */
  --pf-card-bg: linear-gradient(rgba(0,0,0,0.001), #FFFFFF); /* paint_2:23 */
  --pf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* effect_2:10 */

  /* cart page tokens (DSL 5) */
  --cart-bg: #F9FAFB; /* paint_2:9 */
  --cart-white: #FFFFFF; /* paint_2:18 */
  --cart-border: #E5E7EB; /* paint_2:34 */
  --cart-text: #4B5563; /* paint_2:0242 */
  --cart-text-weak: #9CA3AF; /* paint_2:290 */
  --cart-black: #000000; /* paint_3:3663 */
  --cart-accent: #6366F1; /* paint_2:019 */
  --cart-card-bg: linear-gradient(rgba(0,0,0,0.001), #FFFFFF); /* paint_2:23 */
  --cart-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* effect_2:10 */

  /* about page tokens (DSL 6) */
  --about-bg: #FFFFFF; /* paint_2:18 */
  --about-surface: #F9FAFB; /* paint_2:9 */
  --about-text: #4B5563; /* paint_2:0242 */
  --about-strong: #111827; /* paint_2:197 */
  --about-accent: #6366F1; /* paint_2:019 */
  --about-border: #F3F4F6; /* paint_3:278 */
  --about-hero-bg: linear-gradient(90deg, #F9FAFB 0%, #FFFFFF 100%); /* paint_3:2144 */

  /* contact page tokens (DSL 7) */
  --ct-bg: #F9FAFB; /* paint_3:9 */
  --ct-surface: linear-gradient(#FFFFFF, rgba(0,0,0,0.001)); /* paint_3:15 */
  --ct-text: #4B5563; /* paint_3:222 */
  --ct-strong: #111827; /* paint_3:215 */
  --ct-accent: #6366F1; /* paint_3:199 */
  --ct-accent-weak: rgba(99,102,241,0.1); /* paint_3:230 */
  --ct-border: #D1D5DB; /* paint_3:0113 */
  --ct-white: #FFFFFF; /* paint_3:24 */
  --ct-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* effect_3:08 */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

.container {
  width: 100%;
  max-width: 1376px; /* from DSL main width */
  margin: 0 auto;
  padding: 0 32px;
}

.site-header {
  padding-top: 48px; /* header y offset */
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.brand { display: inline-flex; height: 32px; align-items: center; }
.brand-icon { width: 54px; height: 37px; color: #3D3D3D; }

.menu { display: flex; align-items: center; gap: 32px; }
.menu a { color: var(--color-text-muted); text-decoration: none; height: 24px; display: inline-flex; align-items: center; }
.btn-primary {
  height: 40px;
  padding: 8px 24px;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.layout { display: grid; grid-template-columns: 437.33px 1fr; gap: 32px; padding-top: 72px; }

.card {
  background: linear-gradient(var(--color-surface), var(--color-surface-alt));
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
.profile { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar { width: 192px; height: 192px; border-radius: 9999px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.title { font-size: var(--h1-size); line-height: var(--h1-line); color: #000; margin: 16px 0 0; }
.subtitle { margin: 8px 0 0; }
.socials { display: flex; gap: 16px; margin-top: 16px; }
.social { width: 40px; height: 40px; border-radius: 9999px; background: #F3F4F6; display: inline-flex; align-items: center; justify-content: center; color: #4B5563; }
.social svg { width: 16px; height: 16px; }

.card-title { font-size: var(--h2-size); line-height: var(--h2-line); color: #000; margin: 0 0 24px; }

.contact .contact-item { display: flex; align-items: center; gap: 12px; height: 24px; margin-bottom: 16px; }
.contact .icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); }

.skill { margin-bottom: 16px; }
.skill-row { display: flex; justify-content: space-between; align-items: center; color: #374151; }
.percent { color: var(--color-accent); }
.progress { height: 8px; background: var(--color-border); border-radius: 9999px; overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--color-accent); border-radius: 9999px; }

.hobbies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hobby { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hobby-icon { width: 80px; height: 80px; border-radius: 12px; background: var(--color-accent-weak); display: grid; place-items: center; color: var(--color-accent); }
.hobby-icon svg { width: 28px; height: 28px; }

@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
}

/* =====================
   Creator Platform page
   ===================== */
.cp-body { background: var(--cp-white); color: var(--cp-text-muted); }
.cp-header { background: linear-gradient(var(--cp-white), rgba(0,0,0,0.001)); box-shadow: var(--cp-shadow-sm); }
.cp-nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.cp-nav-left { display: flex; align-items: center; gap: 24px; }
.cp-logo { display: inline-flex; width: 54px; height: 48px; color: #8F36A3; }
.cp-menu { display: flex; align-items: center; gap: 24px; }
.cp-menu a { color: var(--cp-text-muted); text-decoration: none; height: 24px; display: inline-flex; align-items: center; }
.cp-nav-right { display: flex; align-items: center; gap: 16px; }
.cp-cart { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--cp-text-muted); cursor: pointer; }
.cp-btn-primary { background: var(--cp-accent); color: #fff; border: none; border-radius: 4px; height: 40px; padding: 8px 24px; cursor: pointer; }
.cp-btn-sm { height: 40px; padding: 8px 16px; }
.cp-btn-outline { background: #fff; border: 1px solid var(--cp-border); color: var(--cp-text-muted); border-radius: 4px; }
.cp-btn-ghost { background: #fff; border: 1px solid var(--cp-accent); color: var(--cp-accent); border-radius: 4px; height: 50px; padding: 12px 32px; }

.cp-hero { height: 600px; background: url('https://image-resource.mastergo.com/171503549649984/171503549649988/9b86e532628b92ff639026e84347127e.png') center/cover no-repeat; display: flex; align-items: center; }
.cp-hero-inner { height: 184px; display: flex; align-items: center; }
.cp-hero-text { width: 672px; padding: 0 24px; }
.cp-hero h1 { margin: 0 0 24px; font-size: var(--cp-h1-size); line-height: var(--cp-h1-line); color: #fff; }
.cp-hero p { margin: 0 0 32px; font-size: 20px; line-height: 28px; color: #fff; }
.cp-hero-cta { height: 52px; padding: 12px 32px; }

.cp-section { padding: 64px 0; }
.cp-works { background: var(--cp-bg-muted); }
.cp-section-head { display: flex; flex-direction: column; gap: 10px; }
.cp-section-head h2 { font-size: var(--cp-h2-size); line-height: var(--cp-h2-line); color: var(--cp-text-strong); margin: 0; }
.cp-filter { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.cp-filter-buttons { display: flex; gap: 16px; }
.cp-search { position: relative; width: 256px; height: 42px; }
.cp-search input { width: 100%; height: 42px; padding: 8px 16px 8px 40px; border: 1px solid var(--cp-border); border-radius: 4px; }
.cp-search svg { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: var(--cp-text-weaker); }

.cp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.cp-card { background: linear-gradient(var(--cp-white), rgba(0,0,0,0.001)); border-radius: 12px; box-shadow: var(--cp-shadow-sm); overflow: hidden; }
.cp-card-cover { width: 100%; height: 240px; object-fit: cover; display: block; }
.cp-card-body { padding: 24px; }
.cp-card-body h3 { margin: 0 0 8px; font-size: 20px; line-height: 28px; color: #000; }
.cp-card-body p { margin: 0 0 16px; color: var(--cp-text-muted); }
.cp-card-row { display: flex; align-items: center; justify-content: space-between; }
.cp-price { color: var(--cp-accent); font-weight: 700; }
.cp-load-more { display: grid; place-items: center; margin-top: 24px; }

.cp-center { text-align: center; color: var(--cp-text-strong); font-size: var(--cp-h2-size); line-height: var(--cp-h2-line); margin: 0 0 24px; }
.cp-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cp-service { background: transparent; border-radius: 12px; padding: 32px; text-align: center; }
.cp-service-icon { width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 9999px; background: var(--cp-accent-weak); display: grid; place-items: center; color: var(--cp-accent); }
.cp-service h3 { margin: 0 0 12px; font-size: 20px; line-height: 28px; color: #000; }
.cp-service p { margin: 0; color: var(--cp-text-muted); }

.cp-stories { background: var(--cp-bg-muted); }
.cp-story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cp-story { background: linear-gradient(var(--cp-white), rgba(0,0,0,0.001)); border-radius: 12px; box-shadow: var(--cp-shadow-sm); overflow: hidden; }
.cp-story-cover { width: 100%; height: 256px; object-fit: cover; display: block; }
.cp-story-body { padding: 32px; }
.cp-story-body h3 { margin: 0 0 12px; font-size: 20px; line-height: 28px; color: #000; }
.cp-story-body p { margin: 0 0 12px; color: var(--cp-text-muted); }
.cp-link { background: transparent; border: none; color: var(--cp-accent); padding: 0; cursor: pointer; }

.cp-footer { background: #111827; color: #9CA3AF; padding: 64px 0; }
.cp-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cp-footer-col h4 { color: #fff; margin: 0 0 12px; font-size: 18px; line-height: 28px; }
.cp-footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cp-footer-col a { color: #9CA3AF; text-decoration: none; }
.cp-footer-muted { margin-top: 12px; }
.cp-logo.lg { width: 54px; height: 48px; }
.cp-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cp-copyright { border-top: 1px solid var(--cp-text); margin-top: 32px; padding-top: 24px; text-align: center; }

@media (max-width: 1024px) {
  .cp-card-grid { grid-template-columns: 1fr; }
  .cp-service-grid { grid-template-columns: 1fr; }
  .cp-story-grid { grid-template-columns: 1fr; }
}

/* =====================
   Login Page (glass card)
   ===================== */
.lp-body { background: var(--lp-bg); }
.lp-main { min-height: 100vh; display: grid; }
.lp-hero { background: var(--lp-hero) center/cover no-repeat; display: grid; place-items: center; padding: 64px 16px; }
.lp-card {
  width: 480px; min-height: 660px; border-radius: 16px;
  background: linear-gradient(var(--lp-overlay), var(--lp-overlay-grad-end));
  box-shadow: var(--lp-shadow-strong);
  backdrop-filter: blur(4px);
  padding: 48px;
}

/* =====================
   Portfolio Page
   ===================== */
.pf-body { background: var(--pf-bg); color: var(--pf-text); }
.pf-nav { background: var(--pf-white); box-shadow: var(--pf-shadow-sm); }
.pf-nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.pf-logo { display: inline-flex; width: 41px; height: 64px; align-items: center; }
.pf-menu { display: flex; align-items: center; gap: 24px; }
.pf-menu a { color: var(--pf-text); text-decoration: none; position: relative; }
.pf-menu a.active { color: var(--pf-accent); }
.pf-btn-primary { height: 40px; padding: 8px 24px; background: var(--pf-accent); color: #fff; border: none; border-radius: 4px; cursor: pointer; }

.pf-main { padding: 0 0 64px; }
.pf-header.container { padding-top: 96px; }
.pf-header h1 { margin: 0 0 16px; font-size: 30px; line-height: 36px; color: var(--pf-text-strong); }
.pf-toolbar { display: flex; align-items: center; justify-content: space-between; }
.pf-filters { display: flex; gap: 16px; }
.pf-btn { height: 42px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; }
.pf-btn-outline { background: var(--pf-white); border: 1px solid var(--pf-border); color: var(--pf-text); }

.pf-search { position: relative; width: 256px; height: 42px; }
.pf-search input { width: 100%; height: 42px; border-radius: 4px; border: 1px solid var(--pf-border); padding: 8px 16px 8px 40px; }
.pf-search svg { position: absolute; left: 16px; top: 13px; width: 16px; height: 16px; }

.pf-grid.container { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pf-card { background: var(--pf-card-bg); border-radius: 12px; box-shadow: var(--pf-shadow-sm); overflow: hidden; }
.pf-cover { width: 100%; height: 292px; object-fit: cover; display: block; }
.pf-card-body { padding: 16px; }
.pf-card-body h3 { margin: 0 0 8px; font-size: 18px; line-height: 28px; color: var(--pf-text-strong); }
.pf-date { margin: 0 0 8px; color: #6B7280; font-size: 14px; }
.pf-desc { margin: 0; color: var(--pf-text); white-space: pre-line; font-size: 14px; line-height: 20px; }

.pf-pagination.container { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.pf-page { width: 40px; height: 40px; border-radius: 4px; display: grid; place-items: center; background: var(--pf-white); border: 1px solid var(--pf-border); color: var(--pf-text); }
.pf-page-active { background: var(--pf-accent); color: #fff; border-color: var(--pf-accent); }
.pf-page-outline svg { width: 14px; height: 14px; }

.pf-footer { background: var(--pf-white); border-top: 1px solid #E5E7EB; }
.pf-footer-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 32px; }
.pf-footer p { margin: 0; color: #6B7280; font-size: 14px; }
.pf-socials { display: flex; gap: 16px; }
.pf-socials svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .pf-grid.container { grid-template-columns: 1fr; }
  .pf-nav-inner { padding: 0 16px; }
}

/* =====================
   Cart Page
   ===================== */
.cart-body { background: var(--cart-bg); color: var(--cart-text); }
.cart-header { background: var(--cart-white); border-bottom: 1px solid var(--cart-border); }
.cart-header-inner { height: 65px; max-width: 1392px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.cart-brand { display: flex; align-items: center; gap: 32px; }
.cart-logo { display: inline-flex; width: 41px; height: 32px; }
.cart-nav { display: flex; gap: 24px; }
.cart-nav a { color: var(--cart-text); text-decoration: none; }
.cart-icons { display: flex; gap: 16px; }
.icon-btn { width: 28px; height: 28px; border: none; background: transparent; display: grid; place-items: center; cursor: pointer; }

.cart-main.container { max-width: 1392px; margin: 0 auto; padding: 32px 24px; }
.cart-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.cart-title-row h2 { margin: 0; font-size: 24px; line-height: 32px; color: var(--cart-black); }
.cart-edit { color: var(--cart-accent); text-decoration: none; }

.cart-list { display: grid; gap: 16px; }
.cart-item { display: grid; grid-template-columns: 20px 96px 1fr; gap: 16px; background: var(--cart-card-bg); border-radius: 12px; box-shadow: var(--cart-shadow-sm); padding: 16px; }
.cart-check { width: 20px; height: 20px; align-self: center; }
.cart-thumb { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; }
.cart-info { display: grid; gap: 8px; }
.cart-info-top { display: flex; justify-content: space-between; align-items: center; }
.cart-info-top h3 { margin: 0; font-weight: 500; color: var(--cart-black); font-size: 16px; line-height: 24px; }
.cart-trash { border: none; background: transparent; cursor: pointer; }
.cart-meta { margin: 0; color: #6B7280; font-size: 14px; }
.cart-info-bottom { display: flex; justify-content: space-between; align-items: center; }
.cart-price { color: var(--cart-accent); font-size: 18px; line-height: 28px; }
.qty { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 32px; height: 32px; border: 1px solid var(--cart-border); background: var(--cart-white); border-radius: 4px; display: grid; place-items: center; cursor: pointer; }
.qty-input { width: 48px; height: 32px; border-radius: 4px; border: 1px solid var(--cart-border); text-align: center; background: var(--cart-bg); }

.cart-coupon { display: flex; gap: 16px; align-items: center; background: var(--cart-card-bg); border-radius: 12px; box-shadow: var(--cart-shadow-sm); padding: 24px; margin-top: 16px; }
.cart-coupon input { flex: 1; height: 40px; border: 1px solid var(--cart-border); border-radius: 4px; padding: 0 16px; }
.cart-btn-primary { background: var(--cart-accent); color: #fff; border: none; border-radius: 4px; height: 40px; padding: 0 24px; cursor: pointer; }
.cart-btn-primary.large { height: 48px; padding: 0 48px; }

.cart-summary { background: var(--cart-card-bg); border-radius: 12px; box-shadow: var(--cart-shadow-sm); padding: 24px; margin-top: 16px; display: grid; gap: 16px; }
.cart-summary .row { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.cart-summary .label { color: #6B7280; }
.cart-summary .value { color: var(--cart-black); font-size: 18px; }
.cart-summary .value.off { color: var(--cart-accent); }
.cart-summary .row.total { border-top: 1px solid var(--cart-border); padding-top: 12px; }
.cart-summary .value.total { color: var(--cart-accent); font-size: 24px; line-height: 32px; }
.cart-summary .actions { display: flex; justify-content: flex-end; }

@media (max-width: 768px) {
  .cart-item { grid-template-columns: 20px 72px 1fr; }
  .cart-thumb { width: 72px; height: 72px; }
}

/* =====================
   About Page
   ===================== */
.about-body { background: var(--about-bg); color: var(--about-text); }
.about-nav { border-bottom: 1px solid var(--about-border); background: transparent; }
.about-nav-inner { max-width: 1440px; margin: 0 auto; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.about-logo { font-family: 'Pacifico', cursive; font-size: 24px; line-height: 32px; color: var(--about-accent); text-decoration: none; }
.about-menu { display: flex; gap: 32px; }
.about-menu a { color: var(--about-text); text-decoration: none; }
.about-menu a.active { color: var(--about-accent); }

.about-hero { padding: 80px 0; background: var(--about-hero-bg); }
.container { max-width: 1280px; margin: 0 auto; }
.about-card { background: var(--about-bg); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding: 32px; }
.about-card h1 { margin: 0 0 24px; text-align: center; font-size: 36px; line-height: 40px; color: var(--about-strong); }
.about-card p { margin: 16px 0; line-height: 26px; }

.about-mission { background: var(--about-surface); border-radius: 12px; padding: 32px; margin: 24px 0; }
.about-mission h2 { margin: 0 0 16px; font-size: 24px; line-height: 32px; color: var(--about-strong); }
.about-mission ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.about-mission li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; }
.about-mission svg { width: 16px; height: 16px; color: var(--about-accent); }

.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0; }
.stat { background: var(--about-surface); border-radius: 12px; padding: 24px; text-align: center; }
.stat .num { font-size: 30px; line-height: 36px; color: var(--about-accent); font-weight: 700; }
.stat .label { margin-top: 6px; }

.about-footer { background: var(--about-surface); padding: 48px 0; }
.about-footer-inner { text-align: center; }
.about-footer-inner p { margin: 0 0 16px; }
.about-footer-icons { display: flex; gap: 24px; justify-content: center; }
.about-footer-icons svg { width: 24px; height: 24px; color: var(--about-text); }

/* =====================
   Contact Page
   ===================== */
.ct-body { background: var(--ct-bg); color: var(--ct-text); }
.ct-header { background: var(--ct-surface); box-shadow: var(--ct-shadow-sm); }
.ct-nav { height: 64px; max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.ct-logo { display: inline-flex; width: 41px; height: 32px; align-items: center; }
.ct-menu { display: flex; gap: 32px; }
.ct-menu a { text-decoration: none; color: var(--ct-text); }
.ct-menu a.active { color: var(--ct-accent); }

.ct-main { padding-bottom: 48px; }
.ct-hero.container { text-align: center; padding-top: 48px; }
.ct-hero h1 { margin: 0 0 12px; font-size: 30px; line-height: 36px; color: var(--ct-strong); }

.ct-cards.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.ct-card { background: var(--ct-surface); border-radius: 12px; box-shadow: var(--ct-shadow-sm); padding: 32px; text-align: center; }
.ct-card-icon { width: 48px; height: 48px; border-radius: 9999px; background: var(--ct-accent-weak); display: grid; place-items: center; color: var(--ct-accent); margin: 0 auto 16px; }
.ct-card h3 { margin: 0 0 6px; font-size: 18px; line-height: 28px; color: var(--ct-strong); }
.ct-card .muted { margin: 0 0 6px; }
.ct-card .link { margin: 0; color: var(--ct-accent); font-weight: 500; }

.ct-content.container { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.card { background: var(--ct-surface); border-radius: 12px; box-shadow: var(--ct-shadow-sm); padding: 32px; }
.ct-form h2, .ct-map h2 { margin: 0 0 16px; font-size: 20px; line-height: 28px; color: var(--ct-strong); }
.ct-form form { display: grid; gap: 12px; }
.ct-form label { font-size: 14px; color: #374151; }
.ct-form input, .ct-form textarea { width: 100%; height: 42px; border: 1px solid var(--ct-border); border-radius: 4px; padding: 8px 16px; background: var(--ct-white); outline: none; }
.ct-form textarea { height: auto; resize: vertical; }
.ct-verify { display: grid; grid-template-columns: 1fr 100px; gap: 16px; align-items: center; }
.ct-captcha { width: 100%; height: 40px; object-fit: cover; border-radius: 4px; }
.ct-actions { display: flex; gap: 16px; }
.btn-primary { background: var(--ct-accent); color: #fff; border: none; height: 40px; padding: 8px 24px; border-radius: 4px; cursor: pointer; }
.btn-outline { background: transparent; color: #000; border: 1px solid var(--ct-border); height: 42px; padding: 8px 24px; border-radius: 4px; cursor: pointer; }

.ct-map-box { width: 100%; height: 400px; border-radius: 12px; overflow: hidden; }
.ct-map-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ct-follow.container { margin-top: 40px; text-align: center; }
.ct-follow h2 { margin: 0 0 16px; font-size: 20px; line-height: 28px; color: var(--ct-strong); }
.ct-follow-icons { display: flex; justify-content: center; gap: 24px; }

.ct-footer { background: var(--ct-white); border-top: 1px solid #E5E7EB; }
.ct-footer-inner { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; }

@media (max-width: 1024px) {
  .ct-cards.container { grid-template-columns: 1fr; }
  .ct-content.container { grid-template-columns: 1fr; }
}
.lp-head { width: 384px; margin: 0 auto 32px; text-align: center; }
.lp-logo { width: 54px; height: 48px; color: var(--lp-brand); margin: 0 auto 8px; }
.lp-welcome { margin: 0; color: var(--lp-muted); }

.lp-form { width: 384px; margin: 0 auto; }
.lp-label { display: block; color: var(--lp-label); margin: 16px 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.lp-input-wrap { position: relative; height: 50px; }
.lp-input-wrap input {
  width: 100%; height: 50px; border-radius: 4px; border: 1px solid var(--lp-border);
  padding: 12px 16px 12px 48px; outline: none; font-size: 16px; line-height: 24px;
}
.lp-input-wrap input::placeholder { color: var(--lp-placeholder); }
.lp-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--lp-icon); width: 16px; height: 18px; display: grid; place-items: center; }

.lp-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.lp-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-muted); font-size: 14px; }
.lp-link { color: var(--lp-primary); text-decoration: none; font-size: 14px; }
.lp-btn-primary { width: 100%; height: 48px; margin-top: 24px; background: var(--lp-primary); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
.lp-signup { margin-top: 12px; text-align: center; color: var(--lp-muted); font-size: 14px; }

.lp-divider { position: relative; margin: 24px 0; text-align: center; }
.lp-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--lp-border); }
.lp-divider span { position: relative; background: #fff; padding: 0 16px; color: var(--lp-icon); font-size: 14px; }

.lp-socials { display: flex; justify-content: center; gap: 24px; }
.lp-social { width: 48px; height: 48px; border: 1px solid var(--lp-border); border-radius: 9999px; background: #fff; display: grid; place-items: center; cursor: pointer; }

@media (max-width: 520px) {
  .lp-card { width: 100%; padding: 32px; }
  .lp-head, .lp-form { width: 100%; }
}