/* ============================================================

   PREMIUM HERO — Split Layout (Content Left / Visual Right)

   Academic Publication Support — thescopuspublications.com

   ============================================================ */



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');



html { scroll-behavior: smooth; }

#hero-consultation { scroll-margin-top: 1.5rem; }

#services { scroll-margin-top: 1.5rem; }



/* ---------- palette ---------- */

.hero-premium {

  --hp-navy:       #0c2340;

  --hp-navy-mid:   #163859;

  --hp-teal:       #1a6b7a;

  --hp-teal-light: #2d8f9e;

  --hp-accent:     #3b82c4;

  --hp-gold:       #d4a853;

  --hp-text:       #1e293b;

  --hp-muted:      #5b6b7d;

  --hp-glass:      rgba(255,255,255,0.72);

  --hp-glass-border: rgba(255,255,255,0.55);

}



/* ---------- section wrapper ---------- */

.hero-premium {

  position: relative;

  overflow: hidden;

  padding: 3rem 0 0; 

  display: flex;

  align-items: center;

  background: linear-gradient(135deg, #f0f6fc 0%, #e8f2f8 35%, #f5f9fc 70%, #fafcfe 100%);

  text-align: left;

}



/* ===================== ANIMATED BACKGROUND ===================== */

.hero-premium__bg {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



/* gradient orbs */

.hero-premium__gradient-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(90px);

  opacity: 0.4;

}

.hero-premium__gradient-orb--1 {

  width: 500px; height: 500px;

  top: -160px; right: 5%;

  background: radial-gradient(circle, rgba(45,143,158,0.35) 0%, transparent 70%);

  animation: orbFloat1 8s ease-in-out infinite;

}

.hero-premium__gradient-orb--2 {

  width: 400px; height: 400px;

  bottom: -100px; left: -80px;

  background: radial-gradient(circle, rgba(59,130,196,0.28) 0%, transparent 70%);

  animation: orbFloat2 10s ease-in-out infinite;

}

.hero-premium__gradient-orb--3 {

  width: 300px; height: 300px;

  top: 40%; right: 35%;

  background: radial-gradient(circle, rgba(212,168,83,0.15) 0%, transparent 70%);

  animation: orbFloat3 12s ease-in-out infinite;

}



@keyframes orbFloat1 {

  0%, 100% { transform: translate(0, 0); }

  50%      { transform: translate(30px, 20px); }

}

@keyframes orbFloat2 {

  0%, 100% { transform: translate(0, 0); }

  50%      { transform: translate(-20px, -30px); }

}

@keyframes orbFloat3 {

  0%, 100% { transform: translate(0, 0); }

  50%      { transform: translate(15px, -15px); }

}



/* subtle grid */

.hero-premium__grid {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(12,35,64,0.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(12,35,64,0.035) 1px, transparent 1px);

  background-size: 52px 52px;

  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 80%);

  opacity: 0.55;

}



/* abstract SVG decorations */

.hero-premium__abstract {

  position: absolute;

  opacity: 0.10;

}

.hero-premium__abstract--nodes {

  top: 15%; right: 40%;

  width: 220px; height: 220px;

  animation: svgPulse 6s ease-in-out infinite;

}

.hero-premium__abstract--chart {

  bottom: 10%; left: 5%;

  width: 170px; height: 130px;

  animation: svgPulse 8s ease-in-out infinite 2s;

}

.hero-premium__abstract--dna {

  top: 60%; right: 2%;

  width: 140px; height: 200px;

  animation: svgPulse 7s ease-in-out infinite 1s;

}



@keyframes svgPulse {

  0%, 100% { opacity: 0.10; transform: scale(1); }

  50%      { opacity: 0.18; transform: scale(1.05); }

}



/* floating particles */

.hero-premium__particles {

  position: absolute;

  inset: 0;

  overflow: hidden;

}

