/* =========================================================
   AURVIO Landing — FINAL FRAME FLOW (no mask, no overlay)
   ========================================================= */

:root {
  --bg-main:#05070b;

  --text-main:rgba(255,255,255,.92);
  --text-muted:rgba(255,255,255,.70);

  --panel-bg:rgba(10,14,20,.78);
  --panel-bg-hover:rgba(12,16,24,.85);

  --accent:#79d2ff;

  /* Asimov colors */
  --c1:#79d2ff;
  --c2:#a6ffe9;
  --c3:#c68cff;
  --c4:#ff78dc;

  --radius:18px;
  --hover-lift:6px;

  --maxw:980px;
  --gap:18px;
  --pad:22px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing:border-box; }

html,body { height:100%; }

body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text-main);

  background:
    radial-gradient(900px 420px at 25% 20%, rgba(121,210,255,.08), transparent 60%),
    radial-gradient(700px 380px at 80% 60%, rgba(121,210,255,.06), transparent 55%),
    linear-gradient(180deg, #04060a 0%, var(--bg-main) 100%);

  display:grid;
  place-items:center;
}

/* ---------- Layout ---------- */
.landing{
  width:100%;
  max-width:var(--maxw);
  padding:46px var(--pad) 56px;
}

.landing-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:var(--gap);
  align-items:center;
  margin:0 0 calc(var(--gap) * 1.2);
}

.hero-copy h1{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:.2px;
}

.hero-line{
  margin:0;
  color:var(--text-muted);
  font-size:16px;
}

.hero-media{
  justify-self:end;
  width:min(420px, 100%);
}

.hero-media picture,
.hero-media img{
  display:block;
  width:100%;
  height:auto;
}

.hero-media img{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 22px 60px rgba(0,0,0,.55);
}

/* Mobile */
@media (max-width: 820px){
  .landing-hero{
    grid-template-columns: 1fr;
  }
  .hero-media{
    justify-self:start;
  }
  .hero-copy h1{
    font-size:30px;
  }
}


.language-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--gap);
}

/* ---------- Card ---------- */
.lang-card{
  position:relative;
  padding:20px;
  border-radius:var(--radius);
  background:var(--panel-bg);

  /* the frame */
  border:2px solid transparent;
  border-image-slice:1;
  border-image-source:
    linear-gradient(
      120deg,
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c1)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 50px rgba(0,0,0,.55);

  transform:translateY(0);
  transition:
    transform 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

/* ---------- Typography ---------- */
.lang-card h2{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
}

.lang-card p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.55;
  color:var(--text-muted);
}

.lang-card a{
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}

.lang-card a:hover{ text-decoration:underline; }

/* ---------- Hover = frame energy ---------- */
.lang-card:hover,
.lang-card:focus-within{
  transform:translateY(calc(var(--hover-lift) * -1));
  background:var(--panel-bg-hover);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 22px 60px rgba(0,0,0,.65);

  animation: aurvio-frame 2.8s linear infinite;
}

/* Animate ONLY the gradient inside the border */
@keyframes aurvio-frame{
  0% {
    border-image-source:
      linear-gradient(120deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  }
  50% {
    border-image-source:
      linear-gradient(240deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  }
  100% {
    border-image-source:
      linear-gradient(360deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .lang-card:hover,
  .lang-card:focus-within{
    animation:none;
    transform:none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:840px){
  .language-grid{ grid-template-columns:1fr; }
}