/* Homepage sections (shared header, footer, buttons and tokens live in base.css) */
/* Hero */
.hp-hero{display:grid;gap:48px;padding-top:64px;padding-bottom:64px}
.hp-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:8px}
.hp-reel{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--text) 5%,transparent)}
.hp-reel-frame{position:absolute;left:28px;right:28px;top:28px;bottom:0;overflow:hidden;border-radius:6px 6px 0 0;background:var(--surface);box-shadow:0 20px 40px -16px rgba(11,18,32,.28)}
.hp-reel-frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ease)}
.hp-reel:hover .hp-reel-frame img{transform:scale(1.03)}
.hp-reel-meta{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem}
.hp-reel-meta b{display:block;font-weight:600}
.hp-reel-meta span{color:var(--muted)}
.hp-reel-meta a{flex:none;font-weight:600;text-underline-offset:4px}
.hp-reel-meta a:hover{text-decoration:underline}

/* Proof + marquee */
.hp-proof{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:.875rem;color:color-mix(in srgb,var(--text) 62%,transparent)}
.hp-proof b{font-weight:600;color:var(--ink)}
.hp-marquee{margin-top:24px;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);padding:24px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hp-marquee-track{display:flex;width:max-content;gap:64px;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.025em;color:color-mix(in srgb,var(--text) 56%,transparent);white-space:nowrap;animation:hp-marquee 60s linear infinite}

.hp-marquee-track span{display:inline-flex;align-items:center;gap:12px}
.hp-marquee-track img{width:24px;height:24px;border-radius:5px;filter:grayscale(1);opacity:.6}

/* Services accordion */
.hp-acc{margin-top:56px}
.hp-acc details+details{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.hp-acc summary{display:flex;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.025em}
.hp-acc summary::-webkit-details-marker,.hp-q summary::-webkit-details-marker{display:none}
.hp-acc-n{display:none;width:5rem;color:color-mix(in srgb,var(--text) 50%,transparent)}
.hp-acc-t{flex:1;transition:color .15s}
.hp-acc summary:hover .hp-acc-t{color:color-mix(in srgb,var(--text) 60%,transparent)}
.hp-plus{font-size:1.875rem;font-weight:300;line-height:1;color:var(--accent-hover);transition:transform .2s}
details[open]>summary .hp-plus,details[open]>summary .hp-q-plus{transform:rotate(45deg)}
.hp-acc-body{display:grid;gap:24px;padding-bottom:32px}
.hp-acc-body p{font-size:1.125rem;font-weight:500;line-height:1.55}
.hp-acc-body ul{display:grid;gap:4px;padding-left:20px;list-style:disc;color:color-mix(in srgb,var(--text) 68%,transparent)}

/* Work */
.hp-tint{background:var(--bg-tint)}
.hp-split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.hp-cases{margin-top:48px;display:grid;gap:48px 32px}
.hp-case{display:flex;flex-direction:column}
.hp-case-art{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:color-mix(in srgb,var(--text) 5%,transparent);border-radius:var(--radius-lg)}
.hp-case-art img{position:absolute;left:40px;right:40px;top:40px;width:calc(100% - 80px);height:calc(100% - 40px);object-fit:cover;object-position:top;border-radius:8px 8px 0 0;box-shadow:0 20px 40px -16px rgba(11,18,32,.28);transform:translateY(24px);transition:transform .7s var(--ease)}
.hp-case:hover .hp-case-art img{transform:translateY(8px)}
.hp-case-body{display:flex;flex-direction:column;padding:24px 0 0}
.hp-case-meta{font-size:.8125rem;color:var(--muted)}
.hp-chips{display:flex;flex-wrap:wrap;gap:8px;font-size:.875rem}
.chip-warm{background:var(--accent-soft);color:var(--accent-text);padding:2px 8px}
.chip-plain{background:color-mix(in srgb,var(--text) 5%,transparent);color:color-mix(in srgb,var(--text) 68%,transparent);padding:2px 8px}
.hp-case-title{margin-top:8px;font-family:var(--display);font-size:1.375rem;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.hp-case:hover .hp-case-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hp-case-sum{margin-top:6px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-case-result{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--score)}

/* Testimonial */
.hp-quote-wrap{max-width:46rem;margin:0 auto;padding-left:20px;padding-right:20px;text-align:center}
.hp-quote{font-family:var(--display);font-size:1.25rem;font-weight:500;line-height:1.5;letter-spacing:-.015em}
.hp-quote-who{margin-top:32px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}
.hp-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--text) 8%,transparent);font-weight:600;color:var(--text)}
.hp-quote-who b{display:block;font-weight:600}
.hp-quote-who span{font-size:.875rem;color:color-mix(in srgb,var(--text) 58%,transparent)}

