/* ================================================================
   CLOVIQ — PR Package Landing Page
   Palette matches the brand mark: violet-to-cyan gradient, near-black
   ink, clean white surfaces. Plus Jakarta Sans headings / Inter body.
   ================================================================ */

@property --angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

:root{
  --ink:#0b0e14;
  --ink-soft:#565b66;
  --ink-mute:#8a8f9a;
  --bg:#ffffff;
  --surface:#f6f7fb;
  --surface-2:#eef0f7;
  --border:rgba(11,14,20,.09);
  --purple:#7c3aed;
  --purple-deep:#5b21b6;
  --blue:#2563eb;
  --cyan:#06b6d4;
  --grad:linear-gradient(120deg,var(--purple) 0%,var(--blue) 55%,var(--cyan) 100%);
  --grad-conic:conic-gradient(from var(--angle), var(--purple), var(--blue), var(--cyan), var(--purple));
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;border-radius:8px;z-index:999;}
.skip-link:focus{left:16px;top:16px;}

h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);}
h3{font-size:1.05rem;font-weight:700;}

.eyebrow{
  display:inline-block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--purple-deep);
  margin-bottom:14px;
}
.section-sub{color:var(--ink-soft);font-size:1.02rem;margin-top:10px;}

.grad-text{
  background:var(--grad);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}

@keyframes gradShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 28px;
  border-radius:100px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  border:1.5px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.btn::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .6s ease;z-index:1;pointer-events:none;
}
.btn:hover::after{left:130%;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px -10px rgba(91,33,182,.45);}
.btn-primary:hover{box-shadow:0 16px 34px -10px rgba(91,33,182,.6);}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--border);}
.btn-outline:hover{border-color:var(--purple);color:var(--purple-deep);box-shadow:0 10px 24px -14px rgba(91,33,182,.35);}
.btn-lg{padding:17px 32px;font-size:15.5px;}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease, padding .3s ease, box-shadow .3s ease;}
.nav.scrolled{padding:12px 0;border-bottom-color:var(--border);box-shadow:0 8px 24px -18px rgba(11,14,20,.25);}
.nav-inner{max-width:1160px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;}
.brand-logo{height:104px;width:auto;transition:height .3s ease;}
.nav.scrolled .brand-logo{height:60px;}
.nav-link{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:5px;padding:8px 4px;position:relative;}
.nav-link-arrow{transition:transform .3s ease;color:var(--purple);}
.nav-link:hover .nav-link-arrow{transform:translate(2px,-2px);}

/* ---------- Hero ---------- */
.hero{padding:250px 32px 90px;text-align:center;position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:640px;height:420px;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.07), transparent 70%);
  pointer-events:none;z-index:0;
}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.eyebrow-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--purple-deep);background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.16);
  padding:8px 16px 8px 12px;border-radius:100px;margin-bottom:26px;
}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--grad);animation:pulseDot 2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.hero h1{font-size:clamp(2.3rem,4.8vw,3.8rem);margin-bottom:22px;}
.hero-sub{font-size:1.12rem;color:var(--ink-soft);max-width:580px;margin:0 auto;}

