/*
  CherryFrame — Landing page
  Visual/interaction style inspired by ofilmboss.com (structure + motion patterns),
  but recreated from scratch with a dark cherry red palette.

  Key behaviors implemented (see scripts.js for JS-driven motion):
  - Scroll reveal animations (IntersectionObserver toggles .is-in)
  - Counter + radial ring animation on enter
  - Marquee logo strip animation (CSS + reduced-motion support)
  - Drag carousel with momentum
  - Page transition overlay for anchor nav and modal "success" simulation
*/

:root{
  /* Dark cherry red palette */
  --bg0:#07060a;
  --bg1:#0c0a12;
  --panel:#0f0c16;
  --panel2:#121021;

  --text:#f5f3ff;
  --muted:rgba(245,243,255,.74);
  --faint:rgba(245,243,255,.55);

  --cherry:#8b001f;       /* primary */
  --cherry2:#c10033;      /* highlight */
  --glow:#ff2a5d;         /* neon accent */
  --ink:#22000a;

  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.14);
  --shadow: 0 24px 70px rgba(0,0,0,.55);

  --radius:20px;
  --radius2:28px;

  --container: 1120px;

  --ease: cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.3,1,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 85% 12%, rgba(255,42,93,.14), transparent 60%),
    radial-gradient(900px 700px at 10% 28%, rgba(193,0,51,.14), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

/* Ambient background */
.ambient{position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden;}
.blob{position:absolute; filter: blur(40px); opacity:.55; mix-blend-mode:screen; transform: translateZ(0);}
.blob--a{width:560px;height:560px; left:-140px; top:10%; background:radial-gradient(circle at 30% 30%, rgba(255,42,93,.85), rgba(139,0,31,.1) 65%, transparent 70%); animation: floatA 14s var(--ease) infinite alternate;}
.blob--b{width:680px;height:680px; right:-180px; top:-120px; background:radial-gradient(circle at 60% 40%, rgba(193,0,51,.9), rgba(255,42,93,.1) 62%, transparent 72%); animation: floatB 18s var(--ease) infinite alternate;}
.blob--c{width:520px;height:520px; right:6%; bottom:-180px; background:radial-gradient(circle at 55% 55%, rgba(139,0,31,.75), rgba(255,42,93,.08) 65%, transparent 74%); animation: floatC 16s var(--ease) infinite alternate;}

@keyframes floatA{from{transform: translate(-10px,0) scale(1);}to{transform: translate(40px,-30px) scale(1.06);}}
@keyframes floatB{from{transform: translate(0,0) scale(1);}to{transform: translate(-50px,40px) scale(1.05);}}
@keyframes floatC{from{transform: translate(0,0) scale(1);}to{transform: translate(25px,-40px) scale(1.08);}}

.noise{
  position:absolute; inset:-200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.55;
  mix-blend-mode: overlay;
  transform: rotate(10deg);
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(7,6,10,.72), rgba(7,6,10,.45));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
  gap:16px;
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand__mark{width:12px;height:12px;border-radius:6px;background: linear-gradient(135deg, var(--glow), var(--cherry)); box-shadow: 0 0 0 6px rgba(255,42,93,.12), 0 0 40px rgba(255,42,93,.18);}
.brand__text{font-weight:700; letter-spacing:-.02em;}

.pill{
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,.86);
  background: rgba(255,255,255,.06);
}
.pill--ghost{background:transparent;}

.nav{display:flex; gap:16px; align-items:center;}
.nav__link{
  text-decoration:none;
  font-size:14px;
  color:rgba(255,255,255,.76);
  position:relative;
  padding:8px 10px;
  border-radius:999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover{
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}

.header__cta{display:block;}

.burger{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
}
.burger span{display:block; width:18px; height:2px; background:rgba(255,255,255,.86); margin:0 auto; border-radius:2px;}
.burger span + span{margin-top:6px; opacity:.7;}

.mobile-menu{
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(7,6,10,.75);
  backdrop-filter: blur(10px);
}
.mobile-menu__inner{padding:16px 0 20px; display:grid; gap:10px;}
.mobile-menu__link{
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,42,93,.95), rgba(139,0,31,.9));
  color: #fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow: 0 18px 45px rgba(255,42,93,.18);
  transition: transform .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{transform: translateY(-1px) scale(1.01); filter: brightness(1.05); box-shadow: 0 28px 70px rgba(255,42,93,.22);}
