:root { --about-page-bg: #08111f; --about-page-bg-2: #0d1b2a; --about-page-surface: #f7f9fc; --about-page-surface-2: #ffffff; --about-page-card: rgba(255,255,255,0.92); --about-page-card-dark: rgba(11, 24, 42, 0.92); --about-page-text: #0f172a; --about-page-text-soft: #475569; --about-page-white: #ffffff; --about-page-blue: #2563eb; --about-page-blue-2: #1d4ed8; --about-page-orange: #f97316; --about-page-orange-2: #ea580c; --about-page-border: rgba(148, 163, 184, 0.28); --about-page-shadow: 0 18px 50px rgba(2, 8, 23, 0.12); --about-page-shadow-strong: 0 24px 70px rgba(2, 8, 23, 0.20); --about-page-radius-xl: 28px; --about-page-radius-lg: 22px; --about-page-radius-md: 16px; --about-page-radius-sm: 12px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; font-family: Inter, sans-serif; color: var(--about-page-text); background: linear-gradient(rgb(238, 244, 255) 0%, rgb(248, 251, 255) 36%, rgb(237, 242, 247) 100%); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.about-page-shell { width: 100%; }
.about-page-wrap { max-width: 1240px; margin: 0px auto; padding: 0px 20px; }
.about-page-hero { position: relative; padding: 42px 0px 28px; background: linear-gradient(135deg, rgb(7, 17, 31) 0%, rgb(13, 27, 42) 52%, rgb(16, 42, 67) 100%); color: var(--about-page-white); }
.about-page-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 18% 22%, rgba(249, 115, 22, 0.2), transparent 24%), radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.22), transparent 24%), radial-gradient(circle at 70% 84%, rgba(255, 255, 255, 0.08), transparent 20%); pointer-events: none; }
.about-page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: center; }
.about-page-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
.about-page-kicker-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--about-page-orange); box-shadow: rgba(249, 115, 22, 0.18) 0px 0px 0px 6px; }
.about-page-hero h1 { margin: 18px 0px 14px; font-family: Poppins, sans-serif; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1.02; letter-spacing: -0.04em; }
.about-page-hero p { margin: 0px; max-width: 680px; font-size: clamp(1.05rem, 1.8vw, 1.18rem); line-height: 1.8; color: rgba(255, 255, 255, 0.84); }
.about-page-hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.about-page-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, border-color 0.25s; cursor: pointer; }
.about-page-btn-primary { background: linear-gradient(135deg, var(--about-page-orange) 0%, #fb923c 100%); color: rgb(17, 17, 17); box-shadow: rgba(249, 115, 22, 0.28) 0px 16px 30px; }
.about-page-btn-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #fb923c 0%, var(--about-page-orange-2) 100%); }
.about-page-btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--about-page-white); border-color: rgba(255, 255, 255, 0.18); }
.about-page-btn-secondary:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14); }
.about-page-hero-card { position: relative; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--about-page-radius-xl); padding: 18px; box-shadow: var(--about-page-shadow-strong); backdrop-filter: blur(14px); }
.about-page-hero-card img { width: 100%; height: 420px; object-fit: cover; border-radius: calc(var(--about-page-radius-xl) - 8px); border: 1px solid rgba(255, 255, 255, 0.1); }
.about-page-hero-stat { position: absolute; left: 30px; bottom: 30px; background: rgba(8, 17, 31, 0.92); color: rgb(255, 255, 255); padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); max-width: 230px; }
.about-page-hero-stat strong { display: block; font-family: Poppins, sans-serif; font-size: 1.18rem; margin-bottom: 6px; }
.about-page-hero-stat span { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.about-page-section { padding: 72px 0px; }
.about-page-section-alt { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(247, 250, 252) 100%); }
.about-page-section-dark { background: linear-gradient(135deg, rgb(11, 18, 32) 0%, rgb(15, 23, 42) 100%); color: rgb(255, 255, 255); }
.about-page-section-title { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.about-page-section-title h2 { margin: 0px; font-family: Poppins, sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.1; }
.about-page-section-title p { margin: 0px; max-width: 760px; color: var(--about-page-text-soft); line-height: 1.8; }
.about-page-section-dark .about-page-section-title p { color: rgba(255, 255, 255, 0.76); }
.about-page-story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; }
.about-page-story-copy { background: var(--about-page-surface-2); border: 1px solid var(--about-page-border); border-radius: var(--about-page-radius-xl); padding: 30px; box-shadow: var(--about-page-shadow); }
.about-page-story-copy p { margin: 0px 0px 16px; line-height: 1.9; color: var(--about-page-text-soft); font-size: 1.02rem; }
.about-page-story-copy p:last-child { margin-bottom: 0px; }
.about-page-story-image { position: relative; border-radius: var(--about-page-radius-xl); padding: 18px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(249, 115, 22, 0.1)); border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: var(--about-page-shadow); }
.about-page-story-image img { width: 100%; height: 470px; object-fit: cover; border-radius: calc(var(--about-page-radius-xl) - 8px); }
.about-page-location-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: stretch; }
.about-page-location-card, .about-page-map-card { border-radius: var(--about-page-radius-xl); padding: 28px; box-shadow: var(--about-page-shadow); }
.about-page-location-card { background: var(--about-page-card-dark); border: 1px solid rgba(255, 255, 255, 0.1); }
.about-page-location-card h3, .about-page-vision-card h3, .about-page-closing-card h3 { margin: 0px 0px 14px; font-family: Poppins, sans-serif; font-size: 1.45rem; }
.about-page-location-card p, .about-page-vision-card p, .about-page-closing-card p { margin: 0px; line-height: 1.85; color: rgba(255, 255, 255, 0.82); }
.about-page-location-badge { margin-top: 18px; display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(249, 115, 22, 0.14); color: rgb(255, 215, 191); border: 1px solid rgba(249, 115, 22, 0.28); font-weight: 700; }
.about-page-map-card { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(242, 247, 255) 100%); border: 1px solid var(--about-page-border); }
.about-page-map-visual { position: relative; min-height: 360px; border-radius: calc(var(--about-page-radius-xl) - 6px); background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(249, 115, 22, 0.1)), linear-gradient(rgb(248, 251, 255) 0%, rgb(238, 244, 255) 100%); border: 1px solid rgba(148, 163, 184, 0.24); padding: 18px; overflow: hidden; }
.about-page-map-grid { position: absolute; inset: 0px; background-image: linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.8; }
.about-page-map-pin { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; background: rgba(249, 115, 22, 0.16); display: grid; place-items: center; border: 1px solid rgba(249, 115, 22, 0.3); }
.about-page-map-pin::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--about-page-orange); box-shadow: rgba(249, 115, 22, 0.18) 0px 0px 0px 14px; }
.about-page-map-label { position: absolute; left: 20px; bottom: 20px; right: 20px; background: rgba(8, 17, 31, 0.92); color: rgb(255, 255, 255); border-radius: 18px; padding: 16px 18px; line-height: 1.7; font-size: 0.98rem; }
.about-page-identity-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 18px; }
.about-page-identity-card { background: var(--about-page-surface-2); border: 1px solid var(--about-page-border); border-radius: var(--about-page-radius-lg); padding: 22px; box-shadow: var(--about-page-shadow); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.about-page-identity-card:hover { transform: translateY(-4px); box-shadow: var(--about-page-shadow-strong); border-color: rgba(37, 99, 235, 0.28); }
.about-page-identity-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(249, 115, 22, 0.16)); color: var(--about-page-blue-2); font-size: 1.35rem; font-weight: 800; }
.about-page-identity-card h3 { margin: 0px 0px 10px; font-family: Poppins, sans-serif; font-size: 1.12rem; }
.about-page-identity-card p { margin: 0px; line-height: 1.75; color: var(--about-page-text-soft); }
.about-page-philosophy-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 28px; align-items: center; }
.about-page-philosophy-card { background: rgb(255, 255, 255); border: 1px solid var(--about-page-border); border-radius: var(--about-page-radius-xl); padding: 32px; box-shadow: var(--about-page-shadow); }
.about-page-philosophy-card p { margin: 0px 0px 16px; line-height: 1.9; color: var(--about-page-text-soft); font-size: 1.02rem; }
.about-page-highlight { color: var(--about-page-orange-2); font-weight: 800; }
.about-page-philosophy-points { display: grid; gap: 14px; margin-top: 24px; }
.about-page-philosophy-point { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(90deg, rgba(249, 115, 22, 0.1), rgba(37, 99, 235, 0.06)); border: 1px solid rgba(249, 115, 22, 0.14); }
.about-page-philosophy-point span { width: 28px; height: 28px; border-radius: 50%; background: var(--about-page-orange); color: rgb(17, 17, 17); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.about-page-philosophy-point strong { display: block; margin-bottom: 4px; font-family: Poppins, sans-serif; }
.about-page-vision-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: center; }
.about-page-vision-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--about-page-radius-xl); padding: 30px; }
.about-page-vision-card p { color: rgba(255, 255, 255, 0.82); }
.about-page-vision-bubbles { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 18px; }
.about-page-bubble { border-radius: 24px; padding: 24px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--about-page-shadow); transition: transform 0.25s; }
.about-page-bubble:hover { transform: translateY(-4px); }
.about-page-bubble-blue { background: linear-gradient(135deg, rgb(29, 78, 216) 0%, rgb(37, 99, 235) 100%); color: rgb(255, 255, 255); }
.about-page-bubble-orange { background: linear-gradient(135deg, rgb(249, 115, 22) 0%, rgb(251, 146, 60) 100%); color: rgb(17, 17, 17); }
.about-page-bubble h3 { margin: 0px 0px 12px; font-family: Poppins, sans-serif; font-size: 1.15rem; }
.about-page-bubble p { margin: 0px; line-height: 1.75; opacity: 0.96; }
.about-page-closing-card { background: linear-gradient(135deg, rgb(15, 23, 42) 0%, rgb(17, 24, 39) 100%); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--about-page-radius-xl); padding: 34px; box-shadow: var(--about-page-shadow-strong); text-align: center; }
.about-page-closing-card p { max-width: 820px; margin: 0px auto 20px; }
.about-page-closing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.about-page-btn-dark { background: var(--about-page-orange); color: rgb(17, 17, 17); box-shadow: rgba(249, 115, 22, 0.28) 0px 16px 30px; }
.about-page-btn-dark:hover { transform: translateY(-2px); background: rgb(251, 146, 60); }
.about-page-btn-outline { background: transparent; color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.22); }
.about-page-btn-outline:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 1080px) {
  .about-page-hero-grid, .about-page-story-grid, .about-page-location-grid, .about-page-philosophy-grid, .about-page-vision-grid { grid-template-columns: 1fr; }
  .about-page-identity-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .about-page-hero-card img { height: 360px; }
}
@media (max-width: 720px) {
  .about-page-section { padding: 58px 0px; }
  .about-page-hero { padding-top: 30px; }
  .about-page-wrap { padding: 0px 16px; }
  .about-page-story-copy, .about-page-location-card, .about-page-map-card, .about-page-philosophy-card, .about-page-vision-card, .about-page-closing-card { padding: 22px; }
  .about-page-identity-grid, .about-page-vision-bubbles { grid-template-columns: 1fr; }
  .about-page-hero-card img { height: 300px; }
  .about-page-hero-stat { left: 18px; right: 18px; bottom: 18px; max-width: none; }
  .about-page-map-visual { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.editor-tool, [data-editor-tool] { outline: none !important; cursor: default !important; }
.dragging { opacity: 0.5 !important; }
.drag-over { border-top: 3px solid rgb(76, 175, 80) !important; }