@keyframes fadeUp { from { opacity:0; transform:translateY(24px);} to { opacity:1; transform:translateY(0);} }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Plus Jakarta Sans',sans-serif; -webkit-font-smoothing:antialiased; background:#fff; color:#0E1B2A; overflow-x:hidden; }
a { color:#1878C4; text-decoration:none; }
a:hover { color:#0F5C99; }
img { max-width:100%; display:block; }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; background:transparent; box-shadow:none; transition:background 0.35s ease, box-shadow 0.35s ease; }
.nav.scrolled { background:#ffffff; box-shadow:0 4px 24px rgba(10,42,67,0.08); }
.nav.inner { background:#ffffff; box-shadow:0 4px 24px rgba(10,42,67,0.08); }
.nav-inner { max-width:1280px; margin:0 auto; padding:0 32px; height:92px; display:flex; align-items:center; justify-content:space-between; }
.logo { height:52px; width:auto; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { color:#ffffff; font-weight:600; font-size:15px; transition:color 0.2s; }
.nav.scrolled .nav-links a,
.nav.inner .nav-links a { color:#0A2A43; }
.nav-links a.btn-primary,
.nav.scrolled .nav-links a.btn-primary,
.nav.inner .nav-links a.btn-primary { color:#fff; }
.nav-links a.nav-active { color:#1878C4 !important; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { width:22px; height:2px; background:#fff; display:block; transition:background 0.3s; }
.nav.scrolled .hamburger span,
.nav.inner .hamburger span { background:#0A2A43; }
.mobile-panel { display:none; background:#fff; padding:16px 32px 24px; flex-direction:column; gap:16px; border-top:1px solid #EDF1F5; }
.mobile-panel.open { display:flex; }
.mobile-panel a { color:#0E1B2A; font-weight:600; font-size:16px; }

/* BUTTONS */
.btn-primary { background:linear-gradient(135deg,#1878C4,#0A2A43); color:#fff; padding:16px 32px; border-radius:8px; font-weight:700; font-size:15px; box-shadow:0 12px 28px rgba(24,120,196,0.3); display:inline-block; border:none; cursor:pointer; transition:opacity 0.2s; }
.btn-primary:hover { color:#fff; opacity:0.9; }
.nav-links a.btn-primary { padding:12px 24px; font-size:14px; box-shadow:0 8px 20px rgba(24,120,196,0.28); }
.btn-outline { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); color:#fff; padding:16px 32px; border-radius:8px; font-weight:700; font-size:15px; display:inline-block; transition:background 0.2s; }
.btn-outline:hover { background:rgba(255,255,255,0.16); color:#fff; }
.btn-enquire { display:inline-block; background:linear-gradient(135deg,#1878C4,#0A2A43); color:#fff; padding:11px 22px; border-radius:8px; font-weight:700; font-size:13px; margin-top:4px; }
.btn-enquire:hover { color:#fff; opacity:0.88; }
.btn-whatsapp { background:#25D366; color:#fff; padding:16px 32px; border-radius:8px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:10px; box-shadow:0 12px 28px rgba(37,211,102,0.28); }
.btn-whatsapp:hover { background:#1fba59; color:#fff; }

/* HERO */
.hero { position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-image:url(https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1920&auto=format&fit=crop); background-size:cover; background-position:center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,20,36,0.92) 0%,rgba(6,20,36,0.78) 45%,rgba(6,20,36,0.55) 100%); }
.hero-content { position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:0 32px; width:100%; }
.hero-badge { display:inline-block; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:#DCEBFA; padding:8px 18px; border-radius:100px; font-size:13px; font-weight:600; letter-spacing:0.03em; margin-bottom:28px; animation:fadeUp 0.7s ease both; }
.hero h1 { font-size:clamp(40px,5.5vw,68px); line-height:1.05; font-weight:800; color:#fff; margin-bottom:24px; max-width:720px; animation:fadeUp 0.7s ease 0.1s both; }
.hero p { font-size:18px; line-height:1.7; color:rgba(255,255,255,0.78); max-width:600px; margin-bottom:40px; animation:fadeUp 0.7s ease 0.2s both; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; animation:fadeUp 0.7s ease 0.3s both; }

/* PAGE HERO (inner pages) */
.page-hero { background:linear-gradient(135deg,#0A2A43,#1878C4); padding:148px 32px 80px; text-align:center; }
.page-hero .eyebrow { color:#7FB6E8; }
.page-hero h1 { font-size:clamp(30px,4vw,50px); font-weight:800; color:#fff; margin-bottom:16px; }
.page-hero p { color:rgba(255,255,255,0.72); font-size:17px; max-width:560px; margin:0 auto; line-height:1.6; }

/* SECTIONS */
.section { padding:120px 32px; max-width:1280px; margin:0 auto; }
.section-dark { max-width:none; background:linear-gradient(135deg,#0A2A43,#123B5C); }
.section-dark > * { max-width:1280px; margin-left:auto; margin-right:auto; }
.section-head { text-align:center; max-width:640px; margin:0 auto 64px; }
.eyebrow { color:#1878C4; font-weight:700; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; }
.eyebrow-light { color:#7FB6E8; }
.section h2 { font-size:clamp(28px,3.5vw,42px); font-weight:800; color:#0A2A43; margin-bottom:16px; }
.text-white,
.section h2.text-white { color:#fff; }
.lead { color:#5B6B7A; font-size:17px; line-height:1.6; }
.lead-light { color:rgba(255,255,255,0.7); }

/* TABS */
.tab-bar { display:flex; gap:4px; overflow-x:auto; margin-bottom:48px; border-bottom:2px solid #EAF0F5; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn { flex-shrink:0; padding:14px 22px; border:none; background:none; font-family:inherit; font-size:15px; font-weight:600; color:#5B6B7A; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.2s, border-color 0.2s; white-space:nowrap; }
.tab-btn:hover { color:#1878C4; }
.tab-btn.active { color:#1878C4; border-bottom-color:#1878C4; }

/* PRODUCTS GRID */
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.product-card { background:#fff; border:1px solid #EAF0F5; border-radius:16px; overflow:hidden; transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; box-shadow:0 2px 10px rgba(10,42,67,0.04); opacity:0; transform:translateY(36px); }
.product-card.reveal { opacity:1; transform:translateY(0); }
.product-card:hover { transform:translateY(-8px); box-shadow:0 24px 48px rgba(10,42,67,0.14); border-color:#1878C4; }
.thumb-wrap { position:relative; }
.product-card .thumb { height:180px; background-size:cover; background-position:center; }
.product-badge { position:absolute; top:12px; right:12px; background:#1878C4; color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; letter-spacing:0.03em; z-index:1; }
.product-card .body { padding:24px; }
.category-pill { display:inline-block; background:#EAF0F5; color:#1878C4; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; letter-spacing:0.03em; margin-bottom:10px; }
.product-card h3 { font-size:19px; font-weight:700; color:#0A2A43; margin-bottom:8px; }
.product-card p { font-size:14px; color:#5B6B7A; line-height:1.6; margin-bottom:16px; min-height:44px; }
.product-price { font-size:13px; color:#8CA0B3; margin-bottom:16px; }
.product-price strong { color:#0A2A43; font-size:15px; }

/* RATINGS */
.product-rating { display:flex; align-items:center; gap:3px; margin-top:4px; margin-bottom:10px; }
.star { font-size:15px; line-height:1; }
.star-f { color:#F59E0B; }
.star-e { color:#E2E8F0; }
.star-h { background:linear-gradient(90deg,#F59E0B 50%,#E2E8F0 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rating-val { font-size:13px; font-weight:700; color:#0A2A43; margin-left:5px; }
.rating-cnt { font-size:12px; color:#8CA0B3; margin-left:2px; }

/* LOAD MORE */
.load-more-wrap { text-align:center; margin-top:48px; }
.btn-load-more { background:#fff; border:2px solid #1878C4; color:#1878C4; padding:14px 40px; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; transition:background 0.2s, color 0.2s; }
.btn-load-more:hover { background:#1878C4; color:#fff; }

/* SERVICES GRID */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card { background:#fff; border-radius:16px; padding:32px; height:100%; display:flex; flex-direction:column; transition:transform 0.3s ease, box-shadow 0.3s ease; box-shadow:0 12px 30px rgba(0,0,0,0.18); opacity:0; transform:translateY(36px); }
.service-card.reveal { opacity:1; transform:translateY(0); }
.service-card:hover { transform:translateY(-6px); box-shadow:0 24px 48px rgba(0,0,0,0.28); }
.service-icon { width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,#E7F1FA,#D3E6F5); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.service-card h3 { font-size:19px; font-weight:700; color:#0A2A43; margin-bottom:10px; min-height:52px; display:flex; align-items:center; }
.service-card p { font-size:14px; color:#5B6B7A; line-height:1.6; margin-bottom:18px; flex:1; }

/* SERVICES FULL (services page) */
.services-full-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.service-full-card { background:#fff; border:1px solid #EAF0F5; border-radius:16px; padding:36px; display:flex; gap:24px; align-items:flex-start; transition:transform 0.3s, box-shadow 0.3s; opacity:0; transform:translateY(36px); }
.service-full-card.reveal { opacity:1; transform:translateY(0); }
.service-full-card:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(10,42,67,0.1); }
.service-full-card .service-icon { flex-shrink:0; margin-bottom:0; }
.service-full-card h3 { font-size:20px; font-weight:700; color:#0A2A43; margin-bottom:12px; }
.service-full-card p { font-size:15px; color:#5B6B7A; line-height:1.7; }
.services-cta { text-align:center; margin-top:64px; padding:48px 40px; background:#F4F8FB; border-radius:20px; }
.services-cta h3 { font-size:24px; font-weight:700; color:#0A2A43; margin-bottom:12px; }
.services-cta p { color:#5B6B7A; margin-bottom:28px; font-size:16px; }

/* WHY US */
.why-us-grid { display:grid; grid-template-columns:minmax(260px,0.8fr) minmax(320px,1.2fr); gap:64px; align-items:center; }
.reasons-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; }
.reason { display:flex; gap:16px; align-items:flex-start; }
.reason-dot { width:44px; height:44px; flex-shrink:0; border-radius:50%; background:#0A2A43; display:flex; align-items:center; justify-content:center; }
.reason-dot span { width:16px; height:16px; background:#1878C4; display:block; }
.reason h4 { font-size:16px; font-weight:700; color:#0A2A43; margin-bottom:6px; }
.reason p { font-size:14px; color:#5B6B7A; line-height:1.6; }

/* STATS */
.stats { text-align:center; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; max-width:1100px; margin:0 auto; }
.stat-value { font-size:clamp(36px,4vw,52px); font-weight:800; color:#fff; margin-bottom:8px; }
.stat-label { font-size:14px; color:rgba(255,255,255,0.7); font-weight:600; letter-spacing:0.02em; }

/* CONTACT CTA BANNER */
.cta-banner { background:linear-gradient(135deg,#0A2A43,#1878C4); padding:80px 32px; text-align:center; }
.cta-banner h2 { font-size:clamp(28px,3.5vw,42px); font-weight:800; color:#fff; margin-bottom:16px; }
.cta-banner p { color:rgba(255,255,255,0.75); font-size:17px; margin-bottom:40px; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-banner-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* SECTION ROW HEADER */
.section-row-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:48px; }
.section-row-head > div { max-width:580px; }
.view-all-link { flex-shrink:0; font-weight:700; font-size:15px; color:#1878C4; border-bottom:2px solid currentColor; padding-bottom:3px; white-space:nowrap; }
.view-all-link:hover { color:#0F5C99; }
.view-all-link-light { color:#7FB6E8; }
.view-all-link-light:hover { color:#fff; }

/* ABOUT STORY */
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.story-text p { font-size:16px; color:#5B6B7A; line-height:1.8; margin-bottom:20px; }
.story-visual { background:linear-gradient(135deg,#EAF3FB,#D3E6F5); border-radius:20px; padding:48px 40px; }
.story-visual .stat-row { display:flex; flex-direction:column; gap:24px; }
.story-stat { display:flex; align-items:center; gap:20px; }
.story-stat-num { font-size:36px; font-weight:800; color:#1878C4; min-width:80px; }
.story-stat-label { font-size:15px; color:#0A2A43; font-weight:600; }

/* CONTACT */
.contact-grid { display:flex; flex-wrap:wrap; gap:64px; }
.contact-grid > div { flex:1 1 360px; }
.contact-info { display:flex; flex-direction:column; gap:24px; margin-bottom:32px; }
.label { font-size:13px; font-weight:700; color:#8CA0B3; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.value { font-size:16px; color:#0A2A43; line-height:1.6; }
.value-link { font-size:16px; color:#0A2A43; font-weight:700; display:block; }
.value-green { font-size:16px; color:#12A150; font-weight:700; }
.contact-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }
.map-wrap { height:220px; border-radius:12px; overflow:hidden; }
.contact-form-wrap { background:#F4F8FB; border-radius:20px; padding:40px; }
.contact-form-wrap h3 { font-size:20px; font-weight:700; color:#0A2A43; margin-bottom:24px; }
.contact-form-wrap form { display:flex; flex-direction:column; gap:18px; }
.contact-form-wrap input, .contact-form-wrap textarea { padding:14px 16px; border-radius:8px; border:1px solid #DCE5EE; font-size:15px; font-family:inherit; resize:vertical; }
.contact-form-wrap input:focus, .contact-form-wrap textarea:focus { outline:none; border-color:#1878C4; }
.contact-form-wrap button { padding:16px; }

/* FOOTER */
.footer { background:#081E32; padding:56px 32px 32px; }
.footer-top { max-width:1280px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand { max-width:320px; }
.footer-logo { height:44px; width:auto; object-fit:contain; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer-brand p { color:rgba(255,255,255,0.55); font-size:14px; line-height:1.6; }
.footer-cols { display:flex; gap:64px; flex-wrap:wrap; }
.footer-title { color:#fff; font-weight:700; font-size:14px; margin-bottom:16px; }
.footer-cols a, .footer-cols span { display:block; color:rgba(255,255,255,0.6); font-size:14px; margin-bottom:10px; }
.footer-cols a:hover { color:#fff; }
.footer-bottom { max-width:1280px; margin:0 auto; padding-top:24px; color:rgba(255,255,255,0.4); font-size:13px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .products-grid, .services-grid, .services-full-grid { grid-template-columns:1fr; }
  .why-us-grid { grid-template-columns:1fr; }
  .story-grid { grid-template-columns:1fr; gap:40px; }
  .service-full-card { flex-direction:column; gap:16px; }
}
@media (max-width: 600px) {
  .nav-inner { padding:0 20px; }
  .section { padding:80px 20px; }
  .page-hero { padding:120px 20px 60px; }
  .hero-content { padding:0 20px; }
  .cta-banner { padding:60px 20px; }
  .contact-grid { gap:40px; }
  .tab-btn { padding:12px 16px; font-size:14px; }
  .footer { padding:48px 20px 24px; }
  .footer-cols { gap:32px; }
  .section-row-head { flex-direction:column; align-items:flex-start; gap:16px; }
}