:root{--bg:#06111f;--panel:#0c2039;--gold:#efbf51;--text:#f5f7fb;--muted:#9fb0c6;--line:rgba(255,255,255,.1)}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 75% 8%,rgba(30,133,255,.18),transparent 25%),linear-gradient(#050e1a,#081a2d 48%,#06111f);color:var(--text)}.wrap{width:min(1120px,calc(100% - 28px));margin:auto}header{position:sticky;top:0;background:rgba(5,14,26,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:5}.nav{height:70px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px}.brand img{width:44px;height:44px;border-radius:50%}.btn{border:0;border-radius:999px;padding:12px 17px;background:linear-gradient(135deg,#f3ca67,#d79a22);color:#07111d;font-weight:900;text-decoration:none;cursor:pointer}.hero{padding:70px 0}.heroGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}.pill{display:inline-block;color:var(--gold);font-size:12px;font-weight:900;letter-spacing:1.4px;border:1px solid rgba(239,191,81,.3);padding:8px 10px;border-radius:999px}h1{font-size:clamp(46px,7vw,80px);line-height:.98;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;color:var(--gold)}.hero p{color:#b5c4d6;font-size:18px;line-height:1.6}.search{display:flex;gap:10px;border:1px solid var(--line);background:rgba(12,32,57,.8);padding:8px;border-radius:17px;max-width:580px}.search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:0 12px;outline:0}.hero small{display:block;color:var(--muted);margin-top:16px}.visual{height:390px;border-radius:28px;border:1px solid var(--line);display:grid;place-items:center;background:radial-gradient(circle,rgba(30,133,255,.19),transparent 45%),#08192c}.visual img{width:220px;height:220px;border-radius:50%;box-shadow:0 0 60px rgba(239,191,81,.12)}section{padding:60px 0}h2{font-size:36px}.chips{display:flex;gap:9px;overflow:auto}.chips button{white-space:nowrap;border:1px solid var(--line);background:#0c2039;color:#e5edf7;padding:10px 14px;border-radius:999px;cursor:pointer}.chips button.active{border-color:rgba(239,191,81,.6);color:var(--gold)}#status{width:min(1120px,calc(100% - 28px));margin-left:auto;margin-right:auto;color:var(--muted)}.grid{width:min(1120px,calc(100% - 28px));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card,.steps article{border:1px solid var(--line);background:linear-gradient(180deg,#102b4d,#091a2e);border-radius:20px;padding:22px}.data{font-size:36px;font-weight:950;margin:10px 0}.price{font-size:28px;color:var(--gold);font-weight:950;margin:18px 0}.meta{color:var(--muted);font-size:13px}.card button{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(239,191,81,.5);background:transparent;color:var(--gold);font-weight:900}.alt{border-block:1px solid var(--line);background:rgba(255,255,255,.02)}footer{padding:32px 0;border-top:1px solid var(--line);color:var(--muted)}@media(max-width:820px){.heroGrid,.grid,.steps{grid-template-columns:1fr}.visual{order:-1;height:260px}.visual img{width:155px;height:155px}h1{font-size:52px}}@media(max-width:520px){.hero{padding-top:30px}.search{flex-direction:column}.search input{height:44px}h1{font-size:43px;letter-spacing:-1.7px}.hero p{font-size:16px}}

/* ===== ROAM TRUST PREMIUM ESIM CARDS ===== */

.esim-plan-card{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:26px 20px 22px;
  border:1px solid rgba(239,191,81,.72);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(30,133,255,.16),transparent 38%),
    linear-gradient(180deg,#0d2a50 0%,#081a31 58%,#061322 100%);
  box-shadow:
    0 14px 35px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .2s ease,box-shadow .2s ease;
}

.esim-plan-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 22px rgba(239,191,81,.08);
}

.plan-destination{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:62px;
}

.plan-flag{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

.plan-country{
  font-size:18px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#f7f9fc;
}

.plan-divider{
  height:1px;
  margin:17px 8px 15px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(239,191,81,.8),
    transparent
  );
}

