:root{
  /* Neon turquoise accent system on a rich slate-blue foundation */
  --teal:#00E0C7;
  --teal-2:#2BF5E0;
  --teal-glow:rgba(43,245,224,.55);
  --neon-ring:0 0 0 1px rgba(43,245,224,.55), 0 0 24px rgba(43,245,224,.45);
  /* Deep, layered foundation tones (no flat black) */
  --bg:#070d18;
  --bg-2:#0c1726;
  --bg-3:#101f33;
  --text:#e6f7f6;
  --muted:#8aa2b3;
  --white:#ffffff;
  --black:#000000;
  --glass:rgba(255,255,255,.05);
  --glass-border:rgba(255,255,255,.10);
  --shadow:0 14px 50px rgba(0,0,0,.55);
  --radius:18px;
  --ease-spring:cubic-bezier(.2,.9,.25,1.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.2;color:var(--white)}
h1{font-size:clamp(2rem,5vw,3.8rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.6rem);margin-bottom:.6em}
h3{font-size:1.3rem;margin-bottom:.4em}
a{color:var(--teal-2);text-decoration:none;transition:.25s}
a:hover{color:var(--white)}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 1.2rem}
.muted{color:var(--muted)}
section{padding:5rem 0;position:relative;z-index:2}

/* ===== Glassmorphism ===== */
.glass{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===== Background canvas ===== */
#bg-canvas{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(43,245,224,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,224,199,.08), transparent 65%),
    radial-gradient(ellipse at top,#102a3f 0%,#0a1626 55%,#05080f 100%);
}

/* ===== Preloader ===== */
#preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center, #0a1a24, #04080c);
  transition:opacity .6s,visibility .6s;
}
#preloader.hidden{opacity:0;visibility:hidden}
.preloader-inner{padding:3rem 2.5rem;text-align:center;max-width:90%;width:420px}
.pre-logo{width:80px;margin:0 auto 1rem;animation:float 2s ease-in-out infinite}
#greeting{color:var(--teal-2);margin-bottom:.5rem}
.loader-bar{
  width:100%;height:4px;background:rgba(255,255,255,.08);
  border-radius:99px;overflow:hidden;margin-top:1.4rem;
}
.loader-bar span{
  display:block;height:100%;width:30%;
  background:linear-gradient(90deg,var(--teal),var(--teal-2));
  border-radius:99px;animation:load 1.4s ease-in-out infinite;
}
@keyframes load{0%{transform:translateX(-100%);width:30%}50%{width:60%}100%{transform:translateX(350%);width:30%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== Header / Nav ===== */
.site-header{position:sticky;top:0;z-index:50;padding:.8rem 0}
.nav-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.2rem;border-radius:99px;gap:.6rem;
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--white);font-weight:700;font-family:'Space Grotesk';min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand img{width:36px;height:36px;flex-shrink:0}
.main-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
.main-nav .nav-links{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.main-nav a{color:var(--text);font-weight:500;position:relative;white-space:nowrap}
.main-nav a:not(.btn-primary):after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--teal-2);transition:.3s;
}
.main-nav a:not(.btn-primary):hover:after,.main-nav a.active:after{width:100%}
.nav-cta{margin-left:.4rem;flex-shrink:0}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;flex-shrink:0}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--white);transition:.3s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){.main-nav{gap:.8rem}.main-nav .nav-links{gap:.9rem}}

/* ===== Buttons ===== */
.btn-primary,.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.6rem;border-radius:99px;font-weight:600;cursor:pointer;
  border:none;font-size:.95rem;font-family:inherit;transition:.25s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:var(--white);box-shadow:0 8px 24px var(--teal-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--teal-glow);color:var(--white)}
.btn-sm{padding:.55rem 1.1rem;font-size:.85rem}
.btn-outline{background:transparent;border:1px solid var(--glass-border);color:var(--white)}
.btn-outline:hover{background:var(--glass);color:var(--white)}

/* ===== Hero ===== */
.hero{padding:6rem 0 4rem;text-align:center;position:relative}
.hero h1{margin-bottom:1rem;background:linear-gradient(135deg,#fff 30%,var(--teal-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{max-width:680px;margin:0 auto 2rem;color:var(--muted);font-size:1.1rem}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===== Section heads ===== */
.section-head{text-align:center;margin-bottom:3rem}
.eyebrow{color:var(--teal-2);font-weight:600;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;margin-bottom:.6rem;display:inline-block}

/* ===== Grids / Cards ===== */
.grid{display:grid;gap:1.5rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{padding:1.8rem;transition:.35s}
.card:hover{transform:translateY(-6px);border-color:var(--teal)}
.card .icon-wrap{
  display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));border-radius:14px;color:#fff;margin-bottom:1rem;
}
.card .icon-wrap svg{width:26px;height:26px}
.svc-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:1rem}

/* ===== Client cards ===== */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.client-grid .glass{height:100%}
.client-tile{padding:1.4rem 1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.7rem;text-align:center;aspect-ratio:auto;height:100%}
.client-logo-wrap{width:100%;height:84px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:12px;padding:.6rem}
.client-logo-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:none;opacity:1}
.client-name{font-size:1rem;line-height:1.25;margin:.2rem 0 0;color:var(--white)}
.client-desc{font-size:.88rem;color:var(--muted);line-height:1.5;margin:0}

/* ===== Floating contact button ===== */
.float-contact{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.3rem;border-radius:99px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#fff;font-weight:600;font-family:inherit;
  box-shadow:0 10px 30px var(--teal-glow);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px var(--teal-glow)}50%{box-shadow:0 10px 40px rgba(14,124,123,.8)}}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:1rem}
