/* styles.css */
/* Neon dark pink theme + mobile-first responsive system */
:root{
  --bg:#120012;          /* Deep dark pink canvas */
  --bg-2:#1a0018;        /* Deeper panel */
  --ink:#ffffff;         /* Primary text */
  --ink-2:#e9dff1;       /* Muted text */
  --ink-3:#cdb9db;       /* Faint text */
  --border:rgba(255,255,255,.16);
  --pill:rgba(255,255,255,.10);
  --accent:#ff2fb2;      /* Neon pink */
  --accent-2:#ff6bd6;    /* Variant */
  --accent-3:#ff89e5;    /* Variant */
  --gold:#ffc107;        /* Stars */
}

/* Reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Trebuchet MS", Verdana, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1000px 600px at 85% 10%, rgba(255,47,178,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.20) 60%), #f9b49f;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img, video{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-underline-offset:2px; }

/* Containers and sections */
.container{ width:min(1200px, 92%); margin-inline:auto; }
.section{ padding:2rem 0; }
.panel{ background:rgba(0,0,0,.40); }
.panel-2{ background:rgba(0,0,0,.55); }
.note{ color:var(--ink-2); }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem .75rem; z-index:9999;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  backdrop-filter:saturate(120%) blur(4px);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.brand{display:inline-block; background:#ff9c54; color:#180016; letter-spacing:.4px; text-decoration:none; padding:.7rem 1rem; border-radius:.5rem; font-weight:800; border:1px solid rgba(255,255,255,.22);
}

.site-nav ul{ display:flex; gap:.75rem; list-style:none; margin:0; padding:0; }
.site-nav a{
  text-decoration:none; padding:.5rem .65rem; border-radius:.375rem; border:1px solid transparent;
}
.site-nav a:hover{ background:var(--pill); border-color:var(--border); }

/* Mobile nav */
.nav-toggle{ display:none; }
.nav-toggle-btn{ display:none; font-size:1.6rem; cursor:pointer; padding:.25rem .5rem; border-radius:.25rem; }
@media (max-width: 768px){
  .nav-toggle-btn{ display:block; }
  .site-nav{ position:absolute; left:0; right:0; top:100%; background:rgba(0,0,0,.92); display:none; }
  .site-nav ul{ flex-direction:column; padding:1rem; }
  .nav-toggle:checked ~ .site-nav{ display:block; }
}