.btn:active{transform: translateY(0) scale(.99);}
.btn__icon{transition: transform .18s var(--ease);} 
.btn:hover .btn__icon{transform: translateX(3px);} 

.btn--ghost{
  background: rgba(255,255,255,.05);
  box-shadow:none;
}
.btn--ghost:hover{background: rgba(255,255,255,.08);}

.btn--xl{padding: 16px 20px; font-size: 14px;}
.btn--small{padding: 10px 14px; font-size: 13px;}

.icon-btn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  cursor:pointer;
}

/* Typography */
.h1{font-size: clamp(40px, 4.2vw, 62px); line-height: 1.02; letter-spacing:-.04em; margin: 14px 0 0;}
.h2{font-size: clamp(28px, 2.4vw, 40px); line-height: 1.08; letter-spacing:-.03em; margin: 12px 0 0;}
.h3{font-size: 18px; margin:0; letter-spacing:-.02em;}

.lead{font-size: 16px; line-height:1.65; color:var(--muted); margin: 18px 0 0;}
.muted{color: var(--muted); line-height:1.65;}
.muted.small{font-size: 13px; color: rgba(245,243,255,.66);} 

.accent{background: linear-gradient(135deg, var(--glow), rgba(255,255,255,.92)); -webkit-background-clip:text; background-clip:text; color:transparent;}

.meta{display:inline-flex; align-items:center; gap:10px; font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.78);}
.meta__dot{width:10px;height:10px;border-radius:50%; background: radial-gradient(circle, var(--glow), var(--cherry)); box-shadow:0 0 0 8px rgba(255,42,93,.12);} 

/* Hero */
.hero{padding: 56px 0 0;}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items:center;}
.hero__copy{padding: 18px 0 34px;}
.hero__cta{margin-top: 22px; display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.hero__status{display:grid; gap:8px; padding-top: 2px;}
.status{font-size: 13px; color: rgba(255,255,255,.75);} 
.progress{height:2px; width: 240px; background: rgba(255,255,255,.10); border-radius: 999px; overflow:hidden;}
.progress__fill{display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--glow), rgba(255,255,255,.75)); border-radius:999px; transition: width 1.15s var(--ease2);} 

.hero__notes{margin-top: 14px;}

.hero__art{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.hero__art img{width:100%; height:auto; aspect-ratio: 4 / 3; object-fit: cover;}
.hero__art-overlay{
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 40% 30%, rgba(255,42,93,.16), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

/* Logo strip */
.logo-strip{margin-top: 26px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); overflow:hidden;}
.logo-strip__track{display:flex; gap:42px; padding: 14px 0; width:max-content; animation: marquee 22s linear infinite;}
.logo{font-size: 12px; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.55);} 
@keyframes marquee{from{transform: translateX(0);}to{transform: translateX(-50%);} }

/* Sections */
.section{padding: 84px 0;}
.section--split{padding: 92px 0;}

.kicker{display:flex; align-items:center; gap:10px; font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.82);} 
.kicker__icon{width:12px;height:12px;border-radius:4px;background: linear-gradient(135deg, var(--glow), var(--cherry)); box-shadow: 0 0 0 8px rgba(255,42,93,.10);} 
.tag{margin-top: 22px; display:inline-flex; padding: 10px 12px; border:1px dashed rgba(255,255,255,.14); border-radius:999px; color: rgba(255,255,255,.72); font-size: 12px; letter-spacing:.18em;} 

.split{display:grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items:flex-start;}

