/* Light theme for Home2 page aligned with Home1 */
:root { --h2-bg:#ffffff; --h2-card:#ffffff; --h2-surface:#ffffff; --h2-accent:#06b6d4; --h2-primary:#2563eb; --h2-border:#e5e7eb; }
html, body { background: var(--h2-bg); }

.h2-hero { background:#ffffff; color:#111827; position: relative; }
.h2-hero-inner { max-width:1200px; margin:0 auto; padding:120px 24px; display:flex; align-items:center; gap:32px; }
.h2-subnav-wrap{ max-width:1200px; margin:0 auto; padding:24px; }
.h2-subnav-wrap{ max-width:none; margin:0; padding:0; }
.h2-subnav{ background:#ffffff; border-bottom:1px solid #e5e7eb; border-radius:0; box-shadow:0 8px 24px rgba(0,0,0,0.06); padding:12px 18px; display:flex; align-items:center; gap:20px; position:fixed; top:0; left:0; width:100%; z-index:9999; }
.h2-subnav .brand{ display:flex; align-items:center; gap:10px; }
.h2-subnav .brand img{ height:34px; filter:none; }
.h2-subnav .items{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.h2-subnav .items > a{ color:#111827; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:600; transition:all .2s ease; }
.h2-subnav .items > a:visited{ color:#111827; }
.h2-subnav .items > a:hover, .h2-subnav .items > a.active{ background:#f3f4f6; color:#111827; }
.h2-subnav .has-dd > a{ color:#111827; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:600; transition:all .2s ease; display:flex; align-items:center; gap:6px; }
.h2-subnav .has-dd > a:visited{ color:#111827; }
.h2-subnav .has-dd > a:hover, .h2-subnav .has-dd > a.active{ background:#f3f4f6; color:#111827; }
.h2-subnav .has-dd{ position:relative; }
.h2-subnav .dd{ position:absolute; top:44px; left:0; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 24px 50px rgba(0,0,0,0.12); padding:10px; display:none; min-width:180px; transform-origin: top left; }
.h2-subnav .has-dd:hover .dd{ display:block; }
.h2-subnav .has-dd.open .dd{ display:block; }
.h2-subnav .dd a{ display:block; color:#111827; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:600; }
.h2-subnav .dd a:visited{ color:#111827; }
.h2-subnav .dd a:hover, .h2-subnav .dd a.active{ background:#f3f4f6; color:#111827; }
.h2-subnav .toggle{ display:none; margin-left:auto; font-size:22px; color:#111827; cursor:pointer; }
.h2-subnav .h2-close{ display:none; }

@media (max-width: 900px){
  .h2-subnav{ position:fixed; top:0; left:0; width:100%; }
.h2-subnav-wrap{ height:64px; }
  .h2-subnav .toggle{ display:block; }
  .h2-subnav .items{ position:fixed; right:0; top:56px; width:85vw; height:calc(100vh - 56px); background:#ffffff; flex-direction:column; gap:8px; padding:20px; display:none; box-shadow:-10px 0 40px rgba(0,0,0,0.1); }
  .h2-subnav .items{ z-index:100000; }
  .h2-subnav .items{ overflow:auto; -webkit-overflow-scrolling:touch; }
  .h2-subnav .items.active{ display:flex; }
  .h2-subnav .h2-close{ display:none; position:absolute; top:10px; right:10px; background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; line-height:1; font-size:18px; color:#111827; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.08); z-index:100001; }
  .h2-subnav .items.active .h2-close{ display:block; }
  .h2-subnav .dd{ position:static; top:auto; left:auto; width:100%; box-shadow:none; border:1px solid #e5e7eb; padding:8px; background:#ffffff; }
  .h2-subnav .has-dd > a{ background:#ffffff; }
}
.h2-hero-text { flex:1; }
.h2-hero-text h1 { font-size:56px; font-weight:800; letter-spacing:-0.02em; color:#111827; }
.h2-hero-text .accent{ color:#3b82f6; }
.h2-hero-text p { margin-top:8px; color:#374151; font-size:18px; max-width:640px; }
.h2-actions { display:flex; gap:12px; margin-top:20px; }
.h2-btn { display:inline-block; padding:12px 18px; border-radius:14px; font-weight:700; text-decoration:none; }
.h2-btn-primary { background:var(--h2-primary); color:#fff; }
.h2-btn-ghost { border:2px solid #e5e7eb; color:#111827; }
.h2-icons { display:flex; gap:10px; font-size:26px; margin-top:16px; }
.h2-hero-media { flex:1; display:flex; justify-content:center; }
.h2-hero-img { width:100%; max-width:520px; border-radius:24px; box-shadow:0 20px 40px rgba(0,0,0,0.15); }
.h2-social{ display:flex; gap:12px; margin-top:16px; }
.h2-social a{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#f3f4f6; border:1px solid #e5e7eb; box-shadow:0 6px 20px rgba(0,0,0,0.08); }
.h2-social img{ width:18px; height:18px; filter:none; animation: h2IconPulse 3.2s ease-in-out infinite; }
.h2-social a:hover img{ transform: scale(1.08); }
@keyframes h2IconPulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }
.anim-up{ opacity:0; transform:translateY(18px); animation:fadeUp .7s ease-out forwards; }
.d1{ animation-delay:.1s; } .d2{ animation-delay:.25s; } .d3{ animation-delay:.4s; } .d4{ animation-delay:.55s; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

.h2-section { background: var(--h2-bg); color:#111827; }
.h2-container { max-width:1200px; margin:0 auto; padding:64px 24px; }
.h2-head { text-align:center; margin-bottom:20px; }
.h2-head h2 { font-size:36px; color:#111827; }
.h2-head p { color:#6b7280; }
.h2-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.h2-grid-3 { grid-template-columns: repeat(3,1fr); }
.h2-card { background:#ffffff; border:1px solid var(--h2-border); border-radius:18px; padding:16px; box-shadow:0 12px 28px rgba(0,0,0,0.12); transition: transform .2s ease, box-shadow .2s ease; color:#111827; text-decoration:none; }
.h2-card:hover { transform: translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,0.18); }
.h2-card img { width:100%; height:170px; object-fit:cover; border-radius:12px; margin-bottom:10px; }
.h2-card h3 { margin:0 0 6px; font-size:20px; color:#111827; }
.h2-card p { color:#6b7280; font-size:14px; }
.h2-points { margin-top:8px; display:grid; gap:6px; color:#9ca3af; font-size:14px; }

.h2-blog { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.h2-post { background:#ffffff; border:1px solid var(--h2-border); border-radius:18px; overflow:hidden; display:grid; grid-template-rows: 180px auto; box-shadow:0 10px 28px rgba(0,0,0,0.12); }
.h2-post img { width:100%; height:180px; object-fit:cover; border-radius:18px 18px 0 0; }
.h2-post .post-body{ padding:16px; display:grid; gap:8px; }
.h2-badge{ display:inline-block; padding:6px 10px; font-size:12px; border-radius:9999px; background:#eef2ff; color:#3730a3; border:1px solid #e5e7eb; }
.h2-post h3{ margin:6px 0; color:#111827; font-size:20px; }
.h2-post p{ color:#6b7280; font-size:15px; }
.h2-post-meta{ display:flex; gap:8px; align-items:center; color:#6b7280; font-size:13px; }
.h2-read { display:inline-block; padding:10px 12px; border-radius:12px; background:#111827; color:#ffffff; text-decoration:none; font-weight:700; width:max-content; }
.h2-read:hover { background:#1f2937; }

.h2-feature { background:#ffffff; border:1px solid var(--h2-border); border-radius:18px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,0.12); }
.h2-feature h3 { margin:0 0 6px; color:#111827; }
.h2-feature p { color:#6b7280; }

.h2-contact { display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:start; }
.h2-contact > div h2{ margin:12px 0 10px; font-size:34px; }
.h2-contact > div p{ margin:6px 0 14px; }
.h2-form { background:#ffffff; border:1px solid var(--h2-border); border-radius:18px; padding:16px; display:grid; gap:10px; }
.h2-form input, .h2-form textarea { background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; color:#111827; padding:10px; }
.h2-form button { border:none; }
.h2-modal{ position:fixed; inset:0; background:rgba(0,0,0,0.4); display:none; align-items:center; justify-content:center; z-index:10000; }
.h2-modal.active{ display:flex; }
.h2-modal-content{ width:90%; max-width:820px; background:#ffffff; border:1px solid var(--h2-border); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,0.15); overflow:hidden; }
.h2-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--h2-border); color:#111827; }
.h2-modal-body{ padding:18px; color:#111827; display:grid; gap:14px; }
.h2-modal-close{ background:#f3f4f6; color:#111827; border:1px solid var(--h2-border); border-radius:10px; padding:8px 12px; cursor:pointer; }
.h2-modal-list{ display:grid; gap:6px; color:#9ca3af; }

.reveal { will-change: transform, opacity; }

@media (max-width: 1024px){ .h2-grid{ grid-template-columns: repeat(2,1fr);} .h2-blog{ grid-template-columns: repeat(2,1fr);} .h2-hero-inner{ padding:100px 24px; } }
@media (max-width: 768px){ .h2-grid{ grid-template-columns: 1fr;} .h2-blog{ grid-template-columns: 1fr;} .h2-hero-inner{ flex-direction:column; text-align:center; } .h2-contact{ grid-template-columns: 1fr; } .h2-hero-text h1{ font-size:40px; } }

@media (max-width: 768px){
  .h2-contact{ justify-items:center; text-align:center; }
  .h2-contact > div h2{ font-size:30px; margin-top:10px; margin-bottom:12px; }
  .h2-contact > div p{ margin-bottom:14px; }
  .h2-points{ text-align:center; }
  .h2-form{ max-width:560px; margin:0 auto; }
}
@media (max-width: 480px){ .h2-hero-inner{ padding:80px 18px; } .h2-hero-img{ max-width:420px; } }

/* Home2-only compact spacing */
.h2-home .h2-hero-inner { padding:90px 24px; }
.h2-home .h2-container { padding:36px 24px; }
.h2-home .h2-grid { gap:14px; }
.h2-home .h2-blog { gap:16px; }
.h2-home .h2-contact { gap:16px; }
@media (max-width: 1024px){ .h2-home .h2-hero-inner{ padding:72px 24px; } }
@media (max-width: 768px){ .h2-home .h2-hero-inner{ padding:60px 18px; } }
@media (max-width: 480px){ .h2-home .h2-hero-inner{ padding:56px 16px; } }