/* ==== Kynexis – mobile-robust styles (all devices) ==== */
/* Base reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Geologica', sans-serif; background:#0b2458; color:#0B180B; overflow-x: hidden; }

/* Utils */
img { max-width: 100%; height: auto; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* Header */
header { position: absolute; top: 0; width: 100%; z-index: 1000; }
header .container { display:flex; justify-content:space-between; align-items:center; padding:20px; }
header .logo img { height:40px; width:auto; }
header nav ul { list-style:none; display:flex; gap:40px; flex-wrap: wrap; }
header nav a { text-decoration:none; font-family:'Geologica',sans-serif; font-weight:300; font-size:16px; color:#FFFFFF; }

/* Hero */
.banner { padding-top: 100px; color:#FFFFFF; }
.banner-container { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; text-align:left; }
.banner-content { flex: 1 1 560px; max-width:720px; width:auto; margin-right:20px; }
.banner h1 { font-family:'Krona One',sans-serif; font-size: clamp(32px, 6vw, 64px); line-height:1.15; margin-bottom:16px; white-space:normal; }
.banner h2 { font-family:'Geologica',sans-serif; font-size: clamp(18px, 2.4vw, 28px); font-weight:400; margin-bottom:20px; }
.banner h1, .banner h2 { overflow:visible; text-overflow:clip; word-break:normal; hyphens:none; }
.banner-illustration { flex:1 1 420px; display:flex; justify-content:center; align-items:center; max-width:100%; }
.banner-illustration img { max-width:100%; height:auto; max-height:400px; object-fit:contain; }
/* Buttons */
.buttons { display:flex; gap:16px; flex-wrap: wrap; }
.btn { display:inline-block; text-decoration:none; font-family:'Inter',sans-serif; font-weight:700; font-size: clamp(16px, 2vw, 20px); padding: clamp(10px, 1.5vw, 16px) clamp(14px, 2vw, 24px); border-radius:10px; margin-bottom:10px; }
.btn-primary { background:#71F26D; color:#0B180B; }
.btn-secondary { background:#0B180B; color:#71F26D; }
.rating { display:flex; align-items:center; gap:10px; font-family:'Geologica',sans-serif; font-size:16px; font-weight:300; margin-bottom:20px; }
.stars { color:#E2BF47; }

/* Services */
.services { background:#FFFFFF; padding:80px 20px; }
.services h2 { font-family:'Geologica',sans-serif; font-size:32px; font-weight:400; color:#000; margin-bottom:20px; text-align:center; }
.services .intro { font-family:'Geologica',sans-serif; font-size:24px; font-weight:400; color:#0B180B; max-width:800px; margin:0 auto 60px; text-align:center; }
.service-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.card { border:5px solid #71F26D; border-radius:20px; padding:48px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.card .icon img { max-width:180px; margin-bottom:16px; }
.card h3 { font-family:'Geologica',sans-serif; font-size:20px; font-weight:700; margin:12px 0; }
.card p { font-family:'Geologica',sans-serif; font-size:16px; font-weight:300; line-height:1.5; margin:0; }

/* Why */
.why-kynexis { background:#F1F5FF; padding:80px 20px; }
.why-kynexis .container { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.why-content { flex:1 1 420px; min-width:260px; }
.why-illustration { flex:1 1 340px; max-width:420px; text-align:center; }
.why-illustration img { max-width:100%; height:auto; }
.why-kynexis h2 { font-family:'Geologica',sans-serif; font-size:32px; font-weight:400; color:#000; margin-bottom:24px; }
.advantages { list-style:none; padding:0; margin:0 0 24px; }
.advantages li { position:relative; padding-left:28px; margin-bottom:12px; font-family:'Geologica',sans-serif; font-size:20px; font-weight:300; color:#000; }
.advantages li::before { content:"✓"; position:absolute; left:0; color:#71F26D; font-weight:700; }
.advantages li strong { font-weight:600; }
.why-kynexis .btn-primary { display:inline-block; background:#71F26D; color:#0B180B; text-decoration:none; font-family:'Inter',sans-serif; font-weight:700; font-size:18px; padding:14px 20px; border-radius:10px; }

/* Pricing */
.pricing { background:#F1F5FF; padding:80px 20px; text-align:center; }
.pricing h2 { font-family:'Geologica',sans-serif; font-size:32px; font-weight:400; color:#000; margin-bottom:28px; }
.pricing .intro { font-family:'Geologica',sans-serif; font-size:22px; font-weight:400; color:#0B180B; max-width:800px; margin:0 auto 48px; text-align:center; }
.pricing-cards { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.pricing-card { background:#F9F9F9; border-radius:15px; padding:20px; box-shadow:0 4px 6px rgba(0,0,0,.1); text-align:center; transition:transform .3s ease; flex: 1 1 260px; max-width:320px; aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.pricing-card:hover { transform: translateY(-8px); }
.pricing-card h3 { font-family:'Geologica',sans-serif; font-size:22px; font-weight:700; color:#0B180B; margin-bottom:12px; }
.pricing-card .price { font-family:'Geologica',sans-serif; font-size:26px; font-weight:700; color:#71F26D; margin-bottom:10px; }
.pricing-card .description { overflow-wrap:anywhere; font-family:'Geologica',sans-serif; font-size:15px; font-weight:300; color:#0B180B; margin-bottom:12px; }
.pricing-card .btn { display:inline-block; text-decoration:none; font-family:'Inter',sans-serif; font-weight:700; font-size:16px; padding:12px 20px; border-radius:10px; background:#71F26D; color:#0B180B; transition:background .3s ease; }
.pricing-card .btn:hover { background:#0B180B; color:#71F26D; }

/* Contact */
.contact { background:#FFFFFF; padding:80px 20px; }
.contact h2 { font-family:'Geologica',sans-serif; font-size:32px; font-weight:400; color:#000; margin-bottom:20px; text-align:center; }
.contact .intro { font-family:'Geologica',sans-serif; font-size:22px; font-weight:400; color:#0B180B; max-width:800px; margin:0 auto 40px; text-align:center; }
.contact-content { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.contact-mascot { flex:1 1 360px; max-width:450px; text-align:center; }
.contact-mascot img { width:100%; max-width:300px; height:auto; }
.contact-info { flex:1 1 480px; max-width:600px; }
.contact-details { margin-top:24px; font-family:'Geologica',sans-serif; color:#0B180B; }
.contact-item { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.contact-item i { font-size:22px; color:#71F26D; }
.contact-item p { font-size:18px; }
.contact-item a { text-decoration:none; color:#0B180B; font-weight:700; }
.contact-item a:hover { text-decoration:underline; }

/* Footer */
footer { background:#0B180B; color:#FFFFFF; padding:40px 20px; }
.footer-container { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-start; gap:16px; }
.footer-col { min-width: 150px; margin-bottom: 20px; }
.footer-logo { font-family:'Dongle',sans-serif; font-size:36px; color:#FFFFFF; margin-bottom:20px; }
footer h4 { font-family:'Inter',sans-serif; font-size:22px; font-weight:700; text-transform:uppercase; margin-bottom:10px; }
footer ul { list-style:none; padding:0; margin:0; }
footer ul li { margin-bottom:8px; }
footer ul li a { text-decoration:none; font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; color:#FFFFFF; opacity:.85; }
footer ul li a:hover { opacity:1; }

/* ======= Breakpoints ======= */

/* Large tablets and down */
@media (max-width: 1024px) {
  .banner-illustration img { max-height: 360px; }
  .advantages li { font-size:19px; }
}

/* Tablets */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .banner { padding-top: 88px; }
  header .container { padding: 16px; }
  header nav ul { gap: 20px; }
  .banner-container { flex-direction: column; text-align: center; }
  .banner-content { margin-right: 0; max-width: 100%; }
  .banner-illustration { order: 3; }
  .btn { font-size: clamp(15px, 3.8vw, 18px); padding: 12px 18px; }
  .card { padding: 32px 20px; }
  .card .icon img { max-width: 150px; }
  .pricing-card { flex-basis: 240px; padding: 18px; }
  .pricing-card h3 { font-size: 20px; }
  .pricing-card .price { font-size: 24px; }
  .pricing-card .description { font-size: 14px; }
}

/* Small phones & narrow screens */
@media (max-width: 480px) {
  .banner h1 { font-size: clamp(28px, 9vw, 36px); }
  .banner h2 { font-size: clamp(16px, 4.5vw, 20px); }
  .buttons { gap: 12px; }
  .btn { padding: 10px 14px; border-radius: 9px; }
  .service-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .advantages li { font-size:18px; }
  .pricing { padding: 64px 16px; }
  .pricing .intro { font-size: 18px; margin-bottom: 36px; }
  .pricing-card { flex-basis: 220px; }
}

/* Ultra-small devices (<=360px width) */
@media (max-width: 360px) {
  .banner { padding-top: 84px; }
  .banner h1 { font-size: 26px; }
  .banner h2 { font-size: 16px; }
  .btn { font-size: 14px; padding: 8px 12px; }
  .pricing-card { aspect-ratio: 1 / 1; padding: 14px; }
  .pricing-card h3 { font-size: 18px; }
  .pricing-card .price { font-size: 22px; }
}

/* Orientation tweaks */
@media (orientation: landscape) and (max-height: 420px) {
  .banner-illustration img { max-height: 260px; }
}