.card-stack{display:grid; gap:14px;}
.card{
  padding: 20px 20px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1000px 300px at 20% 10%, rgba(255,42,93,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  transform: translateZ(0);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .25s var(--ease);
}
.card:hover{border-color: rgba(255,255,255,.18); background:
  radial-gradient(1000px 300px at 20% 10%, rgba(255,42,93,.15), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.card__top{display:flex; gap:12px; align-items:center;}
.icon{width:36px;height:36px; display:grid; place-items:center; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);}
.card p{margin: 10px 0 0; color: rgba(245,243,255,.72); line-height:1.6;}

.card--metric{padding-bottom: 14px;}
.metric{display:flex; align-items:center; gap:14px; margin-top: 14px;}
.ring{width:120px;height:120px;}
.ring__bg{fill:none; stroke: rgba(255,255,255,.12); stroke-width:10;}
.ring__fg{fill:none; stroke: url(#none); stroke: rgba(255,42,93,.95); stroke-width:10; stroke-linecap:round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.2s var(--ease2);} 
.metric__value{display:grid; gap:6px;}
.metric__num{font-size: 34px; font-weight: 800; letter-spacing:-.03em;}
.metric__label{font-size: 12px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.62);} 

/* Statement section with parallax bg */
.statement{position:relative; padding: 104px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); overflow:hidden;}
.statement__inner{position:relative; z-index:2;}
.statement__kicker{margin:0; text-transform:uppercase; letter-spacing:.22em; color: rgba(255,255,255,.68); font-size: 12px;}
.statement__title{font-size: clamp(34px, 3.2vw, 54px); letter-spacing:-.04em; margin: 12px 0 0; line-height:1.03;}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top: 22px;}
.chip{padding: 10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(255,255,255,.78); font-size: 13px;} 

.statement__bg{position:absolute; inset:-40px; z-index:1; opacity:.66;}
.statement__bg img{width:100%; height:100%; object-fit:cover; transform: translateY(var(--parallax, 0px)) scale(1.05); filter:saturate(1.05) contrast(1.05);} 

/* Feedbacks */
.section__head{max-width: 760px;}

.carousel{position:relative; margin-top: 26px;}
.carousel__track{
  display:flex; gap:14px;
  overflow:hidden;
  scroll-behavior:smooth;
  user-select:none;
  cursor: grab;
  padding: 6px 2px 10px;
}
.carousel__track.is-dragging{cursor: grabbing;}

.quote{
  min-width: min(360px, 86vw);
  max-width: 420px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 240px at 16% 0%, rgba(255,42,93,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 18px;
}
.quote__avatar{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.10);}
.quote__text{margin: 12px 0 0; line-height: 1.6; color: rgba(245,243,255,.78);} 
.quote__who{margin: 12px 0 0; font-size: 13px; color: rgba(245,243,255,.60);} 
.carousel__hint{position:absolute; right:0; top:-26px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.56);} 

