:root{
  --bg:#f4f7ff;
  --surface:#ffffff;
  --panel:#f7f8fc;
  --panel-strong:#eef3fb;
  --text:#112b47;
  --ink:#17191d;
  --muted:#687383;
  --line:#d9dfe9;
  --line-dark:#7b838d;
  --blue:#609df1;
  --blue-dark:#427fcf;
  --blue-soft:#dce9fb;
  --blue-pale:#edf4ff;
  --danger:#d65d62;
  --danger-soft:#fff0f1;
  --shadow:0 12px 30px rgba(56,79,112,0.08);
}

[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid #286bbd; outline-offset:3px; }
button:disabled{ cursor:wait; opacity:.6; }
input[type="search"]{ width:100%; min-height:47px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:#fff; }
.browse-form{ padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.browse-search-row{ display:grid; grid-template-columns:minmax(0,1fr) 170px auto; gap:12px; align-items:end; }
.browse-search-row .field,.browse-filters .field{ margin:0; min-width:0; }
.field-label{ display:block; margin-bottom:8px; font-size:13px; font-weight:750; color:var(--text); }
.browse-search-row .btn{ margin-bottom:0; }
.browse-filters{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.browse-filters select,.browse-search-row select{ width:100%; }
.filter-help{ margin:14px 0; color:var(--muted); font-size:12px; line-height:1.8; }
.browse-summary{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:22px 0 14px; font-size:13px; color:var(--muted); }
#browseCount{ color:var(--text); font-weight:700; }
.inline-notice{ padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.7; background:var(--blue-pale); overflow-wrap:anywhere; }
.inline-notice.error{ background:var(--danger-soft); color:#9b2835; }
.inline-notice p{ margin-top:0; }
#browseError{ margin:16px 0; }
.browse-actions{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:24px; }
.browse-actions .muted{ margin:0; font-size:13px; color:var(--muted); }
.pack-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.pack-tag{ padding:5px 9px; border-radius:8px; background:var(--blue-pale); color:#356797; font-size:11px; font-weight:700; }
.input-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:5px; margin:18px 0; border-radius:14px; background:var(--panel-strong); }
.input-tab{ flex:1 1 130px; min-height:44px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; }
.input-tab[aria-selected="true"]{ background:#fff; color:var(--blue-dark); box-shadow:0 2px 9px rgba(56,79,112,.09); }
#pasteText{ min-height:205px; line-height:1.8; }
.validation-errors{ margin-top:12px; padding:14px; border:1px solid #ebc5ca; border-radius:12px; color:#9b2835; background:var(--danger-soft); font-size:13px; }
.validation-list{ padding-left:21px; line-height:1.9; }
.validation-list li{ overflow-wrap:anywhere; }
.pack-layout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.85fr); gap:22px; align-items:start; }
.pack-main,.pack-actions{ min-width:0; }
.pack-title{ margin:15px 0 12px; font-size:26px; line-height:1.45; letter-spacing:-.8px; overflow-wrap:anywhere; color:var(--text); }
.section h2.pack-title{ font-size:26px; line-height:1.45; }
.section h2.card-title{ font-size:18px; letter-spacing:-.3px; line-height:1.5; }
.detail-list dd{ margin:0; text-align:right; }
.detail-list dt{ color:var(--muted); }
.pack-preview{ margin-top:20px; }
.table-scroll{ overflow-x:auto; }
.word-preview-table{ width:100%; table-layout:fixed; margin-top:15px; }
.word-preview-table th,.word-preview-table td{ text-align:left; overflow-wrap:anywhere; vertical-align:top; }
.word-preview-table th:first-child{ width:35%; }
.word-example{ margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.import-notice{ margin:18px 0; font-size:12px; line-height:1.8; }
.share-url{ width:100%; margin:14px 0 10px; color:var(--muted); font-size:12px !important; }
.share-buttons{ display:flex; flex-wrap:wrap; gap:8px; }
.share-buttons .btn{ flex:1; }
details>summary{ cursor:pointer; padding:10px 0; font-weight:750; font-size:14px; color:var(--text); }
.manage-details[open]>summary,.qr-details[open]>summary,.quiz-details[open]>summary{ margin-bottom:12px; }
.manage-details .field{ margin-top:16px; }
.qr-code{ max-width:220px; margin:8px auto; background:white; border-radius:12px; }
.qr-code svg{ display:block; width:100%; height:auto; }
.quiz-details{ border-top:1px solid var(--line); margin-top:22px; padding-top:12px; }
.quiz-word{ font-size:25px; margin:14px 0; color:var(--text); }
.quiz-options{ display:grid; gap:9px; }
.quiz-option{ padding:13px 15px; min-height:47px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.quiz-option:disabled{ cursor:default; opacity:1; }
.quiz-option.answer-correct{ border-color:#3a8c6b; background:#edf9f2; }
.quiz-option.answer-wrong{ border-color:#c96a76; background:var(--danger-soft); }
.quiz-feedback{ min-height:23px; font-size:14px; }
.quiz-score{ font-size:20px; font-weight:750; color:var(--text); }
@media(max-width:760px){
  .pack-layout{ grid-template-columns:1fr; gap:16px; }
  .pack-actions{ grid-row:1; }
  .browse-search-row{ grid-template-columns:minmax(0,1fr) 150px; }
  .browse-search-row>.btn{ grid-column:1/-1; }
}
@media(max-width:520px){
  .browse-form{ padding:16px; border-radius:18px; }
  .browse-filters{ grid-template-columns:1fr; gap:14px; }
  .browse-search-row{ grid-template-columns:1fr; gap:14px; }
  .section h2.pack-title{ font-size:23px; }
  .word-preview-table th:first-child{ width:34%; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ min-height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; }
.container{ width:min(1140px,calc(100% - 40px)); margin:0 auto; }

.header{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid rgba(217,223,233,0.86);
  background:rgba(244,247,255,0.9);
  backdrop-filter:blur(16px);
}
.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.brand{ display:flex; align-items:center; gap:11px; min-width:max-content; }
.brand-mark{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:var(--blue);
  font-size:18px;
  font-weight:900;
}
.brand-name{
  display:block;
  color:var(--text);
  font-size:17px;
  font-weight:900;
  letter-spacing:-0.4px;
}
.brand-caption{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav{ display:flex; align-items:center; gap:3px; }
.nav a{
  padding:10px 12px;
  border-radius:12px;
  color:#59687b;
  font-size:14px;
  font-weight:800;
}
.nav a:hover,.nav a.active{ color:var(--text); background:var(--blue-soft); }
.language-picker{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--text);
  background:rgba(255,255,255,0.72);
}
.language-picker svg{ width:17px; height:17px; stroke:currentColor; }
.language-picker select{
  width:auto;
  padding:0 19px 0 0;
  border:0;
  outline:0;
  color:var(--text);
  background:transparent;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.menu-btn{
  display:none;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--text);
  background:#fff;
  cursor:pointer;
}
.mobile-nav{ display:none; padding:0 0 12px; }
.mobile-nav a{
  display:block;
  padding:12px 11px;
  border-radius:11px;
  color:#59687b;
  font-size:14px;
  font-weight:800;
}
.mobile-nav a:hover,.mobile-nav a.active{ color:var(--text); background:var(--blue-soft); }

.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,0.84fr);
  gap:56px;
  align-items:center;
  padding:72px 0 68px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--blue-dark);
  font-size:13px;
  font-weight:900;
}
.eyebrow::before{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  content:"";
}
.hero-title{
  margin:0;
  color:var(--text);
  font-size:49px;
  font-weight:900;
  letter-spacing:-2.7px;
  line-height:1.17;
}
.hero-title em{ color:var(--blue-dark); font-style:normal; }
.hero-desc{
  max-width:620px;
  margin:20px 0 27px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}
.hero-note{ margin:17px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }

.app-preview{
  padding:20px;
  border:1px solid #e4e9f1;
  border-radius:27px;
  background:#fbfcff;
  box-shadow:var(--shadow);
}
.app-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.app-preview-name{ color:var(--text); font-size:18px; font-weight:900; }
.app-preview-lang{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:50%;
  color:var(--text);
  background:var(--blue-soft);
  font-size:17px;
  font-weight:900;
}
.app-panel{
  padding:17px;
  border-radius:20px;
  background:var(--panel);
}
.app-panel + .app-panel{ margin-top:12px; }
.folder-line{ display:flex; align-items:center; gap:13px; }
.folder-icon{
  display:grid;
  width:49px;
  height:49px;
  flex:none;
  place-items:center;
  border-radius:16px;
  color:var(--blue);
  background:var(--blue-soft);
  font-size:22px;
  font-weight:900;
}
.app-label{ color:var(--ink); font-size:13px; font-weight:900; }
.app-value{ margin-top:3px; color:var(--muted); font-size:14px; font-weight:800; }
.app-switch{ margin-left:auto; color:var(--ink); font-size:20px; font-weight:900; }
.app-action-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.app-action{
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 11px;
  border:1px solid var(--line-dark);
  border-radius:999px;
  color:#3f638d;
  background:transparent;
  font-size:12px;
  font-weight:850;
}
.app-action.primary{ color:#fff; border-color:var(--blue); background:var(--blue); }
.app-list-title{ margin-bottom:5px; color:var(--ink); font-size:13px; font-weight:900; }
.app-list-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
}
.app-list-row:last-child{ border-bottom:0; }
.app-list-row b{ color:var(--ink); }
.app-list-row span{ color:var(--muted); }

.store-section{
  position:relative;
  display:grid;
  min-height:490px;
  overflow:hidden;
  place-items:center;
  padding:90px 0 96px;
  border-top:1px solid #c9e2f7;
  background:
    radial-gradient(circle at 50% 110%,rgba(255,255,255,0.72),transparent 290px),
    linear-gradient(145deg,#e5f6ff,#d3efff);
}
.store-inner{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.store-kicker{
  display:inline-flex;
  padding:7px 11px;
  border:1px solid rgba(87,155,215,0.25);
  border-radius:999px;
  color:#3975ad;
  background:rgba(255,255,255,0.44);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.4px;
}
.store-inner h2{
  max-width:470px;
  margin:16px 0 0;
  color:#123e73;
  font-size:39px;
  font-weight:950;
  letter-spacing:-2px;
  line-height:1.2;
}
.store-inner p{
  max-width:470px;
  margin:14px 0 24px;
  color:#527493;
  font-size:14px;
  line-height:1.75;
}
.google-play-badge{
  display:inline-flex;
  min-width:184px;
  min-height:58px;
  align-items:center;
  gap:10px;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,0.34);
  border-radius:12px;
  color:#fff;
  background:#172638;
  box-shadow:0 12px 22px rgba(34,74,111,0.2);
  text-align:left;
  transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease;
}
.google-play-badge:hover{
  background:#0d1d30;
  box-shadow:0 15px 26px rgba(34,74,111,0.25);
  transform:translateY(-2px);
}
.google-play-icon{ width:27px; height:30px; flex:none; }
.google-play-badge small{
  display:block;
  margin-bottom:1px;
  color:#d7e2ee;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.15px;
}
.google-play-badge strong{ display:block; font-size:16px; font-weight:850; letter-spacing:-0.3px; }
.store-decor{
  position:absolute;
  top:0;
  bottom:0;
  width:min(39vw,520px);
  pointer-events:none;
}
.store-decor-left{ left:0; }
.store-decor-right{ right:0; }
.store-phone{
  position:absolute;
  width:138px;
  height:246px;
  border:10px solid #172b4b;
  border-radius:24px;
  background:#eaf8ff;
  box-shadow:0 18px 22px rgba(26,83,133,0.2);
}
.store-phone::before{
  position:absolute;
  inset:7px;
  border-radius:12px;
  background:linear-gradient(160deg,#6dcaff,#e9fbff 64%);
  content:"";
}
.store-phone-left{
  top:128px;
  left:27%;
  transform:rotate(-17deg);
}
.store-phone-right{
  right:24%;
  bottom:66px;
  transform:rotate(16deg);
}
.store-phone-bar,.store-phone-button,.store-word-card,.store-stat-card{
  position:absolute;
  z-index:1;
  display:block;
}
.store-phone-bar{
  top:26px;
  left:25px;
  width:68px;
  height:9px;
  border-radius:999px;
  background:rgba(28,119,183,0.24);
}
.store-phone-button{
  right:21px;
  bottom:23px;
  width:35px;
  height:12px;
  border-radius:999px;
  background:#4ca8ef;
}
.store-word-card{
  left:18px;
  right:18px;
  height:40px;
  padding:12px 9px;
  border-radius:10px;
  color:#36759e;
  background:rgba(255,255,255,0.8);
  box-shadow:0 5px 10px rgba(70,143,192,0.12);
  font-size:12px;
  font-weight:900;
}
.store-word-card:nth-of-type(2){ top:63px; }
.store-word-card:nth-of-type(3){ top:112px; }
.store-stat-card{
  top:66px;
  left:19px;
  width:81px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.82);
  box-shadow:inset 0 -10px 0 rgba(86,185,246,0.22);
}
.store-stat-card.short{ top:115px; width:62px; }
.store-float{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  box-shadow:0 12px 18px rgba(40,115,171,0.16);
  font-weight:950;
}
.store-float-a{ top:72px; left:15%; width:55px; height:55px; background:#39bf9d; transform:rotate(-12deg); }
.store-float-b{ right:13%; bottom:82px; width:53px; height:53px; background:#6d85f7; font-size:25px; transform:rotate(17deg); }
.store-float-c{ top:72px; right:15%; width:38px; height:38px; background:#f99bc2; transform:rotate(11deg); }
.store-float-d{ top:82px; right:11%; width:55px; height:55px; background:#43b3ef; transform:rotate(13deg); }
.store-float-e{ left:10%; bottom:73px; width:43px; height:43px; background:#ff7391; transform:rotate(-11deg); }
.store-float-f{ top:155px; left:10%; width:39px; height:39px; background:#5fd493; transform:rotate(9deg); }

.section{ padding:30px 0 58px; }
.section-soft{ padding:55px 0 62px; border-top:1px solid var(--line); background:rgba(255,255,255,0.44); }
.page-intro{ padding:40px 0 22px; }
.page-intro h1,.section h2,.section-soft h2{
  margin:0;
  color:var(--text);
  font-size:28px;
  font-weight:900;
  letter-spacing:-1px;
}
.page-intro p,.section-heading p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}
.section-heading{ margin-bottom:19px; }
.section-heading.center{ text-align:center; }

.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.content-grid{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(340px,0.96fr); gap:17px; align-items:start; }

.card{
  display:block;
  padding:20px;
  border:1px solid #e7ebf1;
  border-radius:21px;
  background:var(--panel);
}
a.card{ transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease; }
a.card:hover{ background:#fff; box-shadow:var(--shadow); transform:translateY(-2px); }
.card-title{ margin:0 0 7px; color:var(--ink); font-size:16px; font-weight:900; letter-spacing:-0.25px; }
.card-sub{ margin:0; color:var(--muted); font-size:13px; line-height:1.72; }
.feature-card{ min-height:155px; }
.feature-number{
  display:grid;
  width:36px;
  height:36px;
  margin-bottom:17px;
  place-items:center;
  border-radius:12px;
  color:var(--blue-dark);
  background:var(--blue-soft);
  font-size:13px;
  font-weight:900;
}
.pack-card .card-sub{ min-height:44px; }
.pack-meta{ display:flex; flex-wrap:wrap; gap:6px 11px; margin-top:15px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

.btn-row{ display:flex; flex-wrap:wrap; gap:9px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:45px;
  gap:7px;
  padding:11px 16px;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  font-weight:850;
  transition:background 150ms ease,transform 150ms ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn.primary{ color:#fff; background:var(--blue); }
.btn.primary:hover{ background:var(--blue-dark); }
.btn.outline{ color:#3e648f; border-color:var(--line-dark); background:transparent; }
.btn.outline:hover{ background:var(--blue-pale); }
.btn.ghost{ color:#3e648f; border-color:#cad4e2; background:#fff; }
.btn.ghost:hover{ background:var(--blue-pale); }
.btn.danger{ color:var(--danger); border-color:#edc6ca; background:#fff; }
.btn.danger:hover{ background:var(--danger-soft); }
.btn.wide{ width:100%; }

.toolbar{ display:flex; align-items:center; gap:10px; padding:15px; border-radius:20px; background:var(--panel); }
.toolbar .search-input{ flex:1; min-width:180px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
label{ color:#43546a; font-size:13px; font-weight:850; }
input[type="text"],input[type="password"],textarea,select{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
  color:var(--ink);
  background:#fff;
}
input[type="file"]{
  width:100%;
  padding:9px;
  border:1px dashed #bac8dc;
  border-radius:14px;
  color:var(--muted);
  background:#fff;
  font-size:13px;
}
input[type="file"]::file-selector-button{
  margin-right:9px;
  padding:8px 10px;
  border:1px solid #c7d2e1;
  border-radius:999px;
  color:#3e648f;
  background:var(--blue-pale);
  cursor:pointer;
  font-weight:800;
}
textarea{ min-height:94px; resize:vertical; }
input:focus,textarea:focus,select:focus{ border-color:#8db8ed; box-shadow:0 0 0 3px rgba(96,157,241,0.14); }

.helper{ color:var(--muted); font-size:13px; line-height:1.65; }
.small{ color:var(--muted); font-size:12px; line-height:1.65; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.hr{ height:1px; margin:16px 0; background:var(--line); }
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border:1px solid #c9d6e7;
  border-radius:999px;
  color:#4e688a;
  background:var(--blue-pale);
  font-size:12px;
  font-weight:800;
}
.badge.ok{ color:#35669c; border-color:#bdd3ef; background:var(--blue-soft); }
.badge.warn{ color:#93641e; border-color:#ecd6ae; background:#fff7e8; }
.badge.bad{ color:var(--danger); border-color:#edc7ca; background:var(--danger-soft); }
.table{ width:100%; overflow:hidden; border:1px solid var(--line); border-radius:15px; border-collapse:separate; border-spacing:0; background:#fff; }
.table th,.table td{ padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th{ color:#53657c; background:var(--panel-strong); font-size:12px; }
.table td{ font-size:13px; }
.table tr:last-child td{ border-bottom:0; }
.detail-list{ display:grid; gap:11px; margin-top:16px; }
.detail-row{ display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:13px; }
.detail-row b{ color:var(--ink); font-weight:850; }
.notice{ padding:13px 14px; border-radius:14px; color:#48698f; background:var(--blue-pale); font-size:12px; line-height:1.65; }
.download-stack{ display:grid; gap:9px; }
.footer{ margin-top:12px; padding:24px 0 40px; border-top:1px solid var(--line); color:#8792a1; font-size:12px; }
.footer a{ color:#68788c; }
.footer a:hover{ color:var(--blue-dark); }

@media (max-width:900px){
  .home-hero{ grid-template-columns:1fr; gap:32px; padding:54px 0 50px; }
  .app-preview{ width:min(100%,430px); margin:0 auto; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2,.content-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body{
    background:
      radial-gradient(circle at 92% 2%,rgba(164,201,255,0.32),transparent 230px),
      linear-gradient(180deg,#f7faff 0,#f4f7ff 520px);
  }
  .container{ width:min(100% - 32px,1140px); }
  .header{
    border-bottom-color:rgba(209,221,240,0.82);
    background:rgba(248,251,255,0.88);
    box-shadow:0 5px 18px rgba(67,105,155,0.07);
    backdrop-filter:blur(20px);
  }
  .header-inner{ min-height:64px; gap:8px; }
  .brand{ gap:9px; }
  .brand-mark{
    width:38px;
    height:38px;
    border-radius:14px;
    background:linear-gradient(145deg,#75b2ff,#4a86dc);
    box-shadow:0 7px 14px rgba(66,127,207,0.24);
    font-size:15px;
  }
  .brand-name{ font-size:15px; letter-spacing:-0.5px; }
  .brand-caption{ display:none; }
  .header-actions{ gap:7px; }
  .nav{ display:none; }
  .menu-btn{
    display:grid;
    width:39px;
    height:39px;
    border-color:#d4e0f0;
    border-radius:14px;
    color:#446992;
    background:rgba(255,255,255,0.9);
    transition:color 150ms ease,background 150ms ease,box-shadow 150ms ease;
  }
  .menu-btn[aria-expanded="true"]{
    color:#fff;
    border-color:var(--blue);
    background:var(--blue);
    box-shadow:0 7px 15px rgba(66,127,207,0.22);
  }
  .language-picker{
    min-height:39px;
    padding:0 8px;
    border-color:#d4e0f0;
    border-radius:14px;
    background:rgba(255,255,255,0.9);
  }
  .language-picker svg{ width:15px; height:15px; }
  .language-picker select{ width:72px; min-height:39px; padding-right:12px; font-size:12px; }
  .mobile-nav{
    margin:0 0 11px;
    padding:7px;
    border:1px solid #dce6f5;
    border-radius:17px;
    background:rgba(255,255,255,0.94);
    box-shadow:0 12px 24px rgba(52,83,127,0.1);
  }
  .mobile-nav a{
    padding:12px 13px;
    border-radius:11px;
    color:#536983;
    font-size:13px;
  }
  .mobile-nav a + a{ margin-top:2px; }
  .mobile-nav a.active{ color:#315f98; background:#e8f2ff; }
  .home-hero{
    gap:26px;
    padding:38px 0 48px;
  }
  .eyebrow{
    gap:7px;
    margin-bottom:12px;
    padding:7px 10px;
    border:1px solid rgba(157,195,244,0.6);
    border-radius:999px;
    background:rgba(237,246,255,0.8);
    font-size:11px;
    letter-spacing:0.25px;
  }
  .eyebrow::before{ width:7px; height:7px; }
  .hero-title{
    max-width:360px;
    font-size:38px;
    letter-spacing:-2.5px;
    line-height:1.14;
  }
  .hero-desc{
    margin:17px 0 21px;
    font-size:14px;
    line-height:1.78;
  }
  .hero-note{
    margin-top:15px;
    padding:11px 12px;
    border-left:3px solid #a8cbf9;
    border-radius:0 11px 11px 0;
    background:rgba(255,255,255,0.55);
    font-size:11px;
  }
  .app-preview{
    position:relative;
    width:calc(100% - 8px);
    padding:15px;
    border-color:#e2ebf7;
    border-radius:25px;
    background:rgba(255,255,255,0.94);
    box-shadow:0 18px 36px rgba(54,88,136,0.14);
  }
  .app-preview::before{
    position:absolute;
    top:7px;
    left:50%;
    width:44px;
    height:4px;
    border-radius:999px;
    background:#dce6f3;
    content:"";
    transform:translateX(-50%);
  }
  .app-preview-head{ margin:9px 2px 13px; }
  .app-preview-name{ font-size:16px; }
  .app-preview-lang{ width:34px; height:34px; font-size:15px; }
  .app-panel{ padding:14px; border-radius:17px; }
  .folder-icon{ width:45px; height:45px; border-radius:15px; font-size:19px; }
  .app-action{ justify-content:center; padding:10px 8px; font-size:11px; }
  .store-section{
    min-height:555px;
    padding:59px 0 238px;
    background:
      radial-gradient(circle at 50% 84%,rgba(255,255,255,0.72),transparent 210px),
      linear-gradient(154deg,#e7f7ff,#d0efff);
  }
  .store-inner{ width:min(100% - 36px,430px); }
  .store-kicker{ padding:6px 10px; font-size:10px; }
  .store-inner h2{
    max-width:335px;
    margin-top:14px;
    font-size:31px;
    letter-spacing:-1.5px;
  }
  .store-inner p{
    max-width:320px;
    margin:12px 0 20px;
    font-size:13px;
  }
  .google-play-badge{
    min-width:178px;
    min-height:56px;
    border-radius:11px;
  }
  .store-decor{
    top:auto;
    bottom:0;
    width:50%;
    height:226px;
  }
  .store-phone{
    width:99px;
    height:180px;
    border-width:7px;
    border-radius:19px;
    box-shadow:0 13px 18px rgba(26,83,133,0.18);
  }
  .store-phone::before{ inset:5px; border-radius:9px; }
  .store-phone-left{
    top:auto;
    bottom:-9px;
    left:24%;
    transform:rotate(-15deg);
  }
  .store-phone-right{
    right:23%;
    bottom:17px;
    transform:rotate(15deg);
  }
  .store-phone-bar{ top:19px; left:17px; width:50px; height:7px; }
  .store-phone-button{ right:14px; bottom:16px; width:27px; height:9px; }
  .store-word-card{
    left:12px;
    right:12px;
    height:29px;
    padding:8px 6px;
    border-radius:7px;
    font-size:9px;
  }
  .store-word-card:nth-of-type(2){ top:46px; }
  .store-word-card:nth-of-type(3){ top:82px; }
  .store-stat-card{
    top:49px;
    left:13px;
    width:58px;
    height:28px;
    border-radius:7px;
  }
  .store-stat-card.short{ top:85px; width:45px; }
  .store-float{ border-radius:11px; }
  .store-float-a{ top:41px; left:11%; width:40px; height:40px; font-size:12px; }
  .store-float-b{ right:5%; bottom:34px; width:38px; height:38px; font-size:19px; }
  .store-float-c{ display:none; }
  .store-float-d{ top:31px; right:5%; width:40px; height:40px; font-size:12px; }
  .store-float-e{ left:2%; bottom:40px; width:33px; height:33px; font-size:13px; }
  .store-float-f{ top:95px; left:3%; width:31px; height:31px; font-size:12px; }
  .section{ padding:24px 0 42px; }
  .section-soft{
    padding:42px 0 48px;
    border-top-color:#dde8f6;
    background:rgba(255,255,255,0.55);
  }
  .page-intro{ padding:31px 0 19px; }
  .page-intro .eyebrow{ margin-bottom:11px; }
  .page-intro h1,.section h2,.section-soft h2{ font-size:24px; letter-spacing:-0.9px; }
  .page-intro p,.section-heading p{ font-size:13px; line-height:1.68; }
  .section-heading{ margin-bottom:15px; }
  .section-heading.center{ text-align:left; }
  .grid-3,.grid-2,.content-grid{ gap:11px; }
  .card{
    padding:17px;
    border-color:#e1e8f3;
    border-radius:18px;
    background:rgba(255,255,255,0.78);
    box-shadow:0 7px 18px rgba(65,87,119,0.045);
  }
  .feature-card{
    display:grid;
    min-height:0;
    grid-template-columns:39px minmax(0,1fr);
    column-gap:12px;
    row-gap:3px;
    align-items:start;
  }
  .feature-card .feature-number{
    grid-row:1 / span 2;
    margin:0;
  }
  .feature-number{
    width:36px;
    height:36px;
    margin-bottom:13px;
    border-radius:12px;
  }
  .pack-card .card-sub{ min-height:0; }
  .btn{
    min-height:48px;
    padding:12px 16px;
    box-shadow:0 5px 12px rgba(66,127,207,0.07);
  }
  .btn-row{ gap:8px; }
  .btn-row .btn{ flex:1 1 100%; }
  .toolbar{
    align-items:stretch;
    flex-direction:column;
    gap:8px;
    padding:11px;
    border:1px solid #e1e8f3;
    border-radius:18px;
    background:rgba(255,255,255,0.8);
    box-shadow:0 7px 18px rgba(65,87,119,0.045);
  }
  .toolbar .search-input{ min-width:0; }
  .toolbar select{ width:100% !important; }
  input[type="text"],input[type="password"],textarea,select{
    min-height:47px;
    border-radius:13px;
    font-size:16px;
  }
  textarea{ min-height:104px; }
  input[type="file"]{ min-height:48px; border-radius:13px; }
  .table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    border-radius:13px;
  }
  .table th,.table td{ padding:10px; }
  .detail-row{ gap:13px; }
  .footer{
    margin-top:4px;
    padding:21px 0 30px;
    text-align:center;
    line-height:1.9;
  }
}
@media (max-width:370px){
  .container{ width:min(100% - 24px,1140px); }
  .brand-name{ font-size:14px; }
  .hero-title{ font-size:34px; letter-spacing:-2.1px; }
  .language-picker{ padding:0 6px; }
  .language-picker svg{ display:none; }
  .app-action-grid{ grid-template-columns:1fr; }
  .store-inner h2{ font-size:28px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
  }
}