.hero-premium__particle {

  position: absolute;

  width: 4px; height: 4px;

  border-radius: 50%;

  background: var(--hp-teal);

  opacity: 0.15;

  animation: particleDrift linear infinite;

}

.hero-premium__particle:nth-child(1) { top: 20%; left: 10%; animation-duration: 18s; animation-delay: 0s; }

.hero-premium__particle:nth-child(2) { top: 60%; left: 25%; animation-duration: 22s; animation-delay: 3s; width: 3px; height: 3px; }

.hero-premium__particle:nth-child(3) { top: 35%; left: 55%; animation-duration: 20s; animation-delay: 6s; width: 5px; height: 5px; opacity: 0.1; }

.hero-premium__particle:nth-child(4) { top: 75%; left: 70%; animation-duration: 16s; animation-delay: 2s; }

.hero-premium__particle:nth-child(5) { top: 15%; left: 80%; animation-duration: 24s; animation-delay: 5s; width: 3px; height: 3px; }

.hero-premium__particle:nth-child(6) { top: 50%; left: 45%; animation-duration: 19s; animation-delay: 8s; width: 6px; height: 6px; opacity: 0.08; }



@keyframes particleDrift {

  0%   { transform: translateY(0) translateX(0); opacity: 0; }

  10%  { opacity: 0.15; }

  90%  { opacity: 0.15; }

  100% { transform: translateY(-120px) translateX(40px); opacity: 0; }

}



/* ===================== CONTAINER / GRID ===================== */

.hero-premium .container {

  position: relative;

  z-index: 2;

}



.hero-premium__row {

  display: flex;

  align-items: center;

  gap: 3rem;

}



/* ===================== LEFT — CONTENT ===================== */

.hero-premium__content {

  flex: 0 0 50%;

  max-width: 50%;

  animation: heroFadeUp 0.7s ease backwards;

}



/* badge */

.hero-premium__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.45rem 0.95rem;

  margin-bottom: 1.25rem;

  font-family: 'Inter', sans-serif;

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  color: var(--hp-teal);

  background: rgba(26,107,122,0.08);

  border: 1px solid rgba(26,107,122,0.18);

  border-radius: 100px;

  animation: heroFadeUp 0.6s ease 0.1s backwards;

}

.hero-premium__badge i {

  font-size: 0.7rem;

}



/* title */

.hero-premium__title {

  font-family: 'Outfit', sans-serif;

  font-size: clamp(2.1rem, 4.5vw, 3.35rem);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;

  color: var(--hp-navy);

  margin-bottom: 1rem;

  animation: heroFadeUp 0.7s ease 0.15s backwards;

}

.hero-premium__title-accent {

  background: linear-gradient(135deg, var(--hp-teal) 0%, var(--hp-accent) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* subtitle */

.hero-premium__subtitle {

  font-family: 'Inter', sans-serif;

  font-size: clamp(1rem, 1.3vw, 1.125rem);

  line-height: 1.7;

  color: var(--hp-muted);

  max-width: 540px;

  margin-bottom: 1.75rem;

  animation: heroFadeUp 0.7s ease 0.25s backwards;

}



/* CTA group */

.hero-premium__cta-group {

  display: flex;

  flex-wrap: wrap;

  gap: 0.85rem;

  margin-bottom: 2rem;

  animation: heroFadeUp 0.7s ease 0.35s backwards;

}



.hero-premium__btn {

  font-family: 'Inter', sans-serif;

  font-size: 0.9375rem;

  font-weight: 600;

  padding: 0.85rem 1.65rem;

  border-radius: 12px;

  text-decoration: none;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  border: none;

  position: relative;

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;

}

.hero-premium__btn i {

  font-size: 0.85rem;

  transition: transform 0.3s ease;

}



/* primary CTA */

.hero-premium__btn--primary {

  color: #fff !important;

  background: linear-gradient(135deg, var(--hp-teal) 0%, var(--hp-navy) 100%);

  box-shadow: 0 6px 28px rgba(12,35,64,0.22);

}

.hero-premium__btn--primary::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, var(--hp-teal-light) 0%, var(--hp-accent) 100%);

  opacity: 0;

  transition: opacity 0.3s ease;

  border-radius: inherit;

}

