/*
Theme Name: Mediark Holding Theme
Theme URI: https://mediark.ae
Author: Mediark
Author URI: https://mediark.ae
Description: A clean holding/landing page theme for Mediark (Dubai & UK) with hero, services, CTAs, and contact details. Optimised for latest WordPress.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: mediark
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root { --navy:#001F3F; --cyan:#00BFFF; --white:#FFFFFF; }
html, body { margin:0; padding:0; background:var(--navy); color:var(--white); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif }
a { color: var(--cyan); text-decoration: none }

.mediark-wrap { min-height:100vh; display:grid; grid-template-rows: 1fr auto;
  background: radial-gradient(1100px 520px at 90% -10%, rgba(0,191,255,.25), transparent 60%),
              linear-gradient(135deg, #07162a 0%, #0c2442 50%, #0b213d 100%);
}
.mediark-main { padding: clamp(20px, 5vw, 20px) }
.mediark-hero { display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(16px, 4vw, 48px); align-items:center }
.mediark-logo-wrap { text-align:center; margin-bottom: clamp(16px, 3vw, 28px) }
.mediark-logo-wrap img { width: clamp(220px, 32vw, 360px); height:auto;
  filter: drop-shadow(0 16px 36px rgba(0,191,255,0.50)) drop-shadow(0 6px 16px rgba(0,0,0,0.40));
  opacity:0; transform: translateY(12px); animation: mediarkFadeUp .9s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.mediark-hero h1 { font-size: clamp(32px, 6vw, 64px); line-height:1.05; margin:.15em 0 .3em; font-weight:900; text-align:center;
  opacity:0; transform: translateY(10px); animation: mediarkFadeUp .9s cubic-bezier(.2,.8,.2,1) .22s forwards;
}
.mediark-lead { font-size: clamp(16px, 2.2vw, 20px); opacity:.92; text-align:center; max-width: 60ch; margin: 0 auto;
  opacity:0; transform: translateY(8px); animation: mediarkFadeUp .9s cubic-bezier(.2,.8,.2,1) .34s forwards;
}
.mediark-cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:18px;
  opacity:0; transform: translateY(6px); animation: mediarkFadeUp .9s cubic-bezier(.2,.8,.2,1) .46s forwards;
}
.mediark-btn { padding:14px 18px; border-radius:12px; border:2px solid transparent; font-weight:800; letter-spacing:.2px; box-shadow: 0 10px 24px rgba(0,0,0,.22) }
.mediark-btn-primary { background: var(--cyan); color:#052038 }
.mediark-btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.18); border-style: solid }

.mediark-panel { backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding: clamp(16px, 3vw, 28px) }
.mediark-services { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px }
.mediark-service { padding:16px; border-radius:14px; background: rgba(7,22,42,.35); border:1px solid rgba(255,255,255,.12) }
.mediark-service h3 { margin:0 0 6px; font-size:18px }
.mediark-service p { margin:0; font-size:14px; opacity:.9 }
.mediark-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px }

.mediark-footer { padding: 22px clamp(16px,4vw,48px); color:#cfe5ff; font-size:13px; opacity:.9 }
.mediark-floating { position:fixed; right:16px; bottom:16px; display:flex; gap:10px; z-index:10 }
.mediark-pill { padding:10px 14px; border-radius:999px; background: var(--cyan); color:#002038; font-weight:800; box-shadow:0 10px 24px rgba(0,191,255,.35) }

@media (max-width: 980px) { .mediark-hero { grid-template-columns:1fr } }
@media (max-width: 560px) { .mediark-services { grid-template-columns:1fr } }
@keyframes mediarkFadeUp { to { opacity:1; transform:none } }