/* =================================================================== TJ STUDIO — Premium Landing Page Stylesheet Numerology palette (Life Path 1 + Birth Number 9 => Sun & Mars): Red / Crimson / Gold / Orange =================================================================== */ :root { /* Numerology-based palette */ --red: #c1121f; --red-dark: #7a0c14; --crimson: #e5383b; --gold: #f9a826; --orange: #ff6b35; --gold-light: #ffd166; --ink: #150c0e; --ink-soft: #2b1a1d; --bg: #0e0708; --surface: #1b1013; --surface-2: #241416; --muted: #c9b8ba; --muted-2: #9a8688; --white: #fff8f0; --grad-primary: linear-gradient(135deg, var(--red) 0%, var(--crimson) 30%, var(--orange) 65%, var(--gold) 100%); --grad-primary-soft: linear-gradient(135deg, rgba(193, 18, 31, .15), rgba(249, 168, 38, .15)); --grad-text: linear-gradient(135deg, #ff8a5b, var(--gold-light)); --shadow-lg: 0 30px 60px -20px rgba(193, 18, 31, .35); --shadow-md: 0 15px 35px -10px rgba(0, 0, 0, .45); --shadow-sm: 0 6px 18px -6px rgba(0, 0, 0, .4); --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --container: 1180px; --transition: all .35s cubic-bezier(.25, .8, .25, 1); } /* ========================================================================= LIGHT THEME OVERRIDES Toggled by adding data-theme="light" to . Same numerology palette (red/crimson/gold/orange) is kept — only backgrounds/text/surfaces flip. ========================================================================= */ html[data-theme="light"] { --ink: #fff8f0; --ink-soft: #f3e6e2; --bg: #fdf8f5; --surface: #ffffff; --surface-2: #fbeee7; --muted: #5a4a48; --muted-2: #8a7573; --white: #1c1210; --grad-primary-soft: linear-gradient(135deg, rgba(193, 18, 31, .08), rgba(249, 168, 38, .1)); --shadow-lg: 0 30px 60px -20px rgba(193, 18, 31, .18); --shadow-md: 0 15px 35px -10px rgba(30, 10, 10, .12); --shadow-sm: 0 6px 18px -6px rgba(30, 10, 10, .1); } html[data-theme="light"] body { background: var(--bg); color: var(--white); } html[data-theme="light"] .navbar { background: rgba(253, 248, 245, .55); border-bottom: 1px solid rgba(30, 10, 10, .06); } html[data-theme="light"] .navbar.scrolled { background: rgba(253, 248, 245, .92); box-shadow: 0 10px 30px -14px rgba(30, 10, 10, .15); } html[data-theme="light"] .hero { background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(193, 18, 31, .10), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, rgba(249, 168, 38, .10), transparent 60%), var(--bg); } html[data-theme="light"] .hero::before { background-image: linear-gradient(rgba(30, 10, 10, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 10, 10, .035) 1px, transparent 1px); } html[data-theme="light"] .btn-primary { color: #fff8f0; } html[data-theme="light"] .hero-card, html[data-theme="light"] .service-card, html[data-theme="light"] .why-card, html[data-theme="light"] .contact-form-wrap, html[data-theme="light"] .contact-info, html[data-theme="light"] .floating-chip { background: linear-gradient(160deg, rgba(30, 10, 10, .03), rgba(30, 10, 10, .01)); border-color: rgba(30, 10, 10, .08); } html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group select, html[data-theme="light"] .form-group textarea { background: rgba(30, 10, 10, .03); border-color: rgba(30, 10, 10, .12); color: var(--white); } html[data-theme="light"] .process-step .num { background: var(--surface); border-color: rgba(193, 18, 31, .25); } html[data-theme="light"] .social-row a { background: rgba(30, 10, 10, .04); border-color: rgba(30, 10, 10, .1); } html[data-theme="light"] .growth-badge { background: rgba(249, 168, 38, .08) !important; border-color: rgba(249, 168, 38, .3) !important; } /* Theme toggle switch */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer; transition: var(--transition); flex-shrink: 0; position: relative; font-size: 1.05rem; } .theme-toggle:hover { border-color: rgba(249, 168, 38, .5); background: rgba(249, 168, 38, .1); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: var(--transition); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.4); color: var(--gold); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); color: var(--gold-light); } html[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); } html[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.4); } html[data-theme="light"] .theme-toggle { background: rgba(30, 10, 10, .04); border-color: rgba(30, 10, 10, .12); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; transition: background-color .4s ease, color .4s ease; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--white); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .font-display { font-family: 'Poppins', 'Inter', sans-serif; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } section { position: relative; } .section-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 50px; background: var(--grad-primary-soft); border: 1px solid rgba(249, 168, 38, .35); color: var(--gold-light); font-size: .78rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; } .section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; } .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; margin-bottom: 14px; line-height: 1.25; } .section-head p { color: var(--muted); font-size: 1.05rem; } .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ================= BUTTONS ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 32px; border-radius: 50px; font-weight: 600; font-size: .98rem; transition: var(--transition); white-space: nowrap; position: relative; z-index: 1; } .btn-primary { background: var(--grad-primary); color: #1a0a05; box-shadow: var(--shadow-lg); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 45px -12px rgba(249, 168, 38, .55); } .btn-outline { border: 1.5px solid rgba(249, 168, 38, .5); color: var(--white); background: rgba(255, 255, 255, .02); } .btn-outline:hover { background: rgba(249, 168, 38, .12); border-color: var(--gold); transform: translateY(-3px); } .btn-block { width: 100%; } .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none !important; } /* ================= NAVBAR ================= */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: var(--transition); background: rgba(14, 7, 8, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .05); } .navbar.scrolled { padding: 10px 0; background: rgba(14, 7, 8, .85); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; } .brand img { height: 44px; width: 44px; object-fit: contain; border-radius: 25%; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text small { font-size: .62rem; font-weight: 500; letter-spacing: 1.5px; color: var(--muted-2); text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 38px; } .nav-links a { font-size: .95rem; font-weight: 500; color: var(--muted); position: relative; transition: var(--transition); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--grad-primary); transition: var(--transition); } .nav-links a:hover { color: var(--white); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; z-index: 1100; } .nav-toggle span { width: 26px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); } /* ================= HERO ================= */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 140px 0 100px; position: relative; background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(193, 18, 31, .35), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, rgba(249, 168, 38, .22), transparent 60%), var(--bg); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black, transparent); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 50px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(249, 168, 38, .35); margin-bottom: 26px; font-size: .85rem; font-weight: 500; } .hero-badge .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-size: .8rem; } .hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.15; margin-bottom: 22px; letter-spacing: -1px; } .hero p.lead { color: var(--muted); font-size: 1.12rem; max-width: 520px; margin-bottom: 36px; } .hero-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 52px; } .hero-stats { display: flex; gap: 40px; flex-wrap: wrap; } .hero-stats .stat h3 { font-size: 1.9rem; font-weight: 700; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-stats .stat span { font-size: .82rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; } .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero-visual .glow-ring { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--grad-primary); filter: blur(90px); opacity: .35; animation: pulse 6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.12); opacity: .45; } } .hero-card { position: relative; z-index: 2; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-lg); padding: 44px; backdrop-filter: blur(10px); box-shadow: var(--shadow-md); width: 100%; max-width: 440px; } .hero-card img { width: 150px; margin: 0 auto 24px; filter: drop-shadow(0 20px 30px rgba(193, 18, 31, .4)); border-radius: 25%; } .hero-card .growth-badge { display: flex; align-items: center; gap: 12px; background: rgba(249, 168, 38, .1); border: 1px solid rgba(249, 168, 38, .3); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 22px; } .hero-card .growth-badge .icon { width: 42px; height: 42px; border-radius: 12px; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .hero-card .growth-badge strong { display: block; font-size: .95rem; } .hero-card .growth-badge span { font-size: .78rem; color: var(--muted); } .floating-chip { position: absolute; background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .08); padding: 12px 18px; border-radius: 14px; display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow-sm); animation: float 5s ease-in-out infinite; z-index: 3; } .floating-chip.chip-1 { top: 8%; left: -6%; animation-delay: 0s; } .floating-chip.chip-2 { bottom: 10%; right: -8%; animation-delay: 1.5s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* marquee logos strip */ .marquee-wrap { border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 26px 0; background: var(--surface); overflow: hidden; } .marquee-wrap p { text-align: center; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; } .marquee { display: flex; gap: 60px; white-space: nowrap; animation: scroll 22s linear infinite; width: max-content; } .marquee span { font-weight: 600; color: var(--muted); font-size: 1rem; opacity: .7; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ================= SERVICES ================= */ .services { padding: 120px 0; background: var(--bg); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .service-card { background: var(--surface); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--radius-lg); padding: 38px 32px; transition: var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-primary); transform: scaleX(0); transform-origin: left; transition: var(--transition); } .service-card:hover { transform: translateY(-8px); border-color: rgba(249, 168, 38, .35); box-shadow: var(--shadow-lg); } .service-card:hover::before { transform: scaleX(1); } .service-icon { width: 58px; height: 58px; border-radius: 16px; background: var(--grad-primary-soft); border: 1px solid rgba(249, 168, 38, .3); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 22px; } .service-card h3 { font-size: 1.2rem; margin-bottom: 12px; font-weight: 600; } .service-card p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; } .service-card .tag-list { display: flex; flex-wrap: wrap; gap: 8px; } .service-card .tag-list span { font-size: .72rem; padding: 4px 12px; border-radius: 50px; background: rgba(255, 255, 255, .04); color: var(--muted-2); border: 1px solid rgba(255, 255, 255, .06); } /* ================= WHY CHOOSE US ================= */ .why { padding: 120px 0; background: var(--surface); position: relative; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .why-card { text-align: center; padding: 34px 22px; border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); border: 1px solid rgba(255, 255, 255, .06); transition: var(--transition); } .why-card:hover { transform: translateY(-6px); border-color: rgba(249, 168, 38, .3); } .why-card .why-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 10px 25px -8px rgba(193, 18, 31, .5); } .why-card h4 { font-size: 1.02rem; margin-bottom: 10px; font-weight: 600; } .why-card p { color: var(--muted); font-size: .88rem; } /* ================= PROCESS ================= */ .process { padding: 120px 0; background: var(--bg); } .process-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; } .process-track::before { content: ''; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, rgba(249, 168, 38, .4), transparent); z-index: 0; } .process-step { text-align: center; position: relative; z-index: 1; } .process-step .num { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: var(--surface); border: 2px solid rgba(249, 168, 38, .35); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; font-family: 'Poppins', sans-serif; background-clip: padding-box; transition: var(--transition); } .process-step:hover .num { background: var(--grad-primary); border-color: transparent; color: #1a0a05; transform: scale(1.08); } .process-step h4 { font-size: 1rem; margin-bottom: 8px; font-weight: 600; } .process-step p { font-size: .85rem; color: var(--muted); padding: 0 8px; } /* ================= WHY NUMBER / BRAND STORY ================= */ .brand-story { padding: 120px 0; background: var(--surface); } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .story-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--grad-primary-soft); border: 1px solid rgba(249, 168, 38, .2); padding: 60px; display: flex; align-items: center; justify-content: center; } .story-visual img { width: 220px; filter: drop-shadow(0 25px 40px rgba(193, 18, 31, .5)); border-radius: 25%; } .story-content h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 20px; font-weight: 700; } .story-content p { color: var(--muted); margin-bottom: 18px; } .story-list { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } .story-list li { display: flex; gap: 14px; align-items: flex-start; } .story-list .check { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .75rem; margin-top: 2px; } /* ================= CONTACT ================= */ .contact { padding: 120px 0; background: var(--bg); } .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; } .contact-info { background: linear-gradient(160deg, rgba(193, 18, 31, .12), rgba(249, 168, 38, .06)); border: 1px solid rgba(249, 168, 38, .2); border-radius: var(--radius-lg); padding: 44px 36px; } .contact-info h3 { font-size: 1.5rem; margin-bottom: 14px; font-weight: 700; } .contact-info>p { color: var(--muted); margin-bottom: 34px; font-size: .95rem; } .contact-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; } .contact-item .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .contact-item strong { display: block; font-size: .95rem; margin-bottom: 3px; } .contact-item span, .contact-item a { color: var(--muted); font-size: .88rem; } .social-row { display: flex; gap: 12px; margin-top: 36px; } .social-row a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-row a:hover { background: var(--grad-primary); border-color: transparent; transform: translateY(-4px); } .contact-form-wrap { background: var(--surface); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radius-lg); padding: 44px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { margin-bottom: 22px; position: relative; } .form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; color: var(--muted); } .form-group label .req { color: var(--orange); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); color: var(--white); font-size: .95rem; font-family: inherit; transition: var(--transition); } .form-group select { cursor: pointer; } /* Fix native dropdown option contrast (browser renders options with its own popup, not our custom CSS) */ .form-group select option { background-color: var(--surface); color: var(--white); padding: 10px; } .form-group textarea { resize: vertical; min-height: 130px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); background: rgba(249, 168, 38, .05); box-shadow: 0 0 0 3px rgba(249, 168, 38, .12); } .form-group select { cursor: pointer; } .form-group.error input, .form-group.error select, .form-group.error textarea { border-color: var(--crimson); } .error-msg { color: var(--crimson); font-size: .78rem; margin-top: 6px; display: none; } .form-group.error .error-msg { display: block; } .form-status { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-sm); font-size: .9rem; display: none; align-items: center; gap: 10px; } .form-status.show { display: flex; } .form-status.success { background: rgba(50, 168, 82, .12); border: 1px solid rgba(50, 168, 82, .4); color: #8ee6a8; } .form-status.error { background: rgba(229, 56, 59, .12); border: 1px solid rgba(229, 56, 59, .4); color: #ff9b9d; } /* honeypot field - hidden from humans */ .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } /* ================= FOOTER ================= */ .footer { background: var(--surface); border-top: 1px solid rgba(255, 255, 255, .06); padding: 70px 0 26px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; } .footer-brand .brand { margin-bottom: 16px; } .footer-brand p { color: var(--muted); font-size: .9rem; max-width: 280px; } .footer h5 { font-size: .95rem; margin-bottom: 20px; font-weight: 600; } .footer ul li { margin-bottom: 12px; } .footer ul li a { color: var(--muted); font-size: .88rem; transition: var(--transition); } .footer ul li a:hover { color: var(--gold-light); padding-left: 4px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--muted-2); font-size: .82rem; } /* ================= SCROLL REVEAL ================= */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ================= BACK TO TOP ================= */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 50px; height: 50px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition); z-index: 900; color: #1a0a05; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* ================= RESPONSIVE ================= */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; margin-bottom: 20px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .process-track { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; } .process-track::before { display: none; } .story-grid { grid-template-columns: 1fr; } .story-visual { order: -1; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links, .nav-cta .btn-outline { display: none; } .nav-toggle { display: flex; } .nav-links.mobile-open { display: flex; position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px); background: var(--surface); flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 40px; box-shadow: -10px 0 40px rgba(0, 0, 0, .5); z-index: 1050; } .hero { padding: 120px 0 70px; text-align: center; } .hero-actions { justify-content: center; } .hero-stats { justify-content: center; } .hero p.lead { margin-left: auto; margin-right: auto; } .hero-card { margin: 0 auto; } .floating-chip { display: none; } .services-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr 1fr; } .process-track { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { justify-content: center; text-align: center; } .contact-form-wrap { padding: 30px 22px; } .contact-info { padding: 32px 24px; } } @media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } .process-track { grid-template-columns: 1fr; } .hero-stats { gap: 24px; } .section-head { margin-bottom: 36px; } .services, .why, .process, .brand-story, .contact { padding: 80px 0; } } /* Overlay for mobile menu */ .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 1040; } .nav-overlay.show { opacity: 1; visibility: visible; }