/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --bg:#fffdf7;
  --bg-soft:#fef9ec;
  --bg-warm:linear-gradient(135deg,#fffbeb 0%,#fef3c7 45%,#fed7aa 100%);
  --bg-card:#ffffff;
  --bg-section:#fbf8f1;
  --border:rgba(120,113,108,.14);
  --border-strong:rgba(120,113,108,.22);
  --text:#1c1917;
  --text-soft:#44403c;
  --text-dim:#78716c;
  --text-mute:#a8a29e;
  --accent:#F5A623;
  --accent-strong:#d97706;
  --accent-soft:#fef3c7;
  --accent-ink:#92400e;
  --green:#059669;
  --green-soft:#d1fae5;
  --rose:#e11d48;
  --rose-soft:#ffe4e6;
  --radius:14px;
  --radius-sm:8px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(28,25,23,.04),0 1px 3px rgba(28,25,23,.06);
  --shadow:0 4px 12px rgba(28,25,23,.06),0 12px 28px rgba(28,25,23,.08);
  --shadow-lg:0 20px 50px rgba(245,166,35,.18),0 8px 20px rgba(28,25,23,.08);
  --container:1280px;
  --container-narrow:980px;
  --font:'Be Vietnam Pro','Inter','Noto Sans JP','Hiragino Sans','Yu Gothic UI',system-ui,-apple-system,sans-serif;
  --header-h:62px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(255,253,247,.88);border-bottom:1px solid var(--border)}
