/* =========================
   Core Theme & Resets
   ========================= */
:root{
  --brand-50:#f0fdf4; --brand-100:#dcfce7; --brand-200:#bbf7d0;
  --brand-300:#86efac; --brand-400:#4ade80; --brand-500:#22c55e;
  --brand-600:#16a34a; --brand-700:#15803d; --brand-800:#166534; --brand-900:#14532d;

  --ink:#0f172a; --muted:#475569; --border:#e5e7eb;
  --bg:#ffffff; --bg-alt:#f8fafc; --focus:#1d4ed8;
  --maxw:1100px;

  /* optional fallback used in booking widget */
  --bg-2:#f6f3f1;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef2f7; --muted:#b7c0cc; --border:#203042;
    --bg:#0b1220; --bg-alt:#0f172a; --focus:#60a5fa;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,"Noto Sans",Arial;
  color:var(--ink);
  background:var(--bg);
}
a{color:var(--brand-700); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

/* =========================
   Header / Navigation
   ========================= */
header{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
}
.nav{max-width:var(--maxw); margin:0 auto; padding:10px 18px; display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:800; letter-spacing:.2px; color:var(--brand-800)}
.menu{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.menu a{font-weight:600; color:var(--ink)}

/* =========================
   Layout
   ========================= */
.container{max-width:var(--maxw); margin:0 auto; padding:0 18px}

.hero{
  padding:58px 0 40px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--brand-50), transparent);
}
.hero h1{font-size:clamp(26px,4.5vw,42px); line-height:1.15; margin:0 0 8px; color:var(--brand-900)}
.lead{color:var(--muted)}

section{padding:48px 0; border-bottom:1px solid var(--border)}
h2{font-size:clamp(22px,3.2vw,32px); margin:0 0 10px}
h3{margin:22px 0 8px}
.note{color:var(--muted); font-size:14px}

/* Grid */
.grid{display:grid; gap:20px}
@media (min-width:900px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}

/* =========================
   Cards / Tiles / Badges
   ========================= */
.card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  background:color-mix(in srgb, var(--brand-50) 12%, #fff);
}
@media (prefers-color-scheme: dark){
  .card{background:color-mix(in srgb, var(--brand-800) 8%, transparent)}
}

.tile{
  position:relative;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--brand-400) 40%, var(--border));
  border-radius:16px;
  padding:22px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover{
  border-color:var(--brand-500);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(21,128,61,.35);
}
.tile h3{color:var(--brand-300); margin-top:0}
.tile p{color:var(--muted)}

.badge{
  position:absolute; top:12px; right:16px;
  background:var(--brand-600); color:#fff; font-size:13px; font-weight:700;
  padding:.25rem .6rem; border-radius:999px; box-shadow:0 2px 6px rgba(21,128,61,.35);
}

/* =========================
   Buttons & Pills
   ========================= */
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:12px;
  background:var(--brand-600); border:1px solid var(--brand-600); color:#fff; font-weight:700;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 6px rgba(21,128,61,.25);
}
.btn:hover{background:var(--brand-700); border-color:var(--brand-700); box-shadow:0 6px 18px rgba(21,128,61,.45)}

