/* Modern styles for GIDAUG Ltd - clean, minimal, subtle glass effect */
:root{
  --primary:#0d6efd; /* Bootstrap primary */
  --accent-1:#0d6efd;
  --accent-2:#6610f2;
  --muted:#6c757d;
}

html,body{height:100%;}
body{
  /* keep typography and smoothing from existing rule */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-color:#f6f8fb; /* fallback */
  background-image:
    radial-gradient(circle at 8% 10%, rgba(102,16,242,0.035) 0%, transparent 12%),
    radial-gradient(circle at 92% 90%, rgba(13,110,253,0.03) 0%, transparent 10%),
    linear-gradient(180deg,#ffffff 0%, #f3f6fb 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #0f1720;
}

/* Brand mark */
.brand-mark{
  display:inline-block;
  width:36px;height:36px;border-radius:8px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 15%), linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 6px 18px rgba(13,110,253,0.18);
}

/* Brand logo (show entire icon instead of cropping) */
.brand-logo{
  width:60px;
  height:40px;
  border-radius:8px;
  object-fit:contain; /* show full logo without cropping */
  display:inline-block;
  box-shadow:0 6px 18px rgba(13,110,253,0.12);
  margin-right:.5rem;
  padding:4px; /* small padding so the logo doesn't touch rounded corners */
  background: #ffffff; /* ensures good contrast on semi-transparent navbar */
}
@media (max-width:768px){
  .brand-logo{width:30px;height:30px;padding:3px}
}

/* Navbar tweaks */
.navbar{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.75) !important;
  border-bottom: 1px solid rgba(17,24,39,0.04);
}
.navbar .nav-link{color:rgba(33,37,41,0.85);}
.navbar .nav-link:hover{color:var(--accent-1);}
.navbar-brand{font-weight:700}

/* Toggler icon contrast */
.navbar-toggler{border:0}
.navbar-toggler-icon{filter:invert(20%);}

/* Hero */
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,252,255,0.82));
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(17,24,39,0.08);
  backdrop-filter: blur(6px) saturate(1.05);
}
.hero-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(33,37,41,0.12)}
.hero-img{position:relative;border-radius:14px;overflow:hidden}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 60%, rgba(0,0,0,0) 100%);pointer-events:none}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03) saturate(0.98)}

.badge-soft{background:rgba(13,110,253,0.08);color:var(--accent-1);font-weight:600} 
.small-muted, .small.small-muted{color:var(--muted);}

