/* ==========================================================
   omni.css (SUPER POLISHED)
   Goal: premium, serious, clean. Better cards + buttons + backgrounds.
   Works with your existing classes:
   .wrap .hero .card .grid .btn .ghost .cta .badges .badge .chip .mini
   .wtf-* sections, tables (.mini-rates .responsive), contact form labels.
   ========================================================== */

/* ============ TOKENS ============ */
:root{
  --bg0:#0B0C10;
  --bg1:#0F1220;
  --bg2:#141A2A;

  --text:#F6F2EA;
  --muted:#C9C2B8;

  --accent:#D7A9A2;  /* rose-gold */
  --accent2:#7D7AF2; /* lilac */
  --ok:#2ED3B7;
  --danger:#FF5A7A;

  --line:rgba(246,242,234,.12);
  --line2:rgba(246,242,234,.08);
  --ring:rgba(125,122,242,.30);

  --r:18px;
  --r2:14px;

  --shadow:0 34px 92px rgba(0,0,0,.76);
  --shadow2:0 16px 42px rgba(0,0,0,.56);

  --max:1120px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease2:cubic-bezier(.16,1,.3,1);

  --glass1:rgba(246,242,234,.06);
  --glass2:rgba(246,242,234,.015);
}

/* ============ RESET ============ */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
a{text-decoration:none}
button,input,select,textarea{font:inherit}
table{border-collapse:separate;border-spacing:0}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
::selection{background:rgba(215,169,162,.24);color:var(--text)}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:12px}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ============ BASE + BACKGROUND ============ */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;

  background:
    radial-gradient(1200px 900px at 12% -18%, rgba(215,169,162,.18), transparent 62%),
    radial-gradient(980px 760px at 92% 0%, rgba(125,122,242,.13), transparent 60%),
    radial-gradient(980px 860px at 58% 118%, rgba(246,242,234,.03), transparent 64%),
    linear-gradient(180deg, var(--bg2), var(--bg1) 48%, var(--bg0));
}

/* grain + vignette + subtle sheen */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 26%, rgba(246,242,234,.045), transparent 62%),
    radial-gradient(120% 110% at 50% 50%, transparent 54%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(246,242,234,.025), transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 5px);
  opacity:.9;
  mix-blend-mode: overlay;
}

a{color:rgba(246,242,234,.90)}
a:hover{color:var(--accent)}

/* ============ LAYOUT ============ */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding: clamp(16px, 2.2vw, 26px) clamp(14px, 2vw, 20px);
}
.site-main{padding-bottom:30px}

/* ============ TOPBAR / FOOTER (safe defaults) ============ */
.site-top{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(11,12,16,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line2);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}
.brand{color:var(--text);font-weight:950;letter-spacing:.02em}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:rgba(246,242,234,.86);font-weight:750;padding:.32rem .10rem}
.nav a:hover{color:var(--accent)}

.site-foot{
  border-top:1px solid var(--line2);
  background: rgba(11,12,16,.46);
}
.foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:16px 0;
  color:rgba(201,194,184,.95);
}
.foot a{color:rgba(246,242,234,.86)}
.foot a:hover{color:var(--accent)}
.sep{opacity:.4}

/* ============ TYPO ============ */
h1,h2,h3,h4{margin:0}
p{margin:0 0 12px}
.wtf-title{
  margin:0 0 10px;
  font-weight:980;
  letter-spacing:-.035em;
  line-height:1.03;
  font-size: clamp(34px, 4.9vw, 68px);
}
.wtf-subtitle{
  margin:0 0 16px;
  color:rgba(201,194,184,.96);
  font-weight:720;
  max-width:62ch;
}
.wtf-h3{
  font-weight:950;
  letter-spacing:-.02em;
  font-size: clamp(18px, 2.2vw, 22px);
}
.wtf-h4{
  font-weight:900;
  letter-spacing:-.01em;
  color:rgba(246,242,234,.92);
}
.wtf-muted{margin:0;color:rgba(201,194,184,.95);font-weight:700;max-width:70ch}

/* ============ GRID ============ */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

