/* ========== Splash (critical cover) ========== */
/* 1) hard cover immediately, no network needed */
html:not(.splash-done) body::before,
html:not(.splash-done) body::after {
  content:"";
  position:fixed; inset:0; z-index:2147483000; display:block;
}
/* dark base while external splash.css loads */
html:not(.splash-done) body::before { background:#050A16; }
/* hide header/content to avoid flash of logo/text */
html:not(.splash-done) .site-head,
html:not(.splash-done) .wrap { opacity:0 }
/* no layout shift while covered */
html:not(.splash-done) body { overflow:hidden }

/* ========== Theme & Base ========== */
:root{
  --bg-dark:#050A16;
  --ink:#EAF2FF; --muted:#cfe0fb; --line:rgba(255,255,255,.14);
  --accent:#00cfff; --accent-2:#4dc8ff; --accent-3:#6a84ff;

  --head-1:rgba(6,14,28,.92); --head-2:rgba(6,14,28,.70);
  --panel-1:rgba(5,12,24,.92); --panel-2:rgba(10,26,48,.78);
  --card-1:rgba(6,14,28,.95);  --card-2:rgba(10,24,46,.82);

  --radius:22px; --headH:60px; --footH:48px; --gapD:14px;
  --tech-font:"Segoe UI Variable","Inter","SF Pro Display","Segoe UI","Roboto","Orbitron",system-ui,-apple-system,Arial,sans-serif;

  /* HUD palette */
  --hud-ink:#EAF2FF;
  --hud-cyan:#00CFFF;
  --hud-blue:#6A84FF;
  --hud-panel-1: rgba(6,14,28,.92);
  --hud-panel-2: rgba(10,26,48,.78);

  /* comet */
  --comet-color: #86e7ff;
  --comet-core:  #dfffff;
  --tail:        rgba(134, 231, 255, .55);
  --dur:         8s;
  --size:        22px;
  --tail-len:    520px;
  --track-h:     18px;

  /* brand */
  --brand-blue: #20B9FF;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg-dark)}
body{
  margin:0; color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  background-color:#050A16; /* base color only; actual image is layered below via ::before */
  overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;
  padding-bottom:0; position:relative;
}
/* full-bleed background image — uses CSS var set in HTML */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-5;
  background: var(--bg-url, none) center/cover no-repeat fixed;
  transform:translateZ(0);
}
/* soft veil for readability */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(1100px 800px at 40% 30%, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, rgba(0,0,0,.15) 80%, rgba(0,0,0,0) 100%),
    linear-gradient(160deg, rgba(5,10,22,.7), rgba(8,23,43,.45), rgba(14,42,74,.35));
}

.tiles{position:fixed; inset:0; z-index:-2; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:
    radial-gradient(600px 600px at 18% 30%, rgba(77,200,255,.12), transparent 60%),
    radial-gradient(700px 700px at 78% 70%, rgba(106,132,255,.10), transparent 60%),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 42% 66%, rgba(173,216,255,.38) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 72% 24%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 84% 82%, rgba(173,216,255,.30) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 30% 84%, rgba(255,255,255,.40) 0 1px, transparent 2px);}
.grid{position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:.18;
  background:
    linear-gradient(transparent 95%, rgba(255,255,255,.07) 95%) 0 0/24px 24px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.07) 95%) 0 0/24px 24px;
  mask-image: radial-gradient(1100px 800px at 40% 30%, rgba(0,0,0,.9), rgba(0,0,0,0.2));
}

