/* Tasboh Mobile Pack — responsive.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.55; }
img, video { max-width: 100%; height: auto; display: block; }
svg { vertical-align: middle; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; }

:root{
  --bg:#0b1621; --surface:#0e1e2b; --panel:#0c1b28;
  --ink:#e8eef6; --muted:#a5b8ca; --border:rgba(255,255,255,.08);
  --primary:#2E86AB; --primary-2:#0e4a86; --ring:rgba(46,134,171,.25);
  --shadow:0 14px 36px rgba(0,0,0,.42);
  --radius:16px;
  --container:1140px;
}

:root{
  --font-size: clamp(15px, 1.6vw, 17px);
  --h1: clamp(28px, 3.6vw, 40px);
  --h2: clamp(22px, 2.8vw, 32px);
  --h3: clamp(18px, 2.2vw, 26px);
}
body { font-size: var(--font-size); color: var(--ink); background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: .2px;
}
h1 { font-size: var(--h1); margin: .2em 0 .4em }
h2 { font-size: var(--h2); margin: .2em 0 .4em }
h3 { font-size: var(--h3); margin: .2em 0 .4em }
p  { margin: .6em 0; color: var(--ink) }
.small, small { font-size: .9em; color: var(--muted) }

.container{ width: 92%; max-width: var(--container); margin-inline: auto; }
.section{ padding: 48px 0; }
.stack > * + * { margin-top: 12px; }
.grid{ display: grid; gap: 18px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, #0f2030, #0b1822);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: #0c1a25; color: var(--ink); font-weight: 700; text-decoration: none;
  min-height: 44px; min-width: 44px;
}
.btn.primary{ background: var(--primary); color: #fff; border-color: transparent; }
.btn.block{ width: 100%; }
.btn:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; }

input[type='text'], input[type='email'], input[type='tel'], input[type='search'],
input[type='number'], input[type='password'], textarea, select {
  width: 100%; background: #0c1b28; color: var(--ink);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
label { display:block; margin-bottom: 6px; color: var(--muted) }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px){ .form-row{ grid-template-columns: 1fr; } }

.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
table{ width: 100%; border-collapse: collapse; min-width: 560px; }
th, td{ padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
thead th{ position: sticky; top: 0; background: #0c1a25; }

.img-fluid{ width: 100%; height: auto; display: block; }
.figure{ border:1px solid var(--border); border-radius: 12px; overflow: hidden; background:#0c1b28; }

.navbar{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg,#0c1a25,#0b1822);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(120%) blur(8px);
}
.navbar .row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; }
.site-nav ul{ display:flex; gap:14px; list-style:none; margin:0; padding:0; }
.site-nav a{ padding:10px 12px; border-radius:10px; border:1px solid transparent; }
.site-nav a:hover{ background:#0c1a25; border-color:var(--border); }
.site-nav a.active{ background:#0c1a25; border-color:var(--border); }

.nav-cta{ padding:10px 14px; border-radius:12px; background:var(--primary); color:#fff; font-weight:700; border:0;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 10px 24px rgba(46,134,171,.25);
}

.nav-toggle{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:#0c1a25; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; }

@media (max-width: 980px){
  .nav-cta{ display:none }
  .nav-toggle{ display:inline-block }
}

.hero{ padding: 88px 0 48px; text-align:center; border-bottom:1px solid var(--border); }
.hero .subtitle{ color: var(--muted); max-width: 880px; margin: 8px auto 0; }

.footer{ border-top:1px solid var(--border); background:linear-gradient(180deg,#0b1822,#0c1a25); padding:28px 0 34px; }
.footer-content{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-links{ list-style:none; display:flex; gap:12px; padding:0; margin:8px 0 0; }
.footer-links a{ color:var(--muted) }
.footer-links a:hover{ color:var(--ink) }

.center { text-align:center }
.right  { text-align:right }
.hidden { display:none !important }
.maxw-800{ max-width: 800px; margin-inline: auto; }
.flow > * + * { margin-top:.75rem }
.round { border-radius: 12px }
.border { border: 1px solid var(--border) }
.shadow { box-shadow: var(--shadow) }
.break { overflow-wrap: break-word; word-break: break-word; }