:root{
  --bg:#001427;
  --card:#07142a;
  --accent:#00f0ff;
  --accent2:#7c3aed;
  --accent3:#00c6ff;
  --accent4:#ff006e;
  --accent5:#ffbe0b;
  --accent6:#06ffa5;
  --muted:#9fb3c8;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bg) 0%, #001b36 100%);color:#e6f7ff;min-height:100vh;position:relative;overflow-x:hidden}
body::before{content:'';position:fixed;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle, rgba(0,240,255,0.08), transparent);border-radius:50%;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;bottom:-30%;left:-5%;width:500px;height:500px;background:radial-gradient(circle, rgba(124,58,237,0.06), transparent);border-radius:50%;pointer-events:none;z-index:0}
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(0,18,39,0.6),transparent);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,240,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--accent)}
.brand-text{font-weight:700;font-family:Poppins,Inter;font-size:18px}
.brand img{width:120px;height:120px;object-fit:contain;border-radius:12px;transition:transform 300ms ease,box-shadow 300ms ease}
.brand img:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(0,240,255,0.25)}
.logo{display:block}
.brand{align-items:center}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{color:var(--accent);background:linear-gradient(90deg, rgba(0,240,255,0.03), transparent)}
.nav-toggle{display:none;background:transparent;border:0;color:var(--accent);font-size:20px}

.hero{position:relative;overflow:hidden;padding:100px 0 60px;background:radial-gradient(1200px 400px at 10% 10%, rgba(0,208,255,0.1), transparent), radial-gradient(800px 600px at 90% 50%, rgba(124,58,237,0.05), transparent), linear-gradient(180deg,#eaf6ff 0%, #dff6ff 12%, var(--bg) 85%);}
.hero::before{content:'';position:absolute;top:10%;right:15%;width:300px;height:300px;background:radial-gradient(circle, rgba(0,240,255,0.1), transparent);border-radius:50%;z-index:0}
.hero::after{content:'';position:absolute;bottom:5%;left:20%;width:250px;height:250px;background:radial-gradient(circle, rgba(124,58,237,0.08), transparent);border-radius:50%;z-index:0}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;mix-blend-mode:screen;opacity:0.9}
.hero-content{position:relative;z-index:2;text-align:left;padding:40px 20px}
.hero h1{font-family:Poppins,Inter;font-weight:700;font-size:44px;margin:0 0 12px;color:#00223a}
.animated-heading{position:relative;display:inline-block;overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity 680ms ease, transform 680ms cubic-bezier(.2,.9,.3,1)}
.animated-heading.show{opacity:1;transform:translateY(0)}
.animated-heading::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.18), rgba(255,255,255,0.00));transform:translateX(-110%);animation:shimmer 2.8s infinite}
@keyframes shimmer{0%{transform:translateX(-110%)}60%{transform:translateX(110%)}100%{transform:translateX(110%)}}