.nav{max-width:var(--container);margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.2px;color:var(--text)}
.brand img{width:30px;height:30px;border-radius:7px;object-fit:cover;box-shadow:var(--shadow-sm)}
.brand .brand-mark{color:var(--accent-strong);font-weight:900}
.nav-links{display:flex;gap:4px;margin-left:24px}
.nav-links a{font-size:13.5px;color:var(--text-soft);font-weight:600;padding:8px 14px;border-radius:8px;transition:all .15s}
.nav-links a:hover{color:var(--accent-strong);background:var(--accent-soft)}
.nav-links a.active{color:var(--accent-ink);background:var(--accent-soft)}
.nav-spacer{flex:1}
.cta-btn{padding:10px 18px;background:var(--accent);color:#fff;font-weight:700;border-radius:999px;font-size:13px;transition:all .15s;box-shadow:0 2px 6px rgba(245,166,35,.35)}
.cta-btn:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,166,35,.45)}
.lang-switch{display:inline-flex;border:1px solid var(--border,#e7e5e4);border-radius:999px;overflow:hidden}
.lang-switch button{appearance:none;border:0;background:transparent;padding:6px 11px;font:700 12px/1 inherit;color:var(--text-muted,#78716c);cursor:pointer;transition:all .15s}
.lang-switch button+button{border-left:1px solid var(--border,#e7e5e4)}
.lang-switch button:hover{color:var(--text,#1c1917);background:rgba(245,166,35,.08)}
.lang-switch button.active{background:var(--accent,#F5A623);color:#fff}
@media(max-width:640px){.lang-switch button{padding:5px 8px;font-size:11px}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{margin-top:80px;background:linear-gradient(180deg,#fffdf7,#fef9ec);border-top:1px solid var(--border)}
.footer-inner{max-width:var(--container);margin:0 auto;padding:48px 28px 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px}
.footer-brand{font-size:18px;font-weight:900;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.footer-brand img{width:30px;height:30px;border-radius:7px}
.footer-desc{color:var(--text-dim);font-size:13.5px;line-height:1.7;max-width:340px}
.footer-col h4{font-size:11.5px;color:var(--text-dim);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.footer-col a,.footer-col p{display:block;color:var(--text-soft);font-size:13px;padding:5px 0;font-weight:500}
.footer-col a:hover{color:var(--accent-strong)}
.footer-meta{max-width:var(--container);margin:0 auto;padding:16px 28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-mute);flex-wrap:wrap;gap:10px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:700;transition:all .15s;cursor:pointer;white-space:nowrap;line-height:1}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(245,166,35,.35)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,166,35,.45)}
.btn-secondary{background:#fff;border:1.5px solid var(--border-strong);color:var(--text-soft)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent-strong)}
.btn-ghost{background:transparent;color:var(--text-soft);border:1.5px solid transparent}
.btn-ghost:hover{background:var(--bg-soft);color:var(--text)}
.btn-lg{padding:14px 26px;font-size:14px}

/* ============================================================
   HOME PAGE
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--bg-warm);padding:80px 28px 50px}
.hero::before{content:"";position:absolute;top:-200px;right:-100px;width:520px;height:520px;background:radial-gradient(circle,rgba(245,166,35,.28),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-150px;left:-80px;width:380px;height:380px;background:radial-gradient(circle,rgba(255,107,53,.18),transparent 70%);pointer-events:none}
.hero-inner{max-width:var(--container);margin:0 auto;text-align:center;position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);color:var(--accent-ink);font-weight:700;font-size:11px;letter-spacing:2px;border-radius:999px;margin-bottom:22px;text-transform:uppercase;border:1px solid rgba(245,166,35,.25)}
.hero-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.25)}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:900;line-height:1.18;letter-spacing:-.02em;margin-bottom:20px;color:var(--text);text-wrap:balance}
.hero h1 .accent{background:linear-gradient(135deg,#F5A623 0%,#FF6B35 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero .lead{font-size:17px;color:var(--text-soft);max-width:680px;margin:0 auto 36px;line-height:1.7}
.search-wrap{max-width:660px;margin:0 auto;position:relative}
.search-input{width:100%;padding:18px 22px 18px 56px;background:#fff;border:1.5px solid var(--border-strong);border-radius:999px;font-size:15.5px;transition:all .15s;box-shadow:var(--shadow)}
.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px rgba(245,166,35,.18),var(--shadow)}
.search-input::placeholder{color:var(--text-mute)}
.search-icon{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.search-hint{margin-top:14px;font-size:13px;color:var(--text-dim)}
.search-hint kbd{display:inline-block;padding:2px 7px;background:#fff;border:1px solid var(--border-strong);border-radius:4px;font-size:11px;font-weight:600;color:var(--text-soft)}

.stats-strip{max-width:var(--container);margin:-30px auto 0;padding:0 28px;position:relative;z-index:5}
.stats-inner{background:#fff;border:1px solid var(--border);border-radius:16px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow);overflow:hidden}
.stat{padding:22px 18px;text-align:center;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat-num{font-size:26px;font-weight:900;color:var(--accent-strong);letter-spacing:-.02em;line-height:1}
.stat-label{font-size:11.5px;color:var(--text-dim);margin-top:4px;letter-spacing:.5px;text-transform:uppercase;font-weight:600}

.filters{max-width:var(--container);margin:60px auto 0;padding:0 28px}
.filter-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.filter-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;position:relative}
.filter-field>label{font-size:11px;color:var(--text-dim);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding-left:2px}
.ms-trigger{position:relative;width:100%;background:#fff;border:1.5px solid var(--border-strong);border-radius:12px;padding:13px 42px 13px 16px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);text-align:left;display:flex;align-items:center;gap:8px;min-height:48px}
.ms-trigger:hover{border-color:var(--accent)}
.ms-trigger.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.ms-trigger.open{border-color:var(--accent);box-shadow:0 0 0 4px rgba(245,166,35,.18)}
.ms-trigger::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.8px solid var(--text-dim);border-bottom:1.8px solid var(--text-dim);transform:rotate(45deg);transition:transform .2s;pointer-events:none}
.ms-trigger.open::after{margin-top:-2px;transform:rotate(-135deg)}
.ms-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:800;flex-shrink:0}
.ms-count[hidden]{display:none}
.ms-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 30px rgba(28,25,23,.15);z-index:30;padding:6px;max-height:300px;overflow-y:auto;display:none}
.ms-panel.open{display:block;animation:msFade .15s ease-out}
@keyframes msFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ms-option{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--text-soft);font-weight:500;transition:background .12s;user-select:none}
.ms-option:hover{background:var(--bg-soft)}
.ms-option input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.8px solid var(--border-strong);border-radius:5px;cursor:pointer;position:relative;transition:all .15s;background:#fff;margin:0}
.ms-option input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.ms-option input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ms-option input[type="checkbox"]:checked+span{color:var(--text);font-weight:600}
.ms-panel-footer{padding:8px 12px 4px;border-top:1px solid var(--border);margin-top:4px;display:flex;justify-content:flex-end}
.ms-panel-clear{font-size:12px;color:var(--text-dim);text-decoration:underline;font-weight:500;cursor:pointer}
.filter-meta{display:flex;justify-content:space-between;align-items:center;padding:18px 0 0;border-top:1px solid var(--border);margin-top:22px;font-size:13px;color:var(--text-dim)}
.filter-meta .count strong{color:var(--text);font-weight:800;font-size:14.5px}
.clear-btn{font-size:12.5px;color:var(--text-dim);text-decoration:underline;cursor:pointer;font-weight:500}
.clear-btn:hover{color:var(--accent-strong)}

.grid{max-width:var(--container);margin:24px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,border-color .22s,box-shadow .22s;cursor:pointer;position:relative;box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-4px);border-color:rgba(245,166,35,.4);box-shadow:var(--shadow-lg)}
.card-cover{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#fef3c7,#fed7aa)}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-cover img{transform:scale(1.05)}
.card-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.78) 100%)}
.card-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.badge{padding:5px 11px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.badge.type-renewal{color:#9f1239;background:rgba(255,228,230,.97)}
.badge.type-greenfield{color:#065f46;background:rgba(209,250,229,.97)}
.badge.type-iot{color:var(--accent-ink);background:rgba(254,243,199,.97)}
.badge.type-saas{color:#3730a3;background:rgba(224,231,255,.97)}
.card-cover-title{position:absolute;bottom:14px;left:16px;right:16px;z-index:2}
.card-cover-title .industry{font-size:10.5px;color:#fde68a;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.card-cover-title .name{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.01em;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.card-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column;gap:14px}
.card-headline{font-size:13.5px;color:var(--text-soft);font-weight:500;line-height:1.6;min-height:64px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kpi{text-align:center;padding:0 4px}
.kpi-val{font-size:17px;font-weight:900;color:var(--accent-strong);letter-spacing:-.02em;line-height:1.1}
.kpi-val.green{color:var(--green)}
.kpi-cap{font-size:10px;color:var(--text-dim);margin-top:4px;line-height:1.3;font-weight:500}
.card-stack{display:flex;flex-wrap:wrap;gap:5px}
.tech-pill{font-size:10.5px;padding:3px 9px;background:var(--bg-soft);border:1px solid var(--border);border-radius:5px;color:var(--text-soft);font-weight:500}
.card-actions{display:flex;gap:6px;margin-top:auto;padding-top:14px}
.card-actions .btn{flex:1;padding:10px 6px;font-size:11.5px;border-radius:8px;letter-spacing:.2px}
.empty{grid-column:1/-1;padding:80px 20px;text-align:center;color:var(--text-dim)}
.empty h3{font-size:18px;color:var(--text);margin-bottom:8px;font-weight:700}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{max-width:var(--container);margin:32px auto 80px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.pagination:empty{margin:0;padding:0}
.pag-info{font-size:13px;color:var(--text-dim);font-weight:600;letter-spacing:.2px}
.pag-controls{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pag-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text);font-size:13px;font-weight:600;font-family:inherit;border-radius:9px;cursor:pointer;transition:all .15s;letter-spacing:.2px}
.pag-btn:hover:not(:disabled):not(.active){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.pag-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800;cursor:default;box-shadow:0 2px 6px rgba(245,166,35,.25)}
.pag-btn:disabled{opacity:.4;cursor:not-allowed}
.pag-btn.pag-num{min-width:38px;padding:0}
.pag-ellipsis{padding:0 6px;color:var(--text-mute);font-weight:700;user-select:none}
.pag-size{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);font-weight:600}
.pag-size select{padding:6px 28px 6px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-card);color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.pag-size select:hover,.pag-size select:focus{border-color:var(--accent);outline:none}
@media (max-width:680px){
  .pagination{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:40px}
  .pag-controls{justify-content:center}
  .pag-info,.pag-size{justify-content:center;text-align:center}
  .pag-size{justify-content:center}
}

/* ============================================================
   PROJECT HUB (shell + tabs + iframe)
   ============================================================ */
.proj-back{max-width:var(--container);margin:0 auto;padding:22px 28px 0}
.breadcrumb{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);font-weight:600}
.breadcrumb a{color:var(--text-dim);transition:color .15s}
.breadcrumb a:hover{color:var(--accent-strong)}
.breadcrumb .sep{color:var(--text-mute)}
.breadcrumb .current{color:var(--text)}

.proj-head{max-width:var(--container);margin:18px auto 0;padding:0 28px;display:grid;grid-template-columns:80px 1fr auto;gap:22px;align-items:center}
.proj-head-cover{width:80px;height:80px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.proj-head-cover img{width:100%;height:100%;object-fit:cover}
.proj-head-meta{min-width:0}
.proj-head-meta .row1{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.proj-head-meta .row1 .badge{position:static;font-size:10.5px}
.proj-head-meta .row1 .industry{font-size:11.5px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.proj-head-meta h1{font-size:26px;font-weight:900;letter-spacing:-.01em;margin-bottom:4px;line-height:1.15}
.proj-head-meta .sub{font-size:13.5px;color:var(--text-soft);font-weight:500}
.proj-head-actions{display:flex;gap:8px;flex-shrink:0}

.proj-tabs{position:sticky;top:var(--header-h);z-index:30;background:rgba(255,253,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);margin:22px 0 0}
.proj-tabs-inner{max-width:var(--container);margin:0 auto;padding:0 28px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.proj-tabs-inner::-webkit-scrollbar{display:none}
.tab-btn{padding:14px 18px;font-size:13.5px;color:var(--text-dim);font-weight:700;white-space:nowrap;border-bottom:2.5px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:none}
.tab-btn:hover{color:var(--accent-strong)}
.tab-btn.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tab-btn .ic{font-size:14px;opacity:.85}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* Overview pane (rendered from data) */
.overview{max-width:var(--container);margin:0 auto;padding:40px 28px}
.ov-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;margin-bottom:36px}
.ov-hero h2{font-size:clamp(26px,3vw,36px);font-weight:900;letter-spacing:-.01em;line-height:1.2;margin-bottom:14px}
.ov-tagline{font-size:17px;color:var(--text-soft);line-height:1.6;margin-bottom:18px;font-weight:500}
.ov-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.ov-meta .pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:#fff;border:1px solid var(--border);border-radius:999px;font-size:11.5px;font-weight:600;color:var(--text-soft)}
.ov-actions{display:flex;gap:10px;flex-wrap:wrap}
.ov-cover{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.ov-cover img{width:100%;height:100%;object-fit:cover}

.kpi-strip-inner{background:#fff;border:1px solid var(--border);border-radius:16px;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;box-shadow:var(--shadow);margin-bottom:36px}
.kpi-block{padding:24px 22px;text-align:left;border-right:1px solid var(--border)}
.kpi-block:last-child{border-right:none}
.kpi-block-num{font-size:28px;font-weight:900;color:var(--accent-strong);letter-spacing:-.02em;line-height:1;margin-bottom:6px}
.kpi-block-num.green{color:var(--green)}
.kpi-block-cap{font-size:12.5px;color:var(--text-soft);font-weight:600;line-height:1.4}

.ov-tech-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;margin-bottom:36px}
.ov-tech-block h4{font-size:11.5px;color:var(--text-dim);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.ov-tech-items{display:flex;flex-wrap:wrap;gap:6px}
.ov-tech-items span{font-size:12px;padding:5px 11px;background:var(--bg-soft);border:1px solid var(--border);border-radius:6px;color:var(--text);font-weight:600}

.ov-tabs-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.ov-tabs-nav .ov-tab-link{padding:22px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);transition:all .18s;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left}
.ov-tabs-nav .ov-tab-link:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.ov-tabs-nav .ov-tab-link .ic{font-size:22px;margin-bottom:6px}
.ov-tabs-nav .ov-tab-link .title{font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.01em}
.ov-tabs-nav .ov-tab-link .desc{font-size:12.5px;color:var(--text-dim);line-height:1.5}
.ov-tabs-nav .ov-tab-link .more{margin-top:6px;font-size:12px;color:var(--accent-strong);font-weight:700}

/* Iframe panes */
.embed-bar{max-width:var(--container);margin:0 auto;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12.5px;color:var(--text-dim);background:var(--bg-soft);border-bottom:1px solid var(--border)}
.embed-bar .info{display:flex;align-items:center;gap:8px}
.embed-bar .info .ic{width:22px;height:22px;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.embed-bar a{color:var(--accent-strong);font-weight:700;text-decoration:underline}

.iframe-host{width:100%;background:#fff;border:0;display:block}
.iframe-host-story{min-height:1400px}
.iframe-host-demo{min-height:900px}

/* Showcase modal-route (popup style — fills available viewport, no inner scroll).
   CRITICAL: lock BOTH <html> and <body> overflow. body.no-scroll alone doesn't stop
   html from scrolling — site-header + site-footer remain in document flow (only
   #app/modal-route is position:fixed), so document height can exceed viewport.
   Without html overflow lock, outer page still scrolls behind the modal.
   Render() toggles 'no-scroll' on BOTH <html> and <body> in JS for full browser
   compat; the :has() selector below is a defensive secondary path. */
html.no-scroll, body.no-scroll, html:has(body.no-scroll){overflow:hidden;height:100%}
.modal-route{position:fixed;inset:var(--header-h) 0 0 0;z-index:60;display:flex;align-items:stretch;justify-content:center;padding:16px}
.modal-route-bg{position:absolute;inset:0;background:rgba(28,25,23,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
.modal-route-card{position:relative;z-index:1;background:#fff;border-radius:14px;width:100%;max-width:1480px;height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:popIn .18s ease-out}
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-route-head{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg-soft);flex-shrink:0;flex-wrap:wrap}
.modal-route-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.modal-route-title strong{font-size:16px;font-weight:800;color:var(--text)}
.modal-route-title span{font-size:12px;color:var(--text-dim);font-weight:500}
.icon-btn{padding:8px 13px;background:#fff;border:1px solid var(--border-strong);border-radius:8px;font-size:12px;color:var(--text-soft);font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .15s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}
.modal-close{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--text-soft);cursor:pointer;transition:all .15s;flex-shrink:0}
.modal-close:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.modal-route-body{flex:1 1 0;overflow:hidden;background:linear-gradient(180deg,#f5f5f4,#e7e5e4);padding:0;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.showcase-frame-wrap{position:relative;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.18);border-radius:0;width:0;height:0}
.showcase-frame{width:1280px;height:720px;border:none;background:#fff;transform-origin:top left;transform:scale(var(--scale,1));display:block}

/* Story / Demo — full-frame iframe of original page (no extra chrome) */
.iframe-fullpane{display:block;width:100%;min-height:calc(100vh - var(--header-h));border:0;background:#fff}
/* On story/demo views: iframe fills the remaining viewport exactly, footer is hidden,
   and outer scroll is locked. The inner iframe scrolls itself. Previously we sized the
   iframe to the child's body.scrollHeight via postMessage, but when the child is an
   SPA with its own per-page scroll (or 100vh layouts), the outer page AND inner iframe
   both end up scrollable → nested scroll. Lock outer, let inner own scroll. */
body[data-route="story"] .iframe-fullpane,
body[data-route="demo"] .iframe-fullpane{height:calc(100vh - var(--header-h));min-height:0}
body[data-route="story"] .site-footer,
body[data-route="demo"] .site-footer{display:none}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero{background:var(--bg-warm);padding:64px 28px 50px;position:relative;overflow:hidden}
.contact-hero::before{content:"";position:absolute;top:-160px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(245,166,35,.25),transparent 70%);pointer-events:none}
.contact-hero-inner{max-width:var(--container-narrow);margin:0 auto;text-align:center;position:relative;z-index:1}
.contact-hero h1{font-size:clamp(32px,4.5vw,48px);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.contact-hero p{font-size:16px;color:var(--text-soft);max-width:620px;margin:0 auto;line-height:1.7}

.contact-grid{max-width:var(--container);margin:48px auto 0;padding:0 28px;display:grid;grid-template-columns:1.3fr 1fr;gap:48px}

.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 40px;box-shadow:var(--shadow)}
.form-card h2{font-size:22px;font-weight:900;margin-bottom:6px;letter-spacing:-.01em}
.form-card .form-lead{font-size:13.5px;color:var(--text-dim);margin-bottom:28px;line-height:1.6}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.3px}
.form-field label .req{color:var(--rose);font-weight:900;margin-left:2px}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border-strong);border-radius:10px;background:#fff;font-size:14px;transition:all .15s}
.form-field textarea{min-height:120px;resize:vertical;line-height:1.6}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(245,166,35,.15)}
.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"]{border-color:var(--rose);box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.form-field .help{font-size:11.5px;color:var(--text-dim)}
.form-field .err{font-size:11.5px;color:var(--rose);font-weight:600;display:none}
.form-field.invalid .err{display:block}
.checkbox-group{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.chk-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px;color:var(--text-soft);font-weight:600;transition:all .15s}
.chk-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.chk-item.checked{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
/* Reset .form-field input width/padding leak — checkbox in chk-item inherits
   width:100% + padding:12px 14px from generic .form-field input rule above, which
   makes the checkbox absorb all chk-item width and pushes the <span> label to a
   tiny column at the right edge → text wraps awkwardly. Restore native size. */
.chk-item input{accent-color:var(--accent);width:auto;padding:0;flex-shrink:0;margin:0}
.privacy-note{font-size:12px;color:var(--text-dim);line-height:1.6;margin:18px 0 24px;padding:12px 14px;background:var(--bg-soft);border-radius:8px;border:1px solid var(--border)}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:14px}
.form-actions .btn-primary{padding:14px 32px;font-size:14px}

.contact-aside{display:flex;flex-direction:column;gap:18px}
.aside-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm)}
.aside-card h3{font-size:14px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text)}
.aside-card h3 .ic{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent-strong);display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.aside-card .row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;color:var(--text-soft);border-bottom:1px dashed var(--border)}
.aside-card .row:last-child{border-bottom:none}
.aside-card .row .label{color:var(--text-dim);font-weight:500}
.aside-card .row .val{font-weight:700;color:var(--text)}
.aside-card.contact-info p{font-size:13.5px;color:var(--text-soft);line-height:1.7;margin-bottom:10px}
.aside-card.contact-info a{color:var(--accent-strong);font-weight:700;text-decoration:underline}

.thanks-card{display:none;text-align:center;padding:48px 30px}
.thanks-card.show{display:block}
.thanks-icon{width:72px;height:72px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:900;margin:0 auto 22px}
.thanks-card h2{font-size:26px;font-weight:900;margin-bottom:12px}
.thanks-card p{font-size:14.5px;color:var(--text-soft);line-height:1.7;max-width:480px;margin:0 auto 24px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav-links{display:none}
  .hero{padding:64px 24px 44px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .proj-head{grid-template-columns:60px 1fr;gap:14px}
  .proj-head-actions{grid-column:1/-1;margin-top:6px}
  .proj-head-cover{width:60px;height:60px;border-radius:10px}
  .proj-head-meta h1{font-size:22px}
  .ov-hero{grid-template-columns:1fr;gap:24px}
  .ov-cover{aspect-ratio:16/9;max-width:560px}
  .kpi-strip-inner{grid-template-columns:repeat(2,1fr)}
  .kpi-block{border-bottom:1px solid var(--border)}
  .kpi-block:nth-child(odd){border-right:1px solid var(--border)}
  .kpi-block:nth-child(even){border-right:none}
  .kpi-block:nth-last-child(-n+2){border-bottom:none}
  .ov-tabs-nav{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:768px){
  body{font-size:14.5px}
  .nav{padding:12px 18px;gap:10px}
  .brand{font-size:15px;gap:8px}
  .brand img{width:26px;height:26px}
  .cta-btn{padding:8px 14px;font-size:12px}
  .hero{padding:48px 18px 36px}
  .hero h1{font-size:30px;line-height:1.2;margin-bottom:16px}
  .hero .lead{font-size:15px;margin-bottom:28px}
  .search-input{padding:15px 20px 15px 50px;font-size:14.5px}
  .search-icon{left:18px}
  .stats-strip{margin-top:-24px;padding:0 18px}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border)}
  .filters{margin-top:44px;padding:0 18px}
  .filter-field{min-width:100%;flex:1 1 100%}
  .grid{margin:20px auto 60px;padding:0 18px;grid-template-columns:1fr;gap:16px}
  .card-cover-title .name{font-size:22px}
  .card-body{padding:18px 18px 18px;gap:12px}
  .card-headline{font-size:13px;min-height:auto;-webkit-line-clamp:4}
  .kpi-val{font-size:15.5px}
  .proj-back,.proj-head{padding-left:18px;padding-right:18px}
  .proj-tabs-inner{padding:0 18px}
  .tab-btn{padding:12px 12px;font-size:12.5px}
  .overview{padding:30px 18px}
  .showcase-pane{padding:14px 14px 0}
  .embed-bar{padding:12px 18px;font-size:12px;flex-wrap:wrap}
  .iframe-host-story{min-height:1100px}
  .iframe-host-demo{min-height:700px}
  .contact-hero{padding:48px 18px 36px}
  .contact-grid{padding:0 18px}
  .form-card{padding:26px 22px}
  .form-row,.checkbox-group{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;padding:36px 18px 20px;gap:24px}
  .footer-meta{padding:14px 18px}
}
@media (max-width:420px){
  .brand span{display:none}
  .hero h1{font-size:26px}
  .proj-head-meta h1{font-size:19px}
}