:root {
  --bg:#0b0b0e;
  --surface: rgba(255,255,255,0.06);
  --surface-strong: rgba(255,255,255,0.08);
  --panel: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.14);
  --hw-border: rgba(120, 120, 255, 0.25);
  --hw-border-strong: rgba(144, 144, 255, 0.9);
  --hw-gradient-1: #6366f1;
  --hw-gradient-2: #4f46e5;
}


/* RESET BASIC */
/* Base */
*{ box-sizing:border-box; }
html,body{
  margin:0; 
  padding:0;
  width: 100%;  /* ✅ Added for proper width */
  background:
    radial-gradient(1000px 540px at 20% -10%, #14161d 0%, #0b0b0e 60%) fixed;
  color:var(--text);
  font:500 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* MAIN WRAPPER */

.hw-main {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hw-shell {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 3.5rem 1.5rem 3rem;
}

/* CONTACT CARD */

.hw-contact {
  width: 100%;
  max-width: 1040px;
  background: linear-gradient(
      145deg,
      rgba(99, 102, 241, 0.16),
      transparent 55%
    ),
    rgba(5, 7, 17, 0.96);
  border-radius: 1.5rem;
  border: 1px solid rgba(120, 120, 255, 0.32);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  padding: 2.5rem 2.25rem;
}

.hw-topline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hw-text-muted);
  margin-bottom: 0.75rem;
}

.hw-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: flex-start;
}

/* Left copy */

.hw-copy h1 {
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}

.hw-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hw-text-soft);
  max-width: 32rem;
  margin: 0;
}

.hw-extra {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--hw-text-muted);
}

.hw-extra p {
  margin: 0.25rem 0;
}

.hw-extra strong {
  color: var(--hw-text-main);
  font-weight: 600;
}

/* Right panel */

.hw-panel {
  background: var(--hw-panel-bg);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--hw-border);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.hw-overline {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--hw-text-muted);
  margin: 0 0 1rem;
}

.hw-card {
  background: var(--hw-card-bg);
  border-radius: 0.9rem;
  padding: 1rem 1rem 0.9rem;
  border: 1px solid transparent;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
  margin-bottom: 0.9rem;
}

.hw-card:hover {
  border-color: var(--hw-border-strong);
  background: var(--hw-card-bg-hover);
  transform: translateY(-1px);
}

.hw-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hw-text-muted);
  margin: 0 0 0.35rem;
}

.hw-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #f5f5ff;
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: radial-gradient(circle at top left, var(--hw-gradient-1), var(--hw-gradient-2));
  box-shadow: 0 10px 30px rgba(88, 80, 236, 0.55);
}

.hw-email::after {
  content: "↗";
  font-size: 0.85rem;
}

.hw-note {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--hw-text-subtle);
}

.hw-hints {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(80, 80, 130, 0.7);
}

.hw-hints-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: #c2c2d5;
  margin: 0 0 0.35rem;
}

.hw-hints ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: var(--hw-text-muted);
}

.hw-hints li {
  margin-bottom: 0.2rem;
}


/* Base: desktop / large screens (aapka current code) */
/* ...your existing CSS here... */

/* Tablet and below: reduce padding, gap */
@media (max-width: 1024px) {
  .hw-shell {
    padding: 2.5rem 1.25rem 2.5rem;
  }

  .hw-contact {
    padding: 2rem 1.75rem;
  }

  .hw-inner {
    gap: 2.25rem;
  }

  .hw-copy h1 {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
  }
}

/* Mobile: 1 column layout */
@media (max-width: 768px) {
  .hw-shell {
    padding: 2rem 1rem 2rem;
  }

  .hw-contact {
    padding: 1.75rem 1.25rem;
    border-radius: 1.25rem;
  }

  .hw-inner {
    grid-template-columns: 1fr;   /* 2 column → 1 column */
    gap: 2rem;
  }

  .hw-panel {
    margin-top: 0.5rem;
  }

  .hw-copy h1 {
    font-size: clamp(1.8rem, 7vw, 2.3rem);
  }

  .hw-sub {
    font-size: 0.95rem;
  }
}

/* Small mobile: tighter spacing, full width */
@media (max-width: 480px) {
  .hw-shell {
    padding: 1.5rem 0.9rem 1.75rem;
  }

  .hw-contact {
    padding: 1.5rem 1rem;
    border-radius: 1rem;
  }

  .hw-panel {
    padding: 1.5rem 1.25rem;
  }

  .hw-copy h1 {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  .hw-sub,
  .hw-extra {
    font-size: 0.9rem;
  }
}