:root {
  --bg: #f7faf5;
  --bg-2: #eef7f0;
  --surface: #ffffff;
  --surface-soft: #f4f9f5;
  --ink: #19342f;
  --muted: #5f746e;
  --line: #dce9df;
  --green: #77a953;
  --green-deep: #3f7c63;
  --teal: #3d8b91;
  --bluegreen: #5a98a2;
  --accent: #9cbd5b;
  --shadow: 0 22px 70px rgba(25, 52, 47, 0.10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max: 1180px;
}
* { box-sizing: border-box; }
/* 기본 브라우저 스크롤바 영역을 흔적도 없이 제거 (우측 빈 공간 완전 소멸) */
html {
  scrollbar-width: none; /* Firefox용 */
  -ms-overflow-style: none; /* 구형 IE/Edge용 */
}
html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, 최신 Edge용 */
}

/* 화면 우측 끝에 공중 부양하는 커스텀 스크롤바 디자인 */
#custom-scroll-thumb {
  position: fixed;
  right: 4px; /* 우측 벽면에서 살짝 띄움 */
  width: 6px; /* 스크롤바 두께 */
  background-color: rgba(119, 169, 83, 0.65); /* 브랜드 초록색(--green) 적용 */
  border-radius: 4px;
  z-index: 9999; /* 최상단에 위치 */
  opacity: 0; /* 평소에는 완전히 숨김 */
  pointer-events: none; /* 마우스 클릭 및 휠 조작 방해 금지 */
  transition: opacity 0.3s ease; /* 부드럽게 나타나고 사라짐 */
}