/* ============ CARDS (big upgrade) ============ */
.card{
  padding:18px;
  border-radius: var(--r);
  background:
    linear-gradient(180deg, var(--glass1), var(--glass2)),
    radial-gradient(980px 420px at 14% 0%, rgba(215,169,162,.12), transparent 62%),
    radial-gradient(900px 420px at 92% 10%, rgba(125,122,242,.09), transparent 62%);
  border:1px solid rgba(246,242,234,.11);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  transition: transform .18s var(--ease2), box-shadow .18s var(--ease2), border-color .18s var(--ease2), filter .18s var(--ease2);
}

/* subtle inner highlight */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(246,242,234,.05), transparent 50%),
    radial-gradient(100% 120% at 80% 0%, rgba(215,169,162,.06), transparent 55%);
  opacity:.9;
}

/* gradient ring (safe) */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(246,242,234,.08) inset,
    0 0 0 1px rgba(0,0,0,.25);
  opacity:1;
}

@media (hover:hover){
  .card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(215,169,162,.22);
    filter: saturate(1.06);
  }
}

/* ============ HERO WRAP (polish) ============ */
.wtf-page{border-bottom:1px solid var(--line2)}
.wrap.hero{
  margin-top: 8px;
  border-radius: calc(var(--r) + 8px);
  padding-top: 18px;
  padding-bottom: 18px;
  position:relative;
}
.wrap.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(1200px 360px at 12% 0%, rgba(215,169,162,.16), transparent 62%),
    radial-gradient(980px 360px at 92% 0%, rgba(125,122,242,.12), transparent 62%),
    linear-gradient(180deg, rgba(246,242,234,.04), rgba(246,242,234,.01));
  border:1px solid rgba(246,242,234,.09);
  box-shadow: 0 18px 56px rgba(0,0,0,.55);
}

/* layout inside hero */
.wtf-hero{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){ .wtf-hero{grid-template-columns:1fr} }

.wtf-hero__copy{padding: 4px 6px}
.wtf-hero__panel{position:relative}
.wtf-hero__panel.card{padding:18px}

.wtf-panel__title{margin:10px 0 6px;font-weight:950;letter-spacing:-.01em}
.wtf-panel__text{margin:0 0 12px;color:rgba(201,194,184,.96);font-weight:650}
.wtf-panel__actions{display:flex;gap:10px;flex-wrap:wrap}

.wtf-panel__meta{
  margin-top:14px;
  display:grid;
  grid-template-columns: auto 1fr;
  gap:10px 10px;
  align-items:center;
}
.wtf-dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(215,169,162,.95);
  box-shadow:0 0 0 3px rgba(215,169,162,.14);
  display:inline-block;
}

/* ============ BUTTONS (big upgrade) ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  padding: .95rem 1.20rem;
  border-radius: 999px;

  font-weight: 950;
  letter-spacing: .01em;

  border: 1px solid rgba(246,242,234,.16);
  background: rgba(246,242,234,.04);
  color: rgba(246,242,234,.94);

  cursor: pointer;
  user-select: none;

  transform: translateZ(0);
  transition:
    transform .16s var(--ease2),
    filter .18s var(--ease2),
    background .18s var(--ease2),
    border-color .18s var(--ease2),
    box-shadow .18s var(--ease2);
}

/* primary */
.btn:not(.ghost){
  color:#0B0C10;
  border-color: rgba(246,242,234,.12);
  background:
    linear-gradient(90deg,
      rgba(215,169,162,.98),
      rgba(246,242,234,.10) 60%,
      rgba(125,122,242,.14)
    );
  box-shadow:
    0 18px 48px rgba(0,0,0,.56),
    0 0 0 1px rgba(246,242,234,.10) inset,
    0 20px 70px rgba(215,169,162,.22);
}

/* ghost */
.btn.ghost{
  color: rgba(246,242,234,.92);
  background: rgba(246,242,234,.03);
  border-color: rgba(246,242,234,.18);
  box-shadow:none;
}

/* hover */
@media (hover:hover){
  .btn:hover{transform: translateY(-2px); filter: brightness(1.04)}
  .btn:not(.ghost):hover{
    box-shadow:
      0 24px 62px rgba(0,0,0,.66),
      0 0 0 1px rgba(246,242,234,.12) inset,
      0 26px 92px rgba(215,169,162,.30);
  }
  .btn.ghost:hover{
    border-color: rgba(215,169,162,.34);
    background: rgba(215,169,162,.10);
    box-shadow: 0 18px 54px rgba(0,0,0,.44);
  }
}