.hero-premium__btn--primary:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 36px rgba(12,35,64,0.3);

  color: #fff !important;

}

.hero-premium__btn--primary:hover::before { opacity: 1; }

.hero-premium__btn--primary span,

.hero-premium__btn--primary i { position: relative; z-index: 1; }



/* secondary CTA — glass */

.hero-premium__btn--secondary {

  color: var(--hp-navy) !important;

  background: rgba(255,255,255,0.6);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1.5px solid rgba(12,35,64,0.15);

  box-shadow: 0 4px 16px rgba(12,35,64,0.06);

}

.hero-premium__btn--secondary:hover {

  transform: translateY(-3px);

  border-color: var(--hp-teal);

  color: var(--hp-teal) !important;

  background: rgba(255,255,255,0.9);

  box-shadow: 0 8px 28px rgba(26,107,122,0.12);

}

.hero-premium__btn--secondary:hover i {

  transform: translateX(3px);

}



/* trust mini-stats */

.hero-premium__trust-row {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem 2.25rem;

  animation: heroFadeUp 0.7s ease 0.5s backwards;

}

.hero-premium__trust-stat {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  font-family: 'Inter', sans-serif;

  font-size: 0.82rem;

  color: var(--hp-muted);

}

.hero-premium__trust-stat i {

  width: 32px; height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  background: linear-gradient(135deg, rgba(26,107,122,0.1) 0%, rgba(59,130,196,0.08) 100%);

  color: var(--hp-teal);

  font-size: 0.8rem;

}

.hero-premium__trust-stat strong {

  display: block;

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--hp-navy);

  line-height: 1.2;

}



/* ===================== RIGHT — VISUAL ===================== */

.hero-premium__visual {

  flex: 0 0 50%;

  max-width: 50%;

  position: relative;

  min-height: 520px;

  animation: heroFadeUp 0.7s ease 0.2s backwards;

}



/* main image composition */

.hero-premium__img-wrap {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero-premium__img-main {

  position: relative;

  width: 92%;

  max-width: 500px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow:

    0 20px 60px rgba(12,35,64,0.12),

    0 8px 24px rgba(12,35,64,0.08);

  z-index: 1;

}



.hero-premium__img-main img {

  width: 100%;

  height: 420px;

  object-fit: cover;

  display: block;

}



/* gradient overlay on image */

.hero-premium__img-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, transparent 40%, rgba(12,35,64,0.35) 100%);

  border-radius: 24px;

  z-index: 2;

}



/* decorative ring behind image */

.hero-premium__img-ring {

  position: absolute;

  width: 110%;

  height: 110%;

  top: -5%;

  left: -5%;

  border: 2px dashed rgba(26,107,122,0.15);

  border-radius: 28px;

  animation: ringRotate 30s linear infinite;

  z-index: 0;

}



@keyframes ringRotate {

  0%   { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* ===================== FLOATING TRUST CARDS ===================== */

.hero-premium__float {

  position: absolute;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.6rem 1rem;

  font-family: 'Inter', sans-serif;

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--hp-navy);

  background: rgba(255,255,255,0.92);

  border: 1px solid rgba(255,255,255,0.95);

  border-radius: 14px;

  box-shadow: 0 8px 32px rgba(12,35,64,0.1);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  transition: transform 0.35s ease, box-shadow 0.35s ease;

  animation: floatCardIn 0.8s ease backwards;

  white-space: nowrap;

}



.hero-premium__float:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 16px 44px rgba(12,35,64,0.14);

}



.hero-premium__float i {

  font-size: 0.9rem;

}



.hero-premium__float--scopus {

  top: 8%;

  right: 8%;

  animation-delay: 0.5s;

}

