:root{
  --blue-900:#0b3b8a;
  --blue-700:#0e73c2;
  --cyan:#00d4d4;
  --accent:#00c6ff;
  --muted:#f4fbff;
  --text:#04274a;
  --max-width:1440px;
}
*{box-sizing:border-box}
body{font-family:Montserrat, Poppins, system-ui, sans-serif;margin:0;color:var(--text);background:#fff}
.container{max-width:var(--max-width);margin:0 auto;padding:0 28px}

.site-header{background:linear-gradient(90deg,#00409e 0%, #0062af 50%, #00fdfb 100%);color:#fff;padding:10px 0;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:96px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{display:block;max-height:96px;height:auto;max-width:560px;width:auto}
.logo span{color:var(--accent);margin-left:6px}
.main-nav a{color:#fff;text-decoration:none;margin:0 14px;font-weight:600}
.user{background:rgba(255,255,255,0.12);padding:8px 14px;border-radius:22px;display:flex;align-items:center;gap:8px}
.user-icon{height:28px;width:auto;display:block}
@media (max-width:420px){
  .user-icon{height:20px}
}

.hero{padding:80px 0 40px;position:relative;background:linear-gradient(180deg,#ffffff 0%, #f7fdff 100%)}
.hero-grid{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center}
.hero-left{padding:20px}
.pill{display:inline-block;background:rgba(0,198,255,0.08);color:var(--blue-700);padding:10px 20px;border-radius:30px;border:1px solid rgba(0,198,255,0.18);font-weight:600;letter-spacing:2px}
.eyebrow{font-size:60px;margin:18px 0 0;color:var(--blue-900);font-weight:700;font-style:italic;font-family: Calibri, 'Trebuchet MS', Arial, sans-serif}
.brand{font-size:56px;margin:6px 0 6px;color:var(--blue-700);font-weight:800}
.lead{color:#243b57;margin:12px 0 26px}
.btn{display:inline-block;padding:14px 28px;border-radius:28px;text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(90deg,#00409e,#0e73c2);color:#fff;border:none;box-shadow:0 10px 24px rgba(4,82,160,0.18);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(4,82,160,0.22);opacity:0.98}

.hero-right{display:flex;justify-content:center}
.circle-image{width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 20%, rgba(0,198,255,0.12), transparent 30%), #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,198,255,0.12), 0 6px 18px rgba(13,67,129,0.08);position:relative}
.circle-image img{width:86%;height:86%;object-fit:cover;border-radius:50%;display:block}

/* dotted ring */
.circle-image::after{content:"";position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle at center, rgba(0,198,255,0.18) 1px, transparent 2px);background-size:12px 12px;opacity:0.95}

.cta-row{padding:36px 0 80px}
.cta-grid{display:flex;gap:18px;justify-content:center;align-items:center}
.cta{background:linear-gradient(90deg,var(--blue-900),var(--blue-700));color:#fff;padding:18px 44px;border-radius:18px;text-decoration:none;font-weight:700;display:inline-block}

.social-fixed{position:fixed;right:12px;top:36%;display:flex;flex-direction:column;gap:18px;z-index:80;align-items:center;padding:14px 10px;border-radius:28px;background:linear-gradient(180deg,#073b8a,#003a8c);box-shadow:0 8px 24px rgba(3,30,60,0.18)}
.social-fixed a.social{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.social{background:transparent;border:none;padding:0;cursor:pointer}
.social .icon{width:48px;height:48px;border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease, box-shadow .12s ease}
.social .icon svg{width:20px;height:20px;display:block}
.social:hover .icon{transform:translateY(-4px);box-shadow:0 8px 20px rgba(3,30,60,0.18)}
.social .icon img{width:26px;height:26px;object-fit:contain;display:block;background:transparent}
.social-fixed::before{content:"";position:absolute;left:-18px;top:8px;width:18px;height:18px;background:transparent;border-top-left-radius:18px;border-bottom-left-radius:18px}

.site-footer{background:#f3f7fb;padding:18px 0;text-align:center;color:#6b7b8e}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr 360px;padding-right:0}
  .brand{font-size:44px}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-right{order:-1;justify-content:center}
  .circle-image{width:320px;height:320px}
  .container{padding:0 20px}
  .logo-img{max-height:72px;max-width:420px}
  .social-fixed{right:8px;top:34%;gap:14px;padding:12px 8px}
  .social .icon{width:42px;height:42px}
}
@media (max-width:420px){
  .circle-image{width:260px;height:260px}
  .brand{font-size:34px}
  .eyebrow{font-size:26px}
  .logo-img{max-height:48px;max-width:240px}
  .social-fixed{display:none}
}

/* Floating decorative images (from /mas) */
.floating-img{position:fixed;z-index:20;pointer-events:none;will-change:transform,opacity;opacity:0;display:block}
@keyframes floatFade{
  0%{opacity:0;transform:translateY(12px) scale(.98)}
  10%{opacity:1;transform:translateY(0) scale(1)}
  80%{opacity:1;transform:translateY(-28px) scale(1.02)}
  100%{opacity:0;transform:translateY(-48px) scale(1.04)}
}

/* About page: circle cards with hover info panels */
/* about cards: slightly larger single-row layout */
.cards-row{display:flex;gap:40px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;width:100%;padding:16px 8px}
.circle-card{position:relative;flex:0 1 300px;max-width:320px;min-width:220px;display:flex;align-items:center;justify-content:center}
.circle-card .circle-image{width:240px;height:240px;border-radius:50%;overflow:hidden;box-shadow:0 10px 28px rgba(2,46,80,0.06)}
.circle-card .circle-image img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* Caption (title) above each image */
.card-caption{width:100%;text-align:center;margin-bottom:10px}
.card-caption h2{margin:0;font-size:18px;color:var(--blue-700);font-weight:800;letter-spacing:0.6px}

.circle-card{display:flex;flex-direction:column;align-items:center}
.circle-card .flip-card{margin-top:6px}

/* Flip card 3D effect */
.flip-card{width:240px;height:240px;perspective:1000px;display:flex;align-items:center;justify-content:center}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.flip-back{transform:rotateY(180deg);background:linear-gradient(180deg, rgba(0,253,251,0.12), rgba(0,198,255,0.95));box-shadow:0 12px 30px rgba(2,46,80,0.08)}
.flip-back .info-panel{position:relative;top:auto;left:auto;transform:none;opacity:1;visibility:visible;width:100%;height:100%;border-radius:50%;padding:22px;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:transparent}
.flip-card:hover .flip-inner,.flip-card:focus-within .flip-inner{transform:rotateY(180deg)}
.flip-front .circle-image{width:100%;height:100%;border-radius:50%;overflow:hidden}
.flip-front .circle-image img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Simple blue border for the three about-page images */
.circle-card .flip-front .circle-image img{
  border:6px solid rgba(14,115,194,0.95); /* blue similar to --blue-700 */
  box-shadow:0 10px 30px rgba(14,115,194,0.12);
}

/* Animated gradient ring around the image */
.flip-front .circle-image{position:relative;z-index:1}
.flip-front .circle-image img{position:relative;z-index:2}
.flip-front .circle-image::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;z-index:1;
  background:conic-gradient(from 0deg, rgba(0,198,255,0.9), rgba(14,115,194,0.95), rgba(0,198,255,0.9));
  padding:6px; /* thickness of the ring */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), black calc(100% - 10px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), black calc(100% - 10px));
  transform:rotate(0deg);animation:rotateBorder 6s linear infinite;
  opacity:0.9;filter:blur(.6px);
}
@keyframes rotateBorder{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Make the existing fadeIn overlay sit above the rotating ring */
.flip-front .circle-image::after{z-index:2}

/* Blue glow effect to attract hover attention */
.flip-front .circle-image{position:relative;transition:box-shadow .36s cubic-bezier(.2,.8,.2,1),transform .36s cubic-bezier(.2,.8,.2,1),filter .36s ease}
.flip-front .circle-image::after{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center, rgba(0,198,255,0.22), rgba(0,198,255,0.08) 42%, transparent 62%);opacity:0.66;transform:scale(1);animation:fadeIn 2.4s ease-in-out infinite alternate}
@keyframes fadeIn{
  0%{opacity:0.18;transform:scale(.98)}
  100%{opacity:0.95;transform:scale(1.06)}
}

.flip-card:hover .flip-front .circle-image{transform:scale(1.035)}
.flip-card:focus-within .flip-front .circle-image{transform:scale(1.02)}
.flip-card:hover .flip-front .circle-image::after,
.flip-card:focus-within .flip-front .circle-image::after{opacity:1;transform:scale(1.06)}
.flip-front .circle-image{box-shadow:0 8px 20px rgba(2,46,80,0.06)}
.flip-card:hover .flip-front .circle-image{box-shadow:0 18px 48px rgba(0,198,255,0.18), 0 0 40px rgba(0,198,255,0.12)}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .flip-front .circle-image,.flip-front .circle-image::after{transition:none;animation:none}
}



.info-panel{position:absolute;top:50%;transform:translateY(20px);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:30;padding:20px;border-radius:16px;box-shadow:0 14px 36px rgba(2,46,80,0.12);max-width:340px}
.info-panel h3{margin:0 0 10px;font-size:22px;color:#062847}
.info-panel p{margin:0;color:#04274a;line-height:1.45;font-size:15px}

.info-left{left:-340px;width:320px;background:linear-gradient(180deg, rgba(0,253,251,0.12), rgba(0,198,255,0.95));color:#04274a}
.info-center{left:50%;transform:translate(-50%,20px);width:320px;background:linear-gradient(180deg, rgba(0,253,251,0.12), rgba(0,198,255,0.95));color:#04274a}
.info-right{right:-340px;width:320px;background:linear-gradient(180deg, rgba(0,253,251,0.12), rgba(0,198,255,0.95));color:#04274a}

/* When info-panel is used as the back face of a flip card, reset positioning
   so the panel fits inside the circular back and is visible. */
.flip-back .info-left,
.flip-back .info-center,
.flip-back .info-right{
  left: auto;
  right: auto;
  width: 100%;
  transform: none;
  background: transparent;
}

.circle-card:hover .info-panel,
.circle-card:focus-within .info-panel{opacity:1;visibility:visible;transform:translateY(0)}

@media (max-width:1000px){
  .cards-row{gap:32px;flex-wrap:wrap;justify-content:center}
  .circle-card{flex:0 0 300px}
  .circle-card .circle-image{width:75%}
}

@media (max-width:520px){
  .cards-row{gap:20px;flex-wrap:wrap;justify-content:center}
  .circle-card{flex:0 0 100%;max-width:420px}
  .circle-card .circle-image{width:60%}
  .info-left,.info-center,.info-right{display:block;position:relative;left:0;right:0;transform:none;width:100%;max-width:none;margin-top:12px}
}