.modal.open{display:flex}
.modal-card{width:100%;max-width:480px;padding:2rem;position:relative}
.modal-close{position:absolute;top:.8rem;right:1rem;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
.modal-card input,.modal-card textarea,.form-row input,.form-row textarea,.form-row select,form input,form textarea,form select{
  width:100%;padding:.9rem 1rem;margin-top:.7rem;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
  border-radius:12px;color:var(--white);font-family:inherit;font-size:.95rem;
}
.modal-card input:focus,.modal-card textarea:focus,form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--teal-2)}
.modal-card button[type=submit],form button[type=submit]{margin-top:1rem;width:100%;justify-content:center}
.form-status{margin-top:.8rem;text-align:center;font-size:.9rem}
.form-status.ok{color:var(--teal-2)}
.form-status.err{color:#ff6b6b}

/* ===== Pricing ===== */
.price-card{padding:2rem;text-align:center;position:relative;height:100%}
.price-card.featured{border-color:var(--teal-2);background:linear-gradient(180deg,rgba(14,124,123,.18),var(--glass))}
.price-card .price{font-size:2rem;font-family:'Space Grotesk';color:var(--teal-2);margin:.6rem 0 1rem}
.price-card ul{list-style:none;text-align:left;margin:1rem 0}
.price-card li{padding:.4rem 0;color:var(--muted);font-size:.93rem;display:flex;gap:.5rem;align-items:flex-start}
.price-card li:before{content:"✓";color:var(--teal-2);font-weight:bold}
.badge{position:absolute;top:1rem;right:1rem;background:var(--teal-2);color:#fff;font-size:.7rem;padding:.25rem .7rem;border-radius:99px;font-weight:600}

/* ===== Directors ===== */
.director-card{padding:0;overflow:hidden;text-align:center}
.director-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.director-card .info{padding:1.2rem}

/* ===== Contact ===== */
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.contact-card{padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.contact-card .icon-wrap{flex-shrink:0;width:48px;height:48px;background:linear-gradient(135deg,var(--teal),var(--teal-2));border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.contact-card h4{margin-bottom:.2rem}

/* ===== Footer ===== */
.site-footer{padding:4rem 0 2rem;border-top:1px solid var(--glass-border);background:rgba(0,0,0,.3);position:relative;z-index:3;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 2fr;gap:2rem;margin-bottom:2rem}
.footer-grid h4{margin-bottom:1rem;color:var(--teal-2)}
.footer-grid a{display:block;color:var(--muted);padding:.2rem 0}
.footer-grid a:hover{color:var(--white)}
.footer-grid p{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.footer-grid svg{width:16px;height:16px;color:var(--teal-2)}
.copyright{text-align:center;padding-top:2rem;border-top:1px solid var(--glass-border);color:var(--muted);font-size:.85rem}

/* ===== Animations ===== */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== Responsive ===== */
@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .contact-row,.footer-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  section{padding:3.5rem 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr}
}

/* ===== Admin styles ===== */
.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.admin-sidebar{
  background:#0a1a24;border-right:1px solid var(--glass-border);
  padding:1.5rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-sidebar .brand{margin-bottom:2rem}
.admin-sidebar a{
  display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;
  color:var(--muted);border-radius:10px;margin-bottom:.2rem;font-size:.92rem;
}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(14,124,123,.18);color:#fff}
.admin-main{padding:2rem;background:#06121a;min-height:100vh}
.admin-main h1{margin-bottom:1.5rem;font-size:1.8rem}
.admin-toggle{display:none;position:fixed;top:1rem;right:1rem;left:auto;z-index:70;background:var(--teal);border:0;color:#fff;width:42px;height:42px;border-radius:10px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.flash{padding:.9rem 1rem;border-radius:10px;margin-bottom:1rem;background:rgba(14,124,123,.2);border:1px solid var(--teal-2);color:#fff}
.admin-table{width:100%;border-collapse:collapse;background:var(--glass);border-radius:12px;overflow:hidden}
.admin-table th,.admin-table td{padding:.9rem;text-align:left;border-bottom:1px solid var(--glass-border);font-size:.9rem}
.admin-table th{background:rgba(0,0,0,.3);color:var(--teal-2);font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}
.admin-table tr:last-child td{border:0}
.admin-table img{width:50px;height:50px;object-fit:cover;border-radius:6px}
.admin-form{max-width:720px;padding:2rem}
.admin-form label{display:block;margin-top:1rem;color:var(--muted);font-size:.88rem;font-weight:500}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.btn-edit,.btn-del,.btn-add{padding:.45rem .8rem;border-radius:8px;font-size:.8rem;border:0;cursor:pointer;font-family:inherit;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.btn-edit{background:var(--teal)}
.btn-del{background:#c0392b}
.btn-add{background:linear-gradient(135deg,var(--teal),var(--teal-2));margin-bottom:1rem}
.admin-grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.stat-card{padding:1.4rem;text-align:center}
.stat-card .num{font-size:2rem;color:var(--teal-2);font-family:'Space Grotesk';font-weight:700}
.stat-card .lbl{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-top:.3rem}

@media (max-width:880px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:fixed;top:0;left:-280px;width:260px;height:100vh;overflow-y:auto;transition:.3s;z-index:60}
  .admin-sidebar.open{left:0}
  .admin-toggle{display:block}
  .admin-main{padding:4.5rem 1rem 2rem}
  .admin-main h1{padding-right:3.5rem;margin-top:.25rem}
  .admin-grid-stats{grid-template-columns:repeat(2,1fr)}
  .admin-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;z-index:2}
.login-card{padding:2.5rem;width:100%;max-width:400px}
.login-card .brand{justify-content:center;margin-bottom:1.5rem}

/* Hero video background */
.hero-video{overflow:hidden;min-height:600px;display:flex;align-items:center;justify-content:center;padding:8rem 0 6rem}
.hero-video .hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero-video .hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(7,17,32,.78) 0%,rgba(7,17,32,.55) 50%,rgba(7,17,32,.85) 100%);z-index:1}
.hero-video .hero-content{position:relative;z-index:2}
@media (max-width:768px){.hero-video{min-height:480px;padding:5rem 0 3rem}}
@media (prefers-reduced-motion:reduce){.hero-video .hero-bg-video{display:none}}

/* ====== Floating WhatsApp buttons (left side) ====== */
.float-wa{
  position:fixed;left:1.2rem;z-index:60;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.1rem;border-radius:99px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;font-weight:600;font-size:.85rem;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  text-decoration:none;transition:.25s;
}
.float-wa:hover{transform:translateY(-2px) scale(1.04);color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.65)}
.float-wa svg{width:18px;height:18px}
.float-wa-1{bottom:5.2rem}
.float-wa-2{bottom:1.2rem}

/* ====== Animated floating chat button ====== */
.float-contact{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.3rem;border-radius:99px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#fff;font-weight:600;font-family:inherit;
  box-shadow:0 10px 30px var(--teal-glow);
  animation:fc-bob 3.2s ease-in-out infinite, fc-glow 2s ease-in-out infinite;
  overflow:visible;
}
.float-contact .fc-pulse{
  position:absolute;inset:-6px;border-radius:99px;
  border:2px solid var(--teal-2);
  animation:fc-ping 1.8s ease-out infinite;
  pointer-events:none;opacity:0;
}
.float-contact:hover{transform:translateY(-3px) scale(1.05)}
.float-contact svg{animation:fc-wiggle 2.8s ease-in-out infinite;transform-origin:50% 50%}
@keyframes fc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fc-glow{0%,100%{box-shadow:0 10px 30px var(--teal-glow)}50%{box-shadow:0 12px 44px rgba(19,163,162,.85)}}
@keyframes fc-ping{0%{transform:scale(.95);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes fc-wiggle{0%,90%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(8deg)}}

/* ====== Corporate Partners ====== */
.partner-card{text-align:left}
.partner-logo{height:60px;width:auto;object-fit:contain;margin-bottom:1rem;filter:brightness(1.05)}

/* ====== Portfolio download card ====== */
.portfolio-card{
  text-align:center;padding:2.6rem 2rem;
  background:linear-gradient(135deg,rgba(14,124,123,.25),rgba(19,163,162,.08));
  border:1px solid rgba(19,163,162,.4);
}
.portfolio-card .icon-wrap{margin:0 auto 1rem}
.portfolio-card h2{margin-bottom:.6rem}
.portfolio-card p{max-width:560px;margin:0 auto 1.4rem}

/* ====== Contact cards ====== */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:stretch}
.contact-grid .contact-card{
  text-align:center;flex-direction:column;align-items:center;height:100%;
  justify-content:flex-start;gap:.9rem;padding:1.8rem 1.4rem;margin-bottom:0;
}
.contact-grid .contact-card .icon-wrap{margin:0 auto;width:52px;height:52px}
.contact-grid .contact-card h3{margin-bottom:.2rem}
.contact-grid .contact-card p.muted{margin-top:auto;padding-top:.4rem;line-height:1.55}
.contact-grid .contact-card p.muted a{display:inline-flex;align-items:center;gap:.3rem}
.wa-link{display:inline-flex;align-items:center;gap:.35rem;color:#25D366;font-weight:500}
.wa-link svg{width:14px;height:14px}
.wa-link:hover{color:#fff}

/* ====== Glossary ====== */
.gloss-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.gloss-item{padding:1.1rem 1.2rem;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:14px;transition:.25s}
.gloss-item:hover{border-color:var(--teal-2);transform:translateY(-2px)}
.gloss-item h3{color:var(--teal-2);font-size:1.05rem;margin-bottom:.4rem}
.gloss-item p{font-size:.92rem;color:var(--muted);margin-bottom:.4rem}
@media (max-width:780px){.gloss-list{grid-template-columns:1fr}}

/* ====== Ajax status ====== */
.ajax-status{display:block;font-size:.78rem;margin-top:.3rem;min-height:1em;transition:opacity .3s}

/* ====== Mobile nav overrides ====== */
@media (max-width:880px){
  .menu-toggle{display:flex}
  .main-nav{
    position:absolute;top:calc(100% + .4rem);left:1rem;right:1rem;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,26,36,.98);backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);border-radius:18px;
    padding:.6rem 1rem 1rem;display:none;
    max-height:calc(100vh - 6rem);overflow-y:auto;
    box-shadow:0 12px 40px rgba(0,0,0,.4);
  }
  .main-nav.open{display:flex}
  .main-nav .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .main-nav .nav-links a{
    padding:.95rem .4rem;border-bottom:1px solid var(--glass-border);
    font-size:1rem;width:100%;display:block;
  }
  .main-nav .nav-links a:last-child{border-bottom:0}
  .main-nav .nav-links a:not(.btn-primary):after{display:none}
  .main-nav .nav-links a.active{color:var(--teal-2)}
  .nav-cta{margin:.9rem 0 .2rem;text-align:center;justify-content:center;width:100%;display:block}
}
@media (max-width:520px){
  .float-contact .fc-label{display:none}
  .float-contact{padding:1rem}
  .float-wa span{display:none}
  .float-wa{padding:.8rem}
}

/* ===== Section icon badge (clients / partners headings) ===== */
.section-icon{
  display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border-radius:16px;color:#fff;margin-bottom:1rem;
  box-shadow:0 8px 24px var(--teal-glow);
}
.section-icon svg{width:28px;height:28px}

/* Client tile icon fallback (overrides handled in main .client-tile rule above) */
.client-tile .client-icon{width:36px;height:36px;color:var(--teal-2)}

/* ===== Mobile-centered contact cards (homepage + contact page) ===== */
@media (max-width:680px){
  .contact-grid{display:flex;flex-direction:column;align-items:center;gap:1rem}
  .contact-grid .contact-card{
    width:100%;max-width:420px;
    flex-direction:column;align-items:center;text-align:center;
    gap:.6rem;padding:1.4rem;
  }
  .contact-grid .contact-card .icon-wrap{margin:0 auto}
  .contact-grid .contact-card h3{margin-bottom:.3rem}
  .contact-grid .contact-card p,.contact-grid .contact-card a{text-align:center;justify-content:center}
  .wa-link{display:inline-flex;align-items:center;justify-content:center;gap:.3rem}
}

/* ===== Admin Settings — larger white-text inputs + Save buttons ===== */
.admin-form input[type=text],
.admin-form input[type=number],
.admin-form input[type=email],
.admin-form input[type=password],
.admin-form textarea,
.admin-form select{
  width:100%;
  padding:1rem 1.1rem;
  margin-top:.5rem;
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  border-radius:12px;
  color:#ffffff !important;
  font-family:inherit;
  font-size:1.02rem;
  line-height:1.45;
}
.admin-form textarea{min-height:110px;resize:vertical}
.admin-form input::placeholder,.admin-form textarea::placeholder{color:rgba(255,255,255,.55)}
.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{
  outline:none;border-color:var(--teal-2);background:rgba(255,255,255,.12);
}
.admin-form label{color:#e8f4f4;font-weight:600;font-size:.95rem;margin-top:1.1rem}
.setting-row{margin-bottom:1.1rem}
.setting-row .setting-actions{display:flex;align-items:center;gap:.6rem;margin-top:.55rem;flex-wrap:wrap}
.btn-save{
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#fff;border:0;border-radius:10px;cursor:pointer;
  padding:.6rem 1.1rem;font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;gap:.4rem;font-family:inherit;
  box-shadow:0 6px 16px var(--teal-glow);transition:.2s;
}
.btn-save:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-save:active{transform:translateY(0)}
.ajax-status{font-size:.85rem;font-weight:500}

/* ===== Admin mobile polish ===== */
@media (max-width:880px){
  .admin-main{padding:1.2rem .9rem}
  .admin-form{padding:1.2rem;max-width:100%}
  .admin-form input,.admin-form textarea{font-size:1rem}
  .setting-row .setting-actions{justify-content:flex-start}
}

/* ===== Homepage contact section — centered under the heading ===== */
.home-contact .section-head{text-align:center}
.home-contact .home-contact-inner{
  max-width:1100px;margin:0 auto;display:flex;justify-content:center;
}
.home-contact .contact-grid{width:100%;justify-items:center}
.home-contact .contact-grid .contact-card{
  text-align:center;align-items:center;width:100%;
}
.home-contact .contact-grid .contact-card .icon-wrap{margin:0 auto 1rem}
.home-contact .contact-grid .contact-card h3,
.home-contact .contact-grid .contact-card p,
.home-contact .contact-grid .contact-card a{
  text-align:center;justify-content:center;
}
.home-contact .contact-grid .wa-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
}

/* ===== Admin settings — clickable group cards + modal ===== */
.settings-group-card{
  cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.4rem;margin-bottom:1rem;
}
.settings-group-card:hover{transform:translateY(-2px);border-color:var(--teal-2)}
.settings-group-card h3{margin:0;color:var(--white)}
.settings-group-card .sg-meta{color:var(--muted);font-size:.85rem;margin-top:.25rem}
.settings-group-card .sg-edit{
  color:var(--teal-2);font-weight:600;font-size:.9rem;white-space:nowrap;
}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(4,12,18,.7);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem;
}
.modal-backdrop.open{display:flex}
.modal-box{
  background:rgba(10,26,36,.98);border:1px solid var(--glass-border);
  border-radius:18px;max-width:680px;width:100%;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--glass-border);
}
.modal-head h3{margin:0;color:var(--white)}
.modal-close{
  background:none;border:0;color:var(--muted);font-size:1.6rem;cursor:pointer;
  line-height:1;padding:.2rem .5rem;border-radius:8px;
}
.modal-close:hover{color:var(--white);background:rgba(255,255,255,.06)}
.modal-body{padding:1.2rem 1.4rem;overflow-y:auto;flex:1}
.modal-body .setting-row{margin-bottom:1.1rem}
.modal-body label{display:block;color:#e8f4f4;font-weight:600;font-size:.95rem;margin-bottom:.4rem}
.modal-body input,.modal-body textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
  color:#ffffff !important;padding:.7rem .9rem;border-radius:10px;font-size:.95rem;
}
.modal-body input::placeholder,.modal-body textarea::placeholder{color:rgba(255,255,255,.55)}
.modal-body input:-webkit-autofill,.modal-body textarea:-webkit-autofill{
  -webkit-text-fill-color:#ffffff !important;
  -webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,.06) inset !important;
  transition:background-color 5000s ease-in-out 0s;
}
.modal-body textarea{min-height:110px;resize:vertical}
.modal-foot{
  display:flex;justify-content:flex-end;gap:.6rem;
  padding:1rem 1.4rem;border-top:1px solid var(--glass-border);
}
.modal-foot .btn-cancel{
  background:transparent;border:1px solid var(--glass-border);color:var(--white);
  padding:.6rem 1.2rem;border-radius:10px;cursor:pointer;font-weight:600;
}
.modal-foot .btn-cancel:hover{background:rgba(255,255,255,.06)}
.modal-foot .modal-status{align-self:center;margin-right:auto;font-size:.85rem}
@media (max-width:600px){
  .settings-group-card{flex-direction:column;align-items:flex-start;text-align:left}
  .modal-box{max-height:95vh}
}

/* ===== Admin sidebar collapsible group ===== */
.admin-sidebar .nav-group{margin:.1rem 0 .2rem;border-radius:10px}
.admin-sidebar .nav-group>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;
  padding:.7rem 1rem;color:var(--muted);border-radius:10px;font-size:.92rem;
}
.admin-sidebar .nav-group>summary::-webkit-details-marker{display:none}
.admin-sidebar .nav-group>summary:hover{background:rgba(14,124,123,.12);color:#fff}
.admin-sidebar .nav-group>summary .chev{margin-left:auto;width:16px;height:16px;transition:transform .25s}
.admin-sidebar .nav-group[open]>summary .chev{transform:rotate(180deg)}
.admin-sidebar .nav-group .nav-group-items{display:flex;flex-direction:column;padding-left:.6rem;margin:.1rem 0 .3rem;border-left:1px solid rgba(255,255,255,.06)}
.admin-sidebar .nav-group .nav-group-items a{font-size:.88rem;padding:.55rem .8rem}

/* Keep mobile toggle clear of page actions (Add button) */
@media (max-width:880px){
  .admin-toggle{top:auto;bottom:1rem;right:1rem;box-shadow:0 6px 18px rgba(0,0,0,.45)}
  .admin-main{padding:1rem 1rem 5rem}
  .admin-main h1{padding-right:0}
}

/* ===== Floating admin sidebar (overlay on all viewports) ===== */
.admin-layout{grid-template-columns:1fr !important}
.admin-sidebar{
  position:fixed;top:1rem;left:1rem;bottom:1rem;width:248px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,30,40,.92), rgba(6,18,26,.92));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(19,163,162,.08);
  overflow-y:auto;z-index:60;
  transform:translateX(-110%);transition:transform .28s ease;
}
.admin-sidebar.open{transform:translateX(0)}
.admin-toggle{
  display:block;position:fixed;top:1rem;left:1rem;right:auto;bottom:auto;z-index:70;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:0;color:#fff;width:44px;height:44px;border-radius:12px;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .2s;
}
.admin-toggle:hover{transform:translateY(-1px)}
.admin-sidebar.open ~ .admin-main .admin-toggle,
body:has(.admin-sidebar.open) .admin-toggle{transform:translateX(260px)}
.admin-main{padding:1.25rem 1.25rem 2rem 4.5rem !important;background:#06121a;min-height:100vh}
.admin-main h1{padding-right:0;margin-top:.25rem}
@media (min-width:900px){
  .admin-main{padding:1.5rem 2rem 2rem 4.75rem !important}
}

/* ===== Dashboard polish ===== */
.admin-grid-stats{gap:1.1rem}
.stat-card{
  position:relative;overflow:hidden;padding:1.5rem 1.4rem;
  background:linear-gradient(140deg, rgba(19,163,162,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);border-radius:16px;
  text-align:left;transition:transform .25s, box-shadow .25s, border-color .25s;
}
.stat-card::after{
  content:"";position:absolute;inset:auto -30% -50% auto;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(19,163,162,.35), transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.stat-card:hover{transform:translateY(-3px);border-color:rgba(19,163,162,.35);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.stat-card .num{font-size:2.4rem;line-height:1}
.stat-card .lbl{margin-top:.5rem;color:var(--muted)}
.admin-table{border-radius:14px;overflow:hidden}

/* ============================================================
   MICRO-INTERACTIONS & RICH ACCENT POLISH (v6.5)
   ============================================================ */

/* Tactile card hover — scale + glowing neon border */
.card,
.price-card,
.gloss-item,
.partner-card,
.contact-card,
.director-card,
.stat-card,
.settings-group-card{
  transition:
    transform .35s var(--ease-spring),
    box-shadow .35s ease,
    border-color .25s ease,
    background .35s ease;
  will-change:transform;
}
.card:hover,
.price-card:hover,
.gloss-item:hover,
.partner-card:hover,
.contact-card:hover,
.director-card:hover,
.settings-group-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:var(--teal-2);
  box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 24px rgba(43,245,224,.18);
}
.stat-card{border-left:3px solid transparent}
.stat-card:hover{
  transform:translateY(-4px) scale(1.01);
  border-left-color:var(--teal-2);
  box-shadow:0 22px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(43,245,224,.25);
}

/* Morphing icon containers — gentle rotate + glow on hover */
.card .icon-wrap,
.contact-card .icon-wrap,
.section-icon{
  transition:transform .45s var(--ease-spring), box-shadow .35s ease, filter .35s ease;
}
.card:hover .icon-wrap,
.contact-card:hover .icon-wrap,
.section-icon:hover{
  transform:rotate(-6deg) scale(1.08);
  box-shadow:0 10px 28px var(--teal-glow);
  filter:saturate(1.15) brightness(1.08);
}
.card .icon-wrap svg,
.contact-card .icon-wrap svg,
.section-icon svg{transition:transform .4s var(--ease-spring)}
.card:hover .icon-wrap svg,
.contact-card:hover .icon-wrap svg{transform:scale(1.12)}

/* Neon primary buttons — energetic glow + lift */
.btn-primary{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#04141a;
  box-shadow:0 8px 24px var(--teal-glow), inset 0 0 0 1px rgba(255,255,255,.15);
  transition:transform .25s var(--ease-spring), box-shadow .3s ease, filter .25s ease;
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 38px var(--teal-glow), 0 0 0 1px rgba(43,245,224,.6);
  color:#04141a;filter:brightness(1.05);
}
.btn-primary:active{transform:translateY(0) scale(.98)}
/* sheen sweep on hover */
.btn-primary::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .7s ease;pointer-events:none;
}
.btn-primary:hover::before{left:130%}

/* Outline button — neon edge on hover */
.btn-outline{transition:background .25s, border-color .25s, color .25s, box-shadow .25s, transform .2s var(--ease-spring)}
.btn-outline:hover{
  border-color:var(--teal-2);color:var(--teal-2);
  box-shadow:0 0 0 1px rgba(43,245,224,.45), 0 8px 24px rgba(43,245,224,.18);
  transform:translateY(-1px);
}

/* Submit button morph: text -> spinner -> checkmark */
.btn-primary.is-loading,
.btn-primary.is-success{pointer-events:none}
.btn-primary.is-loading .btn-label,
.btn-primary.is-success .btn-label{opacity:0;transform:translateY(4px);transition:.2s}
.btn-primary .btn-label{display:inline-flex;align-items:center;gap:.5rem;transition:.2s}
.btn-primary .btn-spinner,
.btn-primary .btn-check{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);transition:opacity .25s ease, transform .35s var(--ease-spring);
  pointer-events:none;
}
.btn-primary.is-loading .btn-spinner{opacity:1;transform:scale(1)}
.btn-primary.is-success .btn-check{opacity:1;transform:scale(1)}
.btn-primary.is-success{background:linear-gradient(135deg,#0bd49a,#2BF5E0)}
.btn-spinner svg{width:20px;height:20px;animation:spin 0.9s linear infinite}
.btn-check svg{width:22px;height:22px;color:#04141a}
@keyframes spin{to{transform:rotate(360deg)}}

/* Metric / stat cards — glowing accent border */
.stat-card .num{
  background:linear-gradient(135deg,#fff,var(--teal-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 30px rgba(43,245,224,.15);
}

/* Nav link underline upgrade to neon */
.main-nav a:not(.btn-primary):after{
  background:linear-gradient(90deg,var(--teal),var(--teal-2));
  box-shadow:0 0 8px var(--teal-glow);
}

/* Floating contact — richer neon halo */
.float-contact{color:#04141a}
@keyframes fc-glow{
  0%,100%{box-shadow:0 10px 30px var(--teal-glow)}
  50%{box-shadow:0 14px 48px rgba(43,245,224,.85)}
}

/* Form focus — neon ring */
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 3px rgba(43,245,224,.18);
}

/* Section-wide reduced-motion respect */
@media (prefers-reduced-motion:reduce){
  .card:hover,.price-card:hover,.gloss-item:hover,.partner-card:hover,
  .contact-card:hover,.director-card:hover,.stat-card:hover,.settings-group-card:hover{
    transform:none;
  }
  .btn-primary:hover{transform:none}
  .btn-primary::before{display:none}
}

/* ===== v6.6 — Image reveal / parallax / Gallery / Lightbox ===== */
.img-reveal{
  opacity:0;
  transform:scale(.96) translateY(18px);
  filter:blur(6px);
  transition:opacity .9s ease, transform 1s cubic-bezier(.2,.9,.25,1.2), filter .8s ease;
  will-change:opacity,transform,filter;
}
.img-reveal.in{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
.svc-img, .home-img-anim{ transition:transform .25s ease-out; }

/* Hover zoom + neon glow on home/service images */
.svc-img, .home-img-anim, .gal-item img{
  border-radius:14px;
  transition:transform .5s var(--ease-spring), box-shadow .4s ease, filter .4s ease;
}
.svc-img:hover, .home-img-anim:hover{
  transform:scale(1.04) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.55), var(--neon-ring);
  filter:saturate(1.15);
}

/* ===== Gallery grid (masonry-ish, fast-loading) ===== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin-top:1rem;
}
.gal-item{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:14px;
  background:var(--bg-3);
  border:1px solid var(--glass-border);
  cursor:zoom-in;
  animation:galIn .6s both;
}
@keyframes galIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.gal-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease-spring), filter .4s ease;
}
.gal-item:hover img{ transform:scale(1.08); filter:brightness(1.05) saturate(1.15); }
.gal-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:.55rem .75rem;
  font-size:.85rem;
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  opacity:0; transform:translateY(8px); transition:.3s;
}
.gal-item:hover figcaption{ opacity:1; transform:none; }

/* ===== Portfolio category tabs ===== */
.portfolio-tabs{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:.5rem 0 1.2rem;
}
.pf-tab{
  background:var(--bg-3); color:var(--text);
  border:1px solid var(--glass-border);
  padding:.55rem 1rem; border-radius:999px;
  font-size:.9rem; cursor:pointer;
  transition:.2s; font-weight:500;
}
.pf-tab:hover{ border-color:var(--teal); color:var(--teal-2); }
.pf-tab.active{
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#001; border-color:transparent;
  box-shadow:var(--neon-ring);
}
@media (max-width:600px){
  .portfolio-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
  .pf-tab{ flex:0 0 auto; font-size:.85rem; padding:.5rem .9rem; }
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(3,8,16,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.open{ display:flex; animation:lbFade .25s ease; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lightbox .lb-img{
  max-width:min(95vw,1200px); max-height:80vh;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), var(--neon-ring);
  animation:lbZoom .3s var(--ease-spring);
}
@keyframes lbZoom{ from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox .lb-caption{
  position:absolute; bottom:1.2rem; left:0; right:0;
  text-align:center; color:#fff; font-size:.95rem;
}
.lightbox button{
  position:absolute; background:rgba(255,255,255,.08);
  color:#fff; border:1px solid var(--glass-border);
  width:44px; height:44px; border-radius:50%;
  font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.lightbox button:hover{ background:var(--teal); color:#001; box-shadow:var(--neon-ring); }
.lightbox .lb-close{ top:1rem; right:1rem; }
.lightbox .lb-prev { left:1rem;  top:50%; transform:translateY(-50%); }
.lightbox .lb-next { right:1rem; top:50%; transform:translateY(-50%); }

@media (prefers-reduced-motion: reduce){
  .img-reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .svc-img:hover, .home-img-anim:hover, .gal-item:hover img{ transform:none !important; }
}

/* ============================================================
   v6.7 overrides — black vector icons, clients/partners icon
   treatment, popup notice, message-view modal
   ============================================================ */

/* Black icons inside the turquoise blocks (cards & contact cards) */
.card .icon-wrap,
.contact-card .icon-wrap{
  color:#000;
}
.card .icon-wrap svg,
.contact-card .icon-wrap svg{
  color:#000;
  stroke:#000;
}
/* Buttons: keep turquoise block, force black icon + label */
.btn-primary{ color:#000 !important; }
.btn-primary svg{ color:#000; stroke:#000; }

/* Clients & Partners section heading icons: remove turquoise block,
   present icon in light turquoise */
.section-icon{
  background:transparent !important;
  box-shadow:none !important;
  width:auto;height:auto;color:var(--teal-2);
}
.section-icon svg{
  width:44px;height:44px;
  color:var(--teal-2);
  stroke:var(--teal-2);
  filter:drop-shadow(0 0 12px rgba(43,245,224,.35));
}
.section-icon:hover{
  background:transparent !important;
  filter:brightness(1.15);
}

/* Client tile icon in light turquoise (already, reinforce) */
.client-tile .client-icon{ color:var(--teal-2); stroke:var(--teal-2); }

/* ===== Homepage popup notice ===== */
.notice-backdrop{
  position:fixed;inset:0;z-index:9500;
  background:rgba(4,10,18,.78);
  backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
  animation:noticeFade .35s ease both;
}
.notice-backdrop.open{display:flex}
@keyframes noticeFade{from{opacity:0}to{opacity:1}}
.notice-card{
  position:relative;width:100%;max-width:520px;
  padding:2rem 1.6rem 1.8rem;
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(12,23,38,.96),rgba(7,13,24,.96));
  border:1px solid rgba(43,245,224,.35);
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(43,245,224,.25), 0 0 40px rgba(43,245,224,.25);
  text-align:center;
  animation:noticePop .45s var(--ease-spring) both;
}
@keyframes noticePop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.notice-alert{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#000;margin-bottom:1rem;
  box-shadow:0 8px 24px var(--teal-glow);
}
.notice-alert svg{width:30px;height:30px;color:#000;stroke:#000}
.notice-card h3{color:var(--white);margin-bottom:.6rem}
.notice-card p{color:var(--muted);line-height:1.55}
.notice-card .notice-body{margin-top:.4rem}
.notice-card img.notice-image{
  max-width:100%;max-height:320px;border-radius:14px;margin:0 auto;
  border:1px solid var(--glass-border);
}
.notice-close{
  position:absolute;top:.6rem;right:.6rem;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06);
  color:var(--white);font-size:1.2rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:.25s;
}
.notice-close:hover{background:var(--teal-2);color:#000;border-color:var(--teal-2)}
.notice-dismiss-row{
  margin-top:1.2rem;display:flex;justify-content:center;
}
.notice-dismiss-row button{
  padding:.7rem 1.4rem;border-radius:99px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#000;font-weight:600;font-family:inherit;
  display:inline-flex;align-items:center;gap:.4rem;
}
.notice-dismiss-row button svg{width:18px;height:18px;color:#000;stroke:#000}

/* ===== Admin: message view modal ===== */
.msg-modal-backdrop{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.msg-modal-backdrop.open{display:flex}
.msg-modal{
  width:100%;max-width:580px;max-height:90vh;overflow:auto;
  padding:1.8rem 1.5rem;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(12,23,38,.98),rgba(7,13,24,.98));
  border:1px solid rgba(43,245,224,.3);
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  position:relative;color:var(--text);
}
.msg-modal h2{color:var(--teal-2);font-size:1.3rem;margin-bottom:1rem;padding-right:2.5rem}
.msg-modal .msg-row{
  display:grid;grid-template-columns:110px 1fr;gap:.4rem 1rem;
  padding:.55rem 0;border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:.95rem;align-items:start;
}
.msg-modal .msg-row strong{color:var(--teal-2);font-weight:600}
.msg-modal .msg-row .v{color:var(--white);word-break:break-word}
.msg-modal .msg-body{
  margin-top:1rem;padding:1rem;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  white-space:pre-wrap;color:var(--white);line-height:1.55;
}
.msg-modal .msg-actions{
  margin-top:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end
}
.msg-modal-close{
  position:absolute;top:.7rem;right:.8rem;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.06);
  color:#fff;font-size:1.3rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.msg-modal-close:hover{background:var(--teal-2);color:#000;border-color:var(--teal-2)}
.btn-view{
  display:inline-block;padding:.4rem .8rem;border-radius:8px;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#000;font-weight:600;font-size:.85rem;border:0;cursor:pointer;
  text-decoration:none;
}
.btn-view:hover{filter:brightness(1.1);color:#000}

@media (max-width:600px){
  .msg-modal{padding:1.4rem 1rem;max-height:95vh}
  .msg-modal .msg-row{grid-template-columns:1fr;gap:.1rem;padding:.5rem 0}
  .msg-modal .msg-row strong{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
}

/* Admin notice page preview */
.notice-preview{
  margin-top:1rem;padding:1.2rem;border-radius:14px;
  background:rgba(0,0,0,.25);border:1px dashed var(--glass-border);
  text-align:center;
}
.notice-preview img{max-height:200px;margin:.6rem auto;border-radius:10px}

/* ============================================================
   TIME-OF-DAY THEMING
   Base palette stays turquoise; bg & contrast tokens shift
   based on body[data-tod] set by main.js.
   ============================================================ */
:root{
  --particle-rgb:175,238,238;            /* light turquoise particles (constant) */
  --hero-grad-start:#ffffff;
  --hero-grad-end:var(--teal-2);
}


/* Default / Night (20:00 - 05:00) — current deep blue */
body[data-tod="night"]{ /* defaults already cover it */ }

/* Sunrise (05:00 - 07:00) — WHITE morning particles, cool warm wash */
body[data-tod="sunrise"]{
  --bg:#1a1530;
  --bg-2:#2a1f3d;
  --bg-3:#3a2840;
  --text:#fff3e6;
  --muted:#c9b8a8;
  --particle-rgb:175,238,238;            /* light turquoise (constant) */
}
body[data-tod="sunrise"] #bg-canvas{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,240,220,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(255,255,255,.12), transparent 65%),
    radial-gradient(ellipse at top,#3a2840 0%,#241a36 55%,#0f0a1c 100%);
}

/* Daytime (07:00 - 17:00) — TURQUOISE afternoon particles on warm background */
body[data-tod="day"]{
  --bg:#1a1208;
  --bg-2:#2a1e10;
  --bg-3:#3a2a18;
  --text:#fff6e8;
  --muted:#d4b896;
  --glass:rgba(255,220,180,.06);
  --glass-border:rgba(255,200,140,.14);
  --hero-grad-end:#ffd58a;
  --particle-rgb:175,238,238;            /* light turquoise (constant) */
}
body[data-tod="day"] #bg-canvas{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,180,80,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(43,245,224,.18), transparent 65%),
    radial-gradient(ellipse at top,#3a2818 0%,#241608 55%,#0f0904 100%);
}

/* Sunset (17:00 - 20:00) — warm + cooling turquoise mix */
body[data-tod="sunset"]{
  --bg:#1d1228;
  --bg-2:#2d1b32;
  --bg-3:#3d2438;
  --text:#ffeede;
  --muted:#c9aea0;
  --hero-grad-end:#ffb088;
  --particle-rgb:175,238,238;            /* light turquoise (constant) */
}
body[data-tod="sunset"] #bg-canvas{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,140,90,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(43,245,224,.14), transparent 65%),
    radial-gradient(ellipse at top,#3d2438 0%,#241632 55%,#0a0a1a 100%);
}

/* Smooth background transitions when tod changes */
body, #bg-canvas, .glass, .btn-primary, .btn-outline{
  transition: background-color .8s ease, color .8s ease, background .8s ease, border-color .8s ease;
}

/* Keep buttons readable on warm backgrounds — preserve turquoise theme */
body[data-tod="day"] .btn-primary,
body[data-tod="sunset"] .btn-primary,
body[data-tod="sunrise"] .btn-primary{
  color:#06222a;                 /* dark teal text for contrast on bright turquoise */
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
body[data-tod="day"] .btn-outline,
body[data-tod="sunset"] .btn-outline,
body[data-tod="sunrise"] .btn-outline{
  color:var(--white);
  border-color:rgba(255,255,255,.35);
}
body[data-tod="day"] a:not(.btn-primary):not(.btn-outline),
body[data-tod="sunset"] a:not(.btn-primary):not(.btn-outline){
  color:#7afff0; /* brighter turquoise for warm bg contrast */
}

/* ============================================================
   BRAND NAME ANIMATIONS — .brand .brand-name
   Modes set on [data-brand-anim]: shimmer | glow | wave | static
   ============================================================ */
.brand .brand-name{
  display:inline-flex; align-items:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  letter-spacing:.02em;
}
.brand .brand-letter{
  display:inline-block;
  color:var(--white);
  will-change:transform,color,filter;
}

/* Static — no animation */
[data-brand-anim="static"] .brand-letter{ animation:none; }

/* Shimmer — continuous gradient sweep across the name */
[data-brand-anim="shimmer"] .brand-name{
  background:linear-gradient(
    90deg,
    var(--white) 0%,
    var(--teal-2) 25%,
    var(--teal) 50%,
    var(--teal-2) 75%,
    var(--white) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:brand-shimmer 4s linear infinite;
}
[data-brand-anim="shimmer"] .brand-letter{ color:inherit; }
@keyframes brand-shimmer{
  0%{ background-position:0% center; }
  100%{ background-position:-200% center; }
}

/* Glow — starts SOLID WHITE, transitions into a breathing turquoise neon halo */
[data-brand-anim="glow"] .brand-letter{
  color:var(--white);
  animation:brand-glow 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * 80ms);
}
@keyframes brand-glow{
  /* Phase 1 (0–18%) — solid white, no glow */
  0%, 18%{
    color:#ffffff;
    text-shadow:0 0 0 rgba(43,245,224,0);
  }
  /* Transition into breathing turquoise */
  35%{
    color:#eafffb;
    text-shadow:
      0 0 4px rgba(43,245,224,.45),
      0 0 10px rgba(43,245,224,.30);
  }
  55%{
    color:var(--teal-2);
    text-shadow:
      0 0 6px rgba(43,245,224,.95),
      0 0 14px rgba(43,245,224,.6),
      0 0 24px rgba(0,224,199,.4);
  }
  75%{
    color:#eafffb;
    text-shadow:
      0 0 4px rgba(43,245,224,.45),
      0 0 10px rgba(43,245,224,.30);
  }
  100%{
    color:#ffffff;
    text-shadow:0 0 0 rgba(43,245,224,0);
  }
}

/* Wave — letters bob and color-cycle in a continuous wave */
[data-brand-anim="wave"] .brand-letter{
  animation:brand-wave 2.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * 110ms);
}
@keyframes brand-wave{
  0%,100%{ transform:translateY(0); color:var(--white); }
  25%{ transform:translateY(-4px); color:var(--teal-2); }
  50%{ transform:translateY(0); color:var(--teal); }
  75%{ transform:translateY(4px); color:var(--teal-2); }
}

@media (prefers-reduced-motion: reduce){
  .brand-letter, [data-brand-anim] .brand-name{ animation:none !important; }
  [data-brand-anim="shimmer"] .brand-name{
    -webkit-text-fill-color:var(--white); color:var(--white);
  }
}

/* Mobile: shrink brand animation footprint */
@media (max-width:600px){
  .brand .brand-name{ font-size:.95rem; }
}

/* ============================================================
   v6.9.3 — Contrast bump, extra brand animations,
            image fade-in modes, admin mobile responsive tables
   ============================================================ */

/* Deeper contrast for text vs backgrounds (all tod modes) */
:root{ --muted:#b8c8d4; --text:#f1fbfa; }
body[data-tod="day"]    { --muted:#e8d3b0; --text:#fff8ec; }
body[data-tod="sunrise"]{ --muted:#e3d2c0; --text:#fff7ec; }
body[data-tod="sunset"] { --muted:#e0cbbe; --text:#fff3e6; }
.glass{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.copyright{ color:#cfe2e0; }

/* --- Additional brand-name animations (mobile + desktop friendly) --- */
[data-brand-anim="typewriter"] .brand-name{
  overflow:hidden; border-right:.12em solid var(--teal-2);
  white-space:nowrap; max-width:100%;
  animation:brand-type 4.5s steps(20,end) infinite, brand-caret .8s step-end infinite;
}
@keyframes brand-type{
  0%{ width:0 } 45%,55%{ width:100% } 100%{ width:0 }
}
@keyframes brand-caret{ 50%{ border-color:transparent } }

[data-brand-anim="neon-rainbow"] .brand-letter{
  animation:brand-rainbow 6s linear infinite;
  animation-delay:calc(var(--i) * 60ms);
  text-shadow:0 0 8px rgba(43,245,224,.45);
}
@keyframes brand-rainbow{
  0%  { color:#2BF5E0; filter:drop-shadow(0 0 4px #2BF5E0); }
  25% { color:#7afcff; filter:drop-shadow(0 0 6px #7afcff); }
  50% { color:#a6e6ff; filter:drop-shadow(0 0 6px #a6e6ff); }
  75% { color:#5ef0c2; filter:drop-shadow(0 0 6px #5ef0c2); }
  100%{ color:#2BF5E0; filter:drop-shadow(0 0 4px #2BF5E0); }
}

[data-brand-anim="pulse-zoom"] .brand-letter{
  animation:brand-pulse 2.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * 70ms);
  transform-origin:center;
}
@keyframes brand-pulse{
  0%,100%{ transform:scale(1); color:var(--white); text-shadow:none; }
  50%    { transform:scale(1.18); color:var(--teal-2);
           text-shadow:0 0 10px rgba(43,245,224,.7), 0 0 22px rgba(0,224,199,.45); }
}

[data-brand-anim="bounce"] .brand-letter{
  animation:brand-bounce 1.8s cubic-bezier(.34,1.56,.64,1) infinite;
  animation-delay:calc(var(--i) * 90ms);
}
@keyframes brand-bounce{
  0%,60%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-7px); color:var(--teal-2); }
}

[data-brand-anim="flip3d"] .brand-letter{
  display:inline-block; transform-style:preserve-3d;
  animation:brand-flip 3.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * 120ms);
}
@keyframes brand-flip{
  0%,70%,100%{ transform:rotateY(0); color:var(--white); }
  35%{ transform:rotateY(360deg); color:var(--teal-2); }
}

[data-brand-anim="gradient-flow"] .brand-name{
  background:linear-gradient(120deg, #2BF5E0, #7afcff, #00E0C7, #2BF5E0);
  background-size:300% 300%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:brand-flow 5s ease-in-out infinite;
}
@keyframes brand-flow{
  0%,100%{ background-position:0% 50%; }
  50%   { background-position:100% 50%; }
}

@media (prefers-reduced-motion: reduce){
  [data-brand-anim] .brand-letter{ animation:none !important; }
  [data-brand-anim="typewriter"] .brand-name{ animation:none !important; border-right:0; }
  [data-brand-anim="gradient-flow"] .brand-name{
    -webkit-text-fill-color:var(--white); color:var(--white);
  }
}
@media (max-width:600px){
  /* keep brand readable on small phones — slower / shorter animations */
  [data-brand-anim="typewriter"] .brand-name{ animation-duration:6s; }
  [data-brand-anim="flip3d"] .brand-letter,
  [data-brand-anim="bounce"] .brand-letter{ animation-duration:2.4s; }
}

/* --- Image fade-in effect modes for front-end images ---
   Controlled by body[data-img-fx] = up | zoom | blur | none */
body[data-img-fx="up"] .img-reveal{
  opacity:0; transform:translateY(28px); filter:none;
  transition:opacity .9s ease, transform 1s cubic-bezier(.2,.9,.25,1.2);
}
body[data-img-fx="zoom"] .img-reveal{
  opacity:0; transform:scale(.86); filter:none;
  transition:opacity .9s ease, transform 1s cubic-bezier(.2,.9,.25,1.2);
}
body[data-img-fx="blur"] .img-reveal{
  opacity:0; transform:none; filter:blur(12px);
  transition:opacity .9s ease, filter .9s ease;
}
body[data-img-fx="none"] .img-reveal{
  opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
}
body[data-img-fx="up"] .img-reveal.in,
body[data-img-fx="zoom"] .img-reveal.in,
body[data-img-fx="blur"] .img-reveal.in{
  opacity:1; transform:none; filter:none;
}

/* --- Admin tables: mobile responsive (stack as cards) without losing data --- */
@media (max-width:760px){
  .admin-table{ display:block; white-space:normal; background:transparent; }
  .admin-table thead{ display:none; }
  .admin-table tbody, .admin-table tr, .admin-table td{ display:block; width:100%; }
  .admin-table tr{
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:.7rem .9rem; margin-bottom:.8rem;
  }
  .admin-table td{
    border:0; padding:.35rem 0; font-size:.92rem;
    display:flex; gap:.6rem; align-items:flex-start; justify-content:space-between;
  }
  .admin-table td::before{
    content:attr(data-label);
    color:var(--teal-2); font-weight:600; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.06em;
    flex:0 0 38%; max-width:38%;
  }
  .admin-table td.actions{ flex-direction:column; align-items:stretch; }
  .admin-table td.actions::before{ margin-bottom:.3rem; }
  .admin-table td.actions a,
  .admin-table td.actions button{
    display:inline-block; margin:.2rem .25rem 0 0;
  }
  .admin-grid-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .stat-card .num{ font-size:1.6rem; }
}

/* Inline "edit" card (used for company registration) */
.inline-edit-card .ie-row{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.6rem;
}
.inline-edit-card input[type="text"]{
  flex:1 1 240px; min-width:0; padding:.7rem .9rem;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
  border-radius:12px; color:#fff; font-family:inherit;
}
.inline-edit-card .btn-save,
.inline-edit-card .btn-cancel{
  padding:.55rem 1rem; border-radius:10px; border:0; cursor:pointer; font-weight:600;
}
.inline-edit-card .btn-save{ background:var(--teal); color:#04201d; }
.inline-edit-card .btn-cancel{ background:transparent; color:var(--muted); border:1px solid var(--glass-border); }

/* Message preview cell — clamp on desktop, wrap on mobile */
@media (min-width:761px){
  .admin-table td.msg-preview{
    max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* --- v6.9.4 — New continuous brand animations ---
   fade-in-letters | slide-in-letters | color-cycle */

/* Fade in letters — each letter fades in/out continuously, staggered */
[data-brand-anim="fade-in-letters"] .brand-letter{
  opacity:0;
  animation:brand-fadeLetters 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}
@keyframes brand-fadeLetters{
  0%   { opacity:0; transform:translateY(6px); }
  25%  { opacity:1; transform:translateY(0); }
  75%  { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-6px); }
}

/* Slide in letters — letters slide in from the left, fade out, repeat */
[data-brand-anim="slide-in-letters"] .brand-name{ display:inline-flex; overflow:visible; }
[data-brand-anim="slide-in-letters"] .brand-letter{
  display:inline-block;
  opacity:0;
  transform:translateX(-18px);
  animation:brand-slideLetters 3.6s cubic-bezier(.2,.9,.25,1.2) infinite;
  animation-delay: calc(var(--i) * .14s);
}
@keyframes brand-slideLetters{
  0%   { opacity:0; transform:translateX(-22px); }
  20%  { opacity:1; transform:translateX(0); }
  70%  { opacity:1; transform:translateX(0); }
  100% { opacity:0; transform:translateX(22px); }
}

/* Color cycle — continuous color in/out across the full palette */
[data-brand-anim="color-cycle"] .brand-letter{
  animation:brand-colorCycle 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .1s);
  text-shadow:0 0 8px rgba(43,245,224,.45);
}
@keyframes brand-colorCycle{
  0%   { color:var(--white);     opacity:.35; }
  25%  { color:var(--teal-2,#2bf5e0); opacity:1; text-shadow:0 0 14px rgba(43,245,224,.85); }
  50%  { color:#7af0ff;          opacity:1; }
  75%  { color:#13a3a2;          opacity:1; text-shadow:0 0 10px rgba(19,163,162,.7); }
  100% { color:var(--white);     opacity:.35; }
}

@media (prefers-reduced-motion: reduce){
  [data-brand-anim="fade-in-letters"] .brand-letter,
  [data-brand-anim="slide-in-letters"] .brand-letter,
  [data-brand-anim="color-cycle"] .brand-letter{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ============================================================
   v6.9.5 — Image Edge Effects, Brand Anim Fixes,
            Admin Card-List for Messages & Dashboard
   ============================================================ */

/* --- Image Edge Effects ---
   Applied to any <img> with class .img-edge OR every image inside
   main content when body[data-img-edge] is set (auto-applied by JS).
   All effects use mask-image / clip-path / box-shadow that scale
   responsively — they do not impose fixed pixel sizes. */

.img-edge{
  /* Common smoothing so images blend naturally with the dark UI */
  transition: filter .4s ease, transform .4s ease, box-shadow .4s ease;
  will-change: transform, filter;
}

/* 1. Faded edges — soft fade-out on all four sides */
[data-img-edge="faded"] .img-edge{
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at center,
                       #000 55%, rgba(0,0,0,.6) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 95% at center,
                       #000 55%, rgba(0,0,0,.6) 78%, transparent 100%);
}

/* 2. Wrapped edges — paper-wrap look (rounded + inner curl shadow) */
[data-img-edge="wrapped"] .img-edge{
  border-radius: clamp(10px, 1.4vw, 22px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 14px 30px -10px rgba(0,0,0,.55),
    inset 0 -14px 30px -10px rgba(0,0,0,.55),
    0 14px 40px -18px rgba(0,0,0,.6);
}

/* 3. Vignette — darkened edges around a bright center */
[data-img-edge="vignette"] .img-edge{
  box-shadow:
    inset 0 0 40px 6px rgba(0,0,0,.55),
    inset 0 0 90px 18px rgba(7,13,24,.65),
    0 6px 24px -12px rgba(0,0,0,.5);
  border-radius: 8px;
}

/* 4. Feathered — oval soft mask, ideal for portraits / decorative */
[data-img-edge="feather"] .img-edge{
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at center,
                       #000 50%, rgba(0,0,0,.4) 75%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 80% at center,
                       #000 50%, rgba(0,0,0,.4) 75%, transparent 100%);
}

/* 5. Polaroid — white border + drop shadow */
[data-img-edge="polaroid"] .img-edge{
  background:#fff;
  padding: clamp(6px, .9vw, 12px);
  padding-bottom: clamp(22px, 3vw, 38px);
  border-radius: 4px;
  box-shadow:
    0 14px 28px -10px rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.35);
}

/* 6. Notched — futuristic clipped corners (HUD style) */
[data-img-edge="notched"] .img-edge{
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: 0 8px 28px -14px rgba(43,245,224,.45);
}

/* No-effect / disabled */
[data-img-edge="none"] .img-edge{
  -webkit-mask-image: none; mask-image: none;
  box-shadow: none; clip-path: none; border-radius: 0;
  background: transparent; padding: 0;
}

@media (prefers-reduced-motion: reduce){
  .img-edge{ transition:none; }
}

/* ---------- Brand-name animation FIXES ----------
   Ensure gradient-based modes do not get overridden by per-letter
   color, and that typewriter renders predictably. */
[data-brand-anim="shimmer"]      .brand-letter,
[data-brand-anim="gradient-flow"].brand-letter,
[data-brand-anim="gradient-flow"] .brand-letter{
  color: inherit;
  -webkit-text-fill-color: inherit;
}

/* Force a known display context for typewriter so width:0..100% clips */
[data-brand-anim="typewriter"] .brand-name{
  display:inline-block; vertical-align:middle;
}
[data-brand-anim="typewriter"] .brand-letter{
  display:inline; color:var(--white);
}

/* Make pulse-zoom less aggressive on small screens so it doesn't jitter */
@media (max-width:600px){
  [data-brand-anim="pulse-zoom"] .brand-letter{
    animation-duration: 3s;
  }
  [data-brand-anim="flip3d"] .brand-letter{
    /* preserve-3d needs perspective on the parent */
  }
}
.brand .brand-name{ perspective: 600px; }

/* Ensure letter-based animations always have a base color (prevents
   the "invisible letters" symptom on first paint) */
[data-brand-anim="fade-in-letters"] .brand-letter,
[data-brand-anim="slide-in-letters"] .brand-letter,
[data-brand-anim="color-cycle"]     .brand-letter,
[data-brand-anim="wave"]            .brand-letter,
[data-brand-anim="bounce"]          .brand-letter,
[data-brand-anim="glow"]            .brand-letter,
[data-brand-anim="neon-rainbow"]    .brand-letter,
[data-brand-anim="pulse-zoom"]      .brand-letter,
[data-brand-anim="flip3d"]          .brand-letter{
  color: var(--white);
  -webkit-text-fill-color: currentColor;
}

/* Tighter initial state for fade-in-letters so the loop has a clear "out" */
[data-brand-anim="fade-in-letters"] .brand-letter{ opacity:0; }

/* ---------- Admin: nicer Messages / Recent list ---------- */
.msg-list{
  display:flex; flex-direction:column; gap:.65rem; margin-top:1rem;
}
.msg-item{
  display:grid; grid-template-columns:44px 1fr auto; gap:.9rem;
  align-items:center; padding:.85rem 1rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.msg-item:hover{
  background:rgba(43,245,224,.07);
  border-color:rgba(43,245,224,.35);
  transform: translateY(-1px);
}
.msg-item.is-unread{
  border-left:3px solid var(--teal-2,#2bf5e0);
  background:rgba(43,245,224,.05);
}
.msg-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal,#13a3a2),var(--teal-2,#2bf5e0));
  color:#04201d;font-weight:700;font-size:1.05rem;
  text-transform:uppercase; flex:0 0 44px;
}
.msg-body-wrap{ min-width:0; }
.msg-top{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.95rem; color:#fff;
}
.msg-top .msg-name{ font-weight:600; }
.msg-top .msg-email{ color:var(--muted); font-size:.82rem; }
.msg-top .msg-badge{
  font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:99px;
  background:var(--teal-2,#2bf5e0); color:#04201d; font-weight:700;
}
.msg-preview-text{
  color:var(--muted); font-size:.88rem; margin-top:.15rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.msg-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;
  font-size:.75rem;color:var(--muted);white-space:nowrap;
}
.msg-meta .msg-actions-mini{ display:flex; gap:.3rem; }
.msg-meta .msg-actions-mini a,
.msg-meta .msg-actions-mini button{
  font-size:.72rem; padding:.25rem .55rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.18); background:transparent;
  color:#fff; cursor:pointer; text-decoration:none;
}
.msg-meta .msg-actions-mini .btn-del{
  border-color:rgba(255,90,90,.4); color:#ff8a8a;
}
@media (max-width:640px){
  .msg-item{ grid-template-columns:40px 1fr; }
  .msg-meta{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
}

/* ---------- Admin: content list polish (stat cards & sections) ---------- */
.admin-grid-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem; margin-bottom:2rem;
}
.stat-card{
  position:relative; padding:1.2rem 1.3rem; border-radius:16px;
  overflow:hidden;
}
.stat-card::after{
  content:""; position:absolute; inset:auto -20% -50% auto;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(43,245,224,.25), transparent 70%);
  pointer-events:none;
}
.stat-card .num{ font-size:2rem; font-weight:700; color:#fff; line-height:1; }
.stat-card .lbl{ color:var(--muted); font-size:.85rem; margin-top:.35rem; letter-spacing:.04em; }

/* Section heading for the admin recent list */
.admin-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 1.5rem 0 .6rem;
}
.admin-section-head h2{ margin:0; font-size:1.15rem; }
.admin-section-head a{
  color:var(--teal-2,#2bf5e0); font-size:.85rem; text-decoration:none;
}
.admin-section-head a:hover{ text-decoration:underline; }

/* ============================================================
   v6.9.6 — Admin Settings mobile polish + new image edges
   ============================================================ */

/* Reusable admin select used on Settings page */
.adm-select{
  width:100%;max-width:360px;padding:.75rem .9rem;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  border-radius:12px;color:#fff;font-family:inherit;font-size:.95rem;
}
.adm-select:focus{outline:0;border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(43,245,224,.18)}

/* Mobile: keep everything on screen, no horizontal shift */
@media (max-width:880px){
  .admin-main{overflow-x:hidden}
  .admin-form{padding:1.1rem;max-width:100%;width:100%;box-sizing:border-box}
  .admin-form h3{font-size:1.05rem;margin:0 0 .5rem}
  .adm-select{max-width:100%}
  .settings-group-card{padding:1rem 1.1rem}
  .settings-group-card h3{font-size:1rem}
  /* Brand-anim preview pill should never overflow */
  #brandAnimPreview{max-width:100%;white-space:normal;word-break:break-word}
  /* Edge preview image must scale to viewport */
  #imgEdgePreviewWrap{display:block !important;width:100%;box-sizing:border-box}
  #imgEdgePreview{width:100% !important;height:auto !important;aspect-ratio:16/9}
  /* Inline-edit (company reg) row stacks vertically */
  .inline-edit-card .ie-row{flex-direction:column;align-items:stretch;gap:.5rem}
  .inline-edit-card .ie-row input[type="text"]{width:100%}
  .inline-edit-card .btn-save,.inline-edit-card .btn-cancel{width:100%}
  /* Modal: full-width body, comfortable touch targets */
  .modal-box{max-width:100%;border-radius:14px}
  .modal-body{padding:1rem}
  .modal-foot{padding:.9rem 1rem;flex-wrap:wrap}
  .modal-foot .btn-save,.modal-foot .btn-cancel{flex:1 1 auto;min-width:120px;justify-content:center;display:inline-flex}
  .modal-foot .modal-status{flex-basis:100%;margin:0 0 .5rem}
}

/* === New Image Edge Effects === */

/* 7. Pipe — strong left/right fade so the image “pipes” out at the sides */
[data-img-edge="pipe"] .img-edge{
  -webkit-mask-image: linear-gradient(to right,
                       transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right,
                       transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* 8. Glow — starts with a SOLID WHITE halo, eases into breathing turquoise */
[data-img-edge="glow"] .img-edge{
  border-radius: clamp(10px, 1.4vw, 18px);
  animation: edgeGlowPulse 5.2s ease-in-out infinite;
  will-change: box-shadow;
  transform: translateZ(0);
}
@keyframes edgeGlowPulse{
  /* Phase 1 — crisp solid white halo (no turquoise) */
  0%, 15%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.95),
      0 0 14px -2px rgba(255,255,255,.55),
      0 0 26px -6px rgba(255,255,255,.35);
  }
  /* Phase 2 — cross-fade white → turquoise */
  35%{
    box-shadow:
      0 0 0 1.5px rgba(180,250,240,.85),
      0 0 18px -2px rgba(120,240,225,.65),
      0 0 36px -6px rgba(43,245,224,.45);
  }
  /* Phase 3 — full breathing turquoise glow */
  55%{
    box-shadow:
      0 0 0 1px rgba(43,245,224,.85),
      0 0 22px -2px rgba(43,245,224,.95),
      0 0 48px -6px rgba(43,245,224,.65);
  }
  75%{
    box-shadow:
      0 0 0 1.5px rgba(180,250,240,.85),
      0 0 18px -2px rgba(120,240,225,.65),
      0 0 36px -6px rgba(43,245,224,.45);
  }
  100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.95),
      0 0 14px -2px rgba(255,255,255,.55),
      0 0 26px -6px rgba(255,255,255,.35);
  }
}

/* 9. Aurora — multi-hue shifting halo */
[data-img-edge="aurora"] .img-edge{
  border-radius: clamp(10px, 1.4vw, 18px);
  animation: edgeAurora 6s linear infinite;
  will-change: box-shadow;
  transform: translateZ(0);
}
@keyframes edgeAurora{
  0%   { box-shadow: 0 0 0 1px rgba(43,245,224,.55),  0 0 22px -2px rgba(43,245,224,.65),  0 0 48px -6px rgba(125,90,255,.45); }
  33%  { box-shadow: 0 0 0 1px rgba(125,90,255,.55), 0 0 22px -2px rgba(125,90,255,.65), 0 0 48px -6px rgba(255,90,180,.45); }
  66%  { box-shadow: 0 0 0 1px rgba(255,200,90,.55), 0 0 22px -2px rgba(255,140,90,.65), 0 0 48px -6px rgba(43,245,224,.45); }
  100% { box-shadow: 0 0 0 1px rgba(43,245,224,.55),  0 0 22px -2px rgba(43,245,224,.65),  0 0 48px -6px rgba(125,90,255,.45); }
}

/* 10. Neon Pulse — sharp double-ring breathing outline */
[data-img-edge="neon-pulse"] .img-edge{
  border-radius: clamp(10px, 1.4vw, 18px);
  animation: edgeNeonPulse 2.4s ease-in-out infinite;
  will-change: box-shadow;
  transform: translateZ(0);
}
@keyframes edgeNeonPulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(43,245,224,.55),
      0 0 0 6px rgba(43,245,224,.10),
      0 0 18px -2px rgba(43,245,224,.45);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(43,245,224,.95),
      0 0 0 10px rgba(43,245,224,.20),
      0 0 32px -2px rgba(43,245,224,.85);
  }
}

/* 11. Sweep — diagonal sheen sliding across the image */
[data-img-edge="sweep"] .img-edge{
  border-radius: clamp(10px, 1.4vw, 18px);
  box-shadow:
    0 0 0 1px rgba(43,245,224,.25),
    0 0 18px -6px rgba(43,245,224,.4);
  -webkit-mask-image:
    linear-gradient(115deg,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
          mask-image:
    linear-gradient(115deg,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
  -webkit-mask-size: 220% 220%;
          mask-size: 220% 220%;
  animation: edgeSweep 4s linear infinite;
  will-change: mask-position, -webkit-mask-position;
  transform: translateZ(0);
}
@keyframes edgeSweep{
  0%   { -webkit-mask-position: -60% 0; mask-position: -60% 0; }
  100% { -webkit-mask-position: 160% 0; mask-position: 160% 0; }
}

@media (prefers-reduced-motion: reduce){
  [data-img-edge="glow"] .img-edge,
  [data-img-edge="aurora"] .img-edge,
  [data-img-edge="neon-pulse"] .img-edge,
  [data-img-edge="sweep"] .img-edge{ animation:none; }
}

/* ============================================================
   v6.9.7 — Mobile polish: smoother edge effects + message blocks
   ============================================================ */

@media (max-width:880px){
  .img-edge{
    transition: filter .25s ease, box-shadow .25s ease;
    backface-visibility: hidden;
  }
}

/* Messages: mobile-optimised stacking blocks */
@media (max-width:640px){
  .msg-list{ gap:.55rem; margin-top:.6rem; }
  .msg-item{
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "avatar body"
      "meta   meta";
    padding:.7rem .8rem;
    border-radius:12px;
    row-gap:.5rem;
    column-gap:.65rem;
  }
  .msg-avatar{ grid-area:avatar; width:40px;height:40px;flex-basis:40px;font-size:.95rem; }
  .msg-body-wrap{ grid-area:body; min-width:0; }
  .msg-meta{
    grid-area:meta;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    width:100%;
    gap:.5rem;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:.5rem;
    font-size:.72rem;
    white-space:normal;
  }
  .msg-top{ font-size:.9rem; gap:.35rem; }
  .msg-top .msg-name{ flex:1 1 100%; }
  .msg-top .msg-email{
    font-size:.78rem;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
    flex:1 1 auto;
  }
  .msg-preview-text{ font-size:.84rem; -webkit-line-clamp:3; }
  .msg-meta .msg-actions-mini{
    gap:.35rem; flex-wrap:wrap; justify-content:flex-end;
  }
  .msg-meta .msg-actions-mini a,
  .msg-meta .msg-actions-mini button{
    font-size:.75rem; padding:.4rem .65rem; min-height:34px;
  }
}

@media (max-width:380px){
  .msg-item{ padding:.6rem .65rem; }
  .msg-meta .msg-actions-mini{ width:100%; justify-content:space-between; }
  .msg-meta .msg-actions-mini a,
  .msg-meta .msg-actions-mini button{ flex:1 1 auto; text-align:center; }
}

/* ============================================================
   v6.9.8 — Homepage icon shapes (admin-controlled) +
            Modern site font picker (admin-controlled)
   ============================================================ */

/* Site-wide font controls (driven by inline style on <body>) */
body{
  font-family: var(--site-font, 'Inter'), system-ui, sans-serif;
  font-size:   var(--site-font-size, 16px);
  font-weight: var(--site-font-weight, 400);
}

/* ---- Homepage icon shapes ----
   Activated only on the homepage via body[data-icon-shape="..."]. Affects the
   turquoise icon block behind cards (.card .icon-wrap) and the section-icons. */

/* Square (default sharp) */
body[data-icon-shape="square"] .card .icon-wrap{
  border-radius: 4px;
}
/* Rounded square (a touch of softness) */
body[data-icon-shape="rounded"] .card .icon-wrap{
  border-radius: 14px;
}
/* Circle */
body[data-icon-shape="circle"] .card .icon-wrap{
  border-radius: 50%;
}
/* Ring (hollow centre, turquoise outline only) */
body[data-icon-shape="ring"] .card .icon-wrap{
  background: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--teal);
  color: var(--teal-2);
}
body[data-icon-shape="ring"] .card .icon-wrap svg{ color: var(--teal-2); }

/* Ring-square (hollow square) */
body[data-icon-shape="ring-square"] .card .icon-wrap{
  background: transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--teal);
  color: var(--teal-2);
}
body[data-icon-shape="ring-square"] .card .icon-wrap svg{ color: var(--teal-2); }

/* Embossed variants — raised 3D look on the turquoise block */
body[data-icon-shape="square-emboss"] .card .icon-wrap,
body[data-icon-shape="rounded-emboss"] .card .icon-wrap,
body[data-icon-shape="circle-emboss"] .card .icon-wrap{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 6px 14px -6px rgba(0,224,199,.55),
    0 0 0 1px rgba(0,224,199,.35);
}
body[data-icon-shape="square-emboss"]  .card .icon-wrap{ border-radius: 4px; }
body[data-icon-shape="rounded-emboss"] .card .icon-wrap{ border-radius: 14px; }
body[data-icon-shape="circle-emboss"]  .card .icon-wrap{ border-radius: 50%; }

/* Ring-emboss — outlined with depth */
body[data-icon-shape="ring-emboss"] .card .icon-wrap{
  background: transparent;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--teal),
    inset 0 2px 0 rgba(255,255,255,.35),
    0 6px 14px -6px rgba(0,224,199,.55);
  color: var(--teal-2);
}
body[data-icon-shape="ring-emboss"] .card .icon-wrap svg{ color: var(--teal-2); }

/* Keep contrast for icon glyphs inside the new shapes */
body[data-icon-shape] .card .icon-wrap svg{ transition: color .25s ease; }

@media (prefers-reduced-motion: reduce){
  body[data-icon-shape] .card .icon-wrap{ transition: none; }
}

/* ============================================================
   v6.9.9.6 — Icon glyph colour follows shape type:
   - Hollow / ring shapes  → turquoise icon vector
   - Solid shapes          → black icon vector (default contrast)
   Uses !important to override the global black stroke rule.
   ============================================================ */
body[data-icon-shape="ring"]         .card .icon-wrap,
body[data-icon-shape="ring-square"]  .card .icon-wrap,
body[data-icon-shape="ring-emboss"]  .card .icon-wrap{
  color: var(--teal-2) !important;
}
body[data-icon-shape="ring"]         .card .icon-wrap svg,
body[data-icon-shape="ring-square"]  .card .icon-wrap svg,
body[data-icon-shape="ring-emboss"]  .card .icon-wrap svg{
  color:  var(--teal-2) !important;
  stroke: var(--teal-2) !important;
  fill: none;
}
/* Solid shapes — keep black glyph for contrast on turquoise block */
body[data-icon-shape="square"]         .card .icon-wrap svg,
body[data-icon-shape="rounded"]        .card .icon-wrap svg,
body[data-icon-shape="circle"]         .card .icon-wrap svg,
body[data-icon-shape="square-emboss"]  .card .icon-wrap svg,
body[data-icon-shape="rounded-emboss"] .card .icon-wrap svg,
body[data-icon-shape="circle-emboss"]  .card .icon-wrap svg{
  color:  #000 !important;
  stroke: #000 !important;
}

/* ===== v6.9.9 Bottom floating dock bar ===== */
.dock-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:1rem; z-index:80;
  display:flex; align-items:flex-end; justify-content:space-around;
  gap:.25rem; padding:.55rem 1rem;
  width:min(560px, calc(100% - 1.2rem));
  background:linear-gradient(180deg, rgba(10,26,36,.92), rgba(6,16,22,.96));
  backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);
  border-radius:26px;
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(43,245,224,.05) inset;
  padding-bottom:max(.55rem, env(safe-area-inset-bottom));
}
.dock-bar .dock-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; padding:.45rem .25rem; min-width:0;
  background:transparent; border:0; cursor:pointer;
  color:#e6f6f4; font-family:inherit; font-size:.72rem; font-weight:500;
  text-decoration:none; border-radius:14px; transition:.25s;
}
.dock-bar .dock-item:hover{color:var(--teal-2); transform:translateY(-2px)}
.dock-bar .dock-item svg{width:22px;height:22px;stroke-width:2}
.dock-bar .dock-item span{line-height:1;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none}
.dock-bar #floatContact{flex:1.6}

.dock-center{
  position:relative;
  width:62px; height:62px; margin:-22px .35rem 0;
  flex:0 0 auto;
  border-radius:50%;
  border:3px solid #fff;
  background:radial-gradient(circle at 30% 30%, var(--teal-2), var(--teal) 60%, #0a8079);
  color:#04141a; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px var(--teal-glow), 0 0 0 4px rgba(10,26,36,.85);
  transition:transform .3s ease;
}
.dock-center:hover{transform:scale(1.06)}
.dock-center.active{transform:rotate(90deg) scale(1.05)}
.dock-center svg{width:28px;height:28px;stroke-width:2.6;color:#04141a}
.dock-center .dock-ring{
  position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--teal-2);
  animation:dock-ring 2.2s ease-out infinite;
  pointer-events:none;
}
.dock-center::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  box-shadow:0 0 22px 4px var(--teal-glow);
  animation:dock-glow 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes dock-ring{
  0%   {transform:scale(.85); opacity:.9}
  70%  {transform:scale(1.55); opacity:0}
  100% {transform:scale(1.55); opacity:0}
}
@keyframes dock-glow{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}

/* Reveal menu */
.dock-menu{
  position:fixed; inset:0; z-index:79;
  background:rgba(2,10,16,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:center;
  padding:0 .8rem 6.5rem;
}
.dock-menu.open{display:flex; animation:dock-fade .25s ease-out}
.dock-menu-card{
  width:min(520px,100%); padding:1.4rem 1.2rem 1.6rem;
  border-radius:22px; position:relative;
  animation:dock-rise .35s cubic-bezier(.2,.9,.3,1.2);
}
.dock-menu-card h3{margin:0 0 1rem; color:var(--teal-2); text-align:center}
.dock-menu-close{
  position:absolute; top:.55rem; right:.7rem;
  background:transparent;border:0;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1;
}
.dock-menu-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem;
}
.dock-menu-grid a{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.9rem .35rem; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  color:#e6f6f4; font-size:.78rem; text-decoration:none; transition:.2s;
}
.dock-menu-grid a:hover{background:rgba(43,245,224,.12); border-color:var(--teal-2); color:var(--teal-2); transform:translateY(-2px)}
.dock-menu-grid svg{width:22px;height:22px}
@keyframes dock-fade{from{opacity:0}to{opacity:1}}
@keyframes dock-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:420px){
  .dock-bar{gap:.1rem; padding:.5rem .5rem}
  .dock-bar .dock-item{font-size:.66rem}
  .dock-bar .dock-item svg{width:20px;height:20px}
  .dock-center{width:56px;height:56px;margin-top:-20px}
  .dock-menu-grid{grid-template-columns:repeat(3,1fr)}
}

/* Lift existing back-to-top / overlays so dock doesn't collide */
.back-to-top{bottom:6.5rem !important}

/* ===== v6.9.9.4 patches ===== */
:root{
  /* Rich turquoise for animated background particles */
  --particle-rgb: 0,168,181;
}
/* Ensure dock bar doesn't cover copyright / company registration */
.site-footer{padding-bottom:8.5rem}
.site-footer .copyright{padding-bottom:1rem}
@media (max-width:420px){
  .site-footer{padding-bottom:9.5rem}
}

/* v6.9.9.10 — 2-column footer (desktop) + about hero bg image */
.footer-grid.footer-grid-2{grid-template-columns:1fr 1fr}
.footer-grid.footer-grid-2 a{display:flex;align-items:center;gap:.5rem}
.footer-grid.footer-grid-2 a i{width:16px;height:16px}
@media (max-width:760px){.footer-grid.footer-grid-2{grid-template-columns:1fr}}

.about-hero-bg{position:relative;isolation:isolate;overflow:hidden}
.about-hero-bg::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url('../assets/images/about-bg.jpg');
  background-size:cover;background-position:center;
  opacity:.55;
}
.about-hero-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(8,18,28,.55) 0%,
    rgba(8,18,28,.70) 55%,
    rgba(8,18,28,.92) 88%,
    var(--bg, #04111b) 100%);
}

/* ============================================================
   v6.9.9.16 — Website logo animations (simplified set)
   Styles: slow-rotate, rotate-pulse, static
   Applied to .brand .brand-logo via [data-logo-anim] on <body>.
   ============================================================ */
.brand .brand-logo-wrap{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0;perspective:600px}
.brand .brand-logo{display:block;transform-origin:center center;will-change:transform;backface-visibility:visible}

/* 1. Slow Vertical Rotation — gentle continuous Y-axis 3D spin with fade */
@keyframes logoSlowRotate{
  0%   {transform:perspective(600px) rotateY(0deg);opacity:1}
  15%  {transform:perspective(600px) rotateY(54deg);opacity:0.35}
  50%  {transform:perspective(600px) rotateY(180deg);opacity:0.35}
  85%  {transform:perspective(600px) rotateY(306deg);opacity:0.35}
  100% {transform:perspective(600px) rotateY(360deg);opacity:1}
}
body[data-logo-anim="slow-rotate"] .brand .brand-logo{
  animation:logoSlowRotate 8s ease-in-out infinite;
}

/* 2. Rotate Pulse — quick Y-axis spin, pause, then spin again with fade */
@keyframes logoRotatePulse{
  0%   {transform:perspective(600px) rotateY(0deg);opacity:1}
  10%  {transform:perspective(600px) rotateY(90deg);opacity:0.3}
  20%  {transform:perspective(600px) rotateY(270deg);opacity:0.3}
  25%  {transform:perspective(600px) rotateY(360deg);opacity:1}
  50%  {transform:perspective(600px) rotateY(360deg);opacity:1}
  60%  {transform:perspective(600px) rotateY(450deg);opacity:0.3}
  70%  {transform:perspective(600px) rotateY(630deg);opacity:0.3}
  75%  {transform:perspective(600px) rotateY(720deg);opacity:1}
  100% {transform:perspective(600px) rotateY(720deg);opacity:1}
}
body[data-logo-anim="rotate-pulse"] .brand .brand-logo{
  animation:logoRotatePulse 4s ease-in-out infinite;
}

/* 3. Static — no animation */
body[data-logo-anim="static"] .brand .brand-logo{animation:none}
body[data-logo-anim="static"] .brand .brand-logo-wrap::after{display:none;animation:none}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body[data-logo-anim] .brand .brand-logo{animation:none !important}
  body[data-logo-anim] .brand .brand-logo-wrap::after{animation:none !important;display:none}
}

/* v6.9.9.13 — universal page-hero (about-style) background system */
.page-hero{position:relative;padding-bottom:2rem;overflow:visible}
.page-hero .page-hero-bg{
  position:absolute;left:0;right:0;bottom:0;top:-160px;
  background-size:cover;background-position:center;z-index:-2;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.95) 12%, rgba(0,0,0,.98) 35%,
    rgba(0,0,0,.75) 65%, rgba(0,0,0,.35) 85%, rgba(0,0,0,.08) 95%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.95) 12%, rgba(0,0,0,.98) 35%,
    rgba(0,0,0,.75) 65%, rgba(0,0,0,.35) 85%, rgba(0,0,0,.08) 95%, rgba(0,0,0,0) 100%);
}
.page-hero .page-hero-overlay{
  position:absolute;left:0;right:0;bottom:0;top:-160px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(7,17,32,.35) 0%, transparent 70%),
    linear-gradient(135deg,rgba(7,17,32,.55) 0%,rgba(7,17,32,.25) 30%,rgba(7,17,32,.65) 100%);
  z-index:-1;pointer-events:none;
}
/* v6.9.9.17 — hero morph: background image dissolves into page styling */
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-2rem;height:6rem;
  background:linear-gradient(to bottom, transparent 0%, var(--bg-morph, var(--bg, #070d18)) 100%);
  z-index:0;pointer-events:none;
}
.page-hero > .container,.page-hero > .hero-content{position:relative;z-index:1}

/* ============================================================
   v6.9.9.18 — Site background colour override (entire page)
   ============================================================ */
body[data-bg-override="1"] #bg-canvas{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(var(--bg-rgb,7,13,24),.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(var(--bg-rgb,7,13,24),.08), transparent 65%),
    radial-gradient(ellipse at top, rgba(var(--bg-rgb,7,13,24),1) 0%, rgba(var(--bg-rgb,7,13,24),1) 55%, rgba(var(--bg-rgb,7,13,24),1) 100%) !important;
}
body[data-bg-override="1"]{background:var(--bg) !important}
body[data-bg-override="1"] .site-footer{background:rgba(var(--bg-rgb,7,13,24),.3)}


/* v6.9.9.21 — seamless hero→content blend when admin sets background image */
.page-hero{padding-bottom:4rem}
.page-hero .page-hero-bg{
  bottom:-260px;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.95) 12%, rgba(0,0,0,.90) 40%,
    rgba(0,0,0,.60) 65%, rgba(0,0,0,.25) 82%, rgba(0,0,0,.05) 94%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.95) 12%, rgba(0,0,0,.90) 40%,
    rgba(0,0,0,.60) 65%, rgba(0,0,0,.25) 82%, rgba(0,0,0,.05) 94%, rgba(0,0,0,0) 100%);
}
.page-hero .page-hero-overlay{
  bottom:-260px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 55%, rgba(0,0,0,.4) 80%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 55%, rgba(0,0,0,.4) 80%, rgba(0,0,0,0) 100%);
}
.page-hero::after{
  bottom:-260px;height:260px;
  background:linear-gradient(to bottom, transparent 0%, rgba(var(--bg-rgb,7,13,24),.35) 45%, rgba(var(--bg-rgb,7,13,24),.85) 85%, var(--bg-morph, var(--bg, #070d18)) 100%);
}
/* let the bg image bleed gently through the first section after the hero */
.page-hero + section{position:relative;background:transparent !important}
.page-hero + section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.18) 100%);
}

/* ============================================================
   v6.9.9.22 — Mobile hero bg optimisation + contact card polish
   ============================================================ */

/* Keep admin-uploaded hero background images proportional on small
   screens. The desktop layer uses heavy vertical overscan (top:-160px,
   bottom:-260px) plus background-size:cover, which on a 360px viewport
   forces the image to scale up dramatically — producing a stretched,
   low-quality look. On phones we tighten the overscan and lock the
   focal point to the top-centre so portraits aren't cropped awkwardly. */
@media (max-width:640px){
  .page-hero{padding-bottom:2.5rem}
  .page-hero .page-hero-bg{
    top:-60px;bottom:-120px;
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:scroll;
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,.92) 0%, rgba(0,0,0,.95) 25%, rgba(0,0,0,.80) 60%,
      rgba(0,0,0,.40) 82%, rgba(0,0,0,.08) 95%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,.92) 0%, rgba(0,0,0,.95) 25%, rgba(0,0,0,.80) 60%,
      rgba(0,0,0,.40) 82%, rgba(0,0,0,.08) 95%, rgba(0,0,0,0) 100%);
  }
  .page-hero .page-hero-overlay{top:-60px;bottom:-120px}
  .page-hero::after{bottom:-120px;height:140px}
}
/* Even tighter on the smallest devices */
@media (max-width:380px){
  .page-hero .page-hero-bg{top:-40px;bottom:-90px;background-position:50% 25%}
  .page-hero .page-hero-overlay{top:-40px;bottom:-90px}
  .page-hero::after{bottom:-90px;height:110px}
}

/* Contact info presentation — even spacing, aligned rows */
.contact-lines{
  list-style:none;margin:.55rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.45rem;
  line-height:1.5;width:100%;
}
.contact-lines li{margin:0;padding:0}
.contact-lines a{
  display:inline-flex;align-items:center;gap:.5rem;
  word-break:break-word;line-height:1.4;
}
.contact-lines .wa-link{gap:.45rem}
.contact-lines .wa-link .wa-icon{flex-shrink:0;width:16px;height:16px}
.contact-lines .wa-link span{display:inline-block}
.contact-card .contact-lines .contact-email{word-break:break-all}

/* Tighten the contact grid card so heading and lines align cleanly */
.contact-grid .contact-card{padding:1.6rem 1.2rem;gap:.4rem}
.contact-grid .contact-card h3{margin:.6rem 0 .15rem}

/* Mobile: centre the contact lines under the icon/title */
@media (max-width:640px){
  .contact-grid .contact-card{padding:1.4rem 1.2rem;max-width:420px;width:100%}
  .contact-grid .contact-card .contact-lines{align-items:center;text-align:center}
  .contact-grid .contact-card .contact-lines a{justify-content:center}
}