.scroll-hint{position:relative;z-index:2;display:flex;justify-content:center;margin-top:58px;}
.scroll-hint span{display:block;width:22px;height:34px;border:1.5px solid var(--border);border-radius:100px;position:relative;}
.scroll-hint span::before{
  content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;border-radius:100px;background:var(--grad);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{0%{opacity:1;top:7px;}70%{opacity:0;top:19px;}100%{opacity:0;top:7px;}}

/* ---------- Why block ---------- */
.why-block{padding:8px 32px 64px;max-width:1160px;margin:0 auto;position:relative;z-index:1;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.why-item{background:var(--surface);border-radius:var(--radius-md);padding:28px 26px;transition:transform .35s ease, box-shadow .35s ease, background .35s ease;}
.why-item:hover{transform:translateY(-6px);background:#fff;box-shadow:0 20px 40px -24px rgba(11,14,20,.25);}
.why-icon{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--grad);color:#fff;font-size:15px;margin-bottom:16px;
  transition:transform .35s ease;
}
.why-item:hover .why-icon{transform:rotate(-8deg) scale(1.08);}
.why-item h3{margin-bottom:8px;}
.why-item p{color:var(--ink-soft);font-size:.92rem;}

/* angled entrances - override reveal-up's initial/target transform per direction */
.fly-left{transform:translate(-70px,10px) rotate(-6deg);}
.fly-up{transform:translateY(60px) scale(.92);transition-delay:.1s;}
.fly-right{transform:translate(70px,10px) rotate(6deg);transition-delay:.2s;}
.fly-left.in, .fly-up.in, .fly-right.in{transform:translate(0,0) rotate(0) scale(1);}

/* ---------- Breaking news ticker ---------- */
.marquee-band{background:var(--ink);padding:15px 0;overflow:hidden;}
.marquee-track{display:flex;align-items:center;gap:16px;width:max-content;animation:marquee 22s linear infinite;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;}
.marquee-track .bolt{color:var(--cyan);font-size:15px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Free article banner ---------- */
.free-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:fit-content;margin:0 auto 36px;
  background:linear-gradient(180deg,#fff,var(--surface));
  border:1.5px solid transparent;
  background-image:linear-gradient(180deg,#fff,var(--surface)), var(--grad);
  background-origin:border-box;background-clip:padding-box, border-box;
  border-radius:100px;padding:12px 22px 12px 16px;
  box-shadow:0 14px 34px -20px rgba(91,33,182,.4);
  animation:bannerPulse 3s ease-in-out infinite;
}
.free-banner-icon{
  width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;
}
.free-banner-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:600;color:var(--ink);}
.free-banner-text strong{color:var(--purple-deep);}
@keyframes bannerPulse{0%,100%{box-shadow:0 14px 34px -20px rgba(91,33,182,.4);}50%{box-shadow:0 14px 34px -14px rgba(91,33,182,.6);}}

/* ---------- Packages ---------- */
.packages-block{padding:80px 32px 104px;max-width:1160px;margin:0 auto;}
.section-head{text-align:center;margin-bottom:48px;}
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;}
.pkg-card{
  position:relative;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:30px 24px 26px;display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
  transform-style:preserve-3d;
}
.pkg-card:not(.pkg-card-featured):hover{
  transform:translateY(-8px);
  border-color:rgba(124,58,237,.35);
  box-shadow:0 28px 50px -28px rgba(11,14,20,.3);
}
.pkg-card::before{
  content:'';position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 4px 4px;
  background:var(--grad);opacity:0;transition:opacity .35s ease;
}
.pkg-card:hover::before{opacity:1;}

.pkg-card-featured{padding:2px;background:var(--grad-conic);animation:spinBorder 7s linear infinite;box-shadow:0 30px 60px -26px rgba(91,33,182,.4);}
.pkg-card-featured:hover{transform:translateY(-8px);}
@keyframes spinBorder{to{--angle:360deg;}}
.pkg-card-inner{background:#fff;border-radius:calc(var(--radius-lg) - 2px);padding:30px 24px 26px;display:flex;flex-direction:column;height:100%;}

.pkg-badge{
  position:absolute;top:-13px;left:22px;
  background:var(--grad);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:100px;
  box-shadow:0 8px 18px -8px rgba(91,33,182,.5);
}

/* package name badge, color-coded per tier */
.pkg-name{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.88rem;
  padding:7px 14px;border-radius:100px;border:1px solid transparent;margin-bottom:20px;
}
.pkg-glyph{font-style:normal;font-size:11px;}
.tier-starter{background:#f2ebfd;color:#5b21b6;border-color:#e2d3fb;}
.tier-momentum{background:#e6f0ff;color:#1e4fd6;border-color:#cfe0ff;}
.tier-authority{background:#e0f7fb;color:#0e7490;border-color:#c7f0f7;}
.tier-ultimate{background:var(--grad);color:#fff;}

/* platform-count stat box */
.pkg-stat-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 18px;margin-bottom:14px;
}
.pkg-stat-box-featured{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.16);}
.pkg-stat-label{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px;}
.pkg-stat-row{display:flex;align-items:baseline;gap:8px;}
.pkg-count-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.4rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.pkg-count-label{font-size:.83rem;color:var(--ink-soft);}

/* price box */
.pkg-price-box{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:6px;
}
.pkg-price-box-featured{border-color:rgba(124,58,237,.2);background:linear-gradient(180deg,rgba(124,58,237,.04),transparent);}
.pkg-price-row{display:flex;align-items:center;gap:10px;}
.pkg-price-original{font-size:.9rem;color:var(--ink-mute);text-decoration:line-through;}
.pkg-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.9rem;color:var(--ink);}
.pkg-price-suffix{font-size:1rem;font-weight:600;color:var(--ink-soft);}
.pkg-save{display:inline-block;font-size:.72rem;font-weight:700;color:#0f6e56;background:#e1f5ee;padding:2px 9px;border-radius:100px;}

.pkg-platforms{border-top:1px solid var(--border);padding-top:16px;margin-bottom:6px;}
.pkg-platforms li{font-size:.88rem;color:var(--ink-soft);padding:4px 0;position:relative;padding-left:16px;}
.pkg-platforms li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--purple);}
.pkg-platforms-preview{margin-bottom:2px;}

.pkg-details{margin:6px 0 18px;}
.pkg-details summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--purple-deep);
  list-style:none;padding:4px 0;
}
.pkg-details summary::-webkit-details-marker{display:none;}
.pkg-details summary::after{content:' →';}
.pkg-details[open] summary::after{content:' ↑';}
.pkg-platforms-full{margin-top:10px;max-height:220px;overflow-y:auto;padding-right:4px;}
.pkg-platforms-full li{font-size:.85rem;color:var(--ink-soft);padding:3px 0;position:relative;padding-left:14px;}
.pkg-platforms-full li::before{content:'';position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:var(--ink-mute);}

.pkg-total-line{
  font-size:.86rem;color:var(--ink-soft);margin-bottom:16px;padding-top:14px;
  border-top:1px solid var(--border);
}
.pkg-total-line strong{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--ink);font-size:1rem;}