/* ========== Header ========== */
.site-head{
  position:sticky; top:0; z-index:1200;
  background:
    radial-gradient(900px 600px at 68% -60%, rgba(0,207,255,.14), transparent 70%),
    linear-gradient(180deg, var(--head-1), var(--head-2));
  border-bottom:1px solid rgba(173,216,255,.22);
  box-shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.head-wrap{
  max-width:1280px; margin:0 auto; padding:16px clamp(12px,3vw,24px) 10px;
  display:flex; flex-direction:column; align-items:center; gap:8px; position:relative;
}

.brand-hero{position:relative; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; isolation:isolate;}
.hdr-stars{position:absolute; inset:-8px -12px -8px -12px; z-index:0; opacity:.8; pointer-events:none; max-height:180px;}

.brand-name .no-break{ white-space:nowrap; }
/* Bigger, punchier WEB & AI + Futuristic title variant (final state) */
.brand-logo{ display:none !important; }
.brand-name{ gap: clamp(10px, 1.6vw, 18px); }

/* ——— Futuristic brand title ——— */
.site-head .brand-name{
  font-family: "Audiowide","Orbitron", var(--tech-font);
  font-weight: 900;
  text-transform: none;
  letter-spacing: .04em;
  font-size: clamp(36px, 7vw, 72px); /* compact final size */
  line-height: 1.05;
  color: transparent;
  background: linear-gradient(180deg,#e9faff 0%,#bfe9ff 40%,#7fd6ff 60%,#43b0ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1.1px rgba(120, 210, 255, .45);
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 10px rgba(0,207,255,.55),
    0 0 26px rgba(106,132,255,.45);
  position: relative;
}
.site-head .brand-name .no-break{ letter-spacing:.02em }
.site-head .brand-name::before{
  content:none !important; display:none !important; animation:none !important;
}
.site-head .brand-name::after{
  content:"";
  position:absolute;
  inset:-8% -4%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: translateX(-130%) rotate(1deg);
  animation: shineSweep 4.5s ease-in-out infinite;
}
@keyframes shineSweep{ 0%{transform:translateX(-130%) rotate(2deg);opacity:0} 15%{opacity:.95} 60%{opacity:0} 100%{transform:translateX(130%) rotate(2deg);opacity:0} }
@media (max-width: 640px){
  .site-head .brand-name{ letter-spacing:.02em; font-size: clamp(28px, 8vw, 50px); }
}

/* Subline “WEB & AI” */
.sub-wrap{ margin-top: 8px; }
.brand-sub{
  font-family: "Orbitron", var(--tech-font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.1;
  color: transparent;
  background-image: linear-gradient(90deg,#f6fbff,#bfe7ff,#7fd3ff,#a6b7ff,#f6fbff);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .4px rgba(255,255,255,.35);
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 10px rgba(0,207,255,.55),
    0 0 26px rgba(106,132,255,.45);
  animation: subShine 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.brand-sub::after{
  content:"";
  position:absolute; inset:-6px -10px;
  pointer-events:none; z-index:-1; border-radius:12px;
  background: radial-gradient(60% 70% at 50% 50%, rgba(135, 220, 255, .22), rgba(0,0,0,0) 70%);
  filter: blur(6px) saturate(120%);
}
@keyframes subShine{ 0%,100% { background-position: 0% 50%; filter: brightness(1); } 50% { background-position: 100% 50%; filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce){ .brand-sub{ animation:none !important; } }

/* NAV */
.nav{display:flex; flex-wrap:wrap; gap:22px; justify-content:center; width:100%; padding-top:10px; border-top:1px solid rgba(255,255,255,.14); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:12px}
.nav a{color:#F0F6FF; text-decoration:none; position:relative; padding:12px 6px; border-radius:8px; text-shadow:0 1px 0 rgba(0,0,0,.25)}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; transform:scaleX(0); transform-origin:center; background:linear-gradient(90deg, var(--accent-2), var(--accent)); transition:transform .25s ease}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}

/* BURGER */
#navToggle{position:absolute; left:-9999px; top:auto; width:1px; height:1px;}
.burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.12); color:#f0f6ff; cursor:pointer; font-size:0; align-items:center; justify-content:center; box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18); position:absolute; right:12px; top:12px; z-index:3; }
.burger i{width:20px; height:2px; background:currentColor; position:relative; display:block}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor}
.burger i::before{top:-6px}.burger i::after{top:6px}
@media (max-width:1199px){.nav{display:none}.burger{display:inline-flex}}

/* Mobile panel */
.mobile-panel{ position:fixed; inset:0; z-index:1400; background:linear-gradient(180deg, var(--panel-1), var(--panel-2)); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); border-top:1px solid var(--line); padding:calc(var(--headH)+6px) 18px 24px; transform:translateY(-100%); opacity:0; visibility:hidden; pointer-events:none; transition:transform .22s ease, opacity .22s ease, visibility 0s linear .22s; overflow:auto; }
#navToggle:checked ~ .mobile-panel{transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto}
.mobile-inner{display:grid; gap:10px; max-width:640px; margin:0 auto}
.mobile-inner a{ color:#f0f6ff; text-decoration:none; padding:13px 14px; border-radius:14px; font-weight:800; border:1px solid rgba(180,205,245,.28); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.24); }

/* ========== Main Grid ========== */
.wrap{
  flex:1 0 auto; min-height:100dvh; display:grid;
  grid-template-columns: 1fr min(560px, 92%) min(52vw, 900px) 1fr;
  grid-template-rows: 64px 1fr 64px;
  grid-template-areas:
    ". .    .      ."
    ". card visual ."
    ". .    .      .";
  gap: var(--gapD); align-items:stretch;
}
@media (max-width: 900px){
  .wrap{
    grid-template-columns: 1fr min(94%, 720px) 1fr;
    grid-template-rows: auto auto 48px;
    grid-template-areas:
      ". visual ."
      ". card   ."
      ". .      .";
  }
}

/* ========== Gallery ========== */
.visual{ grid-area:visual; position:relative; border-radius:20px; overflow:hidden; box-shadow: 0 22px 60px rgba(4,10,22,.65); min-height:clamp(360px, 52vh, 900px); background:#06101b; isolation:isolate; cursor:pointer; }
.visual .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.04); filter: saturate(1.06) contrast(1.04) brightness(1.08); transition: opacity .9s ease, transform 9s ease, filter .6s ease; will-change:opacity, transform, filter; display:block; }
.visual .slide.active{ opacity:1; transform:scale(1.0); z-index:1; filter:none; }
.visual::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 120% at 70% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 72%)}
.shine{position:absolute; inset:-25% -50%; z-index:3; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 66%); mix-blend-mode:screen; filter:blur(6px); transform:translateX(-120%); opacity:0}
.visual:hover .shine{animation:sweep 950ms ease forwards}
@keyframes sweep{0%{transform:translateX(-120%);opacity:0}15%{opacity:.95}100%{transform:translateX(120%);opacity:0}}

/* ULTRA-READABLE CAPTIONS (final style) */
.visual,
.taormina { position: relative; }

.visual .caption,
.taormina figcaption{
  position:absolute; left:50%; transform:translateX(-50%) translateZ(0);
  bottom: clamp(6px, 0.9vw, 10px);
  z-index:4; pointer-events:none; white-space:nowrap;
  font: 800 clamp(12px, 1.15vw, 14px)/1.1 system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  letter-spacing:.02em;
  color:#f4f9ff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.85),
    0 0 10px rgba(0,0,0,.60),
    0 0 22px rgba(0,0,0,.45);
  padding:6px 10px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30)) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(4px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(4px) saturate(120%) !important;
  -webkit-text-fill-color:initial !important;
  -webkit-text-stroke:0 !important;
  background-clip:initial !important;
  border:0 !important;
}
.visual .caption:empty,
.taormina figcaption:empty{ display:none !important; }