.btn.alt{
  background:transparent; color:var(--brand-400); border:1px solid var(--brand-400);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn.alt:hover{background:var(--brand-600); color:#fff; border-color:var(--brand-600); box-shadow:0 6px 18px rgba(21,128,61,.45)}

.pill{
  display:inline-block; padding:.25rem .55rem; border:1px solid var(--brand-600);
  border-radius:999px; background:var(--brand-700); color:#fff; font-weight:600;
  transition:background .2s ease, box-shadow .2s ease;
}
.pill:hover{background:var(--brand-600); box-shadow:0 4px 14px rgba(21,128,61,.45)}

/* =========================
   Tables
   ========================= */
.table{
  width:100%; border-collapse:collapse;
  border:1px solid color-mix(in srgb, var(--brand-400) 35%, var(--border));
  border-radius:12px; overflow:hidden;
}
.table th,.table td{
  padding:.6rem .75rem;
  border-bottom:1px solid color-mix(in srgb, var(--brand-400) 25%, var(--border));
  vertical-align:top;
}
.table thead th{text-align:left; background:color-mix(in srgb, var(--brand-300) 12%, transparent)}

/* =========================
   Hero Banner (image + overlay + text)
   ========================= */
.hero-banner{position:relative; border-radius:12px; overflow:hidden; margin:20px 0 28px}
.hero-img{
  display:block; width:100%; height:280px; object-fit:cover; border-radius:12px;
  filter:saturate(90%) hue-rotate(-20deg) brightness(0.9);
}
.hero-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(22,101,52,.65) 0%, rgba(22,101,52,.45) 100%);
  mix-blend-mode:multiply; pointer-events:none;
}
.hero-text{
  position:absolute; top:50%; left:40px; transform:translateY(-50%);
  color:#fff; max-width:60%; z-index:1;
}
.hero-text h1{margin:0; font-size:clamp(28px,4.5vw,48px); font-weight:800}
.hero-text .lead{margin-top:10px; font-size:18px; color:#e5e5e5}

/* =========================
   Own-your-cloud section
   ========================= */
#owncloud{
  background:transparent;
  border-bottom:1px solid color-mix(in srgb, var(--brand-400) 25%, var(--border));
}

/* =========================
   Domains (details/summary)
   ========================= */
details.domain{
  border:1px solid var(--border);
  border-radius:16px;
  margin:14px 0;
  overflow:hidden;
  background:var(--bg);
}
details.domain summary{
  cursor:pointer; padding:14px 16px; font-weight:800; background:var(--bg-alt);
}
details.domain[open] summary{border-bottom:1px solid var(--border)}
.domain-body{padding:14px 16px}

/* =========================
   Light / Dark Tweaks
   ========================= */
@media (prefers-color-scheme: light){
  .hero{
    background:
      radial-gradient(1200px 260px at 20% -10%, color-mix(in srgb, var(--brand-100) 40%, transparent), transparent),
      linear-gradient(180deg, color-mix(in srgb, var(--brand-50) 50%, transparent), transparent);
  }
  .tile{
    background:color-mix(in srgb, var(--brand-50) 25%, #fff);
    border:1px solid color-mix(in srgb, var(--brand-400) 35%, var(--border));
    box-shadow:0 3px 10px rgba(22,101,52,.06);
  }
  .tile:hover{box-shadow:0 10px 24px rgba(22,101,52,.14)}
  .tile h3{color:var(--brand-800)}
  .table{
    background:#fff;
    border:1px solid color-mix(in srgb, var(--brand-400) 30%, var(--border));
  }
  .table thead th{background:color-mix(in srgb, var(--brand-100) 45%, #fff)}
  #owncloud{
    background:linear-gradient(180deg, color-mix(in srgb, var(--brand-50) 35%, transparent), transparent);
    border-bottom:1px solid color-mix(in srgb, var(--brand-400) 20%, var(--border));
  }
}

@media (prefers-color-scheme: dark){
  .hero{background:linear-gradient(180deg, color-mix(in srgb, var(--brand-800) 12%, transparent), transparent)}
  .tile{background:transparent; box-shadow:none}
}

/* =========================
   Booking Widget (Single Source of Truth)
   ========================= */
#booking-widget{
  margin-top:12px; padding:16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:var(--bg-2);
}
#booking-widget label{display:block; font-weight:600; margin-bottom:4px}
#booking-widget input[type="text"],
#booking-widget input[type="email"],
#booking-widget input[type="date"],
#booking-widget select,
#booking-widget textarea{
  width:100%; padding:10px; border:1px solid rgba(0,0,0,.2);
  border-radius:8px; background:#fff; color:#111; box-sizing:border-box;
  caret-color:currentColor;
}
#booking-widget ::placeholder{color:#666; opacity:1}
#booking-widget input:-webkit-autofill{
  -webkit-text-fill-color:#111; transition:background-color 9999s;
}