.plan-data{
  margin:4px 0 12px;
  font-size:38px;
  line-height:1;
  font-weight:950;
  color:#fff;
}

.plan-duration{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#eef4fb;
  font-size:14px;
  font-weight:700;
}

.plan-benefits{
  margin:21px 0;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.09);
  text-align:left;
  color:#d9e4f1;
  font-size:13px;
  line-height:1.8;
}

.plan-benefits div:first-child{
  color:#f3f6fb;
}

.plan-benefits div::first-letter{
  color:#efbf51;
}

.plan-price-label{
  margin-top:4px;
  color:#efbf51;
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
}

.plan-price{
  margin:7px 0 17px;
  font-size:31px;
  color:#efbf51;
  font-weight:950;
}

.esim-plan-card .plan-buy{
  width:100%;
  padding:14px 16px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#f6d16d,#dfa62b);
  color:#07111d;
  font-size:15px;
  font-weight:950;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(223,166,43,.16);
  transition:transform .15s ease,filter .15s ease;
}

.esim-plan-card .plan-buy:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

@media(max-width:820px){
  .esim-plan-card{
    max-width:520px;
    width:100%;
    margin:0 auto;
  }

  .plan-data{
    font-size:36px;
  }
}


/* ===== MOBILE ESIM CARDS FIX ===== */

@media(max-width:820px){

  .grid{
    grid-template-columns:1fr !important;
    gap:18px;
  }

  .esim-plan-card{
    max-width:none;
    width:100%;
    margin:0;
    padding:24px 20px;
  }

  .plan-flag{
    width:56px;
    height:56px;
  }

  .plan-country{
    font-size:19px;
  }

  .plan-data{
    font-size:40px;
  }

  .plan-duration{
    font-size:14px;
  }

  .plan-benefits{
    font-size:14px;
  }

  .plan-price{
    font-size:34px;
  }

  .esim-plan-card .plan-buy{
    min-height:50px;
    font-size:16px;
  }

}

@media(max-width:520px){

  .esim-plan-card{
    border-radius:20px;
    padding:22px 18px;
  }

  .plan-flag{
    width:52px;
    height:52px;
  }

  .plan-data{
    font-size:38px;
  }

}


/* ===== ROAM TRUST MOBILE CARD POLISH ===== */

@media(max-width:520px){

  .grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .esim-plan-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 18px !important;
    border-radius:20px !important;
  }

  .plan-flag{
    width:76px !important;
    height:76px !important;
    object-fit:cover;
  }

  .plan-country{
    font-size:16px !important;
    margin-top:8px !important;
  }

  .plan-data{
    font-size:36px !important;
    line-height:1.05 !important;
    margin:10px 0 !important;
  }

  .plan-duration{
    font-size:14px !important;
    margin:8px 0 !important;
  }

  .plan-benefits{
    font-size:14px !important;
    line-height:1.45 !important;
    margin:8px 0 !important;
  }

  .plan-price-label{
    margin-top:10px !important;
    font-size:10px !important;
  }

  .plan-price{
    font-size:32px !important;
    margin:5px 0 14px !important;
  }

  .esim-plan-card .plan-buy{
    width:100% !important;
    min-height:48px !important;
    padding:12px 14px !important;
    font-size:15px !important;
  }

}


/* ===== MOBILE FLAG SIZE ===== */

@media(max-width:520px){
  .plan-flag{
    width:78px !important;
    height:78px !important;
    object-fit:cover !important;
  }
}


/* ===== FINAL MOBILE FLAG SIZE ===== */

@media(max-width:520px){
  .esim-plan-card .plan-flag{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    object-fit:cover !important;
  }
}


/* ===== MOBILE CARD COMPACT ===== */

@media(max-width:520px){

  .esim-plan-card{
    padding:20px 18px !important;
  }

  .plan-divider{
    margin:12px 8px 10px !important;
  }

  .plan-data{
    margin:6px 0 8px !important;
  }

  .plan-duration{
    margin:6px auto 10px !important;
  }

  .plan-benefits{
    margin:6px 0 10px !important;
    line-height:1.35 !important;
  }

  .plan-price-label{
    margin-top:4px !important;
  }

  .plan-price{
    margin:4px 0 12px !important;
  }

}