/* 스크롤 중일 때만 시각적으로 노출 */
#custom-scroll-thumb.is-scrolling {
  opacity: 1;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans KR", "Noto Sans JP", "Noto Sans CJK TC", "Noto Sans Arabic", "Noto Sans Devanagari", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 6%, rgba(156, 189, 91, 0.22), transparent 30%),
    radial-gradient(circle at 86% 2%, rgba(61, 139, 145, 0.18), transparent 32%),
    linear-gradient(180deg, #f9fcf8 0%, #f7faf5 58%, #edf6ef 100%);
  line-height: 1.72;
  word-break: keep-all;
}
:lang(en), :lang(ar), :lang(hi) { word-break: normal; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.skip-link { position:absolute; top:-42px; inset-inline-start: 12px; background: var(--ink); color:#fff; padding:10px 14px; border-radius:12px; z-index:200; }
.skip-link:focus { top:12px; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(247,250,245,.82); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(220,233,223,.78); }
.nav-wrap { max-width: var(--max); margin: 0 auto; padding: 14px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.02em; min-width:max-content; }
.brand img { width:40px; height:40px; white-space: nowrap;}
.brand span { display:block; line-height:1.08; }
.brand small { display:block; color:var(--muted); font-weight:700; font-size:11px; letter-spacing:.055em; text-transform:uppercase; }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a, .language-switch a { padding:9px 13px; border-radius:999px; color:var(--muted); font-weight:800; font-size:14px; white-space: nowrap;}
.nav-links a:hover, .nav-links a.active, .language-switch a:hover, .language-switch a.active { color:var(--ink); background:rgba(119,169,83,.13); }
.nav-links .nav-cta { color:#fff !important; background:linear-gradient(135deg, var(--green), var(--teal)) !important; box-shadow:0 10px 24px rgba(63,124,99,.20); }
.language-switch { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.65); }
.language-switch .label { color:var(--muted); font-size:12px; font-weight:900; padding-inline:10px 4px; text-transform:uppercase; letter-spacing:.04em; }
.menu-btn { display:none; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.88); padding:9px 13px; color:var(--ink); font-weight:900; }
.container { max-width: var(--max); margin:0 auto; padding:0 22px; }
.hero { padding: 86px 0 50px; }
.hero-grid { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(310px, .92fr); gap:46px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:7px 12px; border:1px solid rgba(119,169,83,.28); border-radius:999px; color:var(--green-deep); background:rgba(255,255,255,.72); font-weight:900; font-size:13px; letter-spacing:.02em; }
.eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--teal)); }
h1, h2, h3, h4 { line-height:1.22; letter-spacing:-.055em; margin:0; }
h1 { font-size:clamp(42px, 6.5vw, 78px); }
h2 { font-size:clamp(30px, 4vw, 50px); }
h3 { font-size:24px; }
p { margin:0; }
.lead { font-size:clamp(18px, 2vw, 22px); color:#3f5751; margin-top:24px; max-width:820px; }
.gradient-text { background:linear-gradient(100deg, var(--green) 0%, var(--teal) 55%, var(--bluegreen) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-actions, .button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border-radius:999px; border:1px solid transparent; font-weight:900; letter-spacing:-.02em; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:linear-gradient(135deg, var(--green), var(--teal)); box-shadow:0 18px 36px rgba(63,124,99,.22); }
.btn-secondary { color:var(--ink); background:rgba(255,255,255,.88); border-color:var(--line); }
.btn-ghost { color:var(--green-deep); background:rgba(119,169,83,.10); border-color:rgba(119,169,83,.20); }
.hero-card {
  position: relative;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-card img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.hero-orbit { position:absolute; inset:46px; border:1px solid rgba(63,124,99,.18); border-radius:50%; }
.hero-center { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:198px; height:198px; border-radius:50%; display:grid; place-items:center; text-align:center; background:rgba(255,255,255,.78); border:2px solid rgba(63,124,99,.32); box-shadow:inset 0 0 0 12px rgba(119,169,83,.06); }
.hero-center strong { font-size:42px; letter-spacing:-.07em; color:var(--green-deep); }
.hero-center span { display:block; color:var(--muted); font-size:12px; font-weight:800; line-height:1.35; padding:0 22px; }
.node { position:absolute; display:inline-flex; align-items:center; justify-content:center; width:154px; min-height:68px; padding:12px; border-radius:18px; background:rgba(255,255,255,.88); border:1px solid rgba(220,233,223,.9); color:var(--green-deep); text-align:center; font-weight:900; font-size:13px; line-height:1.28; box-shadow:0 14px 34px rgba(25,52,47,.08); }
.node small { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.node.n1 { left:50%; top:18px; transform:translateX(-50%); }
.node.n2 { right:18px; top:110px; }
.node.n3 { right:0; top:250px; }
.node.n4 { right:62px; bottom:52px; }
.node.n5 { left:62px; bottom:52px; }
.node.n6 { left:0; top:250px; }
.node.n7 { left:18px; top:110px; }
.section { padding:78px 0; }
.section-tight { padding:56px 0; }
.section-header { max-width:880px; margin-bottom:36px; }
.section-header h2, .split-panel h2 { margin-bottom:18px; }
.section-header p, .split-panel p, .text-muted { color:var(--muted); }
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.card, .market-card, .download-card, .contact-box { background:rgba(255,255,255,.86); border:1px solid rgba(220,233,223,.92); border-radius:var(--radius-lg); padding:26px; box-shadow:0 18px 48px rgba(25,52,47,.07); }
.card .num, .pipeline-num, .step-num { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--teal)); color:#fff; font-weight:900; box-shadow:0 12px 22px rgba(63,124,99,.16); }
.card h3, .market-card h3, .download-card h3 { margin:16px 0 10px; }
.card p, .market-card p, .download-card p { color:var(--muted); }
.keyword-row, .pill-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.keyword, .pill { display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(119,169,83,.10); color:var(--green-deep); border:1px solid rgba(119,169,83,.18); font-weight:800; font-size:12px; }
.split-panel { display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:start; background:rgba(255,255,255,.70); border:1px solid rgba(220,233,223,.92); border-radius:36px; padding:34px; box-shadow:var(--shadow); }
.feature-list { margin:0; padding:0; list-style:none; display:grid; gap:13px; }
.feature-list li { padding:16px 18px; border-radius:18px; background:rgba(244,249,245,.92); border:1px solid var(--line); color:var(--muted); }
.feature-list strong { display:block; color:var(--ink); margin-bottom:3px; }
.cta-band, .band { padding:36px; border-radius:36px; background:linear-gradient(135deg, rgba(119,169,83,.16), rgba(61,139,145,.13)), rgba(255,255,255,.84); border:1px solid rgba(220,233,223,.92); box-shadow:var(--shadow); }
.cta-band p, .band p { margin-top:14px; color:var(--muted); max-width:840px; }
.page-hero { padding:72px 0 42px; }
.breadcrumb { color:var(--muted); font-weight:800; margin-bottom:18px; font-size:14px; }
.pipeline-list { position:relative; display:grid; gap:18px; margin-top:34px; }
.pipeline-list::before { content:""; position:absolute; top:16px; bottom:16px; inset-inline-start:21px; width:2px; background:linear-gradient(var(--green), var(--teal)); opacity:.34; }
.pipeline-item { position:relative; display:grid; grid-template-columns:42px minmax(0, 1fr); gap:18px; align-items:start; }
.pipeline-body { background:rgba(255,255,255,.86); border:1px solid rgba(220,233,223,.92); border-radius:var(--radius-lg); padding:24px; box-shadow:0 18px 46px rgba(25,52,47,.06); }
.pipeline-body p { color:var(--muted); margin-top:10px; }
.market-grid, .download-grid, .contact-strip { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.download-grid.three { grid-template-columns:1.1fr 1fr 1fr; }
.download-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; counter-reset:step; }
.step { background:rgba(255,255,255,.86); border:1px solid rgba(220,233,223,.92); border-radius:24px; padding:22px; box-shadow:0 16px 42px rgba(25,52,47,.06); }
.step::before { counter-increment:step; content:counter(step, decimal-leading-zero); display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--teal)); color:#fff; font-weight:900; margin-bottom:15px; }
.step h3 { font-size:20px; margin-bottom:8px; }
.step p { color:var(--muted); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.site-footer { margin-top:60px; padding:40px 22px; border-top:1px solid rgba(220,233,223,.92); background:rgba(255,255,255,.45); }
.footer-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }
.footer-note { color:var(--muted); margin-top:10px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.footer-links a { padding:8px 12px; border-radius:999px; color:var(--muted); font-weight:800; background:rgba(255,255,255,.58); border:1px solid rgba(220,233,223,.88); }
.footer-langs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:14px; }
.footer-langs a { color:var(--muted); font-weight:800; font-size:13px; }
[dir="rtl"] .brand small, [dir="rtl"] .eyebrow, [dir="rtl"] .language-switch .label { letter-spacing:0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing:0; }
[dir="rtl"] .hero-center { direction:ltr; }
[dir="rtl"] .footer-links, [dir="rtl"] .footer-langs { justify-content:flex-start; }
@media (max-width: 1080px) {
  .nav-wrap { flex-wrap:wrap; }
  .nav-right { width:100%; justify-content:space-between; }
  .hero-grid, .split-panel, .grid-2 { grid-template-columns:1fr; }
  .hero-card { min-height:500px; }
  .download-grid.three, .steps { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav-wrap { align-items:flex-start; }
  .nav-right { justify-content:flex-end; }
  .menu-btn { display:inline-flex; }
  .nav-links { display:none; width:100%; flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .nav-links a { text-align:center; }
  .language-switch { width:100%; overflow-x:auto; justify-content:flex-start; order:3; }
  .hero { padding-top:58px; }
  .hero-card { min-height:420px; padding:20px; }
  .hero-orbit { inset:32px; }
  .hero-center { width:150px; height:150px; }
  .hero-center strong { font-size:32px; }
  .node { width:122px; min-height:56px; font-size:11px; padding:9px; }
  .node.n2 { right:4px; top:92px; } .node.n3 { right:0; top:210px; } .node.n4 { right:32px; bottom:34px; }
  .node.n5 { left:32px; bottom:34px; } .node.n6 { left:0; top:210px; } .node.n7 { left:4px; top:92px; }
  .card-grid, .market-grid, .download-grid, .download-grid.three, .contact-strip, .steps, .footer-grid { grid-template-columns:1fr; }
  .footer-links, .footer-langs { justify-content:flex-start; }
  .section, .section-tight { padding:48px 0; }
  .cta-band, .band, .split-panel { padding:24px; border-radius:26px; }
}
@media (max-width: 480px) {
  .container, .nav-wrap { padding-inline:16px; }
  .hero-card { display:none; }
  h1 { font-size:40px; }
}