/* Slots */
.slots-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.slot-btn{
  padding:8px 10px; border:1px solid rgba(0,0,0,.2);
  border-radius:8px; background:#fff; cursor:pointer;
}
.slot-btn[disabled]{opacity:.4; cursor:not-allowed}
.slot-btn.active{outline:2px solid var(--brand-600)}

/* Dark mode for booking */
@media (prefers-color-scheme: dark){
  #booking-widget{background:#151515; border-color:rgba(255,255,255,.12)}
  #booking-widget input[type="text"],
  #booking-widget input[type="email"],
  #booking-widget input[type="date"],
  #booking-widget select,
  #booking-widget textarea{
    background:#101010; color:#f2f2f2; border-color:rgba(255,255,255,.2)
  }
  #booking-widget ::placeholder{color:#9aa0a6}
  .slot-btn{background:#101010; color:#f2f2f2; border-color:rgba(255,255,255,.2)}
  #booking-widget input:-webkit-autofill{-webkit-text-fill-color:#f2f2f2}
}

/* Ensure hidden actually hides */
#booking-widget[hidden]{display:none !important}

/* =========================
   Contact Section Layout
   ========================= */
#contact .grid.cols-2 > .card:last-child{
  display:flex; flex-direction:column; align-items:center;
}

/* Full-width booking card + its inner elements */
#contact .booking-card{
  display:flex; flex-direction:column; align-items:center;
  max-width:820px; margin:16px auto;
}
@media (min-width:900px){
  #contact .booking-card{max-width:none; margin:16px 0}
  #contact .booking-card > #open-booking,
  #contact .booking-card > #booking-widget{
    width:100%; max-width:none; margin-left:0; margin-right:0;
  }
}

/* Contact intro + compact CTA */
#contact .contact-intro{text-align:left}
#contact .contact-intro .btn.sm{
  display:inline-block; padding:.55rem .9rem; font-size:.95rem;
  line-height:1.1; border-radius:10px; margin-top:12px;
}
/* Do not force full width inside intro card */
#contact .contact-intro #open-booking{
  width:auto; max-width:none; margin-left:0; margin-right:0;
}
/* Keep the widget full-width under the section */
#contact #booking-widget{
  width:100%; max-width:none; margin:12px 0 0 0; padding:16px;
}


/* Small left-aligned consultation button */
#contact #open-booking {
  width: auto !important;         
  max-width: max-content !important;
  display: inline-block !important;
  padding: .55rem 1rem;
  font-size: 0.95rem;
  border-radius: 8px;
  margin: 12px 0;        /* space but no centering */
}


/* Contact layout: email (left) + small CTA (right) + full-width form below */
#contact .contact-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
}

/* Make the booking card span both columns (full width under the header row) */
#contact .booking-card{ grid-column: 1 / -1; }

/* Small CTA button */
#contact #open-booking{
  width:auto !important;
  max-width:max-content !important;
  display:inline-block !important;
  padding:.55rem 1rem;
  font-size:.95rem;
  border-radius:8px;
  margin:0;  /* no extra margins so it visually hugs the right side */
}

/* Right column container aligns the CTA vertically centered to the email card */
#contact .cta-col{
  display:flex;
  align-items:center;
}

/* Keep the form full-width inside its card */
#contact #booking-widget{ width:100%; }

/* Mobile: stack nicely */
@media (max-width: 700px){
  #contact .contact-grid{
    grid-template-columns: 1fr;
  }
  #contact .cta-col{
    justify-content:flex-start;
    margin-top:-8px;        /* pulls CTA a bit closer to the card text */
  }
}