:root{
  --bg:#0b0c10;
  --panel:#0f1117;
  --text:#e6e6e6;
  --muted:#a1a1aa;
  --primary:#7b5cff;         /* brand violet */
  --primary-2:#02c39a;       /* accent teal */
  --ring:rgba(123,92,255,.35);
  --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
  /* Dubai skyline hero */
  --hero-img:url('https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?q=80&w=2100&auto=format&fit=crop');
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(123,92,255,.22), transparent 70%),
    radial-gradient(1200px 800px at 110% 10%, rgba(2,195,154,.18), transparent 70%),
    var(--bg);
}

/* Navbar */
.navbar{
  position:sticky;top:0;z-index:30;
  background:rgba(11,12,16,.6);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-container{
  max-width:1100px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
/* NAV logo — image only */
.logo{
  display:flex;
  align-items:center;    /* center-align the logo image */
  gap:10px;
  text-decoration:none;
  color:var(--text);
  letter-spacing:.2px;
}

/* The actual SVG/IMG logo */
.logo-mark{
  height:80px;           /* tweak as you like */
  width:auto;
  display:block;
}

/* Hide the text parts (AIprop / Match / .com) */
.logo-ai,
.logo-match,
.logo-dot{
  display:none !important;
}

.nav-actions{display:flex;align-items:center;gap:12px}
.link{color:var(--muted);text-decoration:none;font-weight:600}
.link:hover{color:#fff}

/* Buttons */
.btn{border:0;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer;transition:transform .12s ease, box-shadow .2s ease;letter-spacing:.2px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),#9b86ff);color:#0d0d0f;box-shadow:0 8px 30px rgba(123,92,255,.25)}
.btn-primary:hover{box-shadow:0 12px 36px rgba(123,92,255,.35)}
.btn-secondary{background:#1b1e27;color:#fff;border:1px solid var(--border)}
.btn-lg{padding:14px 20px;font-size:16px}
.btn-full{width:100%}

/* HERO */
.hero{position:relative;min-height:86vh;display:grid;place-items:center;padding:86px 16px 46px;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;background-image:var(--hero-img);
  background-size:cover;background-position:center 60%;
  filter:saturate(115%) contrast(110%);z-index:-3;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,12,16,.35), rgba(11,12,16,.75) 45%, rgba(11,12,16,.94) 85%),
    radial-gradient(80% 50% at 50% 0%, rgba(123,92,255,.25), transparent 60%);
  z-index:-2;
}
/* decorative grid lines */
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px);
  mask:linear-gradient(180deg, rgba(0,0,0,.5), transparent 60%);
  z-index:-1;
}
.hero-content{max-width:960px;text-align:center}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(2,195,154,.12);border:1px solid rgba(2,195,154,.35);color:#ccfff1;font-weight:700;margin-bottom:14px}
.hero-title{font-size:52px;line-height:1.02;margin:8px 0 6px;font-weight:800;letter-spacing:-.6px}
.highlight{background:linear-gradient(90deg,var(--primary-2), #7b5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{font-size:22px;color:#eaeaea;margin:0 0 8px;font-weight:700}
.hero-description{color:#d1d1d6;max-width:760px;margin:0 auto 22px;font-size:16px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.trust-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.trust-chip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.06);font-weight:700;color:#e8e8ff}

/* Sections */
.container{max-width:1100px;margin:0 auto;padding:56px 16px}
.eyebrow{color:#cfe9ff;font-weight:800;letter-spacing:.3px;margin-bottom:6px}
.section-title{font-size:32px;margin:0 0 10px;letter-spacing:-.3px}
.section-description{color:#aeb3c2;max-width:760px}

/* Feature Grid */
.features-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:950px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.features-grid{grid-template-columns:1fr}}

/* Card — upgraded styling */
.feature-card{
  position:relative;
  border-radius:20px;
  background:linear-gradient(180deg,#0f1320,#0c101a);
  border:1px solid transparent;
  padding:20px;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  isolation:isolate;
}
/* subtle gradient border via pseudo */
.feature-card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:22px;
  padding:1px;
  background:linear-gradient(135deg, rgba(123,92,255,.8), rgba(2,195,154,.8));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* soft glow */
.feature-card::after{
  content:""; position:absolute; inset:-20% -20% auto -20%;
  height:120px; z-index:-2; border-radius:50%;
  background:radial-gradient(closest-side, rgba(123,92,255,.25), transparent);
  opacity:0; transition:opacity .25s ease, transform .25s ease;
  transform:translateY(10px);
}
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.feature-card:hover::after{opacity:1; transform:translateY(0)}

.feature-icon{
  display:inline-grid; place-items:center;
  width:46px;height:46px; border-radius:12px;
  background:radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:22px;
}
.feature-card h3{margin:10px 0 6px;font-size:18px;letter-spacing:.1px}
.feature-card p{margin:0;color:#c8c8d2}

/* Support for core list icon boxes */
.feature-icon-box{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:20px;
}

/* =====================================================
   Engine card BLUR (headings + descriptions) — LOCK ONLY
   - Always blurred via .ai-blur
   - Only unblurs when the card has .revealed (from lock)
   - No hover/focus reveal
   ===================================================== */
#engine .feature-card .ai-blur{
  filter: blur(5px);
  transition: filter .25s ease;
  user-select: none;
  cursor: default; /* no hover reveal */
}
#engine .feature-card.revealed .ai-blur{
  filter: blur(0);
}
/* Neutralize any previous hover/focus rules if present */
#engine .feature-card:hover .ai-blur,
#engine .feature-card:focus-within .ai-blur{
  filter: blur(5px);
}

/* Lock button inside card */
#engine .feature-card{ position: relative; }
#engine .feature-card .card-lock{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#engine .feature-card .card-lock:hover{
  background: rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
#engine .feature-card .card-lock:active{ transform: translateY(1px); }
#engine .feature-card.revealed .card-lock{
  background: rgba(2,195,154,.15);
  border-color: rgba(2,195,154,.45);
}

/* ============================
   Registration section styles
   ============================ */
.reg-section .section-description{margin-bottom:18px}
.reg-card{
  background:linear-gradient(180deg,#0f1320,#0c101a);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.reg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px){ .reg-grid{ grid-template-columns:1fr; } }

.reg-col .form-row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.reg-col input[type="text"],
.reg-col input[type="email"],
.reg-col input[type="tel"],
.reg-col select{
  background:#0b0e14;color:#fff;border:1px solid var(--border);border-radius:12px;
  padding:12px 12px;font-size:15px;outline:2px solid transparent;outline-offset:1px;
}
.reg-col input:focus, .reg-col select:focus{ outline-color: var(--ring); }

.form-fieldset{
  margin:14px 0; padding:12px; border:1px dashed var(--border); border-radius:14px;
}
.form-fieldset legend{ padding:0 6px; color:#cfe9ff; font-weight:800; letter-spacing:.2px }

.checkbox-list, .radio-list{ display:grid; gap:8px; }
.checkbox-list.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
@media (max-width:560px){ .checkbox-list.cols-2{ grid-template-columns:1fr; } }
.checkbox-list label, .radio-list label{ display:flex; gap:10px; align-items:center; color:#d1d1dc; }
.checkbox-list input, .radio-list input{ transform:translateY(1px); }

.reg-actions{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.reg-note{ color:#a1a1aa }

/* Mission */
.mission-section .mission-description{
  background:linear-gradient(135deg, rgba(123,92,255,.18), rgba(2,195,154,.18));
  border:1px solid var(--border);
  padding:18px;border-radius:var(--radius);
}

/* CTA */
.cta-section .container{
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border-top:1px solid var(--border);
}

/* Footer */
.footer{border-top:1px solid var(--border);background:#0d0f15;color:#bcbcc5}
.footer .container{padding:22px 16px;text-align:center}

/* Modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:50}
.modal[aria-hidden="true"]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal-content{
  position:relative;z-index:1;width:min(560px,92vw);
  background:#0f121a;border:1px solid var(--border);
  border-radius:20px;padding:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.modal-title{margin:4px 0 6px}
.modal-description{color:#cfcfe1;margin:0 0 10px}
.modal-close{
  position:absolute;top:10px;right:10px;border:0;border-radius:10px;
  background:#161a24;color:#fff;width:36px;height:36px;font-size:20px;cursor:pointer;
  border:1px solid var(--border)
}
.form-row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.form-row input,.form-row select{
  background:#0b0e14;color:#fff;border:1px solid var(--border);border-radius:12px;
  padding:12px 12px;font-size:15px;outline:2px solid transparent;outline-offset:1px;
}
.form-row input:focus,.form-row select:focus{outline-color:var(--ring)}
.checkbox{display:flex;align-items:center;gap:8px;margin:10px 0;color:#c7c7d4}

/* Toast */
.toast{
  position:fixed;bottom:16px;right:16px;background:#11141b;border:1px solid var(--border);
  padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:700;
}

/* Utilities */
.hidden{display:none!important}
.reg-success{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(2,195,154,.12);
  border:1px solid rgba(2,195,154,.45);
  color:#ccfff1;
  font-weight:700;
}

/* Mission + Vision combined */
.vm-section .section-title { margin-bottom: 12px; }

.vm-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .vm-grid { grid-template-columns: 1fr; }
  .vm-right { margin-top: 20px; }
}

/* text cards (left) */
.vm-cards { display: grid; gap: 16px; }
.vm-card {
  background: linear-gradient(180deg,#0f1320,#0c101a);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.vm-card h3 { margin: 0 0 6px; }
.vm-card p { margin: 0; color: #cfd3de; }

/* right column: image + new card */
.vm-right { display: grid; gap: 18px; }

/* banner image styling */
.vm-banner {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 36px rgba(0,0,0,.45);
  position: relative;
}
.vm-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,16,.10), rgba(11,12,16,.22));
  pointer-events: none;
}
.vm-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* special tech ecosystem card */
.extra-mission {
  background: linear-gradient(180deg, rgba(2,195,154,.12), rgba(123,92,255,.10));
  border: 1px solid rgba(2,195,154,.25);
  color: #d9fff3;
}
/* Highlighted second line in hero description */
.hero-highlight{
  display:inline-block;
  margin-top:6px;
  padding:6px 10px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(123,92,255,.18), rgba(2,195,154,.18));
  border:1px solid var(--border);
  font-weight:800;
  color:#e9e9ff;
}
/* Center everything in the CTA block */
.cta-section .container{
  text-align:center !important;
}

/* Center the line itself + keep a nice readable width */
.cta-section .section-description{
  text-align:center;
  margin:8px auto 10px;   /* centers the block */
  max-width:760px;        /* responsive line length */
  line-height:1.5;
}

/* Optional: balance line breaks on modern browsers */
@supports (text-wrap: balance){
  .cta-section .section-description{ text-wrap: balance; }
}

.footer-qr img {
    width: 60px;
    /* smaller QR size */
    max-width: 18vw;
    /* stays small on mobile too */
    border-radius: 10px;
}

.btn,
.btn:link,
.btn:visited {
    text-decoration: none;
    /* remove underline */
}

.btn-subtext {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 2px;
}