.pkg-cta{margin-top:auto;justify-content:center;width:100%;}

/* ---------- Package detail page ---------- */
.detail-hero{padding:190px 32px 70px;text-align:center;position:relative;overflow:hidden;}
.detail-hero::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:560px;height:360px;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.07), transparent 70%);
  pointer-events:none;z-index:0;
}
.detail-hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.detail-hero h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:16px;}
.detail-sub{font-size:1.05rem;color:var(--ink-soft);max-width:520px;margin:0 auto 34px;}

.detail-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:34px;}
.detail-stat{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px 30px 20px;min-width:170px;box-shadow:0 20px 40px -28px rgba(11,14,20,.35);
  overflow:hidden;
}
.detail-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);}
.detail-stat-num{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.1rem;color:var(--ink);}
.detail-stat-original{font-size:.85rem;color:var(--ink-mute);text-decoration:line-through;font-weight:600;margin-right:6px;}
.detail-stat-label{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--purple-deep);background:rgba(124,58,237,.08);padding:4px 10px;border-radius:100px;margin-top:10px;
}
.detail-stat-save::before{background:linear-gradient(120deg,#0f6e56,#3a9271);}
.detail-stat-save .detail-stat-num{color:#0f6e56;}
.detail-stat-save .detail-stat-label{color:#0f6e56;background:rgba(15,110,86,.08);}

.detail-platforms{padding:20px 32px 90px;max-width:680px;margin:0 auto;}
.platform-grid-full{display:flex;flex-direction:column;gap:10px;}
.platform-grid-full li{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.94rem;font-weight:600;color:var(--ink);
  position:relative;padding:14px 18px 14px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.platform-grid-full li::before{
  content:'✓';position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#fff;background:var(--grad);
  width:20px;height:20px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;
}
.platform-grid-full li a{display:flex;align-items:center;gap:8px;color:var(--purple-deep);transition:color .25s ease;}
.platform-grid-full li a:hover{color:var(--purple);}
.platform-sample{
  font-size:.76rem;font-weight:700;color:var(--purple-deep);background:rgba(124,58,237,.08);
  padding:4px 10px;border-radius:100px;white-space:nowrap;flex:none;
}

/* ---------- How it works (dark process timeline) ---------- */
.process-dark{
  background:var(--ink);color:#fff;padding:100px 32px 110px;position:relative;overflow:hidden;
}
.process-glow-a{position:absolute;top:-160px;left:-100px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 70%);filter:blur(60px);pointer-events:none;}
.process-glow-b{position:absolute;bottom:-160px;right:-100px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.28),transparent 70%);filter:blur(60px);pointer-events:none;}
.process-dark .section-head{position:relative;z-index:1;}
.process-dark h2{color:#fff;}
.process-sub{color:rgba(255,255,255,.6) !important;}

.process-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:#123a8a;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16px;letter-spacing:.01em;
  padding:14px 30px;border-radius:100px;margin-bottom:22px;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.5);
}
.process-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);}