.btn:active{transform: translateY(1px) scale(.99)}
.btn:focus-visible{outline:0; box-shadow: 0 0 0 4px rgba(125,122,242,.22)}

/* ============ CTA / BADGES / CHIPS / MINI ============ */
.cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.badges{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge{
  padding:.46rem .84rem;
  border-radius:999px;
  border:1px solid rgba(246,242,234,.14);
  background: rgba(246,242,234,.035);
  font-weight:850;
  color:rgba(246,242,234,.92);
}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.30rem .66rem;border-radius:999px;
  border:1px solid rgba(246,242,234,.14);
  background: rgba(246,242,234,.03);
  color:rgba(246,242,234,.92);
  font-weight:900;
  letter-spacing:.02em;
  font-size:12.5px;
  white-space:nowrap;
}

.mini{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:8px;
}
.mini li{
  position:relative;
  padding-left:24px;
  margin:0;
  color:rgba(246,242,234,.92);
}
.mini li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:-1px;
  color:var(--accent);
  font-weight:950;
}

/* ============ SERVICES CARDS ============ */
.wtf-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.wtf-card p{color:rgba(201,194,184,.96);font-weight:650}

/* ============ COMPARE ============ */
.wtf-compare__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 980px){ .wtf-compare__grid{grid-template-columns:1fr} }
.wtf-compare__col{padding:16px}
.wtf-compare__col--pro{
  border-color: rgba(215,169,162,.24);
  background:
    linear-gradient(180deg, rgba(215,169,162,.10), rgba(246,242,234,.01)),
    radial-gradient(980px 360px at 70% 0%, rgba(125,122,242,.10), transparent 60%);
}

/* ============ TABLES (supports your classes) ============ */
.table{padding:18px}