/* Plans */
.hp-plans{margin-top:48px;display:grid;gap:20px}
.hp-plan{position:relative;display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);padding:32px}
.hp-plan-name{font-weight:600}
.hp-plan-big{margin-top:16px;font-family:var(--display);font-size:2.5rem;font-weight:600;line-height:1.1;letter-spacing:-.025em}
.hp-plan ul{display:grid;gap:12px;font-size:.875rem;color:color-mix(in srgb,var(--text) 72%,transparent)}
.hp-plan li{display:flex;align-items:flex-start;gap:10px}
.hp-plan li::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;background:color-mix(in srgb,var(--text) 45%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat}
.hp-plan-dark li::before{background:var(--accent)}
.hp-plan .hp-btn{margin-top:auto}
.hp-plan-dark{border-color:var(--dark);background:var(--dark);color:#fff}
html.dark-mode .hp-plan-dark{background:var(--surface);border-color:var(--line-strong)}
.hp-plan-dark ul{color:rgba(255,255,255,.78)}
.hp-plan-badge{position:absolute;right:24px;top:24px;border:1px solid rgba(255,255,255,.3);border-radius:2px;padding:1px 7px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.8)}

/* FAQ */
.hp-faq{display:grid;gap:40px}
.hp-h2-sm{font-size:2.25rem}
.hp-faq-card{margin-top:32px;background:var(--bg-tint);padding:24px}
.hp-faq-card-t{font-family:var(--display);font-size:1.25rem;font-weight:600}
.hp-faq-card p+p{margin-top:4px;color:color-mix(in srgb,var(--text) 62%,transparent)}
.hp-faq-card .hp-btn{margin-top:20px;padding:10px 20px}
.hp-faq-list{display:grid;align-content:start;gap:12px}
.hp-q{background:var(--bg-tint)}
.hp-q[open]{background:var(--bg-tint-2)}
.hp-q summary{display:flex;align-items:center;gap:16px;padding:20px;cursor:pointer;list-style:none;font-weight:600}
.hp-q-plus{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--text) 15%,transparent);transition:transform .2s}
.hp-q-a{padding:0 20px 20px 64px;color:color-mix(in srgb,var(--text) 68%,transparent)}
.hp-q-a p+p{margin-top:8px}

/* Beyond websites */
.hp-trio{margin-top:48px;display:grid;gap:20px}
.hp-tile{display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);padding:28px;transition:border-color .15s}
.hp-tile:hover{border-color:color-mix(in srgb,var(--text) 25%,transparent)}
.hp-tile-tag{align-self:flex-start;background:color-mix(in srgb,var(--text) 5%,transparent);padding:2px 8px;font-size:.75rem;color:color-mix(in srgb,var(--text) 68%,transparent)}
.hp-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hp-tile-top .hp-tile-tag{align-self:auto}
.hp-tile-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}
.hp-tile-ic-logo{background:none}
.hp-tile-ic-logo img{width:40px;height:40px;border-radius:8px}
.hp-tile-new{background:var(--accent-soft);color:var(--accent-text)}
.hp-tile-t{margin-top:20px;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.025em}
.hp-tile-p{margin-top:8px;margin-bottom:24px;color:color-mix(in srgb,var(--text) 65%,transparent)}
.hp-tile .hp-textlink{margin-top:auto}