/* ========== Card ========== */
.card{ grid-area:card; position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg, var(--card-1), var(--card-2)); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 48px rgba(4,10,22,.55); padding:32px 28px 28px; transform-style:preserve-3d; transition: transform .15s ease; min-height:clamp(520px, 60vh, 900px); }
.card::before{content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:0; background: conic-gradient(from 0deg, rgba(0,231,255,.28), rgba(106,132,255,.22), rgba(255,122,255,.20), rgba(0,231,255,.28)); filter: blur(12px); opacity:.10; padding:2px; mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); animation:spin 18s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

.aurora{position:absolute; inset:-35% -25%; z-index:1; pointer-events:none; background: radial-gradient(35% 45% at 15% 20%, rgba(0,231,255,.26), transparent 60%), radial-gradient(38% 48% at 85% 35%, rgba(106,132,255,.22), transparent 60%), radial-gradient(32% 42% at 35% 85%, rgba(255,122,255,.18), transparent 60%); filter: blur(22px); mix-blend-mode:screen; animation: auroraMove 14s ease-in-out infinite alternate;}
@keyframes auroraMove{0%{ transform: translate3d(-2%, -1%, 0) rotate(0deg);}100%{ transform: translate3d(2%, 2%, 0) rotate(8deg);} }

.fx-canvas{ position:absolute; inset:-8% -10%; width:120%; height:120%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.98; }
.card > *:not(.fx-canvas):not(.aurora){ position:relative; z-index:3; }

