/* ==========================================================================
   PRCONNECT — DIGITAL MARKETING  |  Design System
   Glassmorphism · Cinematic scroll motion · Palette lifted from brand poster
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  /* ---- palette (sampled from brand poster) ---- */
  --ink:            #0B1E1B;   /* near-black teal — headings */
  --ink-soft:       #21403C;
  --mint:           #6BBE9C;   /* cursive / accent */
  --mint-light:     #A9DFC6;
  --sage:           #8FC0B5;   /* checks, muted icons */
  --green:          #2F7960;   /* CTA / buttons */
  --green-deep:     #1F5B48;
  --fog:            #E9EFEA;   /* gradient top */
  --mist:           #C7DAD3;   /* gradient bottom */
  --glass:          rgba(255,255,255,0.46);
  --glass-strong:   rgba(255,255,255,0.68);
  --glass-border:   rgba(255,255,255,0.55);
  --glass-shadow:   0 8px 32px rgba(15,45,40,0.12);

  --font-display: 'Fraunces', serif;
  --font-body:    'Manrope', sans-serif;
  --font-script:  'Caveat', cursive;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --ease-cinematic: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, #ffffff 0%, var(--fog) 38%, var(--mist) 100%);
  background-attachment: fixed;
  overflow-x:hidden;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--ink); line-height:1.08; letter-spacing:-0.01em; }
.script{ font-family:var(--font-script); color:var(--mint); font-weight:700; }
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ---------------- Ambient background blobs (cinematic depth) ---------------- */
.ambient{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.ambient span{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.55;
  animation: drift 22s ease-in-out infinite alternate;
}
.ambient span:nth-child(1){ width:520px; height:520px; background:var(--mint-light); top:-160px; left:-120px; }
.ambient span:nth-child(2){ width:460px; height:460px; background:var(--sage); bottom:-180px; right:-100px; animation-delay:-6s; }
.ambient span:nth-child(3){ width:340px; height:340px; background:#ffffff; top:40%; left:60%; animation-delay:-12s; }
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(40px,-30px) scale(1.12); }
}

/* ---------------- Glassmorphism primitives ---------------- */
.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.glass-strong{
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--glass-shadow);
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:999px; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background: linear-gradient(120deg, var(--mint-light), var(--sage));
  color: var(--green-deep);
  box-shadow: 0 6px 18px rgba(47,121,96,.18);
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:999px; font-weight:700; font-size:.95rem;
  cursor:pointer; border:none; transition: transform .35s var(--ease-cinematic), box-shadow .35s var(--ease-cinematic);
}
.btn-primary{
  background: linear-gradient(120deg, var(--green), var(--green-deep));
  color:#fff; box-shadow: 0 10px 30px rgba(31,91,72,.35);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(31,91,72,.45); }
.btn-primary .arrow{
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.btn-ghost{
  background: var(--glass); border:1px solid var(--glass-border); color:var(--ink);
}
.btn-ghost:hover{ background:var(--glass-strong); }

/* ---------------- Nav ---------------- */
.navbar{
  position:sticky; top:0; z-index:100; padding:16px 0;
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; border-radius:999px;
}
.navbar-inner .logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; }
.navbar-inner .logo small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.14em; color:var(--green-deep); text-transform:uppercase; }
.nav-links{ display:flex; gap:30px; font-weight:600; font-size:.92rem; }
.nav-links a{ position:relative; opacity:.82; transition:opacity .25s; }
.nav-links a:hover{ opacity:1; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--green);
  transition:width .3s var(--ease-cinematic);
}
.nav-links a:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--glass-border);
  background:var(--glass); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:transform .3s;
}
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.icon-btn{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex-shrink:0;
}
.lang-wrap{ position:relative; }
.lang-menu{
  position:absolute; top:52px; right:0; width:220px; max-height:320px; overflow-y:auto;
  padding:10px; display:none; flex-direction:column; gap:2px; z-index:200;
}
.lang-menu.open{ display:flex; }
.lang-menu button{
  text-align:left; background:none; border:none; padding:9px 12px; border-radius:10px; cursor:pointer;
  font-family:var(--font-body); font-size:.85rem; color:var(--ink);
}
.lang-menu button:hover{ background:rgba(255,255,255,.6); }