/* Hero */
.hero{
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.hero h1{ margin:0 0 .5rem; font-size: clamp(1.5rem, 4.2vw, 2.4rem); }
.hero p{ margin:0; color:var(--ink-2); }
.btn{
  display:inline-block; background:#ff9c54; color:#180016;
  text-decoration:none; padding:.7rem 1rem; border-radius:.5rem; font-weight:800; border:1px solid rgba(255,255,255,.22);
}
.btn:hover{ filter:brightness(1.06) contrast(1.05); }


/* Full-bleed, mobile-first banner with overlay, object-fit: cover, and fluid typography via clamp(). [web:15][web:16][web:3] */
.hero-banner {
  position: relative;
  width: 100%;
  min-height: clamp(260px, 50vh, 640px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-banner picture,
.hero-banner .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-banner { background: center/cover no-repeat url("images/banner-mobile.jpg"); }
@media (min-width: 600px) { .hero-banner { background-image: url("images/banner-tablet.jpg"); } }
@media (min-width: 992px) { .hero-banner { background-image: url("images/banner-desktop.jpg"); } }

.hero-banner .hero-bg {
  object-fit: cover;
  object-position: center;
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 0;
}

.hero-banner .hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: clamp(14px, 3.5vw, 28px);
  max-width: min(90ch, 92%);
}

.hero-banner h1 {
  margin: 0 0 8px 0;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 6vw, 52px);
}

.hero-banner p {
  margin: 0 0 16px 0;
  opacity: 0.95;
  font-size: clamp(14px, 3.2vw, 18px);
}

.hero-banner .hero-btn {
  display: inline-block;
  text-decoration: none;
  background: #ff9c54;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 22px rgba(255,0,122,0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hero-banner .hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255,0,122,0.36);
  background: #e6006e;
 
}

.hero-banner {
  width: 100%;
  height: auto;
  display: block;
}


@media (min-width: 992px) {
  .hero-banner { min-height: clamp(380px, 62vh, 760px); }
}



/* Grids */
.grid{ display:grid; gap:1rem; }
.cols-2{ grid-template-columns: 1fr; }
.cols-3{ grid-template-columns: 1fr; }
@media (min-width: 768px){ .cols-2{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px){ .cols-3{ grid-template-columns: repeat(3,1fr); } }

/* Cards */
.card{
  background:rgba(0,0,0,.55);
  border:1px solid var(--border);
  border-radius:.9rem;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.30); }
.card .body{ padding:1rem; }
.card h3{ margin:.2rem 0 .4rem; }

/* Automatic responsive media: fixed-ratio frame + cover fit */
.media-frame{
  position:relative;
  width:100%;
  aspect-ratio: var(--ratio, 450/550); /* default portrait card ratio */
  border-radius:.75rem;
  overflow:hidden;
  background: var(--media-bg, radial-gradient(60% 60% at 30% 30%, var(--accent) 0%, #72005a 55%, #1a0016 100%));
  border:1px solid var(--border);
}
.media-fit img{
  width:100%;
  height:100%;
  object-fit:cover;          /* crop to fill frame for uniform grids */
  object-position:center;    /* focus center */
}

/* Optional intrinsic mode: preserve native aspect ratio (no cropping) */
.intrinsic-images .media-frame{ aspect-ratio:auto; height:auto; }
.intrinsic-images .media-fit img{ height:auto; }

/* Profile card image background variants via nth-child */
.grid-cards .card:nth-child(3n+1) .media-frame{
  --media-bg: radial-gradient(60% 60% at 30% 30%, var(--accent) 0%, #8f0070 55%, #1a0016 100%);
}
.grid-cards .card:nth-child(3n+2) .media-frame{
  --media-bg: radial-gradient(60% 60% at 30% 30%, var(--accent-2) 0%, #7a005e 55%, #140014 100%);
}
.grid-cards .card:nth-child(3n+3) .media-frame{
  --media-bg: radial-gradient(60% 60% at 30% 30%, var(--accent-3) 0%, #6a0052 55%, #100012 100%);
}

/* Badge */
.badge{
  position:absolute; top:.6rem; left:.6rem;
  background:#07ffd1; color:#000000; font-weight: bold;
  padding:.28rem .55rem; font-size:.8rem; border-radius:.45rem; border:1px solid var(--border);
}

.badge-new{
  position:absolute; top:.6rem; left:.6rem;
  background:#ff0095; color:#000000; font-weight: bold;
  padding:.28rem .55rem; font-size:.8rem; border-radius:.45rem; border:1px solid var(--border);
}

.badge-premium{
  position:absolute; top:.6rem; left:.6rem;
  background:#ffff00; color:#000000; font-weight: bold;
  padding:.28rem .55rem; font-size:.8rem; border-radius:.45rem; border:1px solid var(--border);
}

.badge-outcall{ 
  position:absolute; top:.6rem; left:.6rem;
  background:#40b6ff; color:#000000; font-weight: bold;
  padding:.28rem .55rem; font-size:.8rem; border-radius:.45rem; border:1px solid var(--border);
}

.badge-available-now{ 
  position:absolute; top:.6rem; left:.6rem;
  background:#00ff00; color:#000000; font-weight: bold;
  padding:.28rem .55rem; font-size:.8rem; border-radius:.45rem; border:1px solid var(--border);
}

.headback{
  background:#ff9c54; border:1px solid var(--border); border-radius:.6rem; padding:.75rem 1rem; margin:.75rem 0;
  h2 { color: #fff; font-family: var(--font-head); font-weight:700; text-align: center;}
  
}

/* Stars */
.stars{
  position:relative; display:inline-block; font-size:1rem; line-height:1; letter-spacing:.15rem;
}
.stars__base{ color:#7a6d88; }
.stars__fill{
  position:absolute; inset:0 auto 0 0; width: calc(var(--rating, 0) / 5 * 100%);
  color:var(--gold); white-space:nowrap; overflow:hidden; pointer-events:none;
}

/* Table */
.table-wrap{ overflow-x:auto; background:rgba(0,0,0,.50); border-radius:.7rem; border:1px solid var(--border); }
.table{
  width:100%; border-collapse:collapse; min-width:600px; color:var(--ink);
}
.table th, .table td{ text-align:left; padding:.85rem 1rem; border-top:1px solid var(--border); }
.table thead th{ background:rgba(0,0,0,.60); color:#fff; }

/* FAQ */
.faq{ padding:2.25rem 0; background:var(--panel); }
details{
  background:#ff9c54; border:1px solid var(--border); border-radius:.6rem; padding:.75rem 1rem; margin:.75rem 0;
}
summary{ cursor:pointer; font-weight:800; }

/* Pills */
.pills{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:0; padding:0; }
.pills a{
  display:inline-block; background:var(--pill); color:#ff9c54;
  text-decoration:none; padding:.44rem .7rem; border-radius:999px; border:1px solid var(--border);
}
.pills a:hover{ background:rgba(255,255,255,.16); }

/* Forms */
.form{
  display:grid; gap:.8rem; background:rgba(0,0,0,.50);
  border:1px solid var(--border); border-radius:.7rem; padding:1rem;
}
.input, .textarea, .select{
  width:100%; padding:.65rem .75rem; color:#fff; background:rgba(255,255,255,.08);
  border:1px solid var(--border); border-radius:.45rem;
}
.textarea{ min-height:140px; resize:vertical; }
label{ font-weight:800; }

/* Footer */
.site-footer{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.90));
  color:#fff; padding:2rem 0 1.25rem; border-top:1px solid var(--border);
}
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2rem; }
@media (max-width: 992px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } }
.list{ list-style:none; margin:0; padding:0; }
.list a{ color:#ffffff; text-decoration:none; }
.list a:hover{ text-decoration:underline; }
.copy{ border-top:1px solid rgba(255,255,255,.16); margin-top:1.25rem; padding-top:.9rem; text-align:center; color:var(--ink-3); }

.logo {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  font-family: Arial, sans-serif;
}

.logo img {
  height: 60px;
  width: auto;
}

p {
  text-align: justify;
}