.hero-premium__float--scopus i { color: #2d8f9e; }



.hero-premium__float--review {

  top: 35%;

  left: -5%;

  animation-delay: 0.7s;

}

.hero-premium__float--review i { color: #3b82c4; }



.hero-premium__float--support {

  bottom: 22%;

  right: 2%;

  animation-delay: 0.9s;

}

.hero-premium__float--support i { color: #d4a853; }



.hero-premium__float--enhance {

  bottom: 5%;

  left: 5%;

  animation-delay: 1.1s;

}

.hero-premium__float--enhance i { color: #1a6b7a; }



/* perpetual micro-float */

.hero-premium__float--scopus  { animation: floatCardIn 0.8s ease 0.5s backwards, microFloat 4s ease-in-out 1.3s infinite; }

.hero-premium__float--review  { animation: floatCardIn 0.8s ease 0.7s backwards, microFloat 5s ease-in-out 1.5s infinite; }

.hero-premium__float--support { animation: floatCardIn 0.8s ease 0.9s backwards, microFloat 4.5s ease-in-out 1.7s infinite; }

.hero-premium__float--enhance { animation: floatCardIn 0.8s ease 1.1s backwards, microFloat 5.5s ease-in-out 1.9s infinite; }



@keyframes microFloat {

  0%, 100% { transform: translateY(0); }

  50%      { transform: translateY(-8px); }

}



@keyframes floatCardIn {

  from { opacity: 0; transform: translateY(16px) scale(0.95); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}



/* ===================== VISUAL — MANUSCRIPT MOCK CARD ===================== */

.hero-premium__manuscript {

  position: absolute;

  bottom: 10%;

  left: -8%;

  z-index: 4;

  background: rgba(255,255,255,0.95);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,0.9);

  border-radius: 16px;

  padding: 1rem 1.15rem;

  box-shadow: 0 12px 40px rgba(12,35,64,0.1);

  max-width: 220px;

  animation: floatCardIn 0.8s ease 1.3s backwards, microFloat 6s ease-in-out 2.1s infinite;

}



.hero-premium__manuscript-header {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin-bottom: 0.5rem;

}

.hero-premium__manuscript-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

}

.hero-premium__manuscript-dot--red    { background: #ef4444; }

.hero-premium__manuscript-dot--yellow { background: #f59e0b; }

.hero-premium__manuscript-dot--green  { background: #22c55e; }



.hero-premium__manuscript-lines {

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.hero-premium__manuscript-line {

  height: 4px;

  border-radius: 2px;

  background: rgba(12,35,64,0.08);

}

.hero-premium__manuscript-line:nth-child(1) { width: 100%; }

.hero-premium__manuscript-line:nth-child(2) { width: 85%; }

.hero-premium__manuscript-line:nth-child(3) { width: 70%; background: rgba(26,107,122,0.2); }

.hero-premium__manuscript-line:nth-child(4) { width: 90%; }



.hero-premium__manuscript-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.3rem;

  margin-top: 0.55rem;

  padding: 0.2rem 0.55rem;

  font-size: 0.62rem;

  font-weight: 700;

  color: #22c55e;

  background: rgba(34,197,94,0.1);

  border-radius: 6px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



/* ===================== VISUAL — PROGRESS CARD ===================== */

.hero-premium__progress-card {

  position: absolute;

  top: 5%;

  left: -3%;

  z-index: 4;

  background: rgba(255,255,255,0.95);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,0.9);

  border-radius: 16px;

  padding: 0.9rem 1.1rem;

  box-shadow: 0 12px 40px rgba(12,35,64,0.1);

  animation: floatCardIn 0.8s ease 1s backwards, microFloat 5s ease-in-out 1.8s infinite;

}



.hero-premium__progress-label {

  font-family: 'Inter', sans-serif;

  font-size: 0.65rem;

  font-weight: 600;

  color: var(--hp-muted);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 0.4rem;

}



.hero-premium__progress-bar-wrap {

  width: 140px;

  height: 6px;

  background: rgba(12,35,64,0.08);

  border-radius: 3px;

  overflow: hidden;

  margin-bottom: 0.3rem;

}

.hero-premium__progress-bar-fill {

  width: 0;

  height: 100%;

  background: linear-gradient(90deg, var(--hp-teal) 0%, var(--hp-accent) 100%);

  border-radius: 3px;

  animation: progressFill 2s ease 1.5s forwards;

}



@keyframes progressFill {

  to { width: 78%; }

}



.hero-premium__progress-text {

  font-family: 'Inter', sans-serif;

  font-size: 0.62rem;

  color: var(--hp-teal);

  font-weight: 600;

}



/* ===================== ANIMATIONS ===================== */

@keyframes heroFadeUp {

  from { opacity: 0; transform: translateY(28px); }

  to   { opacity: 1; transform: translateY(0); }

}



/* scroll-triggered reveal (JS adds .is-visible) */

.hero-premium__reveal {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}

.hero-premium__reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}



/* ===================== RESPONSIVE — TABLET ===================== */

@media (max-width: 991.98px) {

  .hero-premium {

    padding: 3.5rem 0 2rem;

    min-height: auto;

  }



  .hero-premium__row {

    flex-direction: column;

    gap: 2.5rem;

  }



  .hero-premium__content,

  .hero-premium__visual {

    flex: 0 0 100%;

    max-width: 100%;

  }



  .hero-premium__visual {

    min-height: 400px;

  }



  .hero-premium__img-main img {

    height: 350px;

  }



  .hero-premium__float--review {

    left: 2%;

  }

  .hero-premium__float--enhance {

    left: 10%;

  }



  .hero-premium__manuscript {

    left: 0;

  }



  .hero-premium__progress-card {

    left: 2%;

  }

}



/* ===================== RESPONSIVE — MOBILE ===================== */

@media (max-width: 767.98px) {

  .hero-premium {

    padding: 2.5rem 0 2rem;

    text-align: center;

    min-height: auto;

  }



  .hero-premium__content { text-align: center; }



  .hero-premium__badge {

    margin-left: auto;

    margin-right: auto;

  }



  .hero-premium__subtitle {

    margin-left: auto;

    margin-right: auto;

  }



  .hero-premium__cta-group {

    justify-content: center;

  }



  .hero-premium__btn {

    width: 100%;

    max-width: 320px;

  }



  .hero-premium__trust-row {

    justify-content: center;

    gap: 1rem 1.5rem;

  }



  .hero-premium__title {

    font-size: 1.85rem;

  }



  .hero-premium__visual {

    min-height: 340px;

  }



  .hero-premium__img-main img {

    height: 280px;

  }



  .hero-premium__float {

    font-size: 0.65rem;

    padding: 0.45rem 0.75rem;

  }



  .hero-premium__float--scopus  { top: 2%;  right: 2%; }

  .hero-premium__float--review  { top: 30%; left: 0; }

  .hero-premium__float--support { bottom: 18%; right: 0; }

  .hero-premium__float--enhance { bottom: 1%;  left: 2%; }



  .hero-premium__manuscript {

    display: none;

  }



  .hero-premium__progress-card {

    display: none;

  }



  .hero-premium__img-ring {

    display: none;

  }

}



/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {

  .hero-premium__content,

  .hero-premium__visual,

  .hero-premium__float,

  .hero-premium__manuscript,

  .hero-premium__progress-card {

    animation: none !important;

  }



  .hero-premium__gradient-orb,

  .hero-premium__particle,

  .hero-premium__img-ring,

  .hero-premium__progress-bar-fill {

    animation: none !important;

  }



  .hero-premium__btn,

  .hero-premium__float {

    transition: none;

  }



  .hero-premium__progress-bar-fill {

    width: 78%;

  }

}