/* Performance */
.hp-perf{display:grid;gap:48px;align-items:start}
.hp-scores-wrap{margin:0}
.hp-scores-src{margin-top:12px;font-size:.8125rem;color:var(--muted)}
.hp-perf-btn{margin-top:32px}
.hp-scores{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-left:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.hp-scores div{display:flex;flex-direction:column-reverse;border-right:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:var(--surface);padding:24px}
.hp-scores dd{font-family:var(--display);font-size:3rem;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--score)}
.hp-scores dt{margin-top:8px;font-size:.875rem;color:color-mix(in srgb,var(--text) 62%,transparent)}

/* Process */
.hp-steps{margin:56px 0 0;padding:0;list-style:none;display:grid;gap:32px}
.hp-steps li{border-top:1px solid color-mix(in srgb,var(--text) 15%,transparent);padding-top:20px}
.hp-steps span{font-size:.875rem;font-weight:600;color:var(--accent-text)}
.hp-steps h3{margin-top:12px;font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.hp-steps p{margin-top:8px;color:color-mix(in srgb,var(--text) 65%,transparent)}

/* Blog */
.hp-posts{margin-top:40px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.hp-posts a{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);padding:20px 0}
.hp-posts time{grid-column:1;font-size:.875rem;color:color-mix(in srgb,var(--text) 60%,transparent)}
.hp-post-t{grid-column:1;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;transition:color .15s}
.hp-post-c{display:none}
.hp-post-a{grid-column:2;grid-row:1/3;color:var(--accent-hover);transition:transform .15s}
.hp-posts a:hover .hp-post-t{color:color-mix(in srgb,var(--text) 60%,transparent)}
.hp-posts a:hover .hp-post-a{transform:translateX(4px)}

@keyframes hp-marquee{to{transform:translateX(-50%)}}
@keyframes hp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hp-float{50%{transform:translateY(-10px)}}
.hp-rise{animation:hp-rise .8s var(--ease) both}
@media (min-width:768px){
  .hp-hero{padding-top:96px}
  .hp-acc summary{font-size:1.875rem}
  .hp-acc-n{display:block}
  .hp-acc-body{grid-template-columns:1fr 1fr;padding-left:6.5rem}
  .hp-cases{grid-template-columns:1fr 1fr}
  
  .hp-quote{font-size:1.5rem}
  .hp-plans{grid-template-columns:repeat(3,1fr)}
  .hp-trio{grid-template-columns:repeat(3,1fr)}
  .hp-steps{grid-template-columns:repeat(4,1fr);gap:24px}
  .hp-posts a{grid-template-columns:9rem 1fr 10rem auto;padding:24px 0}
  .hp-posts time,.hp-post-t{grid-column:auto}
  .hp-post-c{display:block;font-size:.875rem;color:color-mix(in srgb,var(--text) 60%,transparent)}
  .hp-post-a{grid-column:auto;grid-row:auto}
}
@media (min-width:1024px){
  .hp-hero{grid-template-columns:1fr 27rem;align-items:start;column-gap:64px}
  .hp-hero>.hp-rise:last-child{margin-top:38px}
  .hp-faq{grid-template-columns:5fr 7fr}
  .hp-perf{grid-template-columns:1fr 1fr}
  .hp-scores-wrap{margin-top:30px}
  .hp-faq-side{position:sticky;top:112px;align-self:start}
}
.hp-proof,.hp-posts,.hp-plan ul,.hp-acc-body ul,.hp-steps{list-style:none;margin:0;padding:0}
.hp-acc-body ul{list-style:disc;padding-left:20px}
.hp-steps{margin-top:56px}
.hp-scores,.hp-scores dd,.hp-quote{margin:0}
.hp-plans .hp-plan ul{margin:28px 0 36px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.hp-plans .hp-plan-dark ul{border-top-color:rgba(255,255,255,.12)}
.hp-quote-wrap.hp-section{padding-top:0;padding-bottom:0}
.hp-plan-dark .hp-btn-accent{background:#fff;color:#0b1220}
.hp-plan-dark .hp-btn-accent:hover{background:#e9edf4}