/* ===== MOBILE DURATION SPACING FINAL ===== */

@media(max-width:520px){
  .plan-duration{
    margin-bottom:-6px !important;
  }
}


/* ===== MOBILE HEADER COMPACT ===== */

@media(max-width:520px){

  .nav{
    height:58px !important;
  }

  .brand{
    gap:8px !important;
  }

  .brand img{
    width:36px !important;
    height:36px !important;
  }

  .brand b{
    font-size:16px !important;
  }

  .nav .btn{
    padding:10px 14px !important;
    font-size:14px !important;
  }

}


/* ===== MOBILE HERO SPACING FIX ===== */

@media(max-width:520px){

  .hero{
    padding-bottom:10px !important;
  }

  #plans{
    padding-top:20px !important;
  }

}


/* ===== DESKTOP CARD POLISH ===== */

@media(min-width:821px){

  .esim-plan-card{
    padding:20px 20px 18px;
  }

  .plan-destination{
    min-height:54px;
    gap:7px;
  }

  .plan-flag{
    width:42px;
    height:42px;
  }

  .plan-divider{
    margin:13px 8px 12px;
  }

  .plan-data{
    font-size:36px;
    margin:4px 0 10px;
  }

  .plan-benefits{
    margin:16px 0;
    padding-bottom:14px;
  }

  .plan-price{
    margin:5px 0 14px;
  }

}


/* ===== DESKTOP HERO COMPACT ===== */

@media(min-width:821px){

  .hero{
    padding-top:52px;
    padding-bottom:38px;
  }

  .heroGrid{
    gap:36px;
  }

  #plans{
    padding-top:42px;
  }

}


/* ===== DESKTOP PLANS SPACING FINAL ===== */

@media(min-width:821px){
  #plans{
    padding-top:24px !important;
  }
}


/* ===== DESKTOP CARD COMPACT FINAL ===== */

@media(min-width:821px){

  .esim-plan-card{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  .plan-destination{
    margin-bottom:8px !important;
  }

  .plan-divider{
    margin:10px 8px 10px !important;
  }

  .plan-data{
    margin:4px 0 8px !important;
  }

  .plan-duration{
    margin:8px auto 10px !important;
  }

  .plan-benefits{
    margin:10px 0 !important;
    padding-bottom:10px !important;
  }

  .plan-price{
    margin:4px 0 10px !important;
  }

}


/* COUNTRY FLAG ICONS */

.chips button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
}

.chips button img{
  display:block !important;
  width:20px !important;
  height:13px !important;
  min-width:20px !important;
  max-width:20px !important;
  min-height:13px !important;
  max-height:13px !important;
  object-fit:fill !important;
  flex:0 0 20px !important;
}
/* Social media icons */
.social-icons {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-icons a {
    color: #ffd21c;
    font-size: 22px;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icons a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}
footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

footer a:hover {
    color: #ffd21c;
    text-decoration: none;
}
/* Premium destination chips */
.chips {
    gap: 12px;
    padding: 4px 0 8px;
}

.chips button {
    padding: 9px 15px;
    border-radius: 20px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.chips button:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 210, 28, 0.55);
}
#status {
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.65);
}
/* ===== Footer professional layout ===== */

footer .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Copyright ide poslednji red, centriran */
footer .wrap > div:first-child {
    order: 3;
    flex: 0 0 100%;
    text-align: center;
    margin-top: 18px;
}

/* Legal links levo */
footer .wrap > div:nth-child(2) {
    order: 1;
}

/* Social icons desno */
footer .social-icons {
    order: 2;
    margin-top: 0;
}

/* Mobile */
@media (max-width: 700px) {
    footer .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    footer .wrap > div:nth-child(2) {
        order: 1;
        text-align: center;
    }

    footer .social-icons {
        order: 2;
        margin-top: 0;
        justify-content: center;
    }

    footer .wrap > div:first-child {
        order: 3;
        flex: auto;
        width: 100%;
        text-align: center;
        margin-top: 12px;
    }
}