.hero-kicker{display:flex; align-items:center; gap:10px; letter-spacing:.02em; color:#d9e8ff; font-weight:800; margin:4px 0 10px}
.wave{display:inline-block; transform-origin:70% 70%; animation:wave 2.3s ease-in-out infinite}
@keyframes wave{0%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(8deg)}60%,100%{transform:rotate(0)}}

h1{margin:14px 0 8px; font-size:clamp(28px,6.5vw,48px); line-height:1.08; letter-spacing:-.02em}
.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 26px rgba(0,231,255,.35); animation:shimmer 3.2s ease-in-out infinite; background-size:200% 100%}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.dot{display:inline-block; width:.6em; height:.6em; border-radius:50%; vertical-align:.12em; margin-left:.25em; background:radial-gradient(circle at 30% 30%, #bfe0ff, #2b83ff); box-shadow:0 0 14px rgba(43,131,255,.9); animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

.hero-welcome{ font-size:clamp(18px,3.2vw,26px); font-weight:900; letter-spacing:-.015em; margin:.3em 0 .2em; min-height:1.2em; max-width:48ch; background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 20px rgba(0,231,255,.18); }

.lead{ margin-top:12px; margin-bottom:18px; max-width:62ch; color:var(--muted); font-size:clamp(14px,4.4vw,18px); line-height:1.6; text-align:justify; text-justify:inter-word; }
.lead-digital{ font-family:var(--tech-font); font-weight:800; letter-spacing:.005em; position:relative; background: linear-gradient(90deg, #6a84ff, #00cfff, #ff7aff, #00cfff, #6a84ff); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; text-shadow: 0 0 18px rgba(106,132,255,.38), 0 0 32px rgba(0,231,255,.28); animation: digitalInk 8s ease-in-out infinite; }
.lead-digital::after{ content:""; position:absolute; inset:-2px 0 -4px 0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%) top/100% 2px no-repeat, repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); mix-blend-mode:screen; opacity:.30; animation: scanSheen 4.2s linear infinite; border-radius:6px; }
@keyframes digitalInk{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes scanSheen{0%{background-position-y:0%}100%{background-position-y:100%}}

/* Taormina mini-gallery */
.taormina{ margin:18px 0 0; position:relative; width:100%; max-width:520px; aspect-ratio: 3 / 4; overflow:hidden; border-radius:18px; border:1px solid rgba(220,235,255,.18); box-shadow:0 18px 40px rgba(4,10,22,.55); cursor:pointer; }
.taormina .tao-slide{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; margin:0 auto; opacity:0; transform:scale(1.02); transition: opacity .6s ease, transform 8s ease; }
.taormina .tao-slide.active{ opacity:1; transform:scale(1); }
.taormina figcaption{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); white-space:nowrap; text-align:center; }

/* ======= mobile safeguards ======= */
@media (max-width: 768px) {
  .head-wrap{gap:6px; padding:12px 14px;}
  .brand-name{ font-size:clamp(26px, 8vw, 42px); margin:0 56px 2px; overflow-wrap:normal; word-break:normal; }
  .brand-name .no-break{ white-space:nowrap; }
  .brand-sub{font-size:12px;}
  .nav{ display:none !important; }
  .burger{ display:inline-flex !important; }
}
:focus-visible{outline:3px solid #8fc0ff; outline-offset:2px}

/* lock the page width */
html, body{ width:100%; max-width:100vw; overflow-x:hidden; overscroll-behavior-x: none; touch-action: pan-y; }
@media (max-width: 768px){
  body, .wrap, .site-head, .mobile-panel, .site-foot{ max-width:100vw; }
  img, canvas, video, svg{ max-width:100%; height:auto; }
  .brand-name{ overflow-wrap:normal; word-break:normal; }
  .brand-name .no-break{ white-space:nowrap; }
}

/* ===== Footer ===== */
.site-foot{ background: linear-gradient(180deg, rgba(8,18,36,.6), rgba(8,18,36,.35)); border-top: 1px solid rgba(180,205,245,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); padding: 10px 12px; }
.site-foot a, .site-foot a:visited, .site-foot a:hover, .site-foot a:active, .site-foot a:focus, .site-foot a:focus-visible{ color:#fff !important; text-decoration:none !important; outline:0; }
.foot-wrap{ max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.foot-left{ display:flex; align-items:center; gap:.6rem; font-size: 13px; letter-spacing:.02em; color:#EAF2FF; opacity:.95; flex-wrap:wrap; }
.foot-copy{ opacity:.75 }
.foot-name{ font-weight:700 }
.sep{ opacity:.35; margin:0 .25rem }
.foot-mail{ color:#EAF2FF; text-decoration:none; border-bottom:1px dashed rgba(234,242,255,.25); overflow-wrap:anywhere; }
.foot-mail:hover{ border-bottom-color:rgba(234,242,255,.6) }
.foot-right{ display:flex; align-items:center; gap:.5rem; }
.pill{ display:inline-flex; align-items:center; gap:.45rem; padding: 8px clamp(10px, 2.6vw, 12px); border-radius: 999px; border:1px solid rgba(180,205,245,.28); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); font: 800 clamp(11px, 2.8vw, 12px)/1 var(--tech-font); color:#EAF2FF; cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.24); transition: transform .08s ease, filter .15s ease; white-space:nowrap; }
.pill:hover{ filter: brightness(1.08) }
.pill:active{ transform: translateY(1px) }
.pill .icon{ width:16px; height:16px; fill:currentColor; opacity:.9 }
#soundBtn .sound-on{ display:none }
#soundBtn[aria-pressed="true"] .sound-off{ display:none }
#soundBtn[aria-pressed="true"] .sound-on{ display:inline }
@media (max-width: 1024px){
  .foot-wrap{ display:grid; grid-template-columns: 1fr auto; align-items:center; row-gap:10px; column-gap:12px; }
  .foot-right{ justify-self:end; }
}
@media (max-width: 640px){
  .foot-wrap{ grid-template-columns: 1fr; justify-items:center; text-align:center; }
  .foot-left{ justify-content:center; gap:.45rem; }
  .sep{ display:none; }
  .foot-right{ width:100%; justify-content:center; flex-wrap:wrap; gap:.4rem; }
  .pill{ padding:7px 10px; }
  .pill .icon{ width:14px; height:14px; }
}

/* Remove underline/bullet under the name; keep shine */
.site-head .brand-name::before{ content: none !important; display: none !important; animation: none !important; background: none !important; box-shadow: none !important; }
.site-head .brand-name::after{ display: block !important; }

/* Hide any injected bullet elements */
#bullet, #streak, .bullet, .streak, .title-bullet, .name-bullet{
  display: none !important;
  visibility: hidden !important;
}

/* Comet track & comet */
.comet-track{ position:relative; height:var(--track-h); width:100%; overflow:visible; }
.comet{
  position:absolute; top:50%; left:-8%;
  transform:translateY(-50%);
  width:var(--size); height:var(--size); border-radius:999px;
  background: radial-gradient(circle at 40% 40%, #fff 0 20%, var(--comet-core) 21% 65%, var(--comet-color) 66% 100%);
  box-shadow:
    0 0 16px 6px #fff,
    0 0 34px 10px var(--comet-color),
    0 0 90px 24px rgba(134,231,255,.55),
    0 0 160px 42px rgba(134,231,255,.35);
  filter:saturate(125%);
  animation: comet-fly var(--dur) linear infinite;
}
.comet::before{
  content:"";
  position:absolute; inset:-22px;
  border-radius:inherit;
  background: radial-gradient(circle, rgba(255,255,255,.65), transparent 60%);
  filter: blur(6px);
  animation: head-pulse 1.8s ease-in-out infinite;
}
.comet::after{
  content:"";
  position:absolute; right:55%; top:50%;
  transform:translateY(-50%) skewX(-6deg);
  width:var(--tail-len);
  height:max(6px, calc(var(--size) * .6));
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.95) 0%,
      var(--tail) 8%,
      rgba(134,231,255,.35) 26%,
      rgba(134,231,255,.16) 52%,
      rgba(134,231,255,.08) 75%,
      transparent 100%);
  box-shadow: 0 0 22px rgba(134,231,255,.5);
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  animation: tail-shimmer 2.2s linear infinite;
}
@keyframes comet-fly{
  0%   { transform: translate(-12vw, -50%); opacity:0; }
  5%   { opacity:1; }
  50%  { transform: translate(50vw, -50%); }
  95%  { opacity:1; }
  100% { transform: translate(112vw, -50%); opacity:0; }
}
@keyframes head-pulse{
  0%,100% { transform: scale(1); opacity:.9; }
  50%     { transform: scale(1.12); opacity:1; }
}
@keyframes tail-shimmer{
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce){
  .comet, .comet::before, .comet::after{ animation:none !important; }
}

/* Right gallery images polish */
.visual .slide { filter: saturate(1.06) contrast(1.04) brightness(1.08); }
.tao-slide img { filter: saturate(1.06) contrast(1.04) brightness(1.08); }

/* Veils tuning */
.visual::after{
  background: radial-gradient(120% 120% at 70% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 72%);
}
body::after{
  background:
    radial-gradient(1100px 800px at 40% 30%, rgba(0,0,0,.35), rgba(0,0,0,.18) 60%, rgba(0,0,0,.10) 80%, rgba(0,0,0,0) 100%),
    linear-gradient(160deg, rgba(5,10,22,.55), rgba(8,23,43,.35), rgba(14,42,74,.25));
}

/* PWA install pill visibility */
@media (display-mode: standalone) { #installPWA { display: none !important; } }
#installPWA[hidden] { display: none !important; }
#installPWA {
  background: linear-gradient(135deg, #00c3ff, #004eff);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(0, 207, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}
#installPWA:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
}
#visitPill { display: none !important; }

/* Balanced two-column layout on large screens */
@media (min-width: 1280px){
  .wrap{
    max-width: 1800px;
    margin: 0 auto;
    grid-template-columns:
      minmax(32px, 1fr)
      minmax(680px, 820px)
      minmax(680px, 820px)
      minmax(32px, 1fr);
    gap: 24px;
  }
  .card{ border-radius: 20px; }
  .visual{
    border-radius: 20px;
    min-height: clamp(560px, 70vh, 1100px);
    width: auto;
    margin: 0;
  }
}
@media (min-width: 1700px){
  .wrap{
    max-width: 1900px;
    grid-template-columns:
      minmax(40px, 1fr)
      minmax(760px, 900px)
      minmax(760px, 900px)
      minmax(40px, 1fr);
  }
  .visual{ border-radius: 22px; }
}
/* Safety: remove any previous full-bleed styles if they exist */
.visual{
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: var(--radius, 20px) !important;
}

/* Always-hide wide nav; enforce burger pattern globally (as per final design) */
.nav{ display:none !important; }
.burger{ display:inline-flex !important; }
.mobile-panel{ transform:translateY(-100%); }
#navToggle:checked ~ .mobile-panel{
  transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
}

/* HUD panel extras */
#navToggle:checked ~ .mobile-panel::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(100% 80% at 70% 20%, rgba(0,207,255,.10), transparent 60%),
    rgba(2,8,18,.55);
  pointer-events:none;
}
.mobile-panel{
  --bd: rgba(170,205,255,.25);
  background: linear-gradient(180deg, var(--hud-panel-1), var(--hud-panel-2));
  border-top: 1px solid var(--bd);
  box-shadow: 0 24px 60px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
}
.mobile-panel::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.18;
  background:
    linear-gradient(transparent 95%, rgba(255,255,255,.07) 95%) 0 0/24px 24px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.07) 95%) 0 0/24px 24px;
  mask-image: radial-gradient(1100px 800px at 60% 20%, #000, transparent 80%);
}
.mobile-inner{
  display:grid; gap:12px; max-width:820px; width:min(92%, 820px);
}
.mobile-inner a{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.75rem;
  color:var(--hud-ink); text-decoration:none;
  padding:16px 18px;
  font: 800 14px/1.1 var(--tech-font);
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:14px;
  border:1px solid rgba(180,205,245,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  isolation:isolate;
  transition: transform .18s ease, filter .18s ease;
}
.mobile-inner a::before{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; z-index:0;
  background: conic-gradient(from 0deg,
    hsl(var(--glow-h,198) 100% 60% / .55),
    hsl(calc(var(--glow-h,198) + 16) 100% 65% / .45),
    hsl(calc(var(--glow-h,198) - 12) 100% 68% / .35),
    hsl(var(--glow-h,198) 100% 60% / .55));
  filter: blur(10px);
  opacity:.0; transition:opacity .25s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px;
}
.mobile-inner a::after{
  content:"";
  position:absolute; inset:-20% -40%; z-index:0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%) rotate(2deg);
  filter: blur(2px);
  transition: transform .7s ease;
}
.mobile-inner a span{
  background: linear-gradient(90deg,#f6fbff,#bfe7ff,#7fd3ff,#a6b7ff,#f6fbff);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:
    0 0 8px hsl(var(--glow-h,198) 100% 60% / .45),
    0 0 18px hsl(calc(var(--glow-h,198) + 12) 100% 65% / .35);
}
.mobile-inner a:hover,
.mobile-inner a:focus-visible{
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
}
.mobile-inner a:hover::before,
.mobile-inner a:focus-visible::before{ opacity:.85; }
.mobile-inner a:hover::after,
.mobile-inner a:focus-visible::after{ transform: translateX(120%) rotate(2deg); }
.mobile-inner a:active{ transform: translateY(0); }
.mobile-inner a:focus-visible{
  outline: 2px solid hsl(var(--glow-h,198) 100% 65% / .65);
  outline-offset: 2px;
}
/* ripple placeholder */
.mobile-inner a>.ripple{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(180px 120px at var(--x,50%) var(--y,50%), rgba(140,220,255,.25), transparent 60%);
  opacity:0; transform:scale(.9);
  transition:opacity .35s ease, transform .35s ease;
}
.mobile-inner a.is-pressing>.ripple{ opacity:1; transform:scale(1); }

/* Burger polish */
.burger{
  position:absolute; right:14px; top:12px; z-index:1001;
  width:48px; height:48px; border-radius:14px;
  border:1px solid hsl(205 100% 80% / .25);
  background: radial-gradient(100% 120% at 50% 35%, rgba(255,255,255,.12), rgba(255,255,255,.05) 60%, rgba(0,0,0,.12) 100%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.35), 0 0 22px rgba(0,207,255,.35);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  isolation:isolate;
}
.burger:hover{ transform: translateY(-1px); filter: brightness(1.07) }
.burger:active{ transform: translateY(0) }
.burger::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  padding:1px;
  background: conic-gradient(from 0deg, rgba(0,231,255,.55), rgba(106,132,255,.45), rgba(255,122,255,.35), rgba(0,231,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter: blur(8px);
  opacity:.0; transition:opacity .25s ease, filter .25s ease;
}
#navToggle:checked ~ header .burger::before{ opacity:.9; animation: ringSpin 3.2s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg) } }
.burger i{ width:22px; height:2px; border-radius:2px; background:#eaf6ff; position:relative; box-shadow:0 0 10px rgba(106,132,255,.7); transition: background .2s ease; }
.burger i::before,
.burger i::after{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:#eaf6ff; box-shadow:0 0 10px rgba(106,132,255,.7);
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.burger i::before{ top:-7px }
.burger i::after { top: 7px }
#navToggle:checked ~ header .burger i{ background:transparent; box-shadow:none }
#navToggle:checked ~ header .burger i::before{ top:0; transform: rotate(45deg); }
#navToggle:checked ~ header .burger i::after{ top:0; transform: rotate(-45deg); }

/* Magnetic hover pull */
@media (pointer:fine){
  .burger{ transform-style:preserve-3d; }
  .burger::after{
    content:""; position:absolute; inset:-30%; border-radius:inherit; pointer-events:none;
    background: radial-gradient(120px 80px at var(--bx,50%) var(--by,50%), rgba(140,220,255,.18), transparent 60%);
    opacity:0; transition: opacity .25s ease;
  }
  .burger.is-hot::after{ opacity:1 }
}

/* PWA: hide when installed */
@media (display-mode: standalone) { #installPWA { display: none !important; } }
#installPWA[hidden]{ display:none !important; }

/* Two-column centering + mini-gallery centering (safety) */
.taormina{
  margin: 18px auto 0;
  width: 100%;
  max-width: 520px;
  position: relative;
}

/* Generic cross-fade helpers */
.visual .slide,
.taormina .tao-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transform:scale(1.02);
  transition: opacity .9s ease, transform 9s ease;
  display:block;
}
.visual .slide.active,
.taormina .tao-slide.active{
  opacity:1; transform:scale(1);
}