@import url('/reset.css');
/* Compiled global style is kept separate to keep BaseLayout simple */
/* The file simply forwards to src/styles/global.css via build, but for static preview we'll duplicate. */
:root{
  --blue-electric: #00A8FF;
  --blue-dark: #003C90;
  --yellow-energy: #FFD200;
  --graphite: #666666;
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --brand-grad: linear-gradient(180deg, #00B2FF 0%, #0061C4 100%);
  --ring: color-mix(in oklab, var(--blue-electric) 30%, transparent);
  --header-h: 64px;
}
html { font-size: 16px; }
body { font-family: 'Montserrat','Exo 2',system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; margin:0; color:#111; background:var(--bg); line-height:1.6; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:var(--blue-dark); border:2px solid var(--blue-electric); border-radius:8px; z-index:100; }
.hero, section[id]{ scroll-margin-top: 84px; }
.container { width:min(1120px,92%); margin-inline:auto; }
.grid { display:grid; gap:1.25rem; }
/* Better wrapping for narrow headers */
.header-wrap{ flex-wrap: nowrap; }
@media (max-width: 820px){
  .header-wrap{ flex-wrap: wrap; row-gap:.25rem; }
  .main-nav{ flex-wrap: wrap; justify-content: flex-end; gap:.25rem; }
  .main-nav .nav-link{ padding:.6rem .55rem; font-size:.95rem; }
}
a { color: var(--blue-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--blue-electric); outline-offset:2px; border-radius:6px; }
.btn { display:inline-block; padding:.9rem 1.25rem; border-radius:8px; font-weight:600; border:2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease; }
.btn-primary { background: var(--yellow-energy); color: var(--blue-dark); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(255,210,0,.3); }
.btn-outline { background:transparent; border-color: var(--blue-dark); color: var(--blue-dark); }
.site-header{ position:sticky; top:0; z-index:20; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(8px); border-bottom:0; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: var(--brand-grad); opacity:.75; }
.header-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand-name{ color:var(--blue-dark); letter-spacing:.3px }
.main-nav{ display:flex; gap:.5rem; align-items:center; }
.nav-link{ position:relative; padding:.75rem .6rem; font-weight:600; color:var(--blue-dark); }
.nav-link::after{ content:""; position:absolute; left:.6rem; right:.6rem; bottom:.45rem; height:2px; background: var(--blue-electric); transform: scaleX(0); transform-origin:left; transition: transform .2s ease; }
.nav-link:hover{ color:var(--blue-electric); text-decoration:none; }
.nav-link:hover::after{ transform: scaleX(1); }
.nav-link.active{ color: var(--blue-electric); }
.nav-link.active::after{ transform: scaleX(1); }

.nav-toggle{ display:none; border:1px solid rgba(0,60,144,.18); background:white; color: var(--blue-dark); border-radius:10px; padding:.4rem .5rem; align-items:center; }
.nav-toggle .close{ display:none; }
.nav-toggle[aria-expanded="true"] .close{ display:block; }
.nav-toggle[aria-expanded="true"] svg:not(.close){ display:none; }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; z-index:10001; position:relative; }
  .main-nav{ position: fixed; top:0; left:0; width:100vw; height:100vh; background: #fff; transform: translateY(-8px); opacity:0; pointer-events:none; padding: calc(var(--header-h) + 1rem) 1rem 2rem; display:flex; flex-direction:column !important; align-items:center; justify-content:flex-start; gap:.5rem; z-index:10000; overflow:auto; }
  .main-nav[data-open="true"]{ transform:none; opacity:1; pointer-events:auto; }
  .main-nav .nav-link{ display:block; padding: .85rem 1.1rem; font-size:1.05rem; width:min(320px,92%); text-align:center; border-radius:12px; }
  .main-nav .nav-link:hover{ background: rgba(0,168,255,.08); }
}

.hero{ position:relative; background: radial-gradient(1200px 420px at 10% 0%, rgba(0,168,255,.18), transparent), linear-gradient(135deg, rgba(0,168,255,.12), rgba(0,60,144,.08)); padding:5rem 0 4.25rem; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-20% -10% auto; height:280px; background: repeating-linear-gradient( 60deg, rgba(0,168,255,.08) 0 16px, transparent 16px 32px ); transform: skewY(-6deg); }
.hero-grid{ display:grid; gap:1rem; align-items:center; grid-template-columns: 1.1fr .9fr; }
.hero-cta{ display:flex; gap:.75rem; align-items:center; margin:.5rem 0 0; }
.bolt{ position:relative; }
.bolt::before{ content:""; position:absolute; left:-10px; top:50%; translate: 0 -50%; width:14px; height:14px; background: var(--yellow-energy); clip-path: polygon(55% 0, 35% 40%, 65% 40%, 45% 80%, 65% 50%, 35% 50%); border-radius:2px; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.hero-badges{ display:flex; gap:.5rem; padding:0; margin:1rem 0 0; flex-wrap:wrap; }
.hero-badges li{ border:1px solid rgba(0,60,144,.18); border-radius:999px; padding:.35rem .7rem; font-size:.9rem; color:var(--blue-dark); background: white; }
.hero-art{ justify-self:end; filter: drop-shadow(0 10px 24px rgba(0,0,0,.05)); }
.hero h1{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.15; margin:0 0 1rem; color:var(--blue-dark); }
.hero p{ color:var(--graphite); font-size: clamp(1.05rem, 1.8vw, 1.2rem); margin:0 0 1.5rem; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ justify-self:center; max-width: 82%; }
}
section{ padding:3.5rem 0; }
@media (max-width: 760px){ section{ padding:2.5rem 0; } }
section h2{ font-size: clamp(1.5rem, 2.5vw, 2rem); margin:0 0 1rem; color:var(--blue-dark); }
.section-title{ position:relative; padding-bottom:.5rem; }
.section-title::after{ content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; background: var(--brand-grad); border-radius:2px; }
section .lead{ color:var(--graphite); margin-bottom:2rem; }
.card{ background:white; border:1px solid rgba(0,60,144,.12); border-radius:12px; padding:1.25rem; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); border-color: rgba(0,60,144,.22); box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.card-head{ display:flex; align-items:center; gap:.75rem; }
.icon-wrap{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background: color-mix(in oklab, var(--blue-electric) 12%, white); border:1px solid rgba(0,60,144,.15); }
.card h3{ margin:.5rem 0 .25rem; font-size:1.05rem; color:var(--blue-dark); }
.muted{ color:var(--graphite); }
.icon{ width:22px; height:22px; color:var(--blue-electric); }
.icon-bolt{ color:var(--yellow-energy); }
.products{ grid-template-columns: repeat(12,1fr); }
.products .card{ grid-column: span 3; }
.services{ grid-template-columns: repeat(12,1fr); }
.services .item{ grid-column: span 4; display:flex; gap:.75rem; align-items:flex-start; }
.icon-circle{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:white; border:1px solid rgba(0,60,144,.18); }
.icon-circle.bolt{ background: color-mix(in oklab, var(--yellow-energy) 24%, white); border-color: rgba(255,210,0,.55); }
/* Activity cover cards */
.activity-cards{ grid-template-columns: repeat(12,1fr); gap:1rem; }
.activity-card{ position:relative; grid-column: span 4; min-height: 280px; border-radius:16px; overflow:hidden; background:#003C90; box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.activity-card::before{ content:""; position:absolute; inset:0; background: center / cover no-repeat var(--bg); opacity:.9; }
.activity-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 80%); }
.activity-card h3{ position:absolute; left:1rem; right:1rem; top:50%; transform: translateY(-52%); color:#fff; margin:0; font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height:1.15; text-shadow: 0 2px 8px rgba(0,0,0,.35); text-align:center; }
.activity-card .meta{ position:absolute; left:1rem; right:1rem; bottom:2.2rem; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
@media (max-width:900px){ .activity-card .meta{ bottom:2rem; } }
@media (max-width:640px){ .activity-card .meta{ bottom:1.8rem; } }
.activity-card .meta span{ display:flex; align-items:center; gap:.35rem; color:#fff; font-weight:700; background: rgba(0,0,0,.38); padding:.35rem .6rem; border-radius:999px; }
.activity-card .meta svg{ width:14px; height:14px; color: var(--yellow-energy); }
@media (max-width:900px){ .activity-card{ grid-column: span 6; } }
@media (max-width:640px){ .activity-card{ grid-column: span 12; min-height: 240px; } }
/* Mission & Vision grid */
.mv-grid{ grid-template-columns: repeat(12,1fr); }
.mv-grid .card{ grid-column: span 4; }
@media (max-width:900px){ .mv-grid .card{ grid-column: span 6; } }
/* Service chips */
/* Gallery */
.gallery{ grid-template-columns: repeat(12, 1fr); }
.figure-card{ grid-column: span 6; background:white; border:1px solid rgba(0,60,144,.12); border-radius:12px; overflow:hidden; }
.figure-card img{ display:block; width:100%; height:auto; }
.figure-card figcaption{ padding:.75rem 1rem; color:var(--blue-dark); font-weight:600; }
form.contact{ display:grid; gap:.75rem; max-width:640px; }
input, textarea{ border:1px solid #d6d6d6; border-radius:10px; padding:.8rem .9rem; font:inherit; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus{ border-color: var(--blue-electric); box-shadow: 0 0 0 4px var(--ring); }
.
contact-actions{ display:flex; gap:.75rem; align-items:center; }
.socials{ display:flex; gap:.5rem; margin-left:auto; }
textarea{ min-height:140px; resize:vertical; }
footer.site-footer{ color:white; padding:2rem 0; border-top: 4px solid transparent; background:
  radial-gradient(800px 220px at 85% 0%, rgba(0,168,255,.15), transparent),
  linear-gradient(180deg, #023070 0%, #003C90 60%, #002d6a 100%);
  background-origin: padding-box, border-box; background-clip: padding-box, border-box; }
.footer-grid{ display:grid; gap:.75rem; }
.footer-top{ display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:3rem; align-items:flex-start; padding-bottom:1.25rem; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-col{ display:grid; gap:.5rem; }
.footer-title{ margin:0; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; color: var(--yellow-energy); }
.footer-brand{ display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }
.footer-brand img{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.15)); }
.footer-brand img.logo-white{ filter: brightness(0) saturate(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.15)); }
.footer-brand .brand-name{ color:#fff; margin:0; }
.footer-brand .tagline{ margin:0; color: var(--yellow-energy); font-weight:600; opacity:1; }
.footer-links{ display:flex; flex-direction:column; gap:.35rem; }
.footer-links a{ color:white; opacity:.92; }
.footer-links a:hover{ opacity:1; text-decoration:underline; text-underline-offset: 2px; }
.footer-contact{ display:flex; flex-direction:column; gap:.4rem; }
.footer-contact .contact-item{ display:flex; align-items:center; gap:.5rem; }
.footer-contact .pill{ background: rgba(255,255,255,.05); padding:.5rem .6rem; border-radius:12px; border:1px solid rgba(255,255,255,.1); }
.footer-contact svg{ width:16px; height:16px; color:white; opacity:.85; }
.footer-contact .contact-muted{ color:#fff; opacity:.9; }
.footer-socials{ display:flex; gap:.5rem; margin-top:.5rem; }
.footer-socials svg{ width:18px; height:18px; color:white; opacity:.9; transition: color .2s ease, transform .2s ease; }
.footer-socials a:hover svg{ color: var(--yellow-energy); transform: translateY(-1px); }
.footer-bottom{ display:flex; justify-content:space-between; gap:.75rem; padding-top:1rem; font-size:.95rem; opacity:.9; }
@media (max-width:900px){ .footer-top{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.25rem; } }
footer a{ color:white; opacity:.9; }
footer a:hover{ opacity:1; }
.reveal{ opacity:0; transform: translateY(8px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
/* Anchor offset tweaked for mobile when header wraps */
.hero, section[id]{ scroll-margin-top: 84px; }
@media (max-width: 820px){ .hero, section[id]{ scroll-margin-top: 120px; } }
/* About */
.section-about{ background: radial-gradient(600px 220px at 85% 10%, rgba(0,168,255,.12), transparent), color-mix(in oklab, var(--blue-electric) 6%, white); position:relative; overflow:hidden; }
.about-text{ max-width:72ch; }
.about-content{ display:grid; gap: 1rem; }
.about-chips{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.chip{ background:white; border:1px solid rgba(0,60,144,.18); color:var(--blue-dark); border-radius:999px; padding:.35rem .7rem; font-weight:600; font-size:.9rem; }
.section-slope{ position:absolute; bottom:-40px; left:0; right:0; height:80px; background: white; transform: skewY(-3deg); }
@media (max-width:900px){ .products .card{ grid-column: span 6; } .services .item{ grid-column: span 6; } }
@media (max-width:640px){ .products .card{ grid-column: span 12; } .services .item{ grid-column: span 12; } .figure-card{ grid-column: span 12; } }
@media (max-width: 640px){
  .mv-grid{ grid-template-columns: 1fr; }
  .mv-grid .card{ grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
.values{ grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px){ .values{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .values{ grid-template-columns: repeat(3, 1fr); } }
.to-top{ position:fixed; right:1rem; bottom:1rem; width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,60,144,.2); background:white; color:var(--blue-dark); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.12); opacity:0; pointer-events:none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.activity-cards{ grid-template-columns: repeat(12,1fr); gap:1rem; }
.activity-card{ position:relative; grid-column: span 4; min-height: 280px; border-radius:16px; overflow:hidden; background:#003C90; box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.activity-card::before{ content:""; position:absolute; inset:0; background: center / cover no-repeat var(--bg); opacity:.95; }
.activity-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 80%); }
.activity-card h3{ position:absolute; left:1rem; right:1rem; top:50%; transform: translateY(-52%); color:#fff; margin:0; font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height:1.15; text-shadow: 0 2px 8px rgba(0,0,0,.35); text-align:center; display:inline-block; padding:.35rem .6rem; border-radius:12px; background: rgba(0,0,0,.38); backdrop-filter: blur(2px); margin-inline:auto; max-width: 90%; }
.activity-card .meta{ position:absolute; left:1rem; right:1rem; bottom:2.2rem; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.activity-card .meta span{ display:flex; align-items:center; gap:.35rem; color:#fff; font-weight:700; background: rgba(0,0,0,.38); padding:.35rem .6rem; border-radius:999px; }
.activity-card .meta svg{ width:14px; height:14px; color: var(--yellow-energy); }
/* Pattern variants */
.activity-card.pattern-diag::before{ background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, rgba(255,255,255,0) 8px 16px), center / cover no-repeat var(--bg); }
.activity-card.pattern-dots::before{ background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,.08) 2px, transparent 3px), var(--bg); background-size: 12px 12px, cover; background-repeat: repeat, no-repeat; background-position: 0 0, center; }
.activity-card.pattern-grid::before{ background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px), var(--bg); background-size: 16px 16px, 16px 16px, cover; background-position: 0 0, 0 0, center; background-repeat: repeat, repeat, no-repeat; }
@media (max-width:900px){ .activity-card{ grid-column: span 6; } }
@media (max-width:640px){ .activity-card{ grid-column: span 12; min-height: 240px; } }