/* ============================================================ ROOT VARIABLES ============================================================ */ :root { --bg: #080808; --surface: #111111; --surface2: #161616; --border: #1e1e1e; --accent: #C8A951; --accent-lo: rgba(200, 169, 81, 0.12); --accent-mid: rgba(200, 169, 81, 0.25); --text: #F0ECE6; --muted: #7A7878; --success: #34d399; --font-head: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; --max-w: 1160px; --radius: 10px; --transition: 0.22s ease; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ============================================================ LANGUAGE SYSTEM css: html[lang="bg"] hides .en — JS sets lang on ============================================================ */ html[lang="bg"] .en { display: none; } html[lang="en"] .bg { display: none; } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); line-height: 1.1; } h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; } h1 em { font-style: italic; color: var(--accent); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; } h2 em { font-style: italic; color: var(--accent); } h3 { font-size: 1.15rem; font-weight: 700; } h4 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } p { color: var(--muted); font-size: 1rem; line-height: 1.75; } .label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .label.accent { color: var(--accent); } .label.accent::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--accent); margin-right: 10px; vertical-align: middle; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; font-family: var(--font-head); font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); border: 1.5px solid var(--border); color: var(--text); transition: border-color var(--transition), color var(--transition), background var(--transition); } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--accent { background: var(--accent); border-color: var(--accent); color: #080808; } .btn--accent:hover { background: #d4b55e; border-color: #d4b55e; color: #080808; } .btn--small { padding: 9px 18px; font-size: 0.8rem; } .btn--large { padding: 16px 32px; font-size: 1rem; width: 100%; justify-content: center; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.22s; } .delay-3 { transition-delay: 0.34s; } .delay-4 { transition-delay: 0.46s; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--transition), border-color var(--transition); border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(8, 8, 8, 0.94); backdrop-filter: blur(12px); border-bottom-color: var(--border); } .nav__inner { height: 64px; display: flex; align-items: center; gap: 32px; } .nav__logo { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--text); white-space: nowrap; margin-right: auto; } .nav__logo:hover { color: var(--accent); transition: color var(--transition); } .nav__links { display: flex; gap: 28px; align-items: center; } .nav__links a { font-size: 0.875rem; font-weight: 500; color: var(--muted); transition: color var(--transition); } .nav__links a:hover { color: var(--text); } .nav__right { display: flex; align-items: center; gap: 16px; } /* Language toggle */ .lang-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .lang-btn { padding: 5px 11px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); transition: background var(--transition), color var(--transition); } .lang-btn.active, .lang-btn:hover { background: var(--accent); color: #080808; } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; } .nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--muted); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav__hamburger.open span:first-child { transform: translateY(7px) rotate(45deg); } .nav__hamburger.open span:last-child { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .nav__mobile { display: none; flex-direction: column; gap: 16px; padding: 20px 24px; background: var(--surface); border-top: 1px solid var(--border); } .nav__mobile.open { display: flex; } .mobile-link { font-size: 0.95rem; font-weight: 500; color: var(--muted); padding: 4px 0; } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100svh; display: flex; align-items: center; padding: 100px 0 64px; } .hero__inner { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: center; } .hero__content { max-width: 640px; } .hero__content .label { margin-bottom: 28px; } .hero__content h1 { margin-bottom: 24px; } .hero__sub { font-size: 1.1rem; color: var(--muted); margin-bottom: 36px; max-width: 560px; } .hero__sub .en, .hero__sub .bg { color: var(--muted); } .hero__cta { margin-bottom: 48px; } .cta-note { margin-top: 12px; font-size: 0.8rem; color: var(--muted); opacity: 0.7; } /* trust strip */ .hero__trust { border-top: 1px solid var(--border); padding-top: 28px; } .trust-label { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); opacity: 0.6; margin-bottom: 14px; } .trust-logos { display: flex; flex-wrap: wrap; gap: 6px 20px; } .trust-logos span { font-size: 0.8rem; color: var(--muted); opacity: 0.65; font-weight: 500; } /* photo */ .hero__photo { position: relative; } .hero__photo img { width: 100%; height: 520px; object-fit: cover; object-position: top center; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 0 0 1px var(--border), 0 32px 64px rgba(0,0,0,0.5), 0 0 0 4px var(--accent-lo); } /* ============================================================ SECTIONS (shared) ============================================================ */ .section { padding: 96px 0; } .section--alt { background: var(--surface2); } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head .label { margin-bottom: 16px; } .section-head h2 { margin-bottom: 16px; } .section-intro { font-size: 1rem; color: var(--muted); } /* ============================================================ PROBLEM — CARDS ============================================================ */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; transition: border-color var(--transition); } .card:hover { border-color: var(--accent-mid); } .card-num { display: block; font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--accent); margin-bottom: 20px; line-height: 1; } .card h3 { margin-bottom: 12px; font-size: 1.05rem; line-height: 1.35; } .card p { font-size: 0.9rem; } .callout { background: var(--accent-lo); border: 1px solid var(--accent-mid); border-radius: var(--radius); padding: 24px 32px; text-align: center; } .callout p { color: var(--text); font-size: 1rem; font-weight: 500; } /* ============================================================ SERVICES ============================================================ */ .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .service { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; transition: border-color var(--transition); } .service:hover { border-color: var(--accent-mid); } .service-icon { color: var(--accent); margin-bottom: 20px; } .service-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 10px; } .service h3 { margin-bottom: 14px; } .service p { font-size: 0.9rem; flex: 1; margin-bottom: 24px; } .service-deliverable { display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid var(--border); padding-top: 20px; margin-top: auto; color: var(--success); font-size: 0.82rem; font-weight: 500; } .service-deliverable svg { flex-shrink: 0; margin-top: 2px; color: var(--success); } /* ============================================================ PROOF — METRICS + PROJECTS ============================================================ */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 32px; } .metric { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; background: var(--surface); border-right: 1px solid var(--border); } .metric:last-child { border-right: none; } .metric-value { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; line-height: 1; } .metric-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 4px; } .metric-context { display: block; font-size: 0.72rem; color: var(--muted); } .projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .project { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: border-color var(--transition); } .project:hover { border-color: var(--accent-mid); } .project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .project-company { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; } .project-head h3 { font-size: 1rem; line-height: 1.3; } .project-type { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 4px; background: var(--accent-lo); color: var(--accent); white-space: nowrap; } .project > p { font-size: 0.875rem; margin-bottom: 20px; } .project-outcome { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.15); border-radius: 6px; margin-bottom: 14px; color: var(--success); font-size: 0.82rem; font-weight: 500; } .project-outcome svg { flex-shrink: 0; margin-top: 2px; color: var(--success); } .project-stack { font-size: 0.72rem; color: var(--muted); opacity: 0.7; } /* ============================================================ PROCESS — STEPS ============================================================ */ .steps { display: flex; flex-direction: column; gap: 16px; max-width: 780px; } .step { display: grid; grid-template-columns: 72px 1fr; gap: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 36px 36px 0; transition: border-color var(--transition); } .step:hover { border-color: var(--accent-mid); } .step-number { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--accent); line-height: 1; } .step-meta { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; } .step-meta h3 { font-size: 1.1rem; } .step-duration { font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .step-content > p { font-size: 0.9rem; margin-bottom: 16px; } .step-note { font-size: 0.8rem; color: var(--accent); padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--accent-lo); border-radius: 0 6px 6px 0; } /* ============================================================ ABOUT ============================================================ */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .about__text .label { margin-bottom: 16px; } .about__text h2 { margin-bottom: 24px; } .about__text p { margin-bottom: 18px; font-size: 0.95rem; } .about__close { font-size: 1rem !important; color: var(--text) !important; font-weight: 600; } .facts-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 16px; } .facts-box h4 { margin-bottom: 16px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags span { font-size: 0.75rem; font-weight: 500; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; } .checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; } .checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--muted); } .checklist li::before { content: ''; display: inline-block; width: 14px; height: 14px; min-width: 14px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23C8A951' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); margin-top: 3px; } /* ============================================================ CONTACT ============================================================ */ .contact { display: grid; grid-template-columns: 1fr 420px 420px; gap: 48px; align-items: start; } .contact__text .label { margin-bottom: 16px; } .contact__text h2 { margin-bottom: 20px; } .contact__text > p { margin-bottom: 36px; } .contact-details { display: flex; flex-direction: column; gap: 16px; } .contact-item { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--muted); } .contact-item svg { color: var(--accent); flex-shrink: 0; } .contact-item a { color: var(--text); font-weight: 500; } .contact-item a:hover { color: var(--accent); } .cta-card { background: linear-gradient(145deg, var(--surface) 0%, rgba(200,169,81,0.05) 100%); border: 1px solid var(--accent-mid); border-radius: var(--radius); padding: 40px 36px; box-shadow: 0 0 48px rgba(200,169,81,0.06); } .cta-card__label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 10px; } .cta-card h3 { font-size: 1.25rem; margin-bottom: 16px; } .cta-card__sub { font-size: 0.875rem; margin-bottom: 28px; } .cta-card .btn--large { margin-bottom: 16px; } .cta-card__note { font-size: 0.78rem; text-align: center; opacity: 0.6; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--border); padding: 32px 0; } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .footer__name { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--text); } .footer__role { font-size: 0.78rem; color: var(--muted); opacity: 0.7; } .footer__email { font-size: 0.78rem; color: var(--muted); } .footer__email:hover { color: var(--accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; gap: 48px; } .hero__photo { order: -1; max-width: 360px; } .hero__photo img { height: 380px; } .about { grid-template-columns: 1fr; gap: 40px; } .contact { grid-template-columns: 1fr; gap: 40px; } .contact__cta { max-width: 480px; } } @media (max-width: 860px) { .nav__links { display: none; } .nav__right .btn--small { display: none; } .nav__hamburger { display: flex; } .cards { grid-template-columns: 1fr; } .services { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(2, 1fr); } .metric { border-bottom: 1px solid var(--border); } .metric:nth-child(2) { border-right: none; } .metric:nth-child(3) { border-bottom: none; } .metric:last-child { border-bottom: none; } .projects { grid-template-columns: 1fr; } .step { grid-template-columns: 56px 1fr; } .step-number { font-size: 1.8rem; } .section { padding: 64px 0; } } @media (max-width: 560px) { h1 { font-size: 1.85rem; } h2 { font-size: 1.5rem; } .hero { padding: 80px 0 48px; } .metrics { grid-template-columns: repeat(2, 1fr); } .step { grid-template-columns: 1fr; padding: 28px; } .step-number { font-size: 1.5rem; } .cta-card { padding: 28px 24px; } .fit-cols { grid-template-columns: 1fr; } } /* ============================================================ HERO — PATTERN INTERRUPT ============================================================ */ .hero__interrupt { font-size: 0.875rem; color: var(--muted); font-style: italic; margin-bottom: 32px; padding-left: 16px; border-left: 2px solid var(--accent); line-height: 1.6; } /* ============================================================ ELICITATION BLOCK (Problem section) ============================================================ */ .elicitation { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 40px; margin-bottom: 48px; } .elicit-lead { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 20px; } .elicit-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .elicit-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; color: var(--muted); line-height: 1.6; } .elicit-list li::before { content: '→'; color: var(--accent); font-size: 0.85rem; flex-shrink: 0; margin-top: 1px; } .elicit-close { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0; } /* ============================================================ TIMING CALLOUT (Process section) ============================================================ */ .timing-callout { margin-top: 40px; padding: 24px 32px; border-left: 3px solid var(--accent); background: var(--accent-lo); border-radius: 0 var(--radius) var(--radius) 0; } .timing-callout p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; } .timing-callout strong { color: var(--text); font-weight: 600; } /* ============================================================ FIT SECTION ============================================================ */ .fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .fit-col { border-radius: var(--radius); padding: 32px; border: 1px solid var(--border); } .fit-col--yes { background: rgba(52, 211, 153, 0.04); border-color: rgba(52,211,153,0.2); } .fit-col--no { background: var(--surface); } .fit-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; } .fit-heading--yes { color: var(--success); } .fit-heading--no { color: var(--muted); } .fit-list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .fit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--muted); line-height: 1.6; } .fit-col--yes .fit-list li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; font-size: 0.8rem; margin-top: 2px; } .fit-col--no .fit-list li::before { content: '✕'; color: var(--muted); font-weight: 700; flex-shrink: 0; font-size: 0.8rem; margin-top: 2px; } /* ============================================================ LADDER CARD (Contact section — commitment step) ============================================================ */ .ladder-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; } .ladder-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px; } .ladder-card h3 { font-size: 1.1rem; margin-bottom: 12px; } .ladder-sub { font-size: 0.85rem; margin-bottom: 24px; } .ladder-form { display: flex; flex-direction: column; gap: 12px; } .form-row { display: flex; flex-direction: column; gap: 6px; } .form-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; font-family: var(--font-body); font-size: 0.875rem; color: var(--text); outline: none; transition: border-color var(--transition); } .form-input::placeholder { color: var(--muted); opacity: 0.6; } .form-input:focus { border-color: var(--accent); } .form-textarea { resize: vertical; min-height: 80px; } .form-hint { font-size: 0.75rem; color: var(--muted); opacity: 0.7; margin: 0; line-height: 1.4; } .form-submit { width: 100%; justify-content: center; margin-top: 4px; } /* ============================================================ RESPONSIVE — new sections ============================================================ */ @media (max-width: 1200px) { .contact { grid-template-columns: 1fr; gap: 32px; } .contact__cta, .contact__ladder { max-width: 480px; } } @media (max-width: 860px) { .elicitation { padding: 24px; } .fit-cols { grid-template-columns: 1fr; } }