/* * HTS Landing — Custom Styles * Theme: hanus-starter * Location: assets/css/hts-landing.css * Enqueued via: functions.php → hts_enqueue_landing_styles() * * DO NOT paste this content into functions.php. Ever. */ /* ========================================================= DESIGN TOKENS (CSS Custom Properties) ========================================================= */ :root { --hts-dark: #050505; --hts-surface: #0f0f0f; --hts-surface-2: #1a1a1a; --hts-border: rgba(255,255,255,0.08); --hts-text: #e5e7eb; --hts-muted: #6b7280; --hts-indigo: #6366f1; --hts-purple: #9333ea; --hts-pink: #ec4899; --hts-green: #22c55e; --hts-font: 'Manrope', system-ui, -apple-system, sans-serif; --hts-radius-sm: 0.5rem; --hts-radius: 1rem; --hts-radius-lg: 1.5rem; --hts-radius-xl: 2rem; --hts-max-width: 80rem; /* 1280px */ --hts-px: 1rem; } /* ========================================================= FONTS — Manrope via Google Fonts preconnect (loaded in front-page.php , not here) ========================================================= */ /* ========================================================= RESETS & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.hts-landing-page { background-color: var(--hts-dark); color: var(--hts-text); font-family: var(--hts-font); overflow-x: hidden; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } /* ========================================================= UTILITIES ========================================================= */ /* Container */ .hts-container { max-width: var(--hts-max-width); margin-left: auto; margin-right: auto; padding-left: var(--hts-px); padding-right: var(--hts-px); } @media (min-width: 640px) { .hts-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .hts-container { padding-left: 2rem; padding-right: 2rem; } } /* Text Gradient */ .hts-text-gradient { background: linear-gradient(135deg, var(--hts-indigo) 0%, var(--hts-purple) 50%, var(--hts-pink) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glass Card */ .hts-glass { background: rgba(255,255,255,0.03); border: 1px solid var(--hts-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Hover Lift */ .hts-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; } .hts-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); } /* Grain texture overlay */ .hts-grain::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* Scroll Reveal */ .hts-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .hts-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================= NAV ========================================================= */ .hts-nav { position: sticky; top: 0; width: 100%; z-index: 40; border-bottom: 1px solid rgba(255,255,255,0.05); background-color: rgba(5,5,5,0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .hts-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; } .hts-nav__logo img { height: 5rem; width: auto; object-fit: contain; } .hts-nav__links { display: none; gap: 2rem; align-items: center; } @media (min-width: 768px) { .hts-nav__links { display: flex; } } .hts-nav__links a { color: #9ca3af; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: var(--hts-radius-sm); transition: color 0.2s; } .hts-nav__links a:hover { color: #fff; } .hts-nav__cta { display: none; align-items: center; gap: 1rem; } @media (min-width: 768px) { .hts-nav__cta { display: flex; } } .hts-nav__phone { color: #9ca3af; font-size: 0.875rem; font-weight: 600; transition: color 0.2s; } .hts-nav__phone:hover { color: #fff; } .hts-btn-nav { background: #fff; color: #000; padding: 0.625rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; transition: background-color 0.2s, box-shadow 0.2s; box-shadow: 0 0 20px rgba(255,255,255,0.3); } .hts-btn-nav:hover { background-color: #e5e7eb; box-shadow: 0 0 25px rgba(255,255,255,0.5); } /* Mobile hamburger */ .hts-nav__hamburger { display: flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: var(--hts-radius-sm); color: #9ca3af; background: transparent; border: none; cursor: pointer; transition: color 0.2s, background-color 0.2s; } .hts-nav__hamburger:hover { color: #fff; background: rgba(255,255,255,0.1); } @media (min-width: 768px) { .hts-nav__hamburger { display: none; } } /* Mobile menu */ .hts-mobile-menu { display: none; background: var(--hts-surface); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 1rem 1rem; } .hts-mobile-menu.is-open { display: block; } .hts-mobile-menu a { display: block; color: #d1d5db; padding: 0.625rem 0.75rem; border-radius: var(--hts-radius-sm); font-size: 1rem; font-weight: 500; transition: color 0.2s; } .hts-mobile-menu a:hover { color: #fff; } .hts-mobile-menu .hts-mobile-book { color: var(--hts-indigo); font-weight: 700; margin-top: 1rem; } /* ========================================================= HERO ========================================================= */ .hts-hero { position: relative; padding: 8rem 0 5rem; overflow: hidden; } @media (min-width: 768px) { .hts-hero { padding: 12rem 0 8rem; } } .hts-hero__glow-center { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.25) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hts-hero__glow-right { position: absolute; top: 25%; right: 0; width: 31.25rem; height: 31.25rem; background: rgba(147,51,234,0.10); border-radius: 50%; filter: blur(100px); pointer-events: none; } .hts-hero__glow-left { position: absolute; bottom: 0; left: 0; width: 31.25rem; height: 31.25rem; background: rgba(99,102,241,0.10); border-radius: 50%; filter: blur(100px); pointer-events: none; } .hts-hero__inner { position: relative; z-index: 10; text-align: center; } /* Status badge */ .hts-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); backdrop-filter: blur(4px); margin-bottom: 2rem; } .hts-badge__dot { position: relative; width: 0.5rem; height: 0.5rem; } .hts-badge__dot-ping { position: absolute; inset: 0; border-radius: 50%; background: #4ade80; opacity: 0.75; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .hts-badge__dot-solid { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; display: block; } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } .hts-badge__text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #d1d5db; } /* Heading */ .hts-hero__h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.5rem; } .hts-hero__sub { max-width: 40rem; margin: 0 auto 2.5rem; font-size: 1.125rem; color: #9ca3af; line-height: 1.75; } @media (min-width: 768px) { .hts-hero__sub { font-size: 1.25rem; } } /* CTA Buttons */ .hts-hero__buttons { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 4rem; } @media (min-width: 640px) { .hts-hero__buttons { flex-direction: row; justify-content: center; } } .hts-btn-primary { display: inline-block; width: 100%; padding: 1rem 2rem; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(to right, #4f46e5, #9333ea, #ec4899); border-radius: 9999px; box-shadow: 0 10px 30px rgba(147,51,234,0.25); transition: transform 0.3s, box-shadow 0.3s; text-align: center; } .hts-btn-primary:hover { transform: scale(1.04); box-shadow: 0 15px 35px rgba(147,51,234,0.40); } @media (min-width: 640px) { .hts-btn-primary { width: auto; } } .hts-btn-ghost { display: inline-block; width: 100%; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; transition: background-color 0.3s; text-align: center; } .hts-btn-ghost:hover { background: rgba(255,255,255,0.1); } @media (min-width: 640px) { .hts-btn-ghost { width: auto; } } /* Proof bar */ .hts-proof-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; color: #6b7280; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } @media (min-width: 768px) { .hts-proof-bar { font-size: 0.875rem; } } .hts-proof-bar span { display: flex; align-items: center; gap: 0.5rem; } .hts-proof-bar svg { width: 1rem; height: 1rem; color: var(--hts-green); flex-shrink: 0; } /* Tech stack logos */ .hts-tech-bar { padding-top: 2rem; margin-top: 4rem; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; } .hts-tech-bar__label { font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; } .hts-tech-bar__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3rem; opacity: 0.9; transition: opacity 0.3s; } .hts-tech-bar__logos:hover { opacity: 1; } .hts-tech-bar__logo { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #d1d5db; } .hts-tech-bar__logo svg { width: 2.5rem; height: 2.5rem; } /* ========================================================= TRUST / LOGO BAR ========================================================= */ .hts-trust { padding: 3rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(17,24,39,0.30); text-align: center; } .hts-trust__label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; margin-bottom: 2rem; } .hts-trust__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; } .hts-trust__logo-wrap { background: #fff; border-radius: 0.75rem; padding: 1rem; height: 6rem; width: 10rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.20); transition: transform 0.25s, box-shadow 0.25s; } .hts-trust__logo-wrap:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.35); } .hts-trust__logo-wrap img { max-height: 100%; max-width: 100%; object-fit: contain; } /* ========================================================= PAIN POINTS SECTION ========================================================= */ .hts-pain { padding: 6rem 0; position: relative; } .hts-section-header { text-align: center; margin-bottom: 4rem; } .hts-section-header h2 { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 800; color: #fff; margin-bottom: 1rem; } .hts-section-header p { color: #9ca3af; max-width: 40rem; margin: 0 auto; font-size: 1rem; } .hts-grid-3 { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .hts-grid-3 { grid-template-columns: repeat(3, 1fr); } } .hts-pain-card { padding: 2rem; border-radius: var(--hts-radius-lg); } .hts-pain-card__icon { width: 3rem; height: 3rem; border-radius: var(--hts-radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .hts-pain-card__icon svg { width: 1.5rem; height: 1.5rem; } .hts-pain-card--red .hts-pain-card__icon { background: rgba(239,68,68,0.10); color: #f87171; } .hts-pain-card--orange .hts-pain-card__icon { background: rgba(249,115,22,0.10); color: #fb923c; } .hts-pain-card--blue .hts-pain-card__icon { background: rgba(59,130,246,0.10); color: #60a5fa; } .hts-pain-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; } .hts-pain-card p { font-size: 0.875rem; color: #9ca3af; line-height: 1.7; } /* ========================================================= PROCESS SECTION ========================================================= */ .hts-process { padding: 6rem 0; background: var(--hts-surface); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden; } .hts-grid-4 { display: grid; gap: 2rem; } @media (min-width: 768px) { .hts-grid-4 { grid-template-columns: repeat(4, 1fr); } } .hts-process-step { position: relative; } .hts-process-step__num { font-size: 5rem; font-weight: 800; color: rgba(255,255,255,0.04); line-height: 1; position: absolute; top: -2.5rem; left: -1rem; user-select: none; } .hts-process-step h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; position: relative; z-index: 1; } .hts-process-step p { font-size: 0.875rem; color: #9ca3af; line-height: 1.7; position: relative; z-index: 1; } /* ========================================================= SERVICES SECTION ========================================================= */ .hts-services { padding: 6rem 0; } .hts-services__stack { display: flex; flex-direction: column; gap: 8rem; } .hts-service-row { display: grid; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .hts-service-row { grid-template-columns: 1fr 1fr; gap: 5rem; } .hts-service-row--flip .hts-service-row__content { order: 2; } .hts-service-row--flip .hts-service-row__image { order: 1; } } .hts-service-row__tag { display: inline-block; padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.5rem; } .hts-service-row__tag--indigo { background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.20); color: #818cf8; } .hts-service-row__tag--purple { background: rgba(147,51,234,0.10); border: 1px solid rgba(147,51,234,0.20); color: #c084fc; } .hts-service-row__tag--pink { background: rgba(236,72,153,0.10); border: 1px solid rgba(236,72,153,0.20); color: #f472b6; } .hts-service-row__content h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 1.5rem; } .hts-service-row__content p { font-size: 1.125rem; color: #9ca3af; line-height: 1.75; margin-bottom: 2rem; } .hts-service-row__list { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .hts-service-row__list li { display: flex; align-items: center; gap: 0.75rem; color: #d1d5db; font-size: 1rem; } .hts-service-row__check { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(34,197,94,0.20); display: flex; align-items: center; justify-content: center; color: var(--hts-green); font-size: 0.75rem; flex-shrink: 0; } .hts-service-row__image { position: relative; } .hts-service-row__image-glow { position: absolute; inset: 0; border-radius: var(--hts-radius-lg); blur: 16px; opacity: 0.30; transition: opacity 0.5s; } .hts-service-row__image:hover .hts-service-row__image-glow { opacity: 0.50; } .hts-service-row__image-glow--indigo { background: linear-gradient(to right, #6366f1, #9333ea); filter: blur(16px); } .hts-service-row__image-glow--purple { background: linear-gradient(to right, #9333ea, #ec4899); filter: blur(16px); } .hts-service-row__image-glow--pink { background: linear-gradient(to right, #ec4899, #6366f1); filter: blur(16px); } .hts-service-row__image img { position: relative; width: 100%; border-radius: var(--hts-radius-lg); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.5); transition: transform 0.5s; } .hts-service-row__image:hover img { transform: scale(1.02); } /* ========================================================= ABOUT SECTION ========================================================= */ .hts-about { padding: 6rem 0; background: var(--hts-dark); } .hts-about__card { border-radius: var(--hts-radius-xl); padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 3rem; } @media (min-width: 768px) { .hts-about__card { flex-direction: row; padding: 4rem; } } .hts-about__photo-wrap { width: 100%; text-align: center; flex-shrink: 0; } @media (min-width: 768px) { .hts-about__photo-wrap { width: 33%; } } .hts-about__photo-glow { position: absolute; inset: 0; background: linear-gradient(135deg, var(--hts-indigo), var(--hts-purple)); border-radius: 50%; filter: blur(20px); opacity: 0.5; } .hts-about__photo-rel { position: relative; display: inline-block; } .hts-about__photo-rel img { position: relative; width: 16rem; height: 16rem; border-radius: 50%; object-fit: cover; border: 4px solid #1f2937; box-shadow: 0 25px 50px rgba(0,0,0,0.5); } .hts-about__name { font-size: 1.25rem; font-weight: 700; color: #fff; margin-top: 1.5rem; margin-bottom: 0.5rem; } .hts-about__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .hts-about__tag { padding: 0.25rem 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--hts-radius-sm); font-size: 0.75rem; font-weight: 600; } .hts-about__content { text-align: center; } @media (min-width: 768px) { .hts-about__content { text-align: left; } } .hts-about__content h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; color: #fff; margin-bottom: 1.5rem; } .hts-about__content blockquote { font-size: 1.125rem; color: #d1d5db; line-height: 1.8; font-style: italic; margin-bottom: 2rem; } .hts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); } .hts-stats__num { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #fff; } .hts-stats__label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.25rem; } /* ========================================================= PORTFOLIO SECTION ========================================================= */ .hts-portfolio { padding: 6rem 0; background: var(--hts-surface); border-top: 1px solid rgba(255,255,255,0.05); } .hts-portfolio__header { margin-bottom: 3rem; } .hts-portfolio__header h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; color: #fff; } .hts-portfolio__header p { color: #9ca3af; margin-top: 0.5rem; } .hts-portfolio-card { display: block; border-radius: var(--hts-radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.3s, transform 0.3s; } .hts-portfolio-card:hover { transform: translateY(-8px); } .hts-portfolio-card--indigo:hover { border-color: rgba(99,102,241,0.50); } .hts-portfolio-card--purple:hover { border-color: rgba(147,51,234,0.50); } .hts-portfolio-card--blue:hover { border-color: rgba(59,130,246,0.50); } .hts-portfolio-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; } .hts-portfolio-card__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.50); transition: background-color 0.3s; z-index: 1; } .hts-portfolio-card:hover .hts-portfolio-card__overlay { background: transparent; } .hts-portfolio-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .hts-portfolio-card:hover .hts-portfolio-card__thumb img { transform: scale(1.05); } .hts-portfolio-card__body { padding: 1.5rem; } .hts-portfolio-card__title { font-size: 1.125rem; font-weight: 700; color: #fff; transition: color 0.2s; margin-bottom: 0.25rem; } .hts-portfolio-card--indigo:hover .hts-portfolio-card__title { color: #818cf8; } .hts-portfolio-card--purple:hover .hts-portfolio-card__title { color: #c084fc; } .hts-portfolio-card--blue:hover .hts-portfolio-card__title { color: #60a5fa; } .hts-portfolio-card__cat { font-size: 0.75rem; text-transform: uppercase; color: #6b7280; letter-spacing: 0.06em; margin-bottom: 0.5rem; } .hts-portfolio-card__desc { font-size: 0.875rem; color: #9ca3af; } /* ========================================================= TESTIMONIALS ========================================================= */ .hts-testimonials { padding: 6rem 0; background: var(--hts-dark); border-top: 1px solid rgba(255,255,255,0.05); } .hts-testimonials h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; color: #fff; text-align: center; margin-bottom: 4rem; } .hts-grid-2 { display: grid; gap: 2rem; } @media (min-width: 768px) { .hts-grid-2 { grid-template-columns: 1fr 1fr; } } .hts-testimonial-card { padding: 2rem; border-radius: var(--hts-radius-lg); } .hts-testimonial-card__author { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .hts-testimonial-card__avatar { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; } .hts-testimonial-card__avatar--indigo { background: rgba(49,46,129,0.5); color: #a5b4fc; } .hts-testimonial-card__avatar--purple { background: rgba(88,28,135,0.5); color: #d8b4fe; } .hts-testimonial-card__name { font-weight: 700; color: #fff; } .hts-testimonial-card__role { font-size: 0.75rem; color: #6b7280; } .hts-testimonial-card blockquote { font-size: 1.125rem; color: #d1d5db; font-style: italic; line-height: 1.75; } /* ========================================================= PRICING ========================================================= */ .hts-pricing { padding: 6rem 0; background: var(--hts-surface); } .hts-pricing-grid { display: grid; gap: 2rem; align-items: start; } @media (min-width: 768px) { .hts-pricing-grid { grid-template-columns: repeat(3, 1fr); } } .hts-pricing-card { border-radius: var(--hts-radius-lg); padding: 2rem; transition: background-color 0.2s; position: relative; } .hts-pricing-card:hover { background: rgba(255,255,255,0.05); } .hts-pricing-card--featured { transform: translateY(0); border-color: rgba(99,102,241,0.5) !important; box-shadow: 0 25px 50px rgba(99,102,241,0.10); } @media (min-width: 768px) { .hts-pricing-card--featured { transform: translateY(-1rem); } } .hts-pricing-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(to right, var(--hts-indigo), var(--hts-purple)); padding: 0.25rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .hts-pricing-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; } .hts-pricing-card__tagline { font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 1.5rem; } .hts-pricing-card__price { margin-bottom: 1.5rem; } .hts-pricing-card__amount { font-size: 2.5rem; font-weight: 800; color: #fff; } .hts-pricing-card__period { font-size: 1.125rem; font-weight: 400; color: #6b7280; } .hts-pricing-card__target { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; } .hts-pricing-card__features { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; font-size: 0.875rem; color: #d1d5db; } .hts-pricing-card--featured .hts-pricing-card__features { color: #fff; font-weight: 500; } .hts-pricing-card__features li { display: flex; align-items: center; gap: 0.5rem; } .hts-btn-pricing-ghost { display: block; width: 100%; padding: 0.75rem; text-align: center; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--hts-radius-sm); transition: background-color 0.2s; } .hts-btn-pricing-ghost:hover { background: rgba(255,255,255,0.1); } .hts-btn-pricing-primary { display: block; width: 100%; padding: 0.75rem; text-align: center; font-weight: 700; color: #fff; background: linear-gradient(to right, var(--hts-indigo), var(--hts-purple)); border-radius: var(--hts-radius-sm); transition: opacity 0.2s; } .hts-btn-pricing-primary:hover { opacity: 0.9; } /* ========================================================= FAQ ========================================================= */ .hts-faq { padding: 6rem 0; background: var(--hts-dark); border-top: 1px solid rgba(255,255,255,0.05); } .hts-faq h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; color: #fff; text-align: center; margin-bottom: 3rem; } .hts-faq__list { display: flex; flex-direction: column; gap: 1rem; } .hts-faq details { border-radius: var(--hts-radius-lg); } .hts-faq summary { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; cursor: pointer; list-style: none; font-weight: 500; color: #fff; user-select: none; } .hts-faq summary::-webkit-details-marker { display: none; } .hts-faq summary svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; transition: transform 0.25s; } .hts-faq details[open] summary svg { transform: rotate(180deg); } .hts-faq__answer { padding: 0 1.5rem 1.5rem; font-size: 0.875rem; color: #9ca3af; line-height: 1.75; } /* ========================================================= FOOTER ========================================================= */ .hts-footer { padding: 3rem 0; background: #000; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; } .hts-footer__logo { margin-bottom: 1.5rem; display: flex; justify-content: center; } .hts-footer__logo img { height: 8rem; width: auto; object-fit: contain; } .hts-footer__copy { font-size: 0.875rem; color: #6b7280; } .hts-footer__sub { font-size: 0.75rem; color: #374151; margin-top: 0.5rem; margin-bottom: 1rem; } .hts-footer__phone a { font-size: 0.75rem; color: #374151; transition: color 0.2s; } .hts-footer__phone a:hover { color: #9ca3af; }