table.mini-rates, .mini-rates, table.responsive{
  width:100%;
  border-radius: var(--r2);
  overflow:hidden;
  border:1px solid rgba(246,242,234,.12);
  background: rgba(11,12,16,.30);
  min-width:520px;
}
table.mini-rates th, table.mini-rates td,
.mini-rates th, .mini-rates td,
table.responsive th, table.responsive td{
  padding:12px 14px;
  border-bottom:1px solid rgba(246,242,234,.09);
  text-align:left;
}
table.mini-rates thead th,
.mini-rates thead th,
table.responsive thead th{
  font-weight:950;
  letter-spacing:.02em;
  background:
    linear-gradient(90deg,
      rgba(215,169,162,.18),
      rgba(125,122,242,.12),
      rgba(246,242,234,.06)
    );
  border-bottom:1px solid rgba(246,242,234,.12);
  white-space:nowrap;
}
table.mini-rates tbody tr:nth-child(odd),
.mini-rates tbody tr:nth-child(odd),
table.responsive tbody tr:nth-child(odd){background: rgba(246,242,234,.02)}
table.mini-rates tbody tr:hover,
.mini-rates tbody tr:hover,
table.responsive tbody tr:hover{background: rgba(246,242,234,.065)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* mobile table -> stacked */
@media (max-width: 640px){
  table.mini-rates, .mini-rates, table.responsive{
    display:block;min-width:0;width:100%;
    border:0;background:transparent;
  }
  table.mini-rates thead, .mini-rates thead, table.responsive thead{display:none}
  table.mini-rates tbody, .mini-rates tbody, table.responsive tbody{display:grid;gap:10px}
  table.mini-rates tr, .mini-rates tr, table.responsive tr{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(246,242,234,.14);
    background: rgba(246,242,234,.04);
  }
  table.mini-rates th, table.mini-rates td,
  .mini-rates th, .mini-rates td,
  table.responsive th, table.responsive td{padding:0;border:0}
  td.num{justify-self:end;font-weight:950}
}

/* ============ FAQ (details) ============ */
details{
  border-radius: var(--r2);
  overflow:hidden;
  border:1px solid rgba(246,242,234,.12);
  background: rgba(246,242,234,.03);
  margin-top:12px;
}
details summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:950;
  letter-spacing:-.01em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
details summary::after{
  content:"+";
  font-weight:950;
  color:var(--accent);
  opacity:.95;
}
details[open] summary::after{content:"–"}
details p{
  padding:0 16px 16px;
  margin:0;
  color:rgba(246,242,234,.92);
  line-height:1.52;
}

/* ============ CONTACT (works with your current markup) ============ */
.contact h1{
  margin: 0 0 10px;
  font-weight: 980;
  letter-spacing: -.03em;
  line-height: 1.06;
  font-size: clamp(26px, 3.2vw, 44px);
}
.alert{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(246,242,234,.14);
  background: rgba(246,242,234,.04);
  margin: 12px 0 0;
}
.alert.ok{border-color: rgba(46,211,183,.22); background: rgba(46,211,183,.10)}
.alert.err{border-color: rgba(255,90,122,.26); background: rgba(255,90,122,.10)}

.form{display:grid;gap:14px}
label{
  display:grid;
  gap:8px;
  color:rgba(246,242,234,.92);
  font-weight:850;
}
input[type="text"],input[type="email"],input[type="tel"],textarea,select{
  width:100%;
  min-height:44px;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid rgba(246,242,234,.14);
  background: rgba(11,12,16,.44);
  color: var(--text);
  outline:none;
  transition: border-color .18s var(--ease2), background .18s var(--ease2), box-shadow .18s var(--ease2);
}
textarea{min-height:160px; resize:vertical; line-height:1.45}
input:focus,textarea:focus,select:focus{
  border-color: rgba(125,122,242,.46);
  box-shadow: 0 0 0 4px rgba(125,122,242,.18);
  background: rgba(11,12,16,.60);
}
input[type="file"]{
  width:100%;
  border-radius:14px;
  padding:12px 12px;
  border:1px dashed rgba(246,242,234,.22);
  background: rgba(11,12,16,.28);
  color: rgba(246,242,234,.90);
}
fieldset.field-group{
  border-radius:16px;
  border:1px solid rgba(246,242,234,.12);
  background: rgba(246,242,234,.02);
  padding:14px;
}
fieldset.field-group legend{
  padding:0 8px;
  font-weight:950;
  color: rgba(246,242,234,.92);
}
.tips.small{padding:16px}

/* ============ MOBILE POLISH ============ */
@media (max-width: 640px){
  .cta{display:grid}
  .btn{width:100%}
  .badge{width:100%;text-align:center}
  .wrap.hero{padding-top:16px;padding-bottom:16px}
}

/* ==========================================================
   OMNI PANEL LOGO PATCH (PREMIUM)
   ========================================================== */
.wtf-panel__top{position:relative}
.wtf-panel__logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin: 6px 0 10px;
}
.wtf-panel__logo img{
  width: min(190px, 78%);
  height:auto;
  display:block;
  opacity:.98;
  transform: translateZ(0);
  filter:
    drop-shadow(0 14px 30px rgba(0,0,0,.62))
    drop-shadow(0 0 22px rgba(215,169,162,.22))
    drop-shadow(0 0 18px rgba(125,122,242,.16));
}
@media (max-width: 980px){
  .wtf-panel__logo{justify-content:flex-start}
}
@media (max-width: 640px){
  .wtf-panel__logo{justify-content:center}
  .wtf-panel__logo img{width:min(210px, 82%)}
}

/* OMNI PANEL LOGO PATCH (HARD) */
.wtf-panel__top{position:relative;display:grid;gap:10px}

.wtf-panel__logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin: 6px 0 12px;
}

.wtf-panel__logo img{
  width: min(210px, 82%);
  height:auto;
  display:block;
  opacity:1;
  transform: translateZ(0);
  filter:
    drop-shadow(0 16px 34px rgba(0,0,0,.70))
    drop-shadow(0 0 26px rgba(215,169,162,.26))
    drop-shadow(0 0 20px rgba(125,122,242,.20));
}

@media (max-width: 980px){
  .wtf-panel__logo{justify-content:flex-start}
}
@media (max-width: 640px){
  .wtf-panel__logo{justify-content:center}
  .wtf-panel__logo img{width:min(230px, 86%)}
}