/* =====================================================================
   Hanuri Landing — styles (from claude.ai/design source, class-ified)
   Brand: K-Indigo #1E3A8A. Mobile-first, RTL-aware (logical properties).
   ===================================================================== */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:#1E3A8A;color:#fff;}

.hanuri-root{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Noto Sans KR','Noto Sans','Segoe UI',Roboto,sans-serif;
  color:#0F172A;
  letter-spacing:-0.02em;
  background:#ffffff;
  overflow-x:hidden;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.accent{color:#1E3A8A;}
.ink{color:#0F172A;}
.gold{color:#FBBF24;}
.nowrap{white-space:nowrap;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #E9EEF5;
}
.header-inner{
  max-width:1120px;margin:0 auto;
  padding:11px clamp(16px,4vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.brand-icon{width:38px;height:38px;border-radius:10px;display:block;box-shadow:0 2px 6px rgba(15,23,42,0.12);}
.brand-word{font-size:20px;font-weight:700;letter-spacing:-0.03em;color:#1E3A8A;}

/* ---------- language switcher ---------- */
.lang-switch{position:relative;display:inline-block;}
.lang-switch select{
  appearance:none;-webkit-appearance:none;
  background:#F1F5F9;color:#0F172A;border:1px solid #E5EAF1;border-radius:9999px;
  padding-block:9px;padding-inline:16px 40px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:0;
}
.lang-switch-caret{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:#64748B;display:inline-flex;
}
.lang-switch-dark select{background:#1E293B;color:#E2E8F0;border-color:#334155;font-weight:600;border-radius:10px;}
.lang-switch-dark .lang-switch-caret{color:#94A3B8;}

/* ---------- shared section bits ---------- */
.section-title{
  margin:0;font-size:clamp(26px,4.3vw,44px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.16;color:#0F172A;text-wrap:balance;
}
.section-lead{
  margin:18px auto 0;font-size:clamp(16px,1.7vw,18.5px);line-height:1.64;
  color:#475569;max-width:60ch;
}
.section-head{text-align:center;max-width:680px;margin:0 auto;}
.section-head .section-title{margin-top:18px;}
.pill{
  display:inline-flex;align-items:center;font-size:13px;font-weight:700;
  letter-spacing:0.01em;color:#1E3A8A;background:#EEF2FB;padding:7px 14px;border-radius:9999px;
}
.pill-white{background:#ffffff;border:1px solid #DCE4F5;}
.pill-soft{background:#E6EDFB;}

.check-dot{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9999px;
}
.check-green{width:22px;height:22px;background:#10B981;color:#fff;}
.check-greenbg{width:20px;height:20px;background:#DCFCE7;color:#047857;margin-top:1px;}
.check-indigobg{width:20px;height:20px;background:#E6EDFB;color:#1E3A8A;margin-top:1px;}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#EFF3FF 0%,#F6F9FE 46%,#FFFFFF 100%);
  padding:clamp(64px,9vw,104px) clamp(16px,4vw,32px) clamp(52px,6vw,72px);
}
.hero-blob{position:absolute;width:440px;height:440px;pointer-events:none;}
.hero-blob-a{top:-140px;inset-inline-end:-90px;background:radial-gradient(circle,rgba(30,58,138,0.11),transparent 66%);}
.hero-blob-b{bottom:-160px;inset-inline-start:-110px;background:radial-gradient(circle,rgba(16,185,129,0.10),transparent 66%);}
.hero-inner{
  position:relative;max-width:1120px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,56px);
}
.hero-copy{flex:1 1 430px;min-width:min(100%,300px);}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  letter-spacing:0.01em;color:#1E3A8A;background:#E6EDFB;padding:7px 14px;border-radius:9999px;
}
.eyebrow-dot{width:7px;height:7px;border-radius:9999px;background:#10B981;display:inline-block;}
.hero-title{
  margin:18px 0 0;font-size:clamp(32px,5.4vw,54px);line-height:1.08;
  letter-spacing:-0.035em;font-weight:700;color:#0F172A;text-wrap:balance;
}
.hero-sub{margin:20px 0 0;font-size:clamp(16.5px,1.8vw,19.5px);line-height:1.62;color:#475569;max-width:36ch;}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.hero-link{
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:700;
  font-size:16px;color:#475569;text-decoration:none;padding:12px 8px;transition:color .15s ease;
}
.hero-link:hover{color:#1E3A8A;}
.hero-micro{margin-top:18px;color:#64748B;font-size:15px;font-weight:500;}

/* phones (hero stacked pair) */
.hero-phones{flex:1 1 340px;min-width:280px;display:flex;justify-content:center;}
.phone-wrap{position:relative;width:min(440px,88vw);aspect-ratio:1 / 1.22;}
.phone{position:absolute;}
.phone-back{width:47%;inset-inline-end:1%;top:9%;transform:rotate(6deg);z-index:1;animation:hanuriFloat 8.5s ease-in-out -2.5s infinite;}
.phone-front{width:56%;inset-inline-start:1%;bottom:1%;transform:rotate(-4deg);z-index:2;animation:hanuriFloat 7s ease-in-out infinite;}
.phone-body{background:#0F172A;border-radius:32px;padding:6px;box-shadow:0 40px 80px -28px rgba(15,23,42,0.48),0 14px 30px -14px rgba(15,23,42,0.32);}
.phone-screen{border-radius:26px;overflow:hidden;background:#fff;aspect-ratio:1170 / 2532;}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover;}
@keyframes hanuriFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@media (prefers-reduced-motion: reduce){.phone-back,.phone-front{animation:none;}}

/* ---------- trust strip ---------- */
.trust{background:#1E3A8A;padding:clamp(14px,3vw,26px) clamp(16px,4vw,32px) clamp(30px,4vw,44px);}
.trust-grid{
  max-width:1040px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:rgba(255,255,255,0.16);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,0.16);
}
.trust-cell{background:#1E3A8A;padding:26px 16px;text-align:center;}
.trust-num{font-size:clamp(30px,4.4vw,42px);font-weight:700;color:#ffffff;letter-spacing:-0.03em;line-height:1;}
.trust-num-green{color:#34D399;}
.trust-label{margin-top:9px;font-size:13px;line-height:1.45;color:rgba(255,255,255,0.82);}
.trust-sub{color:rgba(255,255,255,0.55);}

/* ---------- who / problem ---------- */
.who{background:#EEF2FB;padding:clamp(56px,8vw,96px) clamp(16px,4vw,32px);}
.who-inner{max-width:960px;margin:0 auto;text-align:center;}
.who .section-title{margin:20px auto 0;max-width:20ch;}
.who .section-lead{max-width:56ch;}
.compare{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.compare-card{flex:1 1 270px;max-width:380px;background:#ffffff;border:1px solid #E2E8F0;border-radius:18px;padding:22px;text-align:start;}
.compare-hanuri{border:2px solid #1E3A8A;box-shadow:0 22px 44px -24px rgba(30,58,138,0.42);}
.compare-tag{font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#94A3B8;}
.compare-tag-brand{color:#1E3A8A;display:flex;align-items:center;gap:6px;}
.compare-tag-icon{width:16px;height:16px;border-radius:4px;display:block;}
.compare-q{margin-top:13px;font-size:15px;line-height:1.5;color:#475569;}
.compare-answer{margin-top:14px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:#0F172A;}
.compare-empty{margin-top:15px;padding:12px 14px;background:#F8FAFC;border:1px dashed #CBD5E1;border-radius:11px;color:#94A3B8;font-size:14px;line-height:1.5;}
.compare-explain{margin-top:15px;padding:13px 15px;background:#EEF2FB;border:1px solid #DBE3F5;border-radius:11px;text-align:start;}
.compare-explain-head{display:flex;align-items:center;gap:6px;font-weight:700;color:#1E3A8A;font-size:11.5px;letter-spacing:0.02em;margin-bottom:7px;}
.compare-explain-body{font-size:14px;line-height:1.6;color:#334155;}

/* ---------- features ---------- */
.features{background:#ffffff;padding:clamp(58px,8vw,100px) clamp(16px,4vw,32px);}
.features-inner{max-width:1120px;margin:0 auto;}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,340px));justify-content:center;gap:18px;margin-top:44px;}
.feature-card{
  background:#ffffff;border:1px solid #E2E8F0;border-radius:20px;padding:26px 24px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);display:flex;flex-direction:column;gap:15px;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.feature-card:hover{box-shadow:0 16px 34px -18px rgba(15,23,42,0.2);transform:translateY(-4px);border-color:#CBD5E1;}
.feature-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;}
.feature-icon-indigo{background:#E6EDFB;color:#1E3A8A;}
.feature-icon-green{background:#DCFCE7;color:#047857;}
.feature-icon-amber{background:#FEF3C7;color:#B45309;}
.feature-text{display:flex;flex-direction:column;gap:9px;}
.feature-text h3{margin:0;font-size:19px;font-weight:700;color:#0F172A;letter-spacing:-0.02em;}
.feature-text p{margin:0;font-size:14.5px;line-height:1.62;color:#475569;}

/* ---------- differentiator ---------- */
.diff{background:#F6F8FC;padding:clamp(58px,8vw,100px) clamp(16px,4vw,32px);}
.diff-inner{max-width:1040px;margin:0 auto;}
.diff .section-head{max-width:680px;}
.diff .section-title{max-width:24ch;margin-left:auto;margin-right:auto;}
.diff .section-lead{max-width:56ch;}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;max-width:1000px;margin:42px auto 0;}
.lang-chip{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E2E8F0;
  border-radius:14px;padding:13px 15px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.lang-chip:hover{border-color:#1E3A8A;box-shadow:0 10px 22px -14px rgba(30,58,138,0.35);transform:translateY(-2px);}
.lang-chip-flag{font-size:28px;line-height:1;flex:none;}
.lang-chip-names{display:flex;flex-direction:column;gap:1px;min-width:0;}
.lang-chip-en{font-weight:700;font-size:14.5px;color:#0F172A;line-height:1.25;}
.lang-chip-native{font-size:12.5px;color:#64748B;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lang-grid-note{text-align:center;margin-top:22px;font-size:13.5px;color:#64748B;font-weight:600;}

/* ---------- screenshots ---------- */
.shots{background:#ffffff;padding:clamp(58px,8vw,100px) 0;}
.shots-head{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,32px);text-align:center;}
.shots-head .section-title{margin-top:18px;}
.shots-scroll{display:flex;gap:clamp(16px,2.5vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:38px clamp(20px,6vw,72px) 14px;}
.shot{scroll-snap-align:center;flex:0 0 auto;width:min(258px,72vw);margin:0;}
.shot .phone-body{border-radius:30px;padding:6px;box-shadow:0 24px 52px -26px rgba(15,23,42,0.42);}
.shot .phone-screen{border-radius:24px;}
.shot figcaption{margin-top:16px;padding:0 4px;font-size:14px;line-height:1.5;color:#475569;text-align:center;}
.shots-hint{text-align:center;color:#94A3B8;font-size:13.5px;font-weight:600;margin-top:6px;}
.hanuri-scroll::-webkit-scrollbar{height:9px;}
.hanuri-scroll::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:9999px;}
.hanuri-scroll::-webkit-scrollbar-track{background:transparent;}

/* ---------- pricing ---------- */
.pricing{background:#F6F8FC;padding:clamp(58px,8vw,100px) clamp(16px,4vw,32px);}
.pricing-inner{max-width:900px;margin:0 auto;}
.pricing .section-head{max-width:620px;}
.pricing .section-lead{max-width:46ch;margin-top:16px;}
.price-cards{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px;align-items:stretch;}
.price-card{flex:1 1 300px;max-width:400px;background:#ffffff;border:1px solid #E2E8F0;border-radius:22px;padding:30px 26px;display:flex;flex-direction:column;}
.price-card-pro{border:2px solid #1E3A8A;box-shadow:0 28px 54px -28px rgba(30,58,138,0.4);}
.price-card-pro-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.price-kicker{font-size:13px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#64748B;}
.price-kicker-brand{color:#1E3A8A;}
.price-badge{font-size:11px;font-weight:700;color:#B45309;background:#FEF3C7;padding:4px 10px;border-radius:9999px;letter-spacing:0.01em;}
.price-name{margin-top:8px;font-size:clamp(26px,3.2vw,33px);font-weight:700;color:#0F172A;letter-spacing:-0.03em;}
.price-sub{margin-top:4px;font-size:14px;color:#64748B;}
.price-divider{margin:20px 0 24px;height:1px;background:#EEF2F6;}
.price-list{display:flex;flex-direction:column;gap:13px;flex:1;}
.price-item{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.45;color:#334155;}
.ppp-note{margin:28px auto 0;max-width:600px;display:flex;align-items:center;gap:12px;justify-content:center;background:#EEF2FB;border:1px solid #DCE4F5;border-radius:14px;padding:14px 18px;}
.ppp-icon{flex:none;color:#1E3A8A;display:inline-flex;}
.ppp-text{font-size:14px;line-height:1.52;color:#334155;}

/* ---------- final CTA ---------- */
.final{position:relative;overflow:hidden;background:#1E3A8A;padding:clamp(62px,8vw,106px) clamp(16px,4vw,32px);text-align:center;}
.final-blob{position:absolute;width:360px;height:360px;pointer-events:none;}
.final-blob-a{top:-120px;inset-inline-end:-60px;background:radial-gradient(circle,rgba(255,255,255,0.09),transparent 66%);}
.final-blob-b{bottom:-140px;inset-inline-start:-70px;background:radial-gradient(circle,rgba(52,211,153,0.14),transparent 66%);}
.final-inner{position:relative;max-width:780px;margin:0 auto;}
.final-title{margin:0;font-size:clamp(27px,4.5vw,46px);font-weight:700;letter-spacing:-0.03em;line-height:1.16;color:#ffffff;text-wrap:balance;}
.final-sub{margin:18px auto 0;font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:rgba(255,255,255,0.82);}
.final-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ---------- store buttons (injected by landing.js) ---------- */
.store-btn{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  background:#0F172A;color:#fff;border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;padding:12px 22px;font-family:inherit;
  transition:transform .15s ease,opacity .15s ease;
}
.store-btn:hover{transform:translateY(-2px);}
.store-btn-lines{display:flex;flex-direction:column;line-height:1.15;text-align:start;}
.store-btn-small{font-size:10.5px;letter-spacing:0.03em;color:rgba(255,255,255,0.72);}
.store-btn-name{font-size:16px;font-weight:700;}
/* hero variant sits on light bg */
.hero-cta .store-btn{background:#1E3A8A;border-color:transparent;}
.hero-cta .store-btn:hover{background:#1B3478;}

/* ---------- footer ---------- */
.site-footer{background:#0F172A;color:#CBD5E1;padding:clamp(48px,6vw,72px) clamp(16px,4vw,32px) 32px;}
.footer-inner{max-width:1120px;margin:0 auto;}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start;}
.footer-brandcol{max-width:400px;}
.footer-brand{display:inline-flex;align-items:center;gap:10px;}
.footer-icon{width:36px;height:36px;border-radius:9px;display:block;}
.footer-word{font-size:19px;font-weight:700;letter-spacing:-0.03em;color:#ffffff;}
.footer-tag{margin:14px 0 0;font-size:14.5px;line-height:1.62;color:#94A3B8;}
.footer-cols{display:flex;flex-wrap:wrap;gap:40px;}
.footer-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.footer-col-head{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#64748B;}
.footer-links{display:flex;flex-direction:column;gap:11px;align-items:flex-start;}
.footer-link{background:none;border:none;padding:0;font-family:inherit;font-size:14.5px;color:#94A3B8;cursor:pointer;text-decoration:none;transition:color .15s ease;}
.footer-link:hover{color:#E2E8F0;}
.footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid #1E293B;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;}
.footer-disclaimer{margin:0;font-size:12.5px;line-height:1.62;color:#64748B;max-width:640px;}
.footer-copy{font-size:13px;color:#64748B;white-space:nowrap;}

/* ---------- RTL adjustments ---------- */
[dir="rtl"] .store-btn-lines,
[dir="rtl"] .compare-card,
[dir="rtl"] .compare-explain{text-align:start;}
[dir="rtl"] .shots-hint,
[dir="rtl"] .lang-chip-native{direction:rtl;}