/* typewriter text */
.typewriter{font-family:Poppins,Inter;letter-spacing:1px;white-space:nowrap;overflow:hidden;border-right:2px solid rgba(0,0,0,0.08);padding-right:6px}
.typewriter.caret{border-right-color:var(--accent)}
.promo-sub{margin-top:8px;color:rgba(0,50,70,0.85)}
.lead{color:#08324a;max-width:760px}

/* promo tagline block under hero title */
.promo{margin-top:18px;padding:18px;background:linear-gradient(90deg, rgba(0,112,192,0.08), rgba(255,255,255,0.6));border-radius:12px;border:1px solid rgba(0,112,192,0.12);display:flex;align-items:center;gap:14px}
.promo h3{margin:0;font-family:Poppins;font-size:18px;color:#01263b}
.promo p{margin:0;color:#0b3a51}

/* floating UI mockups inside hero for UI/UX feel */
.ui-stack{position:sticky;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:50;align-items:center;justify-content:center}
.ui-stack img{width:80px;height:80px;object-fit:contain}
.ui-label{margin:0;font-size:12px;color:rgba(230,247,255,0.9);font-weight:500;text-align:center;white-space:nowrap}
.ui-card{width:180px;height:110px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(3,46,68,0.18);overflow:hidden;border:1px solid rgba(2,48,73,0.06);transform-origin:center;animation:float 6s ease-in-out infinite}
.ui-card:nth-child(2){width:220px;height:130px;animation-delay:1s}
.ui-card:nth-child(3){width:160px;height:90px;animation-delay:2s}
.ui-card .bar{height:36px;background:linear-gradient(90deg,#00c6ff,#0066ff);}
.ui-card .body{padding:8px;font-size:12px;color:#072b3a}
@keyframes float{0%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}100%{transform:translateY(0) rotate(-1deg)}}
.hero-cta{margin-top:20px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,0.04);cursor:pointer;position:relative;overflow:hidden;transition:all 280ms ease}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);transform:translateX(-100%);transition:transform 400ms}
.btn:hover::before{transform:translateX(100%)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border:none;box-shadow:0 8px 24px rgba(124,58,237,0.25);font-weight:600}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(124,58,237,0.35)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(0,240,255,0.12)}
.btn.small{padding:6px 10px;font-size:13px}

.section{padding:60px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
h2{margin-top:0;color:#dff8ff}

/* Alternating section backgrounds */
.section.bg-white{background:#ffffff;color:#032b3a;position:relative;overflow:hidden}
.section.bg-white::before{content:'';position:absolute;top:-30%;right:-5%;width:400px;height:400px;background:radial-gradient(circle, rgba(0,102,137,0.04), transparent);border-radius:50%;pointer-events:none}
.section.bg-white::after{content:'';position:absolute;bottom:-10%;left:-5%;width:300px;height:300px;background:radial-gradient(circle, rgba(124,58,237,0.03), transparent);border-radius:50%;pointer-events:none}
.section.bg-white .card{background:#ffffff;color:#032b3a;border:1px solid rgba(3,46,68,0.06);box-shadow:0 8px 28px rgba(3,46,68,0.06)}
.section.bg-white .lead{color:#0a3b4e}
.section.bg-white a{color:#006689}
.section.bg-white h2{color:#022433}
.section.bg-white h3,.section.bg-white .card h3{color:#013244}
.section.bg-white p,.section.bg-white .card p{color:#05434e}
.section.bg-white .btn.primary{background:linear-gradient(90deg,#006689,#004e6a);color:#ffffff}
.section.bg-white .btn.ghost{border-color:rgba(0,102,137,0.12);color:#006689}

.section.bg-blue{background:linear-gradient(180deg,#01263b 0%, #032b3a 100%);color:#e6f7ff;position:relative;overflow:hidden}
.section.bg-blue::before{content:'';position:absolute;top:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle, rgba(0,240,255,0.06), transparent);border-radius:50%;pointer-events:none}
.section.bg-blue::after{content:'';position:absolute;bottom:-15%;left:5%;width:400px;height:400px;background:radial-gradient(circle, rgba(6,255,165,0.04), transparent);border-radius:50%;pointer-events:none}
.section.bg-blue .card{background:var(--card);color:#e6f7ff;border:1px solid rgba(0,240,255,0.03)}
.section.bg-blue h2{color:#e9feff}
.section.bg-blue h3,.section.bg-blue .card h3{color:#e9feff}
.section.bg-blue p,.section.bg-blue .card p{color:rgba(230,247,255,0.9)}
.section.bg-blue .lead{color:rgba(230,247,255,0.9)}
.section.bg-blue a{color:var(--accent)}
.section.bg-blue .btn.primary{background:linear-gradient(90deg,var(--accent),#00d2ff);color:#00132b}
.section.bg-blue .btn.ghost{border-color:rgba(0,240,255,0.12);color:var(--accent)}
h2{margin-top:0;color:#dff8ff}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,0.4);border:1px solid rgba(0,240,255,0.03);position:relative;overflow:hidden;transition:all 320ms cubic-bezier(.2,.9,.3,1)}
.card::before{content:'';position:absolute;top:-40%;right:-40%;width:180px;height:180px;background:radial-gradient(circle, rgba(0,240,255,0.08), transparent);border-radius:50%;pointer-events:none}
.card::after{content:'';position:absolute;bottom:-40%;left:-40%;width:140px;height:140px;background:radial-gradient(circle, rgba(124,58,237,0.06), transparent);border-radius:50%;pointer-events:none}
.card:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(0,240,255,0.12);background:linear-gradient(135deg, rgba(7,20,42,0.8), rgba(20,35,60,0.6));box-shadow:0 12px 32px rgba(0,240,255,0.15)}

.section.bg-blue .card{background:linear-gradient(135deg, rgba(7,20,42,0.9), rgba(15,30,55,0.7));border:1px solid rgba(0,240,255,0.06)}
.section.bg-blue .card::before{background:radial-gradient(circle, rgba(0,240,255,0.12), transparent)}
.section.bg-blue .card::after{background:radial-gradient(circle, rgba(6,255,165,0.08), transparent)}

.section.bg-white .card{background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,248,255,0.98));position:relative;overflow:hidden}
.section.bg-white .card::before{background:radial-gradient(circle, rgba(0,102,137,0.08), transparent)}
.section.bg-white .card::after{background:radial-gradient(circle, rgba(124,58,237,0.05), transparent)}

.products-grid,.websites-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.work-img{height:280px;width:100%;object-fit:cover;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(135deg, #7c3aed, #00f0ff);border:2px solid rgba(0,240,255,0.1);aspect-ratio:9/16}
.work-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent);pointer-events:none}
.websites-grid .work-img{height:480px;aspect-ratio:9/16}
.img-placeholder{height:140px;border-radius:8px;background:linear-gradient(135deg,var(--accent2),var(--accent3));box-shadow:inset 0 -20px 40px rgba(0,0,0,0.08);margin-bottom:12px;position:relative;overflow:hidden}
.img-placeholder::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 40% 40%, rgba(255,255,255,0.15), transparent);pointer-events:none}

/* Extra services (hidden -> visible animation) */
.extra-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.service-card{min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border-radius:12px;background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));box-shadow:0 8px 24px rgba(0,0,0,0.28);transition:transform 420ms cubic-bezier(.2,.9,.3,1),opacity 420ms ease;position:relative;overflow:hidden;border:1px solid rgba(0,240,255,0.04)}
.service-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, transparent 0%, rgba(0,240,255,0.03) 50%, transparent 100%);pointer-events:none}
.service-card:nth-child(1){background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(0,198,255,0.05))}
.service-card:nth-child(2){background:linear-gradient(135deg, rgba(124,58,237,0.1), rgba(147,51,234,0.05))}
.service-card:nth-child(3){background:linear-gradient(135deg, rgba(6,255,165,0.1), rgba(0,198,255,0.05))}
.service-card:nth-child(4){background:linear-gradient(135deg, rgba(255,190,11,0.08), rgba(255,107,107,0.05))}
.service-card:nth-child(5){background:linear-gradient(135deg, rgba(255,0,110,0.08), rgba(147,51,234,0.05))}
.service-card:nth-child(6){background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(6,255,165,0.05))}
.service-card:nth-child(7){background:linear-gradient(135deg, rgba(124,58,237,0.1), rgba(255,190,11,0.05))}
.service-card:nth-child(8){background:linear-gradient(135deg, rgba(6,255,165,0.1), rgba(255,0,110,0.05))}
.service-card:nth-child(9){background:linear-gradient(135deg, rgba(0,240,255,0.08), rgba(124,58,237,0.04))}
.service-card:nth-child(10){background:linear-gradient(135deg, rgba(255,190,11,0.08), rgba(6,255,165,0.04))}
.service-card:nth-child(11){background:linear-gradient(135deg, rgba(255,0,110,0.08), rgba(0,240,255,0.04))}
.service-card:nth-child(12){background:linear-gradient(135deg, rgba(147,51,234,0.08), rgba(255,190,11,0.04))}
.service-card:nth-child(13){background:linear-gradient(135deg, rgba(0,240,255,0.08), rgba(255,0,110,0.04))}
.service-card:nth-child(14){background:linear-gradient(135deg, rgba(6,255,165,0.08), rgba(124,58,237,0.04))}
.service-card.hidden{opacity:0;transform:translateY(20px) scale(0.98)}
.service-card.visible{opacity:1;transform:translateY(0) scale(1)}
.service-card:hover{transform:translateY(-8px) scale(1.05);border-color:rgba(0,240,255,0.15);box-shadow:0 12px 32px rgba(0,240,255,0.18)}

/* feature icon (round colored background with icon image) */
.feature-icon{width:88px;height:88px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 8px 20px rgba(2,20,40,0.28);border:1px solid rgba(255,255,255,0.03);background:var(--icon-bg, linear-gradient(135deg,#00f0ff33,#7c3aed33));}
.feature-icon img{width:56px;height:56px;object-fit:contain;display:block}
.feature-icon .icon{font-size:36px;color:rgba(255,255,255,0.98);line-height:1}
.feature-icon .ion-iphone{font-size:40px}
.feature-icon .ion-ios-browsers{font-size:36px}
.feature-icon .ion-ios-monitor{font-size:36px}
.card h3{margin:8px 0 8px;font-size:18px}
.card p{margin:0;color:rgba(230,247,255,0.88)}

@media (max-width:900px){
  .feature-icon{width:86px;height:118px;border-radius:14px}
  .feature-icon img{width:64px;height:64px}
  .card{padding:14px}
}

.more-actions .muted{color:rgba(255,255,255,0.8)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.contact-grid .card{padding:18px;position:relative}
.contact-grid .card:nth-child(1){background:linear-gradient(135deg, rgba(0,240,255,0.08), rgba(0,198,255,0.04));border-color:rgba(0,240,255,0.1)}
.contact-grid .card:nth-child(2){background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(147,51,234,0.04));border-color:rgba(124,58,237,0.1)}
.contact-grid .card:nth-child(3){background:linear-gradient(135deg, rgba(6,255,165,0.08), rgba(0,240,255,0.04));border-color:rgba(6,255,165,0.1)}

/* Contact row: icon + body */
.contact-row{display:flex;gap:12px;align-items:flex-start}
.contact-icon{width:72px;height:72px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 72px;background:var(--icon-bg,linear-gradient(135deg,#00f0ff33,#7c3aed33));box-shadow:0 8px 20px rgba(2,20,40,0.18);border:1px solid rgba(255,255,255,0.03)}
.contact-icon .icon{font-size:30px;color:#042e3a}
.contact-body h4{margin:0 0 6px}
.contact-body p{margin:6px 0;color:#05434e}
.contact-body a{color:var(--accent)}

@media (max-width:900px){
  .contact-row{align-items:center}
  .contact-icon{width:60px;height:60px;border-radius:12px}
  .contact-icon .icon{font-size:26px}
}

/* Highlights grid (animated icons) */


/* image styles inside cards */
.card img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.service-img{height:120px}
.work-img{height:150px}

.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.work{padding:18px}
.work:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 14px 32px rgba(0,0,0,0.5);transition:transform 280ms cubic-bezier(.2,.9,.3,1),box-shadow 280ms}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter{background:transparent;border:1px solid rgba(255,255,255,0.03);padding:8px 10px;border-radius:999px;color:var(--muted);cursor:pointer}
.filter.active{border-color:var(--accent);color:var(--accent);background:linear-gradient(90deg, rgba(0,240,255,0.03), transparent)}

/* reveal animation for elements entering viewport */
.reveal{opacity:0;transform:translateY(18px) scale(0.995);transition:opacity 620ms ease, transform 620ms cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0) scale(1)}

/* slower, smooth scroll target spacing comfort */
html{scroll-behavior:smooth}

.jobs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.skill-match{margin-top:18px;padding:14px}
.skill-match textarea{width:100%;min-height:84px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:inherit;padding:10px;border-radius:8px}
.match-result{margin-top:12px;color:var(--accent)}

.contact-form input,.contact-form textarea{width:100%;padding:10px;margin-top:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions{display:flex;gap:12px;margin-top:10px}

.site-footer{Padding:18px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted)}

/* Chat modal */
.chat-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,0.4),transparent);z-index:60}
.chat-modal.show{display:flex}
.chat-window{width:360px;max-width:92vw;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;border:1px solid rgba(0,240,255,0.06)}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(0,0,0,0.05)}
.chat-body{height:240px;overflow:auto;padding:12px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.chat-footer{display:flex;gap:8px;padding:10px}
.chat-footer input{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit}
.chat-body .msg{margin-bottom:10px;padding:8px;border-radius:8px}
.msg.user{background:linear-gradient(90deg,#063241,#07485a);align-self:flex-end}
.msg.bot{background:rgba(0,240,255,0.04);color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .nav ul{display:none}
  .nav-toggle{display:inline-block}
  .header-inner{gap:12px}
  .hero h1{font-size:28px}
  .contact-form .row{grid-template-columns:1fr}
  .ui-stack{display:none}
}

/* mobile menu open state */
@media (max-width:900px){
  .nav.open ul{display:flex;flex-direction:column;gap:8px;position:absolute;top:64px;right:20px;background:var(--card);padding:12px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.35);border:1px solid rgba(0,240,255,0.04)}
  .nav.open ul a{display:block;padding:8px 12px}
}

/* prefer reduced motion: disable long animations */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Product Modal Styles */
.product-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.3));z-index:70;padding:20px}
.product-modal.show{display:flex}
.modal-overlay{position:absolute;inset:0;background:transparent}
.modal-window{position:relative;width:100%;max-width:900px;background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,248,255,0.96));border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-height:85vh;overflow-y:auto;z-index:71}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;background:linear-gradient(90deg,#006689,#004e6a);border-bottom:2px solid rgba(0,102,137,0.1);position:sticky;top:0}
.modal-header h2{margin:0;color:#ffffff;font-size:24px}
.modal-close{background:transparent;border:none;color:#ffffff;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{opacity:0.8}
.modal-body{padding:32px}
.modal-content{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.modal-gallery{display:flex;flex-direction:column;gap:16px}
.modal-gallery img:first-child{width:100%;height:400px;object-fit:cover;border-radius:12px;border:2px solid rgba(0,102,137,0.1)}
.modal-thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumbnail{width:100%;height:80px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid rgba(0,102,137,0.1);transition:all 200ms ease}
.thumbnail:hover,.thumbnail.active{border-color:#006689;transform:scale(1.05)}
.modal-details h3{margin:0 0 12px;color:#022433;font-size:20px}
.modal-details p{color:#05434e;margin:0 0 20px;line-height:1.6}
.modal-details h4{color:#013244;margin:16px 0 12px;font-size:16px}
.modal-details ul{margin:0;padding-left:20px;color:#05434e}
.modal-details li{margin:8px 0;line-height:1.5}
.modal-cta{display:flex;gap:12px;margin-top:24px}

@media (max-width:768px){
  .modal-content{grid-template-columns:1fr;gap:20px}
  .modal-gallery img:first-child{height:300px}
  .modal-body{padding:20px}
  .modal-header{padding:16px}
}

/* subtle animated glow on hero title */
.hero h1{animation:glow 5s ease-in-out infinite}
@keyframes glow{0%,100%{text-shadow:0 0 6px rgba(0,240,255,0.05)}50%{text-shadow:0 0 18px rgba(0,240,255,0.18)}}