/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #08080f;
  --surface:     #0f0f1a;
  --surface2:    #13131f;
  --border:      rgba(255,255,255,0.07);
  --border-hover:rgba(255,255,255,0.14);
  --text:        #e2e2f0;
  --muted:       #6b6b8a;
  --muted2:      #4a4a65;

  --web1-a:      #7c3aed;
  --web1-b:      #4f46e5;
  --web1-dim:    rgba(124,58,237,0.12);
  --web1-glow:   rgba(124,58,237,0.3);
  --web1-text:   #a78bfa;

  --web2-a:      #0ea5e9;
  --web2-b:      #06b6d4;
  --web2-dim:    rgba(14,165,233,0.12);
  --web2-glow:   rgba(14,165,233,0.3);
  --web2-text:   #38bdf8;

  --radius-card: 24px;
  --radius-pill: 9999px;
  --ease:        cubic-bezier(0.4,0,0.2,1);
}

html, body { height: 100%; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Orbs ── */
.bg-orbs {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0;
  animation: orb-in 1.2s var(--ease) forwards, float 14s ease-in-out infinite;
}
.orb-1 { width: 560px; height: 560px; background: radial-gradient(circle, var(--web1-a), transparent 65%); top: -180px; left: -140px; animation-delay: 0.2s, 1.4s; opacity: 0; }
.orb-2 { width: 440px; height: 440px; background: radial-gradient(circle, var(--web2-b), transparent 65%); bottom: -120px; right: -100px; animation-delay: 0.5s, 2s; opacity: 0; }
.orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, #ec4899, transparent 65%); top: 45%; left: 48%; transform: translate(-50%,-50%); animation-delay: 0.8s, 2.5s; opacity: 0; }

@keyframes orb-in {
  to { opacity: 0.2; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-28px) scale(1.04); }
}
.orb-3 { animation-name: orb-in-dim, float; }
@keyframes orb-in-dim { to { opacity: 0.1; } }

/* ── AOS (scroll-reveal) ── */
[data-aos] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-aos].aos-visible {
  opacity: 1; transform: none;
}

/* ── Portal wrapper ── */
.portal {
  position: relative; z-index: 1;
  width: 100%; max-width: 1020px;
  padding: 64px 20px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 52px;
}

/* ── Header ── */
.portal__header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.logo {
  display: flex; align-items: center; gap: 12px;
}
.logo__icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--web1-a), var(--web2-b));
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #fff;
  box-shadow: 0 6px 24px rgba(124,58,237,0.5);
}
.logo__text {
  font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(90deg, #fff 40%, var(--muted));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.portal__tagline { color: var(--muted); font-size: 15px; }

/* ── Cards grid ── */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: start;
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .portal { padding: 44px 16px 36px; }
}

/* ── Card ── */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-5px); }

.card--web1:hover { border-color: rgba(124,58,237,0.4); box-shadow: 0 12px 48px var(--web1-glow); }
.card--web2:hover { border-color: rgba(14,165,233,0.4);  box-shadow: 0 12px 48px var(--web2-glow); }

/* Glow overlay */
.card__glow {
  position: absolute; inset: 0; border-radius: var(--radius-card);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.card--web1 .card__glow { background: radial-gradient(ellipse at 10% 0%, rgba(124,58,237,0.18), transparent 60%); }
.card--web2 .card__glow { background: radial-gradient(ellipse at 10% 0%, rgba(14,165,233,0.18), transparent 60%); }
.card:hover .card__glow { opacity: 1; }

/* Top section */
.card__top {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 28px 28px 24px;
}
.card__icon {
  flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
}
.card__icon svg { width: 24px; height: 24px; }
.card--web1 .card__icon { background: var(--web1-dim); border-color: rgba(124,58,237,0.25); color: var(--web1-text); }
.card--web2 .card__icon { background: var(--web2-dim); border-color: rgba(14,165,233,0.25);  color: var(--web2-text); }

.card__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.card__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill); display: inline-block; width: fit-content;
}
.card--web1 .card__badge { background: var(--web1-dim); color: var(--web1-text); border: 1px solid rgba(124,58,237,0.2); }
.card--web2 .card__badge { background: var(--web2-dim); color: var(--web2-text); border: 1px solid rgba(14,165,233,0.2); }

.card__title { font-size: 30px; font-weight: 900; letter-spacing: -1px; color: #fff; line-height: 1; }
.card--web1 .card__title span { color: var(--web1-text); }
.card--web2 .card__title span { color: var(--web2-text); }

.card__desc { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* Divider */
.divider { height: 1px; background: var(--border); margin: 0; flex-shrink: 0; }

/* Card section (features / stack) */
.card__section { padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.card__section-title { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

/* Feature list */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #c4c4de; line-height: 1.45;
}
.feat-icon { font-size: 9px; flex-shrink: 0; margin-top: 3px; }
.feat-icon--green { color: #86efac; }
.feat-icon--blue  { color: #7dd3fc; }

/* Tech pills */
.tech-stack { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-pill {
  font-size: 11.5px; font-weight: 600; padding: 4px 11px;
  border-radius: var(--radius-pill); border: 1px solid;
}
/* pill colors */
.tech-pill--react    { background: rgba(97,218,251,0.1);  color: #61dafb; border-color: rgba(97,218,251,0.2); }
.tech-pill--js       { background: rgba(247,223,30,0.1);  color: #f7df1e; border-color: rgba(247,223,30,0.2); }
.tech-pill--php      { background: rgba(139,92,246,0.12); color: #c4b5fd; border-color: rgba(139,92,246,0.25);}
.tech-pill--mysql    { background: rgba(0,117,143,0.15);  color: #67d7e8; border-color: rgba(0,117,143,0.3); }
.tech-pill--babel    { background: rgba(245,130,32,0.12); color: #fbbf7d; border-color: rgba(245,130,32,0.25);}
.tech-pill--laravel  { background: rgba(255,45,32,0.12);  color: #fca5a5; border-color: rgba(255,45,32,0.2); }
.tech-pill--filament { background: rgba(249,115,22,0.12); color: #fdba74; border-color: rgba(249,115,22,0.2);}
.tech-pill--livewire { background: rgba(168,85,247,0.12); color: #d8b4fe; border-color: rgba(168,85,247,0.2);}
.tech-pill--tailwind { background: rgba(56,189,248,0.1);  color: #7dd3fc; border-color: rgba(56,189,248,0.2);}
.tech-pill--vite     { background: rgba(100,108,255,0.12);color: #a5b4fc; border-color: rgba(100,108,255,0.25);}
.tech-pill--neutral  { background: rgba(255,255,255,0.05);color: var(--muted); border-color: var(--border); }

/* Card footer */
.card__footer {
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface2);
  border-top: 1px solid var(--border);
}
.card__url { font-size: 12px; color: var(--muted2); font-family: monospace; }
.card__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.card__btn svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.card__btn:hover svg { transform: translateX(3px); }

.card--web1 .card__btn { background: var(--web1-dim); color: var(--web1-text); border: 1px solid rgba(124,58,237,0.3); }
.card--web2 .card__btn { background: var(--web2-dim); color: var(--web2-text); border: 1px solid rgba(14,165,233,0.3); }
.card--web1 .card__btn:hover { background: rgba(124,58,237,0.25); box-shadow: 0 0 18px var(--web1-glow); }
.card--web2 .card__btn:hover { background: rgba(14,165,233,0.25);  box-shadow: 0 0 18px var(--web2-glow); }

/* ── Footer ── */
.portal__footer {
  color: var(--muted2); font-size: 13px; text-align: center;
  padding-bottom: 12px;
}