/* Timeline + pricing */
.section--grid{padding: 92px 0;}
.grid2{display:grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items:start;}
.timeline{list-style:none; margin: 20px 0 0; padding:0; display:grid; gap:12px;}
.timeline__item{display:grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 14px; border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.timeline__time{font-weight:800; letter-spacing:-.02em; color: rgba(255,255,255,.86);} 
.timeline__content p{margin:8px 0 0; color: rgba(245,243,255,.70);} 

.pricing{
  position:sticky; top: 92px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 240px at 18% 8%, rgba(255,42,93,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 20px;
  box-shadow: var(--shadow);
}
.pricing__label{margin:0; letter-spacing:.18em; text-transform:uppercase; font-size:12px; color: rgba(255,255,255,.76);} 
.pricing__price{margin: 10px 0 0; font-size: 38px; letter-spacing:-.03em;}
.pricing__list{margin: 16px 0 18px; padding-left: 18px; color: rgba(245,243,255,.75);} 
.pricing__list li{margin: 8px 0;}

/* About */
.about{display:grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items:start;}
.perks{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;}
.perk{padding: 16px; border-radius: var(--radius); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);} 
.perk p{margin: 10px 0 0; color: rgba(245,243,255,.72);} 

.about__panel{padding: 18px; border-radius: var(--radius2); border:1px solid rgba(255,255,255,.12); background:
  radial-gradient(700px 240px at 20% 0%, rgba(255,42,93,.14), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.about__panel-top{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 8px;}
.steps{margin: 12px 0 0; padding-left: 18px; color: rgba(245,243,255,.74);} 
.steps li{margin: 8px 0;}

/* Accordion */
.accordion{margin-top: 22px; display:grid; gap: 12px;}
.accordion__item{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.accordion__item summary{
  padding: 16px 16px;
  cursor:pointer;
  list-style:none;
  font-weight: 600;
  letter-spacing:-.01em;
}
.accordion__item summary::-webkit-details-marker{display:none;}
.accordion__content{padding: 0 16px 16px; color: rgba(245,243,255,.72);}
.accordion__item[open]{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04);} 

/* Final CTA */
.final{padding: 96px 0 110px; border-top:1px solid rgba(255,255,255,.06);} 
.final__inner{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 320px at 16% 12%, rgba(255,42,93,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 28px;
  box-shadow: var(--shadow);
}
.final__actions{display:flex; gap: 12px; margin-top: 18px; flex-wrap:wrap;}

/* Footer */
.footer{padding: 28px 0 40px; color: rgba(245,243,255,.62);} 
.footer__inner{display:flex; justify-content:space-between; align-items:center; gap: 16px; border-top:1px solid rgba(255,255,255,.06); padding-top: 18px;}
.footer__links{display:flex; gap: 14px;}
.footer__links a{text-decoration:none; color: rgba(245,243,255,.62);} 
.footer__links a:hover{color: rgba(245,243,255,.86);} 

/* Modal */
.modal{width:min(720px, calc(100% - 20px)); border:none; border-radius: 22px; padding: 0; background: rgba(15,12,22,.96); color: var(--text); box-shadow: 0 60px 120px rgba(0,0,0,.7);}
.modal::backdrop{background: rgba(0,0,0,.65); backdrop-filter: blur(2px);} 
.modal__header{display:flex; align-items:center; justify-content:space-between; padding: 16px 16px; border-bottom:1px solid rgba(255,255,255,.08);} 
.modal__body{padding: 16px;}
.form{display:grid; gap: 12px; margin-top: 12px;}
.form label{display:grid; gap: 6px;}
.form input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  outline:none;
}
.form input:focus{border-color: rgba(255,42,93,.55); box-shadow: 0 0 0 4px rgba(255,42,93,.12);} 

/* Page transition overlay */
.page-transition{
  position:fixed; inset:0; z-index:999;
  background: radial-gradient(900px 420px at 30% 20%, rgba(255,42,93,.22), transparent 60%),
              linear-gradient(180deg, rgba(7,6,10,0), rgba(7,6,10,.96));
  opacity:0;
  pointer-events:none;
  transition: opacity .42s var(--ease);
}
.page-transition.is-on{opacity:1; pointer-events:auto;}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform: translateY(18px);
  filter: blur(3px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.reveal.is-in{opacity:1; transform: translateY(0); filter: blur(0);} 

/* Tilt-ready elements: we keep transform on a child layer. */
[data-tilt]{transform-style: preserve-3d; will-change: transform;}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr;}
  .hero__art{order:-1;}
  .split{grid-template-columns: 1fr;}
  .grid2{grid-template-columns: 1fr;}
  .pricing{position:relative; top:auto;}
  .about{grid-template-columns: 1fr;}
  .perks{grid-template-columns: 1fr;}
}

@media (max-width: 780px){
  .nav, .header__cta{display:none;}
  .burger{display:inline-grid; place-items:center;}
  .hero{padding-top: 36px;}
  .section{padding: 70px 0;}
  .logo-strip__track{gap: 26px;}
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .logo-strip__track{animation:none;}
  .reveal{transition:none; opacity:1; transform:none; filter:none;}
  .btn, .card{transition:none;}
  .progress__fill{transition:none;}
}