@media (max-width: 980px){
  .nav-links{
    position:fixed; top:86px; left:16px; right:16px; z-index:150;
    flex-direction:column; gap:4px; padding:16px; border-radius:20px;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%);
    box-shadow:var(--glass-shadow);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .4s var(--ease-cinematic), opacity .3s;
  }
  .nav-links.open{ max-height:70vh; opacity:1; pointer-events:auto; padding:16px; }
  .nav-links a{ padding:12px 10px; border-radius:10px; }
  .nav-links a:hover{ background:rgba(255,255,255,.5); }
  .nav-toggle{ display:flex; }
  #desktopCta{ display:none; }
  #mobileCta{ display:inline-flex !important; justify-content:center; }
}

/* ---------------- Big/Small trend typography ---------------- */
.trend-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25em; }
.trend-big{ font-size:clamp(2.6rem, 7vw, 5.2rem); }
.trend-small{ font-size:clamp(1.1rem, 2.2vw, 1.6rem); font-weight:500; color:var(--ink-soft); }

/* ---------------- Scroll reveal ---------------- */
[data-reveal]{
  opacity:0; transform: translateY(40px);
  transition: opacity 1s var(--ease-cinematic), transform 1s var(--ease-cinematic);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform: translateY(20px) scale(.92); }
[data-reveal="scale"].in{ transform: translateY(0) scale(1); }
[data-reveal="left"]{ transform: translateX(-60px); }
[data-reveal="left"].in{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(60px); }
[data-reveal="right"].in{ transform: translateX(0); }
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }
[data-reveal-delay="3"]{ transition-delay:.36s; }
[data-reveal-delay="4"]{ transition-delay:.48s; }

/* Parallax float */
.floaty{ animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

/* Counter ticker */
.ticker-num{ font-family:var(--font-display); font-weight:600; }

/* Marquee */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:60px; animation: marquee 26s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Section spacing */
section{ padding:96px 0; position:relative; }
.section-head{ max-width:680px; margin-bottom:52px; }
.eyebrow{ font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-bottom:14px; display:inline-block; }

/* Cards */
.grid{ display:grid; gap:22px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{
  padding:30px; transition: transform .5s var(--ease-cinematic), box-shadow .5s var(--ease-cinematic);
}
.card:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(15,45,40,.18); }
.icon-badge{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--mint-light), var(--sage)); color:var(--green-deep);
  font-size:1.4rem; margin-bottom:18px;
}

/* Footer */
footer{
  margin-top:60px; padding:70px 0 30px; color:var(--fog);
  background: linear-gradient(160deg, var(--ink) 0%, #14312c 100%);
}
footer a{ opacity:.78; } footer a:hover{ opacity:1; }
footer h4{ color:#fff; margin-bottom:16px; font-size:1rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:50px; padding-top:24px; font-size:.82rem; opacity:.65; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Responsive */
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
  .container{ padding:0 16px; }
  .navbar{ padding:12px 0; }
  .navbar-inner{ padding:10px 14px; }
  .btn{ padding:13px 22px; font-size:.88rem; }
  h1{ word-break:break-word; }
  .trend-big{ font-size:clamp(2.1rem, 9vw, 3.2rem); }
}
@media (max-width: 400px){
  .navbar-inner .logo span > small{ display:none; }
}

/* Generic responsive helpers used across pages */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 900px){
  table.admin-table{ min-width:640px; }
}
img, svg{ max-width:100%; height:auto; }
* { min-width:0; }
a, p, li, td, th { overflow-wrap:anywhere; word-break:break-word; }
html, body { max-width:100%; overflow-x:hidden; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}