.process-timeline{position:relative;z-index:1;max-width:620px;margin:0 auto;}
.process-step{display:flex;gap:26px;position:relative;padding-bottom:52px;}
.process-step:last-child{padding-bottom:0;}
.process-step::before{
  content:'';position:absolute;left:25px;top:56px;width:2px;height:calc(100% - 40px);
  background:linear-gradient(var(--purple),var(--cyan));
  transform:scaleY(0);transform-origin:top;transition:transform .9s ease .25s;
}
.process-step:last-child::before{content:none;}
.process-step.in::before{transform:scaleY(1);}

.process-node{
  width:52px;height:52px;border-radius:50%;flex:none;position:relative;z-index:2;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.2rem;
  box-shadow:0 0 0 6px rgba(124,58,237,.14);
}
.process-node-final{box-shadow:0 0 0 6px rgba(6,182,212,.18);}
.process-content{padding-top:8px;}
.process-content h3{color:#fff;margin-bottom:6px;}
.process-content p{color:rgba(255,255,255,.62);font-size:.94rem;max-width:420px;}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--surface);padding:96px 32px;text-align:center;position:relative;overflow:hidden;}
.final-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:420px;height:300px;background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.1), transparent 70%);pointer-events:none;z-index:0;}
.final-cta-inner{position:relative;z-index:1;max-width:520px;margin:0 auto;}
.final-cta h2{margin-bottom:14px;}
.final-cta p{color:var(--ink-soft);margin-bottom:30px;}

/* ---------- Footer ---------- */
.footer{padding:52px 32px 26px;text-align:center;border-top:1px solid var(--border);}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px;}
.footer-logo{height:30px;width:auto;}
.footer-inner p{color:var(--ink-soft);font-size:.9rem;}
.footer-legal{font-size:.8rem;color:var(--ink-mute);}

/* ---------- Reveal animation ---------- */
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-up.in{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal-up, .fly-left, .fly-up, .fly-right{transition:none;opacity:1;transform:none;}
  .grad-text, .eyebrow-dot, .scroll-hint span::before, .marquee-track, .pkg-card-featured, .free-banner{animation:none;}
  .process-step::before{transition:none;transform:scaleY(1);}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pkg-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .hero{padding:190px 22px 64px;}
  .why-block{padding:0 22px 48px;}
  .packages-block{padding:60px 22px 76px;}
  .pkg-grid{grid-template-columns:1fr;}
  .nav-inner{padding:0 22px;}
  .final-cta{padding:70px 22px;}
  .brand-logo{height:76px;}
  .nav.scrolled .brand-logo{height:48px;}
  .detail-hero{padding:160px 22px 56px;}
  .detail-platforms{padding:10px 22px 70px;}
  .process-dark{padding:70px 22px 80px;}
  .process-badge{font-size:13.5px;padding:11px 20px;}
  .process-step{gap:18px;padding-bottom:40px;}
  .process-node{width:44px;height:44px;font-size:1.05rem;}
  .process-step::before{left:21px;}
  .free-banner{padding:10px 16px 10px 12px;}
  .free-banner-text{font-size:12.5px;}
}