@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

body {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #202124;
}
.figtree {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/* BACKGROUND COLORS */
.bg-yellow-bright { background-color: #E1FB15; }   /* primarna svetlo žuta */
.bg-pink-light    { background-color: #E9C0E9; }   /* svetlo roze */
.bg-green-dark    { background-color: #254F1A; }   /* tamno zelena */
.bg-gray-light    { background-color: #F4F4F4; }   /* svetlo siva */
.bg-green-light   { background-color: #E8EFD6; }   /* pastel zelena */
.bg-navy-dark     { background-color: #0F172A; }   /* tamno plava */
.bg-pink-dark     { background-color: #881337; }   /* tamno roze/crvena */
.bg-violet-dark   { background-color: #650044; }   /* tamno ljubičasta */
.bg-blue-dark     { background-color: #1032CF; }   /* jarka plava */
.bg-red-hot       { background-color: #FF2272; }   /* jarko crvena */
.bg-navy-dark     { background-color: #061492; }   /* tamno plava */
.bg-purple-dark   { background-color: #780016; }   /* tamno ljubičasta */
.bg-teal-light    { background-color: #DCE7C3; }   /* svetlo tirkizna */
.bg-violet        { background-color: #502274; }   /* tamno ljubičasta */
.bg-pink-bright   { background-color: #FE7BE3; }   /* jarko roze */
.bg-blue-bright   { background-color: #2665D6; }   /* jarka plava */
.bg-green-light   { background-color: #E8EFD6; }   /* pastel zelena */
.bg-brown-dark    { background-color: #4C2E05; }   /* tamno braon */
.bg-yellow-dark    { background-color: #D6A336; }   /* tamno žuta */
.bg-orange         { background-color: #ff6c02; }   /* narandžasta */
.bg-rose-light     { background-color: #B69FAF; }   /* svetlo ružičasta */
.bg-rose-light     { background-color: #f8edf8; }   /* svetlo ružičasta */
.bg-burgundy-dark { background-color: #51000F; }   /* tamno bordo */
.bg-and-light     { background-color: #F2F1E1; }   /* tamno siva */



/* TEXT COLORS */
.text-black-main  { color: #202124; }  /* glavni crni/tamno sivi tekst */
.text-gray-main   { color: #333333; }  /* sekundarni sivi tekst */
.text-gray-light  { color: #666666; }  /* svetlija siva */
.text-white-main  { color: #FFFFFF; }  /* bela */
.text-yellow-bright { color: #E1FB15; } /* žuta */
.text-pink-light    { color: #E9C0E9; } /* svetlo roze */
.text-pink-bright   { color: #FE7BE3; } /* jarko roze */
.text-pink-hot      { color: #ff7be5; } /* hot pink */
.text-blue-bright   { color: #2665d6; } /* jarka plava */
.text-violet   { color: #502274; } /* tamno ljubičasta */
.text-purple-dark   { color: #780016; } /* tamno ljubičasta */
.text-teal-light    { color: #DCE7C3; } /* svetlo tirkizna */
.text-green-dark    { color: #254F1A; } /* tamno zelena */
.text-green-light   { color: #E8EFD6; } /* pastel zelena */
.text-brown-dark    { color: #4C2E05; } /* tamno braon */
.text-navy-dark     { color: #061492; } /* tamno plava */
.text-gold-gray     { color: #676b5f; } /* zlatno siva */

/* BORDERS */
.border-yellow-bright { border-color: #E1FB15; }
.border-pink-light    { border-color: #E9C0E9; }
.border-black-main    { border-color: #202124; }

.border-gray-main    { border-color: #333333; }
.border-gray-light   { border-color: #666666; }
.border-white-main   { border-color: #FFFFFF; }
.border-yellow-bright { border-color: #E1FB15; }
.border-pink-light    { border-color: #E9C0E9; }
.border-pink-bright   { border-color: #FE7BE3; }
.border-pink-hot      { border-color: #ff7be5; }
.border-blue-bright   { border-color: #2665d6; }
.border-green-dark    { border-color: #254F1A; }
.border-gray-light-bg { border-color: #F4F4F4; }
.border-green-light   { border-color: #E8EFD6; }
.border-navy-dark     { border-color: #061492; }
.border-pink-dark     { border-color: #881337; }
.border-violet-dark   { border-color: #650044; }
.border-blue-dark     { border-color: #1032CF; }
.border-red-hot       { border-color: #FF2272; }
.border-purple-dark   { border-color: #780016; }
.border-teal-light    { border-color: #DCE7C3; }
.border-violet        { border-color: #502274; }


:root{
    --bg:#0b0f12;
    --phone:#0f1620;
    --screen:#0e1a27;
    --text:#e9f0f7;
    --muted:#8aa0b4;
    --accent:#ffd749;      /* žuta */
    --cta:#ff6ec7;         /* pink */
    --cta2:#9b8cff;        /* ljubičasta */
    --ring:#223145;
    --card:#132234;
    --card-hover:#18304a;
    --shadow: 0 20px 40px rgba(0,0,0,.35);
  }



  .wrap{
    display:flex; gap:60px; align-items:center; justify-content:center; padding:40px;
  }

  /* Phone frame */
  .phone{
    width: 340px; height: 680px; background: var(--phone);
    border-radius: 42px; padding: 14px; box-shadow: var(--shadow);
    border:1px solid #111a27; position:relative; isolation:isolate;
  }
  .notch{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:140px; height:22px; background:#0a111a; border-radius:0 0 16px 16px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
  }
  .screen{
    width:100%; height:100%; border-radius:32px; overflow:hidden;
    background:
      radial-gradient(800px 400px at 100% 0%, rgba(255,110,199,.18), transparent 60%),
      radial-gradient(700px 500px at 0% 100%, rgba(155,140,255,.16), transparent 60%),
      linear-gradient(180deg, #0f2033 0%, #0b1725 100%);
    border:1px solid #152235;
    position:relative;
  }
  .status{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; font-size:12px; color:var(--muted);
  }
  .avatar{
    display:flex; align-items:center; gap:10px; padding:0 18px 10px;
  }
  .avatar .pic{
    width:54px; height:54px; border-radius:50%;
    background: linear-gradient(135deg, #ff7ad9, #b39bff);
    border:2px solid #fff2; box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .avatar .meta .name{ font-weight:800; letter-spacing:.2px }
  .avatar .meta .handle{ color:var(--muted); font-size:12px }

  .addbar{
    display:flex; align-items:center; gap:10px; padding: 0 18px 16px;
  }
  .addbar .plus{
    width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--cta), var(--cta2));
    font-weight:900; color:#0b0f12; box-shadow:0 10px 20px rgba(255,110,199,.25);
    animation:pulse 1800ms ease-in-out infinite;
  }
  .addbar .hint{
    color:var(--muted); font-size:13px;
  }

  .links{
    display:flex; flex-direction:column; gap:12px; padding:0 18px 18px; position:relative;
  }
  .link-card{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border-radius:16px; background:var(--card);
    border:1px solid var(--ring); box-shadow: 0 6px 12px rgba(0,0,0,.2);
    transform: translateY(10px) scale(.98); opacity:0;
    animation: drop-in .7s cubic-bezier(.17,.84,.44,1) forwards;
  }
  .link-card:hover{ background:var(--card-hover) }

  .icon{
    width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
    color:#0b0f12; font-weight:900; font-size:16px;
    background: linear-gradient(135deg, var(--accent), #fff1a1);
    box-shadow: 0 6px 14px rgba(255,215,73,.25);
    flex: 0 0 34px;
  }
  .content{ display:flex; flex-direction:column; line-height:1.2 }
  .title{ font-weight:800; letter-spacing:.2px }
  .desc{ font-size:12px; color:var(--muted) }

  /* stagger delays */
  .link-card:nth-child(1){ animation-delay: .15s }
  .link-card:nth-child(2){ animation-delay: .45s }
  .link-card:nth-child(3){ animation-delay: .75s }
  .link-card:nth-child(4){ animation-delay: 1.05s }
  .link-card:nth-child(5){ animation-delay: 1.35s }
  .link-card:nth-child(6){ animation-delay: 1.65s }

  /* subtle top CTA inside the phone */
  .sticky-cta{
    position: sticky; top:0; margin:0 18px 12px; z-index:2;
    padding:10px 14px; border-radius:14px;
    background:linear-gradient(135deg, rgba(255,110,199,.18), rgba(155,140,255,.18));
    border:1px dashed #caa7ff44; color:#f0eaff; font-size:12px; backdrop-filter: blur(6px);
  }

  /* subtle sparkles when items appear */
  .sparkle{
    position:absolute; inset:0; pointer-events:none; overflow:hidden;
  }
  .sparkle::before, .sparkle::after{
    content:""; position:absolute; width:6px; height:6px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 60%);
    opacity:0; transform: translateY(10px) scale(.6);
    animation: sparkle 2.2s ease-out infinite;
  }
  .sparkle::before{ left:14%; top:18%; animation-delay:.4s }
  .sparkle::after{ right:12%; top:38%; animation-delay:1.1s }

  /* keyframes */
  @keyframes drop-in{
    0%{ opacity:0; transform: translateY(16px) scale(.96) }
    55%{ opacity:1; transform: translateY(-2px) scale(1.01) }
    100%{ opacity:1; transform: translateY(0) scale(1) }
  }
  @keyframes pulse{
    0%,100%{ transform: scale(1) }
    50%{ transform: scale(1.06) }
  }
  @keyframes sparkle{
    0%{ opacity:0; transform: translateY(12px) scale(.4) rotate(0deg) }
    20%{ opacity:1 }
    60%{ opacity:.45 }
    100%{ opacity:0; transform: translateY(-18px) scale(1.1) rotate(25deg) }
  }

  /* side copy (optional) */
  .copy{
    max-width:520px;
  }
  .eyebrow{
    display:inline-block; font-size:12px; color:#cbd9e6; letter-spacing:.12em;
    text-transform:uppercase; border:1px solid #27405d; padding:6px 10px; border-radius:999px;
    background:rgba(39,64,93,.25)
  }
  .h1{
    margin:14px 0 8px; font-size:40px; line-height:1.05; font-weight:900; letter-spacing:-.02em;
  }
  .lead{ color:#bcd0e2; font-size:16px }

  @media (max-width: 980px){
    .wrap{ flex-direction:column; gap:24px }
    .h1{ font-size:32px }
  }