/* EventBridge Tech — Bright Premium Theme (ClickDealer-inspired) */
:root{
  /* Brand + neutrals */
  --brand:#ff7a00;            /* vibrant orange */
  --brand-2:#ff9a1a;          /* lighter orange for gradient */
  --ink:#1c2233;              /* dark ink for light surfaces */
  --ink-sub:#4a566f;          /* muted ink */
  --text:#eaf0f7;             /* light text on dark */
  --sub:#bfcadb;              /* muted text on dark */

  /* Surfaces */
  --bg-start:#0e1a3a;         /* deep navy */
  --bg-mid:#0b1740;           /* rich indigo */
  --bg-end:#0a1230;           /* almost-black navy */

  --header:#ffffffcc;         /* frosted white header */
  --card:#121a2b;             /* dark card surface */
  --muted:#182238;            /* inputs / muted blocks */

  /* Effects */
  --ring: rgba(255,122,0,.35); /* focus/brand glow */
  --radius:18px;
  --shadow:0 10px 28px rgba(0,0,0,.28);
  --shadow-soft:0 12px 40px rgba(5,16,45,.35);
}

/* Resets */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(255,122,0,.12), transparent 60%),
    linear-gradient(180deg,var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1200px,92vw); margin:0 auto}

/* Header (shared across pages) */
.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(140%) blur(10px);
  background:var(--header);
  border-bottom:1px solid rgba(10,19,40,.08);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.logo{height:48px; width:auto}

.nav{display:flex; gap:22px; margin-left:auto}
.nav a{
  color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:.1px;
  opacity:.9; transition:opacity .15s ease, color .15s ease;
}
.nav a:hover{opacity:1; color:#111827}
.nav a.active{
  color:#111827;
  position:relative;
}
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:2px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none; font-weight:700; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  color:#111827; background:#fff;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.08)}
.btn.primary{
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent; box-shadow:0 10px 26px var(--ring);
}
.btn.primary:hover{opacity:.95}

/* Hero */
.hero{padding:56px 0 28px}
.hero-inner{
  display:grid; grid-template-columns: 1.05fr 1.2fr; gap:36px; align-items:center;
}
.hero h1{
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:1.05; margin:4px 0 10px; letter-spacing:-.6px;
}
.hero p{color:var(--sub); margin:0 0 18px; font-size:clamp(16px, 1.6vw, 18px)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* Slider (1101x666) */
.slider-wrap{
  width:1101px; height:666px; max-width:100%;
  justify-self:end; position:relative; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
}
.slider{
  display:flex; width:100%; height:100%; transform: translateX(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.slide{min-width:100%; height:100%}
.slide img{width:100%; height:100%; object-fit:cover; display:block}

/* Slider controls */
.slider-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  background:rgba(9,14,30,.45); border:1px solid rgba(255,255,255,.25);
  width:46px; height:46px; border-radius:50%; color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter: blur(6px);
  transition: background .2s ease, transform .06s ease;
}
.slider-btn:hover{background:rgba(9,14,30,.6); transform: translateY(-50%) scale(1.03)}
.slider-btn.prev{left:12px}
.slider-btn.next{right:12px}

.slider-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:9px; padding:6px 10px; border-radius:999px;
  background:rgba(9,14,30,.35); backdrop-filter: blur(6px);
}
.slider-dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.25); cursor:pointer;
}
.slider-dots button.active{background:#fff}

/* Sections */
.section{padding:70px 0}
.section.alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
}

/* Layout helpers */
.two-col{display:grid; grid-template-columns: 1.4fr .8fr; gap:30px; align-items:start}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.card:hover{box-shadow:0 16px 44px rgba(5,16,45,.45)}

/* Values & Services grids */
.values-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
.value{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:18px
}

.services-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
.services-grid .card h3{margin-top:6px}

/* Contact */
.contact{color:var(--sub)}
.contact-form label{display:block; margin:10px 0}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--muted); color: var(--text);
  transition: box-shadow .2s ease, outline .2s ease, border-color .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid var(--ring); border-color: transparent; box-shadow:0 0 0 4px rgba(255,122,0,.18)
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px 0; color:var(--sub);
  background:linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.02));
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.to-top{color:var(--sub); text-decoration:none}
.to-top:hover{color:#fff}

/* Accessibility */
:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:3px;
  border-radius:6px;
}

/* Responsive */
@media (max-width: 1180px){
  .hero-inner{grid-template-columns: 1fr; gap:24px}
  .slider-wrap{justify-self:stretch}
}
@media (max-width: 1024px){
  .two-col{grid-template-columns: 1fr}
  .values-grid{grid-template-columns: repeat(2,1fr)}
  .services-grid{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 640px){
  .nav{display:none}
  .values-grid{grid-template-columns: 1fr}
  .services-grid{grid-template-columns: 1fr}
}