/* Level Up Performance — Website v2 (elite evolution) */
@import url("./tokens.css");
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:5.5rem}
body{margin:0;min-width:320px;font-family:var(--font-brand-secondary);color:var(--text);line-height:1.55;background:radial-gradient(circle at 12% -4%,rgba(47,228,120,0.13),transparent 32%),radial-gradient(circle at 88% 12%,rgba(47,228,120,0.07),transparent 26%),linear-gradient(180deg,#050c08 0%,#08120d 30%,#0a140f 60%,#070f0b 100%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.container{width:min(calc(100% - 3rem),1240px);margin:0 auto}
.section{position:relative;padding:clamp(4.5rem,8vw,7.5rem) 0}
.section--tight{padding:clamp(2rem,4vw,3.5rem) 0}
/* Type */
.display{font-family:var(--font-brand-secondary);font-weight:800;text-transform:uppercase;letter-spacing:-0.015em;line-height:0.98;margin:0;color:var(--text)}
h1.display{font-size:clamp(2.5rem,5vw,4.6rem)}
h2.display{font-size:clamp(2.1rem,4.4vw,3.9rem)}
h3.display{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.05}
.kicker{display:flex;align-items:center;gap:0.75rem;margin:0 0 1.25rem;font-size:0.78rem;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:2.25rem;height:1px;background:var(--accent)}
.kicker--num::before{display:none}
.kicker .num{color:var(--text-muted);letter-spacing:0.1em}
.lede{margin:1.25rem 0 0;max-width:40rem;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--text-muted);text-wrap:pretty}
.emph{margin:1rem 0 0;font-weight:600;color:var(--text);max-width:36rem}
/* Header */
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(22px);background:rgba(4,10,7,0.78);border-bottom:1px solid rgba(47,228,120,0.1)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.75rem}
.site-header__logo{width:122px;height:auto}
.site-nav{display:flex;align-items:center;gap:1.6rem;font-size:0.92rem;color:var(--text-muted)}
.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav a:hover{color:var(--text)}
/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;min-height:3.3rem;padding:0.85rem 1.7rem;border-radius:999px;border:1px solid transparent;font-family:var(--font-brand-secondary);font-weight:700;font-size:0.98rem;cursor:pointer;transition:transform var(--transition),border-color var(--transition),background-color var(--transition),color var(--transition),box-shadow var(--transition)}
.button:hover{transform:translateY(-2px);color:inherit}
.button--primary{color:var(--text-on-accent);background:var(--gradient-cta);box-shadow:var(--shadow-button)}
.button--primary:hover{box-shadow:var(--shadow-button-hover);color:var(--text-on-accent)}
.button--ghost{color:var(--text);background:rgba(255,255,255,0.02);border-color:rgba(47,228,120,0.3)}
.button--ghost:hover{background:rgba(47,228,120,0.1);color:var(--text)}
.button--small{min-height:2.4rem;padding:0.5rem 1.05rem;font-size:0.86rem;white-space:nowrap}
.button__arrow{font-weight:400;transition:transform var(--transition)}
.button:hover .button__arrow{transform:translateX(3px)}
/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,6vw,6rem) 0 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,0.8fr);gap:clamp(2rem,4vw,4rem);align-items:end}
.hero__content{padding-bottom:clamp(3rem,5vw,5rem)}
.hero__title .accent{color:var(--accent)}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.hero__media{position:relative;min-width:0}
.hero__media img{width:100%;height:clamp(460px,52vw,640px);object-fit:cover;object-position:center top;border-radius:calc(var(--radius-lg) + 8px) calc(var(--radius-lg) + 8px) 0 0;filter:saturate(0.82) contrast(1.06)}
.hero__media::after{content:"";position:absolute;inset:0;border-radius:calc(var(--radius-lg) + 8px) calc(var(--radius-lg) + 8px) 0 0;background:linear-gradient(180deg,rgba(5,12,8,0) 40%,rgba(5,12,8,0.55) 88%),linear-gradient(120deg,rgba(47,228,120,0.16),transparent 45%);pointer-events:none}
.hero__stat{position:absolute;left:1.25rem;bottom:1.25rem;display:grid;gap:0.15rem;padding:0.9rem 1.2rem;border-radius:var(--radius-sm);border:1px solid rgba(47,228,120,0.28);background:rgba(5,12,8,0.72);backdrop-filter:blur(12px)}
.hero__stat strong{font-family:var(--font-brand-secondary);font-weight:800;font-size:1.35rem;line-height:1;color:var(--accent)}
.hero__stat span{font-size:0.78rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase}
/* Marquee */
.marquee{overflow:hidden;border-top:1px solid rgba(47,228,120,0.14);border-bottom:1px solid rgba(47,228,120,0.14);background:rgba(255,255,255,0.015);padding:0.9rem 0;white-space:nowrap}
.marquee__track{display:inline-block;animation:marquee 32s linear infinite}
.marquee span{display:inline-block;margin:0 1.6rem;font-family:var(--font-brand-secondary);font-weight:700;font-size:0.95rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-muted)}
.marquee em{font-style:normal;color:var(--accent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Cards */
.card{position:relative;display:flex;flex-direction:column;gap:1.3rem;padding:1.9rem;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.card::after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:var(--gradient-hairline)}
.card--featured{border-color:var(--line-strong);background:var(--gradient-card-featured),var(--panel);box-shadow:var(--shadow-glow)}
.card--premium{border-color:rgba(47,228,120,0.18);background:radial-gradient(circle at top right,rgba(47,228,120,0.1),transparent 24%),linear-gradient(180deg,rgba(17,29,22,0.96),rgba(11,19,15,0.96))}
.card--lighter{background:rgba(12,20,16,0.82);border-color:rgba(102,142,117,0.18)}
.card--lift{transform:translateY(-14px)}
.card__section{display:grid;gap:0.65rem}
.card__section p{margin:0;color:var(--text-muted);font-size:0.98rem}
.card__section h4{margin:0;font-family:var(--font-brand-secondary);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text)}
.card .button{width:fit-content;margin-top:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:stretch}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
/* Tag / price / list */
.tag{width:fit-content;margin:0;padding:0.5rem 0.85rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.tag--premium{background:rgba(255,255,255,0.06);color:var(--text)}
.tag--quiet{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.price{margin:0;font-family:var(--font-brand-secondary);font-weight:800;font-size:clamp(2.3rem,3.6vw,3.2rem);line-height:0.95;color:var(--text);letter-spacing:-0.02em}
.price span{font-size:0.4em;font-weight:600;color:var(--text-muted)}
.price-micro{margin:0.35rem 0 0;color:var(--accent);font-size:0.92rem;font-weight:600}
.price-note{margin:0.3rem 0 0;color:var(--text-muted);font-size:0.92rem}
.check-list{display:grid;gap:0.75rem;padding:0;margin:0;list-style:none}
.check-list li{position:relative;padding-left:1.6rem;color:var(--text);font-size:0.98rem}
.check-list li::before{content:"";position:absolute;left:0;top:0.5rem;width:0.6rem;height:0.6rem;border-radius:999px;background:var(--accent);box-shadow:0 0 0 0.25rem rgba(47,228,120,0.12)}
/* Feature / index cards */
.feature{position:relative;padding:1.75rem;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.feature::after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:var(--gradient-hairline)}
.feature--starter{background:linear-gradient(180deg,rgba(18,33,25,0.96),rgba(12,22,17,0.96)),var(--panel);border-color:rgba(47,228,120,0.24);box-shadow:var(--shadow-glow)}
.feature__index{margin:0 0 0.9rem;color:var(--accent);font-weight:700;font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase}
.feature h3{margin:0 0 0.75rem}
.feature p{margin:0;color:var(--text-muted);font-size:0.97rem}
.feature .check-list{margin-top:0.35rem}
/* Accordion */
.accordion{border-radius:var(--radius-md);border:1px solid rgba(47,228,120,0.16);background:rgba(13,24,19,0.88);box-shadow:var(--shadow);overflow:hidden}
.accordion summary{position:relative;padding:1.15rem 3rem 1.15rem 1.3rem;list-style:none;cursor:pointer;font-family:var(--font-brand-secondary);font-weight:700;font-size:1.05rem;letter-spacing:0.01em}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.3rem;font-weight:700}
.accordion[open] summary::after{content:"−"}
.accordion__body{display:grid;gap:0.85rem;padding:0 1.3rem 1.3rem;color:var(--text)}
.accordion__body p{margin:0}
.accordion--priority{border-color:rgba(47,228,120,0.28);background:radial-gradient(circle at top right,rgba(47,228,120,0.08),transparent 24%),rgba(13,24,19,0.92)}
.accordion-list{display:grid;gap:0.9rem;margin-top:2.25rem}
/* Panels & CTA */
.panel-cta{display:grid;gap:1.1rem;padding:clamp(2rem,4.5vw,3.5rem);border-radius:var(--radius-lg);border:1px solid rgba(47,228,120,0.22);background:radial-gradient(circle at 85% 0%,rgba(47,228,120,0.16),transparent 34%),linear-gradient(180deg,rgba(14,25,18,0.96),rgba(9,17,13,0.98));box-shadow:var(--shadow-glow)}
.panel-cta .cta-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.5rem}
.result-banner{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding:1.2rem 1.4rem;border-radius:var(--radius-md);border:1px solid rgba(47,228,120,0.28);background:var(--gradient-banner)}
.result-banner b{flex:0 0 auto;font-weight:800;color:var(--text-on-accent);background:var(--accent);border-radius:999px;padding:0.5rem 0.85rem;font-size:0.86rem;letter-spacing:0.04em;text-transform:uppercase}
.result-banner p{margin:0;font-size:1.05rem}
/* Tabs (PHP suite) */
.tabs__list{display:flex;flex-wrap:wrap;gap:0.7rem}
.tabs__button{min-height:2.9rem;padding:0.65rem 1.1rem;border:1px solid rgba(47,228,120,0.18);border-radius:999px;background:rgba(255,255,255,0.03);color:var(--text-muted);font:inherit;font-weight:700;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:border-color var(--transition),background-color var(--transition),color var(--transition),transform var(--transition)}
.tabs__button:hover{transform:translateY(-1px);border-color:rgba(47,228,120,0.3);color:var(--text)}
.tabs__button.is-active{border-color:rgba(47,228,120,0.34);background:rgba(47,228,120,0.12);color:var(--accent)}
.tabs__panel[hidden]{display:none}
.section-heading--tab{margin-top:clamp(3rem,5vw,4.5rem)}
/* Footer */
.site-footer{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid rgba(47,228,120,0.12)}
.site-footer__inner{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 0 4rem;text-align:center}
.site-footer__inner img{width:120px}
.site-footer__inner p{margin:0;color:var(--text-muted);font-size:0.92rem}
/* Reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity 650ms cubic-bezier(.2,.7,.2,1),transform 650ms cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
@media (max-width:980px){
.hero__grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.card--lift{transform:none}
h1.display{font-size:clamp(2.5rem,11vw,3.8rem)}
.hero__media img{height:clamp(380px,90vw,520px)}
}
@media (max-width:700px){.site-nav a:not(.button){display:none}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.js .reveal{opacity:1;transform:none}
}
/* Mobile fix: collapse inline two-column layouts on small screens */
@media (max-width:980px){
[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}