/* Cards */
.section-card{background:linear-gradient(180deg,#fff,#fbfdff);border:none;box-shadow:0 6px 24px rgba(17,24,39,0.06);border-radius:14px}
.section-card img{border-radius:10px}

.btn-primary{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  border:0;
  box-shadow:0 8px 20px rgba(102,16,242,0.12);
  transition:transform .18s ease, box-shadow .18s ease, opacity .12s;
  border-radius:10px;
}
.btn-primary:active{transform:translateY(0)}
.btn-primary:hover{transform:translateY(-3px);opacity:.98}
.btn-outline-primary{border-radius:10px}

/* Forms */
.form-control, .form-select, .form-label{border-radius:10px}

/* Footer */
.footer{background:transparent;border-top:1px solid rgba(33,37,41,0.04)}
.footer .social a{color:rgba(33,37,41,0.7);font-size:18px}
.footer a{text-decoration:none}

/* Utilities */
.container{max-width:1120px}

/* Skip link - visible when focused for keyboard users */
.skip-link{
  position:fixed;left:1rem;top:1rem;padding:.5rem .75rem;border-radius:8px;background:rgba(0,0,0,0.75);color:#fff;font-weight:600;z-index:1200;transform:translateY(-120%);transition:transform .18s ease,opacity .18s ease;opacity:0}
.skip-link:focus{transform:translateY(0);opacity:1;outline:none}

/* Utility: visually hidden but visible when focused */
.visually-hidden-focusable{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.visually-hidden-focusable:focus{position:static;width:auto;height:auto;left:auto}

/* Dark mode support */
@media (prefers-color-scheme: dark){
  :root{
    --primary:#4ea8ff;
    --accent-1:#4ea8ff;
    --accent-2:#8b5cf6;
    --muted:#9aa3ad;
  }
  body{
    background-color:#07121a;
    background-image:
      radial-gradient(circle at 8% 10%, rgba(78,168,255,0.035) 0%, transparent 12%),
      radial-gradient(circle at 92% 90%, rgba(139,92,246,0.03) 0%, transparent 10%),
      linear-gradient(180deg,#07121a 0%, #05101a 100%);
    color: #e6eef8;
  }
  .navbar{background:rgba(3,7,18,0.6) !important;border-bottom-color:rgba(255,255,255,0.03)}
  .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 20px 60px rgba(2,6,23,0.6)}
  .section-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
}

/* Respect prefers-reduced-motion */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after{transition:none !important;animation:none !important}

/* Improve focus-visible for keyboard navigation */
:focus{outline: none}
:focus-visible{outline:3px solid rgba(13,110,253,0.18);outline-offset:3px;border-radius:8px}

/* Slightly larger container for modern layouts */
.container{max-width:1200px}

/* Smooth image loading fallback */
img{max-width:100%;height:auto;display:block}

/* Responsive small tweaks */
@media (max-width:768px){
  .hero-card{padding:1.5rem}
  .brand-mark{width:30px;height:30px}
  .hero-img{margin-top:1rem}
}

/* Mobile / small-screen layout improvements */
.mobile-cta{display:none}

@media (max-width: 768px){
  /* Stack hero content naturally and make images shorter */
  .hero-card{order:1;padding:1.25rem}
  .hero-img{order:2;margin-top:1rem;height:220px;border-radius:12px;overflow:hidden}
  .hero-img img{height:100%;width:100%;object-fit:cover}

  /* Make large CTAs full-width for easier tapping */
  .btn-lg{width:100%;display:block}
  .d-flex .btn-lg + .btn-lg{margin-top:.6rem}

  /* Cards and sections get slightly tighter spacing */
  .section-card{padding:1rem;border-radius:12px}
  .section-card .btn{width:100%}

  /* Navbar compact */
  .navbar .container{padding-left:1rem;padding-right:1rem}
  .navbar-brand{font-size:1rem}
  .navbar-collapse{background:transparent}

  /* Footer social icons slightly smaller */
  .footer .social a{font-size:16px}

  /* Mobile sticky CTA */
  .mobile-cta{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:1400;padding:.9rem 1.1rem;border-radius:999px;font-weight:700;box-shadow:0 10px 28px rgba(13,110,253,0.14);align-items:center;gap:.5rem}
}

/* Mobile CTA transitions */
.mobile-cta{opacity:0;transform:translateY(18px);transition:transform .28s cubic-bezier(.16,.84,.44,1),opacity .22s ease;display:none}
.mobile-cta.visible{opacity:1;transform:translateY(0)}
.mobile-cta.hidden{opacity:0;transform:translateY(18px);pointer-events:none}

@media (max-width:768px){
  .mobile-cta{display:flex}
}

@media (prefers-reduced-motion: reduce){
  .mobile-cta{transition:none}
}

/* Ensure mobile CTA is hidden on desktop */
@media (min-width: 769px){
  .mobile-cta{display:none !important;opacity:0;transform:none;pointer-events:none}
}

/* Small adjustments for very small screens */
@media (max-width:420px){
  .hero-img{height:180px}
  .brand-logo{width:28px;height:28px}
  .btn-lg{padding:.7rem 1rem}
}

/* Subtle section heading */
h2{letter-spacing:-0.2px}

/* Accessibility focus states */
:focus{outline:2px solid rgba(13,110,253,0.14);outline-offset:3px}

/* Improve contrast on small screens: simplified but visually pleasing mobile background */
@media (max-width: 768px){
  /* Use a clean, soft gradient for mobile that preserves contrast but looks modern */
  body{
    background-image: linear-gradient(180deg, #f8fbff 0%, #eaf5ff 50%, #fff 100%) !important;
    background-color: #f8fbff !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    color: #0b1220; /* slightly darker for improved contrast */
  }

  /* Make hero card and section cards fully opaque for maximum readability */
  .hero-card{
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
    box-shadow: 0 14px 48px rgba(17,24,39,0.08) !important;
  }
  .section-card{
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(17,24,39,0.06) !important;
  }

  /* Darken muted text on mobile so it remains legible against the simplified background */
  .small-muted, .small.small-muted{ color: #566070 !important; }

  /* Navbar slightly more solid so nav links are readable over page background */
  .navbar{ background: rgba(255,255,255,0.96) !important; box-shadow: 0 1px 0 rgba(17,24,39,0.03); }

  /* Ensure hero-img overlay gives good contrast if text overlays images elsewhere */
  .hero-img::after{ background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0) 100%) !important; }

  /* Adjust footer contrast */
  .footer{ border-top-color: rgba(17,24,39,0.06) !important; }
}