:root{ --cyan:#74f0ff; --cyan2:#29c7ff; --text:#eafcff; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body{
  background:
    radial-gradient(1200px 700px at 55% 45%, rgba(150,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,40,70,.55), rgba(0,15,35,.82)),
    url("background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text);
  overflow:hidden;
}

.vignette{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 520px at 55% 40%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.48));
  pointer-events:none;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 3vw, 44px);
  text-align:center;
}

.hero{
  position:relative;
  width:min(1100px, 100%);
  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1.6vw, 18px);
  align-items:center;
  justify-content:center;
  user-select:none;
}

/* Readability panel behind the text (subtle glass) */
.panel{
  position:absolute;
  width:min(980px, 96%);
  height:min(460px, 55vh);
  border-radius: 14px; /* simpler */
  background:
    linear-gradient(180deg, rgba(0, 20, 35, .28), rgba(0, 12, 22, .42));
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:-1;
}

/* ABARAK container */
.brand{
  display:inline-flex;
  align-items:baseline;
  line-height:1;
  letter-spacing:.06em;
  font-weight:900;
  text-transform:uppercase;
  font-size: clamp(56px, 9.5vw, 140px);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  will-change: transform;
}

/* Base text */
.word,.k{
  position:relative;
  color: rgba(235,253,255,.96);
  text-shadow:
    0 0 10px rgba(116,240,255,.16),
    0 0 24px rgba(41,199,255,.14),
    0 18px 42px rgba(0,0,0,.28);
  animation: glowPulse 2.4s ease-in-out infinite;
}

/* Glow pulse */
@keyframes glowPulse{
  0%,100%{
    filter: drop-shadow(0 0 0 rgba(116,240,255,0));
    text-shadow:
      0 0 8px rgba(116,240,255,.14),
      0 0 18px rgba(41,199,255,.12),
      0 18px 42px rgba(0,0,0,.28);
  }
  50%{
    filter: drop-shadow(0 0 18px rgba(116,240,255,.16));
    text-shadow:
      0 0 16px rgba(116,240,255,.28),
      0 0 36px rgba(41,199,255,.24),
      0 18px 42px rgba(0,0,0,.28);
  }
}

/* Shine ONLY on the letters (no wide band) using text clipping */
.shine::after{
  content: attr(data-text);
  position:absolute;
  inset:0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.65) 50%,
    rgba(116,240,255,.55) 52%,
    rgba(255,255,255,0) 56%,
    rgba(255,255,255,0) 100%);
  background-size: 260% 100%;
  background-position: -130% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  filter: blur(.25px);
  opacity:.95;
  pointer-events:none;
  animation: shineMove 3.2s ease-in-out infinite;
}
@keyframes shineMove{
  0%   { background-position: -130% 0%; opacity:.55; }
  40%  { opacity:.95; }
  100% { background-position: 130% 0%; opacity:.55; }
}

/* Bounce on touch */
.brand.pop{ animation: pop 520ms cubic-bezier(.2,.9,.2,1); }
@keyframes pop{
  0%   { transform: scale(1) translateZ(0); }
  18%  { transform: scale(1.08) translateY(-4px) translateZ(0); }
  45%  { transform: scale(.96) translateY(4px) translateZ(0); }
  70%  { transform: scale(1.03) translateY(-2px) translateZ(0); }
  100% { transform: scale(1) translateZ(0); }
}

/* K: arrive -> pause ~10s -> twirl -> repeat */
.k{
  display:inline-block;
  transform-origin: 50% 60%;
  will-change: transform;
  animation:
    glowPulse 2.4s ease-in-out infinite,
    kCycle 14s cubic-bezier(.45,.05,.55,.95) infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
}
@keyframes kCycle{
  0%   { transform: translate(18px,-10px) rotateZ(-140deg) rotateY(260deg) scale(.92); opacity:.92; }
  8%   { transform: translate(0px,0px) rotateZ(0deg) rotateY(0deg) scale(1); opacity:1; }
  80%  { transform: translate(0px,0px) rotateZ(0deg) rotateY(0deg) scale(1); }
  95%  { transform: translate(-10px,-14px) rotateZ(360deg) rotateY(520deg) scale(1.02); }
  100% { transform: translate(0px,0px) rotateZ(360deg) rotateY(520deg) scale(1); }
}

.subtitle{
  font-size: clamp(22px, 3.4vw, 58px);
  font-weight: 750;
  letter-spacing:.02em;
  opacity:.98;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.tagline{
  margin-top: clamp(6px, 1.0vw, 14px);
  font-size: clamp(15px, 1.9vw, 22px);
  opacity:.96;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.contact{
  margin-top: clamp(12px, 2vw, 26px);
  font-size: clamp(14px, 1.9vw, 24px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(125,245,255,.98);
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.footer{
  position:fixed; right:18px; bottom:14px;
  font-size:12px; opacity:.85;
  text-shadow: 0 8px 18px rgba(0,0,0,.45);
}

/* Sparkles */
.sparkle{
  position:fixed;
  width:8px; height:8px;
  border-radius:999px;
  pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(116,240,255,.75) 45%, rgba(41,199,255,0) 70%);
  transform: translate(-50%,-50%) scale(1);
  filter: drop-shadow(0 0 10px rgba(116,240,255,.35));
}


/* Debug (bottom-right, discreet) */
.debug{
  position: fixed;
  right: 18px;
  bottom: 14px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: rgba(210, 235, 245, .22); /* proche du fond */
  user-select: none;
  pointer-events: none;
  text-shadow: none;
}
.debug.ok{ color: rgba(210, 235, 245, .28); }

/* Global dim overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  background: rgba(0,0,0,.18);
  pointer-events:none;
}

/* Professional button */
.pro-btn{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 650;
  letter-spacing:.02em;
  color: rgba(235,253,255,.95);
  background: rgba(15, 45, 70, .42);
  border: 1px solid rgba(116,240,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pro-btn:hover{
  transform: translateY(-1px);
  background: rgba(18, 55, 86, .50);
  border-color: rgba(116,240,255,.32);
}
.pro-btn:active{
  transform: translateY(0px) scale(.99);
}

/* Legal block */
.legal{
  margin-top: 16px;
  width: min(920px, 96%);
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 10, 18, .32);
  border: 1px solid rgba(116,240,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.legal-title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 0;
}
.legal-lines{
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .86;
  padding-top: 10px;
}

/* Collapsible legal block (details/summary) */
.legal > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.legal > summary::-webkit-details-marker{ display: none; }
.legal > summary::after{
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid rgba(116,240,255,.50);
  border-bottom: 2px solid rgba(116,240,255,.50);
  transform: rotate(45deg);
  opacity: .75;
  transition: transform .2s ease, opacity .2s ease;
}
.legal[open] > summary::after{
  transform: rotate(-135deg);
  opacity: .95;
}
.legal > summary:focus-visible{
  outline: 2px solid rgba(116,240,255,.30);
  outline-offset: 4px;
  border-radius: 10px;
}