/* ====================================================================== NEXUS AI DEVELOPER — Agency Website Stylesheet ====================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } svg.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.14em; } /* ====================================================================== DESIGN SYSTEM — the single source of truth for every page ---------------------------------------------------------------------- Every rule below this block consumes these tokens instead of raw values. Change a token here and the whole site follows. 1. Colour roles 4. Spacing scale 2. Typography scale 5. Buttons (primary · secondary · tertiary) 3. Radius scale 6. Focus + accessibility helpers ====================================================================== */ :root{ /* --- 1. COLOUR ------------------------------------------------------ */ /* Surfaces */ --white:#ffffff; --off-white:#f7f5f2; --paper:#fbfaf8; --charcoal:#111110; --charcoal-2:#181816; --charcoal-soft:#232320; --ink:#14140f; /* Text — the ONLY text colours used on the site (contrast measured on --off-white / --ink) */ --text:#14140f; /* headings + primary text on light surfaces */ --text-body:#4d4d49; /* running copy on light surfaces 7.8:1 */ --text-muted:#6a6a65; /* captions, meta, small print 5.0:1 */ --text-accent:#c93c0a; /* brand-orange TEXT on light surfaces 4.7:1 */ --text-inverse:#ffffff; /* headings + primary text on dark surfaces */ --text-inverse-muted:rgba(255,255,255,0.74); /* copy on dark surfaces 9.8:1 */ --text-inverse-accent:#ff7a45; /* orange text on dark surfaces 7.1:1 */ /* Brand accent — fills, icons, borders, decoration (not for small text on light surfaces) */ --orange:#ff5a1f; --orange-2:#ff7a45; --orange-dark:#e2470f; --orange-soft:rgba(255,90,31,0.1); --orange-tint:#fff1ea; /* solid tint of the accent: selected rows, callouts */ /* Feedback text */ --danger:#c62f28; --danger-on-dark:#ff8a82; --success:#167a44; /* Lines / borders */ --line:rgba(20,20,15,0.1); --line-strong:rgba(20,20,15,0.5); /* outlines of buttons + form fields (3.5:1 on white) */ --line-light:rgba(255,255,255,0.14); --line-light-strong:rgba(255,255,255,0.55); --gray-300:#c9c7c1; /* decorative only (never for text) */ /* Legacy aliases — older rules still resolve, but they map onto the roles above */ --gray-700:var(--text-body); --gray-500:var(--text-muted); /* --- 2. TYPOGRAPHY -------------------------------------------------- */ --font-display:'Fraunces', 'Georgia', serif; --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Body scale (rem, so it follows the user's browser font-size setting) */ --text-xs:0.8125rem; /* 13px labels, captions, badges, meta — the smallest size allowed */ --text-sm:0.9375rem; /* 15px secondary copy, card text, nav, buttons, form helpers */ --text-base:1rem; /* 16px body copy */ --text-lg:1.125rem; /* 18px lead paragraphs, compact card titles */ /* Heading scale (fluid) */ --fs-h3:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20–24 card + list titles */ --fs-h3-lg:clamp(1.5rem, 1.2rem + 1.1vw, 2rem); /* 24–32 panel + feature titles */ --fs-h2:clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); /* 28–44 section titles (heading-lg) */ --fs-h2-xl:clamp(2rem, 1.3rem + 2.8vw, 3.5rem); /* 32–56 major titles (heading-xl) */ --fs-h1:clamp(2.25rem, 1.35rem + 3.6vw, 4rem); /* 36–64 page / hero / CTA titles */ --lh-tight:1.1; --lh-body:1.7; /* --- 3. RADIUS ------------------------------------------------------ */ /* sm: inputs, chips, small icon tiles · md: cards + grid tiles · lg: feature panels, forms, dialogs pill: buttons + tags · 50%: circles (avatars, icon buttons) */ --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px; /* --- 4. SPACING ----------------------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --section-y:clamp(64px, 3rem + 5vw, 120px); /* vertical padding of every page section */ --head-gap:clamp(32px, 2rem + 2vw, 56px); /* gap between a section heading and its content */ /* --- Layout + motion ------------------------------------------------ */ --container:1360px; --gutter:clamp(20px, 5vw, 64px); --ease:cubic-bezier(.16,.84,.44,1); --ease-2:cubic-bezier(.65,0,.35,1); /* --- 6. FOCUS ------------------------------------------------------- */ --focus-ring:var(--ink); } /* On dark surfaces the focus ring flips to white so it stays visible */ :is(.solutions, .ai-section, .impact, .cta-section, .subscribe, .cinema, .footer, .mobile-menu, .pricing-card.featured, .navbar.dark-section){ --focus-ring:#ffffff; } body{ font-family: var(--font-body); font-size: var(--text-base); background: var(--paper); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Focus + accessibility helpers ---------- */ :focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 3px; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:fixed; top:var(--space-3); left:var(--space-3); z-index:10001; padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--ink); color: var(--text-inverse); font-weight:600; font-size: var(--text-sm); transform: translateY(-250%); transition: transform .2s var(--ease); } .skip-link:focus{ transform:none; } /* ---------- Layout helpers ---------- */ .section-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section-inner-narrow{ max-width:760px; margin:0 auto; display:block; } section{ position: relative; } /* Section label ("eyebrow"): sentence case, one size, one colour role */ .label{ display:inline-block; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--text-accent); margin-bottom: var(--space-3); } .label-light{ color: var(--text-inverse-accent); } .section-head{ max-width: 760px; margin-bottom: var(--head-gap); } .section-head-center{ max-width: 720px; margin-left:auto; margin-right:auto; text-align:center; } .section-head-row{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-6); max-width:900px; margin:0 auto var(--head-gap); } h1,h2,h3{ font-family: var(--font-display); font-weight: 500; letter-spacing:-0.01em; line-height:var(--lh-tight); } .heading-xl{ font-size: var(--fs-h2-xl); } .heading-lg{ font-size: var(--fs-h2); } .heading-light{ color: var(--text-inverse); } /* Accent words inside headings: --orange-dark on light surfaces (>=3.7:1, fine for large text), brand --orange on dark */ .accent{ color: var(--orange-dark); font-style: normal; } .accent-italic{ color: var(--orange-dark); font-style: italic; font-weight:500; } :is(.solutions, .ai-section, .impact, .cta-section, .subscribe, .cinema, .footer, .heading-light) :is(.accent, .accent-italic){ color: var(--orange); } p{ color: var(--text-body); line-height: var(--lh-body); font-size: var(--text-base); } .heading-light + p, .ai-desc{ color: var(--text-inverse-muted); } /* Tertiary action: inline / low-emphasis link with arrow */ .text-link{ display:inline-flex; align-items:center; gap:var(--space-2); font-weight:600; color:var(--text); border-bottom:1.5px solid currentColor; padding-bottom:var(--space-1); transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease); } .text-link:hover{ color:var(--text-accent); gap:var(--space-3); } .text-link svg{ transition: transform .3s var(--ease); } .text-link:hover svg{ transform: translateX(2px); } /* ---------- 5. BUTTONS ---------- One system, three tiers — the same on every page: .btn.btn-primary PRIMARY the main action of a section (brand-orange fill, dark label: 5.9:1) .btn.btn-outline SECONDARY supporting action beside a primary (strong outline, fills on hover) .text-link TERTIARY low-emphasis inline navigation Sizes: default 48px · .btn-lg 56px (hero + closing CTAs) · .btn-nav 44px (header). Every size meets the 44px touch-target guideline; labels are never smaller than 15px. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding: 0 var(--space-5); border:1.5px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight:600; font-size: var(--text-sm); line-height:1.2; white-space:nowrap; text-align:center; position:relative; overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn svg{ transition: transform .35s var(--ease); flex-shrink:0; } .btn-primary, .btn-nav{ background: var(--orange); border-color: var(--orange); color: var(--text); } .btn-primary:hover, .btn-nav:hover{ background: var(--orange-2); border-color: var(--orange-2); box-shadow: 0 14px 30px -12px rgba(255,90,31,0.6); transform: translateY(-2px); } .btn-primary:hover svg{ transform: translateX(4px); } .btn-primary:active, .btn-nav:active{ background: var(--orange-dark); border-color: var(--orange-dark); box-shadow:none; transform:none; } .btn-outline{ background: transparent; border-color: var(--line-strong); color: var(--text); } .btn-outline:hover{ background: var(--ink); border-color: var(--text); color: var(--text-inverse); transform: translateY(-2px); } .btn-outline:active{ transform:none; } .btn-lg{ min-height:56px; padding: 0 var(--space-6); font-size: var(--text-base); } .btn-block{ width:100%; } /* Header CTA: the same primary button, compact */ .btn-nav{ min-height:44px; padding: 0 var(--space-4) 0 var(--space-5); } .btn-nav:hover svg{ transform: translate(3px,-3px); } /* Secondary buttons on dark surfaces */ :is(.solutions, .ai-section, .impact, .cta-section, .subscribe, .cinema, .footer, .pricing-card.featured) .btn-outline{ border-color: var(--line-light-strong); color: var(--text-inverse); } :is(.solutions, .ai-section, .impact, .cta-section, .subscribe, .cinema, .footer, .pricing-card.featured) .btn-outline:hover{ background: var(--white); border-color: var(--text-inverse); color: var(--text); } /* ---------- Reveal animation primitives ---------- */ .reveal-up, .reveal-line, .reveal-mask{ opacity:0; } .reveal-up{ transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-up.in-view{ opacity:1; transform:none; } .reveal-line{ display:inline-block; transform: translateY(110%); transition: transform .9s var(--ease), opacity .9s var(--ease); } .hero-title .line{ display:block; overflow:hidden; } .eyebrow .reveal-line{ transform: translateY(60%); } .reveal-line.in-view{ transform: translateY(0); opacity:1; } /* Note: a self-applied clip-path (rather than opacity/transform) was tried here originally, but a clipped target's own measured intersection area is zero, so IntersectionObserver can never report it as visible — the reveal condition could never be met. Opacity+transform doesn't have that problem, so it's used for the container while the inner image still gets its own clip-feeling zoom-settle. */ .reveal-mask{ position:relative; opacity:0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal-mask.in-view{ opacity:1; transform:none; } .reveal-mask img{ transform: scale(1.15); transition: transform 1.2s var(--ease-2); } .reveal-mask.in-view img{ transform: scale(1); } [data-stagger] .reveal-up:nth-child(1){transition-delay:.05s} [data-stagger] .reveal-up:nth-child(2){transition-delay:.15s} [data-stagger] .reveal-up:nth-child(3){transition-delay:.25s} [data-stagger] .reveal-up:nth-child(4){transition-delay:.35s} /* ---------- Custom cursor ---------- */ .cursor-dot{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background: var(--orange); pointer-events:none; z-index:9999; mix-blend-mode: normal; transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s; opacity:0; } .cursor-dot.active{ opacity:1; } .cursor-dot.grow{ width:36px; height:36px; background: rgba(255,90,31,0.25); border:1.5px solid var(--orange); } @media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } } /* ---------- Preloader ---------- */ .preloader{ position:fixed; inset:0; z-index:10000; background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition: opacity .6s var(--ease), visibility .6s; } .preloader.done{ opacity:0; visibility:hidden; } .preloader-mark{ font-family:var(--font-display); font-size:var(--fs-h3-lg); color: var(--text-inverse); letter-spacing:0.02em; } .preloader-mark span{ color:var(--orange); } .preloader-bar{ width:180px; height:2px; background:rgba(255,255,255,0.15); border-radius:var(--radius-pill); overflow:hidden; } .preloader-bar span{ display:block; height:100%; width:0%; background:var(--orange); transition: width .3s var(--ease); } /* ---------- Navbar ---------- */ .navbar{ position:fixed; top:0; left:0; right:0; z-index:900; padding: 22px 0; transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } .navbar .nav-inner{ max-width: var(--container); margin:0 auto; padding: 0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:14px; } .navbar.scrolled{ padding: 12px 0; background: rgba(251,250,248,0.78); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--line); } .navbar.dark-section .nav-link{ color: var(--text-inverse); } .navbar.dark-section.scrolled{ background: rgba(17,17,16,0.72); box-shadow:0 1px 0 var(--line-light); } .logo{ display:flex; align-items:center; z-index:2; } .logo-img{ height:32px; width:auto; display:block; } .logo-img-light{ display:none; } /* The mobile menu overlay is dark; when it opens over a transparent (unscrolled), non-dark-section navbar, the logo needs to flip light so it stays readable. */ .navbar.dark-section .logo-img-dark, .navbar.menu-open:not(.scrolled):not(.dark-section) .logo-img-dark{ display:none; } .navbar.dark-section .logo-img-light, .navbar.menu-open:not(.scrolled):not(.dark-section) .logo-img-light{ display:block; } .nav-links{ display:flex; align-items:center; gap:2px; background: rgba(20,20,15,0.04); padding:5px; border-radius: var(--radius-pill); } .nav-link{ position:relative; padding:10px 14px; font-size: var(--text-sm); font-weight:500; border-radius: var(--radius-pill); white-space:nowrap; color: var(--text-body); transition: color .3s var(--ease); } .nav-link::after{ content:''; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:var(--orange); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease); } .nav-link:hover{ color: var(--text); } .nav-link.active{ color: var(--text); font-weight:600; } .nav-link.active::after{ transform: scaleX(1); } .navbar.dark-section .nav-link.active, .navbar.dark-section .nav-link:hover{ color: var(--text-inverse); } .nav-actions{ display:flex; align-items:center; gap:10px; } .nav-toggle{ display:none; position:relative; width:44px; height:44px; align-items:center; justify-content:center; z-index:860; } .nav-toggle svg{ position:absolute; font-size:20px; transition: opacity .3s var(--ease), transform .3s var(--ease); } .nav-toggle .icon-close{ opacity:0; transform: rotate(-90deg); } .nav-toggle.open .icon-open{ opacity:0; transform: rotate(90deg); } .nav-toggle.open .icon-close{ opacity:1; transform: rotate(0); } .nav-toggle.open{ color: var(--text-inverse); } .mobile-menu{ position:fixed; inset:0; top:0; background: var(--ink); z-index:850; display:flex; flex-direction:column; justify-content:space-between; padding: 100px var(--gutter) 40px; clip-path: circle(2% at calc(100% - 40px) 40px); transition: clip-path .7s var(--ease-2), visibility 0s linear .7s; visibility:hidden; overflow-y:auto; } .mobile-menu.open{ clip-path: circle(150% at calc(100% - 40px) 40px); visibility:visible; transition: clip-path .7s var(--ease-2), visibility 0s linear 0s; } .mobile-links{ display:flex; flex-direction:column; gap:0; } .mobile-links a{ display:flex; align-items:baseline; gap:var(--space-4); font-family:var(--font-display); font-size: var(--fs-h3-lg); color: var(--text-inverse); padding: var(--space-3) 0; border-bottom:1px solid var(--line-light); opacity:0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s; } .mobile-menu.open .mobile-links a{ opacity:1; transform:none; } .mobile-menu.open .mobile-links a:nth-child(1){transition-delay:.05s} .mobile-menu.open .mobile-links a:nth-child(2){transition-delay:.08s} .mobile-menu.open .mobile-links a:nth-child(3){transition-delay:.11s} .mobile-menu.open .mobile-links a:nth-child(4){transition-delay:.14s} .mobile-menu.open .mobile-links a:nth-child(5){transition-delay:.17s} .mobile-menu.open .mobile-links a:nth-child(6){transition-delay:.2s} .mobile-menu.open .mobile-links a:nth-child(7){transition-delay:.23s} .mobile-menu.open .mobile-links a:nth-child(8){transition-delay:.26s} .mobile-menu.open .mobile-links a:nth-child(9){transition-delay:.29s} .mobile-menu.open .mobile-links a:nth-child(10){transition-delay:.32s} .mobile-menu.open .mobile-links a:nth-child(11){transition-delay:.35s} .mobile-menu.open .mobile-links a:nth-child(12){transition-delay:.38s} .mobile-menu.open .mobile-links a:nth-child(13){transition-delay:.41s} .mobile-links a span{ font-size:var(--text-xs); color:var(--text-inverse-accent); font-family:var(--font-body); flex-shrink:0; } .mobile-links a:hover, .mobile-links a.active{ color: var(--text-inverse-accent); } .mobile-menu-footer{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 20px; color: var(--text-inverse); flex-shrink:0; padding-top:24px; border-top:1px solid var(--line-light); } .mobile-menu-contact{ display:flex; flex-direction:column; gap:10px; flex:1 1 200px; min-width:0; } .mobile-menu-contact-item{ display:flex; align-items:center; gap:10px; color: var(--text-inverse-muted); font-size:var(--text-sm); transition: color .3s var(--ease); } .mobile-menu-contact-item span{ overflow-wrap:anywhere; min-width:0; } .mobile-menu-contact-item:hover{ color: var(--text-inverse-accent); } .mobile-menu-contact-item svg{ color:var(--orange); font-size:var(--text-sm); flex-shrink:0; transition: transform .3s var(--ease); } .mobile-menu-contact-item:hover svg{ transform: scale(1.15) translateX(2px); } .mobile-social{ display:flex; gap:12px; flex-shrink:0; } .mobile-social a{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-light-strong); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); } .mobile-social svg{ font-size:var(--text-base); color: var(--text-inverse); transition: transform .3s var(--ease); } .mobile-social a:hover{ background: var(--orange); border-color: var(--orange); transform: translateY(-2px); } .mobile-social a:hover svg{ transform: scale(1.15) rotate(-8deg); } /* ======================= HERO ======================= */ .hero{ min-height: 100vh; display:flex; align-items:center; padding: 150px 0 90px; position:relative; background: linear-gradient(180deg, var(--paper), var(--white)); } .hero-bg-grid{ position:absolute; inset:0; z-index:0; opacity:0.5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 90%); } .hero-inner{ position:relative; z-index:1; max-width: 1440px; margin:0 auto; padding:0 clamp(20px, 3.5vw, 48px); display:grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px,5vw,70px); align-items:center; } .eyebrow{ font-size:var(--text-sm); font-weight:600; letter-spacing:0.02em; color:var(--text-muted); margin-bottom:var(--space-5); display:flex; gap:var(--space-2) 10px; flex-wrap:wrap; } .eyebrow i{ font-style:normal; color: var(--orange); } .hero-title{ font-size: var(--fs-h1); margin-bottom:var(--space-5); } .hero-title em{ font-style:italic; } .hero-desc{ max-width:540px; font-size:var(--text-lg); margin-bottom:var(--space-6); } .hero-actions{ display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-7); } .hero-meta{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; } .hero-meta-item{ display:flex; flex-direction:column; } .hero-meta-item strong{ font-family:var(--font-display); font-size:var(--fs-h3); } .hero-meta-item span{ font-size:var(--text-sm); color:var(--text-muted); } .hero-meta-divider{ width:1px; height:32px; background:var(--line); } .hero-visual{ position:relative; height: clamp(420px, 56vw, 620px); } .hero-visual-frame{ position:relative; width:100%; height:100%; } .hero-shape{ position:absolute; inset:-8% -6% -6% 6%; border-radius:var(--radius-lg); background: radial-gradient(circle at 30% 20%, var(--orange-2), transparent 60%), var(--ink); opacity:0.94; z-index:0; } .hero-media{ position:absolute; border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 30px 70px -20px rgba(20,20,15,0.35); } .hero-media img{ width:100%; height:100%; object-fit:cover; } .hero-media-main{ inset: 4% 12% 4% 0; z-index:1; } .media-glare{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,0.22), transparent 40%); } .hero-media-float-1{ width: 38%; aspect-ratio: 3/4; right:-6%; bottom:-8%; z-index:2; border:6px solid var(--white); } .hero-card{ position:absolute; display:flex; align-items:center; gap:var(--space-3); background:var(--white); padding:14px 18px; border-radius: var(--radius-md); box-shadow: 0 20px 40px -14px rgba(20,20,15,0.28); z-index:3; } .hero-card-stat{ top: 8%; left:-8%; } .hero-card-icon{ width:36px; height:36px; border-radius:var(--radius-sm); background: var(--orange-soft); color:var(--text-accent); display:flex; align-items:center; justify-content:center; font-size:18px; } .hero-card-stat strong{ display:block; font-family:var(--font-display); font-size:var(--text-lg); } .hero-card-stat span{ font-size:var(--text-xs); color:var(--text-muted); } .hero-card-tag{ bottom: 4%; left: -4%; font-size:var(--text-sm); font-weight:600; } .hero-card-tag .dot{ width:8px; height:8px; border-radius:50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); } .float-anim{ animation: floatY 5s ease-in-out infinite; } .float-anim-2{ animation: floatY 6s ease-in-out infinite; animation-delay: .4s; } .float-anim-3{ animation: floatY 5.5s ease-in-out infinite; animation-delay: 1s; } @keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} } .scroll-indicator{ position:absolute; bottom: 30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:var(--space-2); color:var(--text-muted); font-size:var(--text-xs); letter-spacing:0.02em; z-index:2; } .scroll-indicator svg{ font-size:24px; color: var(--text); animation: scrollBob 2.2s ease-in-out infinite; transition: color .3s var(--ease); } .scroll-indicator:hover svg{ animation-play-state: paused; color: var(--orange); transform: translateY(6px); } @keyframes scrollBob{ 0%,100%{ transform:translateY(0); opacity:1;} 50%{ transform:translateY(6px); opacity:.5;} } /* ======================= PAGE HEADER (subpage banner) ======================= */ .page-header{ position:relative; padding: 190px 0 90px; text-align:center; background: var(--paper); overflow:hidden; } .page-header-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(20,20,15,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,15,0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 20%, black, transparent 70%); } .page-header .section-inner{ position:relative; z-index:1; max-width:760px; } .page-header-title{ font-size: var(--fs-h1); margin: var(--space-4) 0 var(--space-4); } .page-header-desc{ font-size:var(--text-lg); max-width:600px; margin:0 auto; } .breadcrumb{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--text-muted); margin-bottom:var(--space-5); flex-wrap:wrap; } .breadcrumb a{ color:var(--text-muted); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:color .3s var(--ease), text-decoration-color .3s var(--ease); } .breadcrumb a:hover{ color:var(--text-accent); text-decoration-color:currentColor; } .breadcrumb .sep{ color:var(--text-muted); opacity:.6; } .breadcrumb .current{ color:var(--text); font-weight:600; } /* ======================= SERVICE DETAIL ======================= */ .service-full{ padding: var(--section-y) 0; background:var(--white); } .service-full-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:start; } .service-full-media{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.6; position:sticky; top:120px; } .service-full-media img{ width:100%; height:100%; object-fit:cover; } .service-full-text .label{ margin-bottom:var(--space-3); } .service-full-text h2{ margin-bottom:var(--space-4); } .service-full-text p{ margin-bottom:var(--space-4); } .service-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4) var(--space-5); margin-top:var(--space-6); margin-bottom:var(--space-5); } .service-features li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-base); font-weight:500; color:var(--text); } .service-features svg{ color:var(--orange); flex-shrink:0; margin-top:4px; } /* Case-study project meta (client / timeline / category / result) */ .case-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); margin:var(--space-2) 0 var(--space-6); padding:var(--space-5); background:var(--off-white); border-radius:var(--radius-md); } .case-meta-item{ display:flex; flex-direction:column; gap:var(--space-1); } .case-meta-item strong{ font-size:var(--text-xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); } .case-meta-item span{ font-size:var(--text-base); font-weight:600; color:var(--text); } .case-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); } /* ======================= ARTICLE DETAIL ======================= */ .article-meta-row{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-sm); color:var(--text-muted); margin-top:var(--space-3); } .article-meta-row .dot{ width:4px; height:4px; border-radius:50%; background:var(--text-muted); opacity:.6; flex-shrink:0; } .article-hero{ padding: 0 0 60px; background:var(--white); } .article-hero-img{ max-width:900px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; } .article-hero-img img{ width:100%; height:100%; object-fit:cover; } .article-section{ padding: 0 0 var(--section-y); background:var(--white); } .article-body{ max-width:720px; margin:0 auto; } .article-body h2{ font-size: var(--fs-h3-lg); margin:var(--space-7) 0 var(--space-4); } .article-body h2:first-child{ margin-top:0; } .article-body p{ margin-bottom:var(--space-5); font-size:var(--text-lg); line-height:1.75; color:var(--text-body); } .article-body ul{ margin: 0 0 var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); } .article-body ul li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-lg); line-height:1.6; color:var(--text-body); } .article-body ul li svg{ color:var(--orange); flex-shrink:0; margin-top:6px; } .article-share{ max-width:720px; margin:var(--space-7) auto 0; padding-top:var(--space-5); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); } .article-share-label{ font-size:var(--text-sm); font-weight:600; color:var(--text-muted); } /* ======================= LEGAL PAGES ======================= */ .legal-section{ padding: 0 0 var(--section-y); background:var(--white); } .legal-updated{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--text-muted); margin-top:var(--space-4); } .legal-updated svg{ color:var(--orange); } .legal-layout{ display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start; max-width:1000px; margin:0 auto; } .legal-toc{ position:sticky; top:110px; display:flex; flex-direction:column; gap:3px; } .legal-toc-label{ font-size:var(--text-sm); font-weight:600; color:var(--text); margin-bottom:var(--space-3); padding:0 14px; } .legal-toc a{ padding:10px 14px; border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--text-body); border-left:2px solid transparent; transition: all .25s var(--ease); line-height:1.4; } .legal-toc a:hover{ color:var(--text); background:var(--off-white); } .legal-toc a.active{ color:var(--text-accent); background:var(--orange-soft); border-left-color:var(--orange); font-weight:600; } .legal-content h2{ font-size: var(--fs-h3); margin:var(--space-7) 0 var(--space-3); scroll-margin-top:110px; } .legal-content h2:first-child{ margin-top:0; } .legal-content p{ margin-bottom:var(--space-4); font-size:var(--text-base); line-height:1.8; color:var(--text-body); } .legal-content ul{ margin: 0 0 20px; display:flex; flex-direction:column; gap:10px; } .legal-content ul li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-base); line-height:1.6; color:var(--text-body); } .legal-content ul li svg{ color:var(--orange); flex-shrink:0; margin-top:5px; width:16px; height:16px; } .legal-content strong{ color:var(--text); } @media (max-width: 900px){ .legal-layout{ grid-template-columns:1fr; gap:8px; } .legal-toc{ position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; } .legal-toc-label{ display:none; } .legal-toc a{ white-space:nowrap; flex-shrink:0; } } /* ======================= PROJECT INQUIRY FORM ======================= */ .project-section{ padding: 0 0 var(--section-y); background: var(--white); } .project-layout{ max-width: 760px; margin: 0 auto; } .project-intro{ text-align:center; max-width:600px; margin: 0 auto 48px; } .project-form-card{ background: var(--white); border-radius: var(--radius-lg); padding: clamp(28px,4.5vw,48px); box-shadow: 0 30px 70px -35px rgba(20,20,15,0.25); border: 1.5px solid var(--line); } .project-form fieldset{ border:none; padding:0; margin:0 0 30px; } .project-form legend{ font-size:var(--text-base); font-weight:700; color:var(--text); margin-bottom:var(--space-4); padding:0; } /* WhatsApp opt-in: one card, ticked by default, the visitor can untick it */ .wa-optin{ position:relative; display:flex; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-5); padding:var(--space-4) var(--space-5); border:1.5px solid var(--line-strong); border-radius:var(--radius-md); background:var(--paper); cursor:pointer; transition: border-color .25s var(--ease), background .25s var(--ease); } .wa-optin input{ position:absolute; opacity:0; width:0; height:0; } .wa-optin-box{ flex-shrink:0; width:26px; height:26px; margin-top:1px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--white); color:transparent; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .wa-optin input:checked ~ .wa-optin-box{ background:var(--orange); border-color:var(--orange); color:var(--ink); } .wa-optin:has(input:checked){ border-color:var(--orange); background:var(--orange-tint); } .wa-optin input:focus-visible ~ .wa-optin-box{ outline:3px solid var(--focus-ring); outline-offset:3px; } .wa-optin-text strong{ display:block; font-size:var(--text-base); color:var(--text); } .wa-optin-text span{ display:block; margin-top:2px; font-size:var(--text-sm); line-height:1.5; color:var(--text-body); } .wa-optin-logo{ flex-shrink:0; margin-left:auto; font-size:26px; color:var(--text-accent); } .file-upload-group{ margin-bottom:22px; } .file-upload-control{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .file-upload-control input[type="file"]{ position:absolute; opacity:0; width:0.1px; height:0.1px; } .file-upload-control input[type="file"]:focus-visible + .file-upload-btn, .file-upload-control:focus-within .file-upload-btn{ outline:3px solid var(--focus-ring); outline-offset:3px; } .file-upload-btn{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0 var(--space-5); border-radius:var(--radius-pill); border:1.5px solid var(--line-strong); background:var(--paper); font-size:var(--text-sm); font-weight:600; color:var(--text); cursor:pointer; transition: all .25s var(--ease); flex-shrink:0; } .file-upload-btn:hover{ background:var(--ink); border-color: var(--text); color:var(--text-inverse); } .file-upload-btn svg{ color:var(--text-accent); } .file-upload-btn:hover svg{ color:var(--text-inverse-accent); } .file-upload-name{ font-size:var(--text-sm); color: var(--text-muted); word-break:break-all; } .file-upload-hint{ font-size:var(--text-sm); color: var(--text-muted); margin-top:var(--space-2); } .file-upload-group.error .file-upload-btn{ border-color:var(--danger); } .project-form-note{ font-size:var(--text-sm); color: var(--text-muted); text-align:center; margin-top:var(--space-4); } /* Success state */ .project-success{ display:none; text-align:center; padding: 30px 10px 10px; } .project-success.show{ display:block; } .project-success-icon{ width:76px; height:76px; border-radius:50%; background:var(--orange-soft); color:var(--text-accent); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-5); font-size:34px; animation: success-pop .5s var(--ease); } .project-success-icon svg{ width:34px; height:34px; } .project-success h2, .project-success h3{ font-size: var(--fs-h3-lg); margin-bottom:var(--space-3); } .project-success p{ color:var(--text-body); font-size:var(--text-base); line-height:1.7; max-width:460px; margin:0 auto var(--space-6); } .project-success-actions{ display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; } .project-success .project-success-wa{ max-width:520px; margin:0 auto var(--space-6); padding:var(--space-5); border:1px solid rgba(255,90,31,0.3); border-radius:var(--radius-md); background:var(--orange-tint); } .project-success .project-success-wa p{ max-width:none; margin:0 0 var(--space-4); font-size:var(--text-base); } .project-success-wa-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-4) var(--space-5); } @keyframes success-pop{ 0%{ transform:scale(0.6); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } } @media (max-width: 640px){ .file-upload-control{ flex-direction:column; align-items:flex-start; } } /* ======================= PRICING / PACKAGES ======================= */ .pricing{ padding: var(--section-y) 0; background:var(--off-white); } .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; align-items:stretch; } .pricing-card{ position:relative; background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding: var(--space-7) var(--space-6) var(--space-6); display:flex; flex-direction:column; transition: all .35s var(--ease); } .pricing-card:hover{ border-color:var(--orange); transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(255,90,31,0.25); } .pricing-card.featured{ border-color: var(--orange); background: var(--ink); color: var(--text-inverse); transform: scale(1.04); box-shadow: 0 34px 74px -30px rgba(255,90,31,0.4); } .pricing-card.featured:hover{ transform: scale(1.04) translateY(-6px); } .pricing-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--orange); color: var(--text); font-size:var(--text-xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:6px var(--space-4); border-radius:var(--radius-pill); white-space:nowrap; } .pricing-name{ font-family:var(--font-display); font-size:var(--fs-h3); margin-bottom:var(--space-2); } .pricing-price{ font-family:var(--font-display); font-size:var(--fs-h3-lg); margin-bottom:var(--space-2); transition: opacity .25s var(--ease); } /* Prices are stored as original USD list prices; js/main.js turns them into the visitor's country price + currency. Until that happens the raw USD figure is held back so it never flashes. If the script never runs, the price appears by itself after 6 seconds. */ .pricing-price:not(.priced){ opacity:0; animation: priceFallback .25s ease 6s forwards; } @keyframes priceFallback{ to{ opacity:1; } } .pricing-price span{ white-space:nowrap; font-size:var(--text-sm); font-weight:500; font-family:var(--font-body); color:var(--text-muted); } .pricing-card.featured .pricing-price span{ color: var(--text-inverse-muted); } .pricing-desc{ font-size:var(--text-sm); margin-bottom:var(--space-5); padding-bottom:var(--space-5); border-bottom:1px solid var(--line); color:var(--text-muted); } .pricing-card.featured .pricing-desc{ color: var(--text-inverse-muted); border-color: var(--line-light); } .pricing-features{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-6); flex:1; } .pricing-features li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-sm); font-weight:500; } .pricing-features svg{ color:var(--orange); flex-shrink:0; margin-top:3px; } .pricing-card .btn{ width:100%; justify-content:center; } .pricing-note{ text-align:center; margin-top:var(--space-6); font-size:var(--text-sm); color:var(--text-muted); } /* 5-tier layout (service detail pages): tighter cards so 5 fit a row without cramping */ .pricing-grid.tiers-5{ grid-template-columns: repeat(5,1fr); gap:16px; } .pricing-grid.tiers-5 .pricing-card{ padding: 28px 20px; } .pricing-grid.tiers-5 .pricing-name{ font-size:var(--text-lg); margin-bottom:var(--space-2); } .pricing-grid.tiers-5 .pricing-price{ font-size:var(--fs-h3-lg); } .pricing-grid.tiers-5 .pricing-desc{ margin-bottom:var(--space-4); padding-bottom:var(--space-4); } .pricing-grid.tiers-5 .pricing-features{ gap:var(--space-3); margin-bottom:var(--space-5); } .pricing-grid.tiers-5 .pricing-features li{ font-size:var(--text-sm); } .pricing-grid.tiers-5 .pricing-card.featured{ transform:none; } .pricing-grid.tiers-5 .pricing-card.featured:hover{ transform:translateY(-6px); } /* ======================= MORE SERVICES ======================= */ .more-services{ padding: var(--section-y) 0; background:var(--white); } .related-services{ background: var(--off-white); } .more-services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; } .more-service-card{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5); border:1.5px solid var(--line); border-radius:var(--radius-md); transition: all .3s var(--ease); height:100%; } .more-service-card:hover{ border-color:var(--orange); background:var(--orange-soft); transform:translateY(-4px); } .more-service-icon{ width:46px; height:46px; border-radius:var(--radius-sm); background:var(--orange-soft); color:var(--text-accent); display:flex; align-items:center; justify-content:center; font-size:20px; transition: all .3s var(--ease); flex-shrink:0; } .more-service-card:hover .more-service-icon{ background:var(--orange); color: var(--text); transform:scale(1.08) rotate(-6deg); } .more-service-card h3{ font-family:var(--font-display); font-size:var(--text-lg); flex:1; } .more-service-arrow{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--text); transition: color .3s var(--ease); } .more-service-arrow svg{ transition: transform .3s var(--ease); } .more-service-card:hover .more-service-arrow{ color:var(--text-accent); } .more-service-card:hover .more-service-arrow svg{ transform: translate(3px,-3px); } /* ======================= CAPABILITY STRIP ======================= */ .capability-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 26px 0; background: var(--white); } .capability-track{ width:100%; overflow:hidden; } .capability-track-inner{ display:flex; align-items:center; gap: 28px; white-space:nowrap; width:max-content; animation: marquee 32s linear infinite; } .capability-track-inner span{ font-family:var(--font-display); font-size: var(--fs-h3); color: var(--text-muted); transition: color .3s; } .capability-track-inner:hover{ animation-play-state: paused; } .capability-track-inner span:hover{ color: var(--text-accent); } .capability-track-inner i{ width:6px; height:6px; border-radius:50%; background: var(--orange); opacity:0.6; } @keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } /* ======================= INTRO / WHAT WE DO ======================= */ .intro{ padding: var(--section-y) 0; background: var(--white); } .intro-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px,6vw,90px); } .intro-head .heading-xl{ margin-bottom:var(--space-5); } .intro-text{ font-size:var(--text-lg); max-width:520px; margin-bottom:var(--space-5); } .intro-principles{ display:flex; flex-direction:column; } .principle-item{ display:flex; gap:var(--space-4); padding: var(--space-5) 0; border-top:1px solid var(--line); opacity:0; transform: translateX(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .principle-item:last-child{ border-bottom:1px solid var(--line); } .principle-item.in-view{ opacity:1; transform:none; } .principle-num{ font-family:var(--font-display); font-size:var(--text-sm); color:var(--text-accent); font-weight:600; padding-top:6px; min-width:2ch; } .principle-item h3{ font-size:var(--fs-h3); margin-bottom:var(--space-2); } .principle-item p{ font-size:var(--text-base); max-width:420px; } /* ======================= SERVICES ======================= */ .services{ padding: var(--section-y) 0; background: var(--off-white); } .services-explorer{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px,5vw,60px); align-items:start; } .service-list{ display:flex; flex-direction:column; gap:var(--space-3); } .service-row{ display:flex; align-items:center; gap:var(--space-4); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6); min-height:68px; border:1.5px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor:pointer; position:relative; overflow:hidden; transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } /* accent bar: the selected tab is marked by shape + fill, never by colour alone */ .service-row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition: transform .3s var(--ease); } .service-row:hover{ border-color: var(--line-strong); box-shadow: 0 10px 24px -18px rgba(20,20,15,0.3); } .service-row.active{ border-color: var(--orange); background: var(--orange-tint); box-shadow: 0 16px 34px -22px rgba(255,90,31,0.5); } .service-row.active::before{ transform:scaleX(1); } .service-row-num{ font-family:var(--font-display); font-size:var(--text-sm); color:var(--text-muted); width:2ch; flex-shrink:0; } .service-row-name{ font-family:var(--font-display); font-size: var(--fs-h3); flex:1; color:var(--text); transition: color .3s var(--ease); } .service-row-arrow{ width:40px; height:40px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:var(--text-base); color:var(--text-muted); transition: all .3s var(--ease); } .service-row.active .service-row-name{ font-weight:600; } .service-row.active .service-row-num{ color: var(--text-accent); font-weight:600; } .service-row:hover .service-row-arrow{ color:var(--text); border-color:var(--text); transform: translateX(3px); } .service-row.active .service-row-arrow{ transform:none; color: var(--text); background: var(--orange); border-color: var(--orange); } .service-panel{ position: sticky; top: 110px; background: var(--white); border-radius: var(--radius-lg); overflow-y:auto; overflow-x:hidden; box-shadow: 0 30px 70px -35px rgba(20,20,15,0.25); max-height: calc(100vh - 130px); display:flex; flex-direction:column; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } .service-panel::-webkit-scrollbar{ width:6px; } .service-panel::-webkit-scrollbar-thumb{ background: var(--gray-300); border-radius:var(--radius-sm); } .sp-media{ position:relative; height: 280px; overflow:hidden; } .sp-media img{ width:100%; height:100%; object-fit:cover; transition: transform 8s var(--ease-2); } .service-panel:hover .sp-media img{ transform: scale(1.08); } .sp-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(17,17,16,0.55), transparent 55%); } .sp-icon{ position:absolute; bottom:18px; left:24px; width:52px; height:52px; border-radius:var(--radius-sm); background: var(--orange); color: var(--text); display:flex; align-items:center; justify-content:center; font-size:24px; z-index:1; transition: transform .4s var(--ease); } .service-panel:hover .sp-icon{ transform: scale(1.08) rotate(-6deg); } .sp-num{ position:absolute; top:20px; right:24px; font-family:var(--font-display); font-size:var(--text-sm); color:var(--text-inverse); z-index:1; } .sp-body{ padding: var(--space-6) var(--space-6) var(--space-6); flex:1; display:flex; flex-direction:column; } .sp-title{ font-size: var(--fs-h3-lg); margin-bottom:var(--space-3); } .sp-desc{ margin-bottom:var(--space-5); flex:1; } .sp-body .btn{ align-self:flex-start; } .sp-fade{ animation: spFade .6s var(--ease); } @keyframes spFade{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} } .service-accordion, .expertise-accordion{ display:none; } .acc-item{ border-bottom:1px solid var(--line); } .acc-item:first-child{ border-top:1px solid var(--line); } .acc-head{ display:flex; align-items:center; gap:var(--space-4); width:100%; min-height:64px; padding:var(--space-4) var(--space-1); text-align:left; } .acc-head .num{ font-family:var(--font-display); color:var(--text-muted); font-size:var(--text-sm); width:2ch; } .acc-head .name{ font-family:var(--font-display); font-size:var(--fs-h3); flex:1; } .acc-head .plus{ transition: transform .35s var(--ease); color:var(--text-accent); } .acc-item.open .acc-head .plus{ transform: rotate(135deg); } .acc-item.open .acc-head .name{ color:var(--text-accent); } .acc-body{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); } .acc-inner{ padding: 0 var(--space-1) var(--space-5); } .acc-inner img{ width:100%; height:180px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:var(--space-4); } .acc-inner p{ margin-bottom:var(--space-4); font-size:var(--text-base); } /* ======================= SHOWCASE GALLERY ======================= */ .showcase{ padding: var(--section-y) 0; background: var(--white); } .showcase-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--space-5); } .showcase-item{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio: 4 / 4.4; } .showcase-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-2); } .showcase-item:hover img{ transform: scale(1.09); } .showcase-item::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(17,17,16,0.88) 0%, rgba(17,17,16,0.5) 30%, rgba(17,17,16,0) 58%); pointer-events:none; } /* Captions are always visible: category tag + title, so every tile says what it shows */ .showcase-item figcaption{ position:absolute; left:var(--space-4); right:var(--space-4); bottom:var(--space-4); z-index:1; display:flex; flex-direction:column; gap:2px; color:var(--text-inverse); font-weight:600; font-size:var(--text-base); line-height:1.3; } .showcase-cat{ font-size:var(--text-xs); font-weight:600; letter-spacing:0.02em; color:var(--text-inverse-accent); } /* ======================= CINEMA VIDEO ======================= */ .cinema{ position:relative; height: 78vh; min-height:520px; display:flex; align-items:flex-end; overflow:hidden; } .cinema-media{ position:absolute; inset:0; z-index:0; } .cinema-video, .cinema-fallback-img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .cinema-video{ opacity:0; } .cinema-video.playing{ opacity:1; } .cinema-fallback-img{ animation: kenburns 18s ease-in-out infinite alternate; } .cinema-video.playing + .cinema-fallback-img{ opacity:0; } @keyframes kenburns{ from{ transform: scale(1); } to{ transform: scale(1.12) translate(-1%, -1%); } } .cinema-overlay{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(10,10,9,0.85) 5%, rgba(10,10,9,0.25) 55%, rgba(10,10,9,0.35)); } .cinema-content{ position:relative; z-index:1; padding: 0 var(--gutter) 70px; width:100%; max-width:var(--container); margin:0 auto; color: var(--text-inverse); } .cinema-title{ font-size: var(--fs-h2-xl); max-width:820px; margin-bottom:0; color:var(--text-inverse); } /* ======================= DIGITAL SOLUTIONS (journey) ======================= */ .solutions{ background: var(--ink); padding: var(--section-y) 0; overflow:hidden; } .solutions-bg{ position:absolute; inset:0; opacity:0.5; background: radial-gradient(circle at 15% 20%, rgba(255,90,31,0.14), transparent 45%), radial-gradient(circle at 85% 80%, rgba(255,90,31,0.1), transparent 45%); } .journey{ position:relative; margin-top:70px; } .journey-line{ position:absolute; top:9px; left:0; right:0; height:2px; background: rgba(255,255,255,0.14); } .journey-line-fill{ display:block; height:100%; width:0%; background: var(--orange); transition: width .6s var(--ease); } .journey-stages{ display:grid; grid-template-columns: repeat(6, 1fr); gap:24px; position:relative; } .journey-stage{ padding-top:34px; position:relative; opacity:0.8; transition: opacity .5s var(--ease); } .journey-stage.active{ opacity:1; } .journey-dot{ position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%; background: var(--ink); border:2px solid rgba(255,255,255,0.3); transition: all .5s var(--ease); } .journey-stage.active .journey-dot{ background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 6px rgba(255,90,31,0.18); } .journey-num{ display:block; font-size:var(--text-sm); color: var(--text-inverse-accent); font-weight:700; letter-spacing:0.04em; margin-bottom:var(--space-2); } .journey-stage h3{ color:var(--text-inverse); font-size:var(--fs-h3); margin-bottom:var(--space-2); } .journey-stage p{ color: var(--text-inverse-muted); font-size:var(--text-sm); } /* ======================= TECH CAPABILITY ======================= */ .tech-capability{ padding: var(--section-y) 0; background: var(--white); } .tech-grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px,6vw,90px); align-items:center; } .tech-visual{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 5/5.6; } .tech-visual img{ width:100%; height:100%; object-fit:cover; } .tech-visual-badge{ position:absolute; bottom:24px; left:24px; right:24px; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); box-shadow: 0 20px 40px -18px rgba(0,0,0,0.3); } .tech-visual-badge svg{ width:38px; height:38px; padding:9px; border-radius:var(--radius-sm); background: var(--orange-soft); color:var(--text-accent); transition: transform .4s var(--ease); } .tech-visual:hover .tech-visual-badge svg{ transform: scale(1.1) rotate(-6deg); } .tech-visual-badge strong{ display:block; font-family:var(--font-display); font-size:var(--text-lg); } .tech-visual-badge span{ font-size:var(--text-sm); color:var(--text-muted); } .tech-content .heading-lg{ margin-bottom:var(--space-4); } .tech-content > p{ margin-bottom:var(--space-5); max-width:540px; } .capability-points{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-6); } .capability-points li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-base); color:var(--text); font-weight:500; } .capability-points svg{ color:var(--orange); flex-shrink:0; margin-top:4px; } /* ======================= AI & AUTOMATION ======================= */ .ai-section{ background: var(--charcoal); padding: var(--section-y) 0; } .ai-desc{ margin: 0 auto; max-width:600px; } .ai-workflow{ display:flex; align-items:center; justify-content:center; gap:0; margin: 70px 0 60px; flex-wrap:wrap; } .ai-node{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); width:150px; text-align:center; opacity:0.7; transition: opacity .5s var(--ease), transform .5s var(--ease); } .ai-node.active{ opacity:1; transform: translateY(-6px); } .ai-node-icon{ width:74px; height:74px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; font-size:28px; color: var(--text-inverse-muted); transition: all .5s var(--ease); } .ai-node.active .ai-node-icon{ border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 8px rgba(255,90,31,0.1); background: rgba(255,90,31,0.08); } .ai-node:hover .ai-node-icon{ transform: scale(1.1); border-color: var(--orange); color: var(--orange); } .ai-node span{ color: var(--text-inverse-muted); font-weight:600; font-size:var(--text-sm); } .ai-node-result.active .ai-node-icon{ background: var(--orange); color: var(--text); } .ai-connector{ width: 90px; height:20px; color: rgba(255,255,255,0.18); flex-shrink:0; } .ai-connector svg{ width:100%; height:100%; } .ai-connector path{ fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray: 6 6; } .ai-connector.active{ color: var(--orange); } .ai-connector.active path{ animation: dashMove 1.4s linear infinite; } @keyframes dashMove{ to{ stroke-dashoffset: -24; } } .ai-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; } .ai-card{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: var(--space-5); transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); } .ai-card:hover{ border-color: var(--orange); background: rgba(255,90,31,0.06); transform: translateY(-6px); } .ai-card svg{ font-size:26px; color:var(--orange); margin-bottom:var(--space-4); transition: transform .4s var(--ease); } .ai-card:hover svg{ transform: scale(1.15) rotate(-8deg); } .ai-card h3{ color:var(--text-inverse); font-size:var(--text-lg); margin-bottom:var(--space-2); font-family:var(--font-display); } .ai-card p{ font-size:var(--text-sm); color: var(--text-inverse-muted); } /* ======================= STORY (Tech / Creative / Growth) ======================= */ .story{ padding: var(--section-y) 0; background: var(--white); } .story-row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,80px); align-items:center; margin-bottom: 100px; } .story-row:last-child{ margin-bottom:0; } .story-row-rev{ direction: rtl; } .story-row-rev > *{ direction: ltr; } .story-media{ border-radius: var(--radius-lg); overflow:hidden; } .story-media img{ width:100%; object-fit:cover; } .story-media-lg{ aspect-ratio: 6/5; } .story-media-md{ aspect-ratio: 4/5; max-width:82%; } .story-media-sm{ aspect-ratio: 5/4; max-width:70%; } .story-num{ font-family:var(--font-display); color:var(--text-accent); font-size:var(--text-sm); font-weight:600; } .story-title, .story-text h3{ font-size: var(--fs-h2); margin: var(--space-3) 0 var(--space-4); } .story-text p{ max-width:460px; font-size:var(--text-lg); } /* ======================= ABOUT ======================= */ .about{ padding-top:var(--section-y); background: var(--off-white); } .about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,6vw,80px); align-items:center; padding-bottom:110px; } .about-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 5/5.8; } .about-media img{ width:100%; height:100%; object-fit:cover; } .about-media-tag{ position:absolute; left:20px; right:20px; bottom:20px; background: rgba(17,17,16,0.78); backdrop-filter: blur(8px); color:var(--text-inverse); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:500; } .about-media-tag svg{ color:var(--orange); font-size:20px; flex-shrink:0; transition: transform .4s var(--ease); } .about-media:hover .about-media-tag svg{ transform: scale(1.15) rotate(-8deg); } .about-content .heading-lg{ margin-bottom:var(--space-4); } .about-content p{ margin-bottom:var(--space-4); max-width:560px; } .stats-band{ background: var(--ink); padding: 60px 0; } .stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:30px; text-align:center; } .stat-item{ display:flex; flex-direction:column; gap:8px; } .stat-num{ font-family:var(--font-display); font-size: var(--fs-h2-xl); color:var(--text-inverse); } .stat-item span{ color: var(--text-inverse-muted); font-size:var(--text-base); } /* ======================= WHY US ======================= */ .why-us{ padding: var(--section-y) 0; background: var(--white); } .why-row{ display:grid; grid-template-columns: 48px minmax(220px, 0.85fr) minmax(0, 1.5fr) 32px; align-items:center; gap:var(--space-5); padding: var(--space-5) 10px; border-top:1px solid var(--line); position:relative; transition: padding .4s var(--ease); } .why-list .why-row:last-child{ border-bottom:1px solid var(--line); } .why-num{ font-family:var(--font-display); font-size:var(--text-lg); color: var(--text-muted); transition: color .4s var(--ease); } .why-row h3{ font-size: var(--fs-h3); transition: color .4s var(--ease); } .why-row p{ font-size:var(--text-base); max-width:520px; } .why-arrow{ font-size:22px; color: var(--text-muted); transition: all .4s var(--ease); justify-self:end; } .why-row:hover{ padding-left:22px; } .why-row:hover .why-num{ color: var(--text-accent); } .why-row:hover h3{ color: var(--text-accent); } .why-row:hover .why-arrow{ color: var(--text-accent); transform: translate(4px,-4px); } /* ======================= PROCESS TIMELINE ======================= */ .process{ padding: var(--section-y) 0; background: var(--off-white); } .timeline{ margin-top: 60px; } .timeline-line{ position:relative; height:2px; background: var(--line); margin-bottom:0; display:none; } .timeline-fill{ display:block; height:100%; background: var(--orange); width:0%; transition: width .6s var(--ease); } .timeline-stages{ display:grid; grid-template-columns: repeat(6,1fr); gap:20px; } .timeline-stage{ position:relative; padding-top:36px; opacity:0.8; transition: opacity .5s var(--ease); } .timeline-stage.active{ opacity:1; } .timeline-dot{ position:absolute; top:-13px; left:0; width:36px; height:36px; border-radius:50%; background:var(--white); border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:var(--text-xs); color:var(--text); transition: all .5s var(--ease); } .timeline-stage::before{ content:''; position:absolute; top:4px; left:0; right:0; height:2px; background: var(--line); } .timeline-stage.active .timeline-dot{ background: var(--orange); border-color: var(--orange); color: var(--text); box-shadow: 0 0 0 6px rgba(255,90,31,0.16); } .timeline-stage h3{ font-size:var(--fs-h3); margin: var(--space-4) 0 var(--space-2); } .timeline-stage p{ font-size:var(--text-sm); } /* ======================= PORTFOLIO ======================= */ .portfolio{ padding: var(--section-y) 0; background: var(--white); } .filter-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .filter-btn{ min-height:44px; padding: 0 var(--space-5); border-radius:var(--radius-pill); border:1.5px solid var(--line-strong); font-size:var(--text-sm); font-weight:600; color:var(--text-body); transition: all .3s var(--ease); } .filter-btn:hover{ border-color: var(--text); color: var(--text); background: var(--off-white); } .filter-btn.active{ background: var(--ink); border-color: var(--text); color:var(--text-inverse); } .portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:var(--space-5); margin-top:var(--head-gap); } .p-item{ position:relative; border-radius: var(--radius-md); overflow:hidden; cursor:pointer; aspect-ratio: 4 / 3; opacity:1; transform: scale(1); transition: opacity .5s var(--ease), transform .5s var(--ease); } .p-item.hidden{ display:none; } .p-item.filtering-out{ opacity:0; transform: scale(0.92); } .p-media{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; } .p-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease-2); } .p-item:hover .p-media img{ transform: scale(1.08); } /* Category + title are always visible (bottom gradient); the summary and "View project" reveal on hover / focus */ .p-overlay{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(17,17,16,0.92) 0%, rgba(17,17,16,0.55) 34%, rgba(17,17,16,0) 62%); display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-5); transition: background .45s var(--ease); } .p-item:hover .p-overlay, .p-item:focus-visible .p-overlay{ background: linear-gradient(0deg, rgba(17,17,16,0.95) 0%, rgba(17,17,16,0.8) 55%, rgba(17,17,16,0.25) 100%); } .p-cat{ color: var(--text-inverse-accent); font-size:var(--text-xs); font-weight:600; letter-spacing:0.02em; margin-bottom:var(--space-1); } .p-title{ color:var(--text-inverse); font-family:var(--font-display); font-size:var(--fs-h3); } .p-desc{ color: var(--text-inverse-muted); font-size:var(--text-sm); max-width:92%; max-height:0; opacity:0; overflow:hidden; margin:0; transition: max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); } .p-item:hover .p-desc, .p-item:focus-visible .p-desc{ max-height:8em; opacity:1; margin:var(--space-2) 0 0; } .p-item:hover .p-view, .p-item:focus-visible .p-view{ max-height:3em; opacity:1; margin-top:var(--space-3); } .p-view{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--text-inverse); font-size:var(--text-sm); font-weight:600; max-height:0; opacity:0; overflow:hidden; transition: max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); } .p-view svg{ transition: transform .3s var(--ease); } .p-item:hover .p-view svg{ transform: translate(4px,-4px); } /* ======================= IMPACT (dark metrics) ======================= */ .impact{ background: var(--charcoal); padding: var(--section-y) 0; } .impact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 0; } .impact-item{ padding: var(--space-6) var(--space-5); border-top:1px solid var(--line-light); border-right:1px solid var(--line-light); display:flex; flex-direction:column; gap:var(--space-3); } .impact-item:nth-child(3n){ border-right:none; } .impact-item:nth-child(-n+3){ border-top:none; } .impact-item .stat-num{ color: var(--text-inverse); } .impact-item span{ color: var(--text-inverse-muted); font-size:var(--text-base); font-weight:500; } /* ======================= EXPERTISE ======================= */ .expertise{ padding: var(--section-y) 0; background:var(--white); } .expertise-explorer{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px,4vw,40px); align-items:start; } .expertise-list{ border:1.5px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; background: var(--off-white); } .expertise-row{ position:relative; display:flex; align-items:center; gap:var(--space-4); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6); min-height:64px; border-bottom:1px solid var(--line); cursor:pointer; transition: background .3s var(--ease); } /* same accent bar as the service tabs */ .expertise-row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition: transform .3s var(--ease); } .expertise-list .expertise-row:last-child{ border-bottom:none; } .expertise-row-icon{ width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-sm); background: var(--white); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:18px; transition: all .3s var(--ease); } .expertise-row-name{ font-family:var(--font-display); font-size:var(--fs-h3); flex:1; color:var(--text); transition: color .3s var(--ease); } .expertise-row-arrow{ font-size:var(--text-base); color:var(--text-muted); opacity:0; transform: translateX(-6px); transition: all .3s var(--ease); } .expertise-row:hover{ background: var(--white); } .expertise-row.active{ background: var(--orange-tint); } .expertise-row.active::before{ transform:scaleX(1); } .expertise-row:hover .expertise-row-icon{ color:var(--text); } .expertise-row.active .expertise-row-icon{ background: var(--orange); color: var(--text); } .expertise-row.active .expertise-row-name{ font-weight:600; } .expertise-row:hover .expertise-row-arrow, .expertise-row.active .expertise-row-arrow{ opacity:1; transform:none; color: var(--text); } .expertise-panel{ position: sticky; top: 110px; background: var(--off-white); border-radius: var(--radius-lg); padding: clamp(32px,4.5vw,52px); display:flex; align-items:center; } .ep-fade{ animation: epFade .5s var(--ease); width:100%; } @keyframes epFade{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} } .ep-icon{ width:56px; height:56px; border-radius:var(--radius-sm); background: var(--orange); color: var(--text); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:var(--space-5); transition: transform .4s var(--ease); } .expertise-panel:hover .ep-icon{ transform: scale(1.08) rotate(-6deg); } .ep-title{ font-size: var(--fs-h3-lg); margin-bottom:var(--space-3); } .ep-desc{ font-size:var(--text-base); max-width:560px; margin-bottom:var(--space-5); } .ep-points{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-6); } .ep-points li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-base); font-weight:500; color:var(--text); } .ep-points svg{ color:var(--orange); flex-shrink:0; margin-top:4px; } /* ======================= CLIENTS & PARTNERS ======================= */ .clients{ padding: var(--section-y) 0; background: var(--white); overflow:hidden; } .clients .section-head-center p:not(.label){ max-width:600px; margin:0 auto; } .clients-marquee{ position:relative; margin-top:56px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .clients-track{ display:flex; align-items:stretch; gap:20px; width:max-content; animation: clients-scroll 34s linear infinite; } .clients-marquee:hover .clients-track{ animation-play-state: paused; } .client-card{ flex-shrink:0; width:200px; height:112px; background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; padding:24px 30px; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), background .35s var(--ease); } .client-card img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; } .client-card:hover{ border-color: var(--orange); background: var(--orange-soft); transform: translateY(-5px); box-shadow: 0 24px 46px -28px rgba(255,90,31,0.4); } .clients-grid{ display:none; } @keyframes clients-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (max-width: 720px){ .clients-marquee{ display:none; } .clients-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-top:44px; } .clients-grid .client-card{ width:100%; height:96px; padding:18px 20px; } } /* ======================= PRODUCTS & PLATFORMS ======================= */ .products{ padding: var(--section-y) 0; background: var(--off-white); } .products .section-head-center p:not(.label){ max-width:620px; margin:0 auto; } .product-card{ position:relative; display:flex; flex-direction:column; height:100%; background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-md); overflow:hidden; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } .product-card:hover{ border-color: var(--orange); box-shadow: 0 28px 56px -32px rgba(255,90,31,0.32); transform: translateY(-5px); } .product-media{ position:relative; overflow:hidden; aspect-ratio: 4 / 3; flex-shrink:0; } .product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-2); } .product-card:hover .product-media img{ transform: scale(1.08); } .status-badge{ position:absolute; top:14px; left:14px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 10px; border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:600; letter-spacing:0.01em; color: var(--text-inverse); background: rgba(17,17,16,0.82); backdrop-filter: blur(6px); } .status-dot{ width:6px; height:6px; border-radius:50%; background: var(--gray-300); flex-shrink:0; } .status-badge.status-live{ background: var(--text-accent); } .status-badge.status-live .status-dot{ background: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,0.35); animation: statusPulse 1.8s ease-in-out infinite; } .status-badge.status-development .status-dot{ background: var(--orange-2); } .status-badge.status-coming-soon{ background: rgba(17,17,16,0.82); } .status-badge.status-archived{ background: rgba(17,17,16,0.82); } @keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .featured-tag{ position:absolute; top:14px; right:14px; z-index:1; padding:6px 12px; border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:600; color: var(--text); background: var(--white); } .product-body{ display:flex; flex-direction:column; flex:1; padding: var(--space-5); } .product-type{ display:inline-block; align-self:flex-start; color: var(--text-accent); font-size:var(--text-xs); font-weight:600; letter-spacing:0.02em; margin-bottom:var(--space-2); } .product-name{ font-family:var(--font-display); font-size:var(--text-lg); color:var(--text); margin-bottom:var(--space-2); transition: color .35s var(--ease); } .product-card:hover .product-name{ color: var(--text-accent); } .product-desc{ font-size:var(--text-sm); line-height:1.6; color:var(--text-body); margin-bottom:var(--space-4); flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .product-tech{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-4); max-height:34px; overflow:hidden; } .product-tech-tag{ padding:3px 12px; border:1.5px solid var(--line); border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:600; color:var(--text-body); } .product-cta{ display:inline-flex; align-items:center; gap:var(--space-2); margin-top:auto; padding-top:var(--space-4); border-top:1px solid var(--line); font-size:var(--text-sm); font-weight:600; color:var(--text); transition: color .3s var(--ease), gap .3s var(--ease); } .product-cta svg{ transition: transform .3s var(--ease); } .product-card:hover .product-cta{ color: var(--text-accent); gap:var(--space-3); } .product-card:hover .product-cta svg{ transform: translate(3px,-3px); } .products-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:var(--space-5); } .products-viewall{ display:flex; justify-content:center; margin-top:var(--space-7); } @media (max-width: 640px){ .status-badge{ font-size:var(--text-xs); padding:5px 10px 5px 9px; } } /* ======================= TESTIMONIALS ======================= */ .testimonials{ padding: var(--section-y) 0; background: var(--off-white); text-align:center; } .testimonials .section-inner > .heading-xl{ margin-bottom:60px; } .testimonial-stage{ position:relative; max-width:820px; margin:0 auto; min-height:260px; } .t-slide{ position:absolute; inset:0; opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none; } .t-slide.active{ opacity:1; transform:none; pointer-events:auto; position:relative; } .t-quote{ font-family:var(--font-display); font-size: var(--fs-h3-lg); font-style:italic; line-height:1.5; color:var(--text); margin-bottom:var(--space-6); } .t-person{ display:flex; align-items:center; justify-content:center; gap:14px; } .t-avatar{ width:52px; height:52px; border-radius:50%; background: var(--ink); color: var(--text-inverse); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:var(--text-lg); flex-shrink:0; } .t-person-info{ text-align:left; } .t-person-info strong{ display:block; font-size:var(--text-base); } .t-person-info span{ font-size:var(--text-sm); color:var(--text-muted); } .testimonial-controls{ display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-top:var(--space-7); } .t-btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); } .t-btn svg{ transition: transform .3s var(--ease); } .t-btn:hover{ border-color: var(--text); background:var(--ink); color:var(--text-inverse); } #tPrev:hover svg{ transform: translateX(-3px); } #tNext:hover svg{ transform: translateX(3px); } .t-progress{ display:flex; gap:8px; } .t-progress span{ width:8px; height:8px; border-radius:var(--radius-pill); background: var(--gray-300); transition: all .35s var(--ease); } .t-progress span.active{ background: var(--orange); width:22px; } /* "Share your experience": visitors submit a testimonial from a modal (approved in Admin before it shows) */ .t-share{ margin-top:36px; } .t-dialog{ width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:none; background:transparent; color: var(--text); text-align:left; overflow:visible; } .t-dialog::backdrop{ background:rgba(20,20,15,0.55); backdrop-filter:blur(4px); } .t-dialog[open]{ animation: tDialogIn .35s var(--ease); } @keyframes tDialogIn{ from{ opacity:0; transform:translateY(18px) scale(.98); } } .t-form{ position:relative; max-height:calc(100dvh - 32px); overflow-y:auto; background:var(--white); border-radius:var(--radius-lg); padding:clamp(26px,4vw,40px); box-shadow:0 40px 90px -30px rgba(20,20,15,0.5); } .t-dialog-close{ position:absolute; top:var(--space-4); right:var(--space-4); width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:var(--text); transition: all .3s var(--ease); } .t-dialog-close:hover{ border-color: var(--text); color:var(--text-inverse); background:var(--ink); } .t-dialog-title{ font-family:var(--font-display); font-size:var(--fs-h3-lg); line-height:1.15; margin:var(--space-2) 0 var(--space-3); padding-right:var(--space-7); } .t-dialog-intro{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); margin:0 0 var(--space-5); } .t-hint{ display:block; font-size:var(--text-xs); line-height:1.5; color:var(--text-muted); margin-top:6px; } .t-hint-row{ margin:-10px 0 22px; } /* sits under the email / WhatsApp row, tucked up against the fields' bottom margin */ .t-form .form-row{ row-gap:0; } /* stacked on phones: the fields' own bottom margin is the only gap */ .t-foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .t-count{ margin:6px 2px 0 auto; font-size:var(--text-xs); color:var(--text-muted); } .t-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .t-thanks{ text-align:center; padding-top:clamp(40px,6vw,56px); } .t-thanks-icon{ width:60px; height:60px; margin:0 auto var(--space-4); border-radius:50%; background:rgba(22,122,68,0.12); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:28px; } .t-thanks .t-dialog-intro{ max-width:38ch; margin:0 auto 26px; } /* ======================= TEAM ======================= */ .team{ padding: var(--section-y) 0; background: var(--white); } .team .section-head-center{ margin-bottom:64px; } .team .section-head-center p:not(.label){ max-width:620px; margin:0 auto; } .team-slider{ max-width: 1120px; margin: 0 auto; } .team-card{ display:grid; grid-template-columns: minmax(280px, 0.8fr) 1.2fr; background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 34px 70px -40px rgba(20,20,15,0.28); min-height: 440px; opacity:1; transform:none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .team-card.tc-out-next{ opacity:0; transform: translateX(-36px); } .team-card.tc-out-prev{ opacity:0; transform: translateX(36px); } .team-card.tc-in-next{ opacity:0; transform: translateX(36px); } .team-card.tc-in-prev{ opacity:0; transform: translateX(-36px); } .team-image{ position:relative; overflow:hidden; border-right:1px solid var(--line); background: linear-gradient(135deg, #ecebe7, #f7f5f2); } /* the photo fills whatever height the biography needs, so the two columns always line up */ .team-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; } .team-info{ padding: clamp(28px, 4vw, 48px); display:flex; flex-direction:column; justify-content:center; gap:var(--space-5); min-width:0; } .team-head{ display:flex; flex-direction:column; gap:var(--space-1); } .team-name{ font-size: var(--fs-h3-lg); } .team-role{ display:block; color: var(--text-accent); font-weight:600; font-size:var(--text-sm); } .team-desc{ font-size:var(--text-base); line-height:1.65; max-width:none; } .team-block{ display:flex; flex-direction:column; gap:var(--space-2); } .team-block-label{ display:block; font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-muted); } .team-skills{ display:flex; flex-wrap:wrap; gap:var(--space-2); } .team-skill{ padding:6px 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:500; color:var(--text); transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); opacity:0; animation: teamPop .5s var(--ease) forwards; } .team-skill:hover{ border-color: var(--text); background: var(--off-white); } .team-skill:nth-child(1){ animation-delay:.12s; } .team-skill:nth-child(2){ animation-delay:.18s; } .team-skill:nth-child(3){ animation-delay:.24s; } .team-skill:nth-child(4){ animation-delay:.3s; } .team-skill:nth-child(5){ animation-delay:.36s; } @keyframes teamPop{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} } .team-working{ font-size:var(--text-base); line-height:1.6; max-width:none; } .team-contact{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-5); margin-top:auto; padding-top:var(--space-5); border-top:1px solid var(--line); } .team-contact-link{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; font-size:var(--text-sm); font-weight:600; color:var(--text); transition: color .3s var(--ease); opacity:0; animation: teamPop .5s var(--ease) forwards; animation-delay:.4s; overflow-wrap:anywhere; } .team-contact-link:hover{ color: var(--text-accent); } .team-contact-link svg{ color:var(--orange); font-size:var(--text-sm); flex-shrink:0; transition: transform .3s var(--ease); } .team-contact-link:hover svg{ transform: translateX(3px) scale(1.1); } .team-social{ display:flex; gap:var(--space-2); opacity:0; animation: teamPop .5s var(--ease) forwards; animation-delay:.46s; } .team-social a{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--text); font-size:var(--text-base); transition: all .3s var(--ease); } .team-social a svg{ transition: transform .3s var(--ease); } .team-social a:hover{ background: var(--ink); border-color: var(--text); color:var(--text-inverse); transform: translateY(-2px); } .team-social a:hover svg{ transform: scale(1.15) rotate(-8deg); } .team-controls{ display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-top:var(--space-7); } .team-nav-btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line-strong); color:var(--text); font-size:18px; display:flex; align-items:center; justify-content:center; transition: all .35s var(--ease); } .team-nav-btn svg{ transition: transform .35s var(--ease); } .team-nav-btn:hover{ border-color: var(--text); background: var(--ink); color:var(--text-inverse); } #teamPrev:hover svg{ transform: translateX(-3px); } #teamNext:hover svg{ transform: translateX(3px); } .team-counter{ font-family:var(--font-display); font-size:var(--text-base); color:var(--text-muted); letter-spacing:0.04em; min-width:76px; text-align:center; } /* ======================= FAQ ======================= */ .faq{ padding: var(--section-y) 0; background: var(--white); } .faq-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px,6vw,80px); } .faq-head-inner{ position:sticky; top:120px; } .faq-head p{ margin: var(--space-4) 0 var(--space-5); max-width:360px; } .faq-item{ border-bottom:1px solid var(--line); } .faq-item:first-child{ border-top:1px solid var(--line); } .faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding: var(--space-5) var(--space-1); min-height:64px; text-align:left; } .faq-question span:first-child{ font-family:var(--font-display); font-size: var(--text-lg); } .faq-icon{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: all .35s var(--ease); } .faq-icon svg{ font-size:var(--text-sm); transition: transform .35s var(--ease); } .faq-question:hover .faq-icon{ border-color: var(--orange); color: var(--text-accent); transform: scale(1.1); } .faq-item.open .faq-question span:first-child{ color: var(--text-accent); } .faq-item.open .faq-icon{ background: var(--orange); border-color:var(--orange); color: var(--text); } .faq-item.open .faq-icon svg{ transform: rotate(45deg); } .faq-answer{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); } .faq-answer p{ padding: 0 var(--space-1) var(--space-5); max-width:620px; font-size:var(--text-base); } /* ======================= CTA ======================= */ .cta-section{ position:relative; background: var(--ink); padding: calc(var(--section-y) * 1.15) 0; overflow:hidden; text-align:center; } .cta-grid-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%); } .cta-inner{ position:relative; z-index:1; max-width:760px; } .cta-heading{ font-size: var(--fs-h1); color:var(--text-inverse); margin: var(--space-3) 0 var(--space-5); } .cta-text{ color: var(--text-inverse-muted); font-size:var(--text-lg); margin: 0 auto var(--space-6); max-width:600px; } /* ======================= CONTACT ======================= */ .contact{ padding: var(--section-y) 0; background: var(--off-white); } .contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px,6vw,80px); } .contact-info .heading-lg{ margin-bottom:var(--space-4); } .contact-info > p{ margin-bottom:var(--space-6); max-width:460px; } .contact-details{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-6); } .contact-detail{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); background:var(--white); border:1.5px solid var(--line); box-shadow: 0 10px 28px -22px rgba(20,20,15,0.2); transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .contact-detail:hover{ border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(255,90,31,0.28); } .contact-detail-icon{ width:46px; height:46px; border-radius:var(--radius-sm); background:var(--orange-soft); display:flex; align-items:center; justify-content:center; color:var(--text-accent); font-size:19px; flex-shrink:0; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .contact-detail:hover .contact-detail-icon{ background: var(--orange); color: var(--text); transform: scale(1.1) rotate(-6deg); } .contact-detail > div{ min-width:0; flex:1; } .contact-detail strong{ display:block; font-size:var(--text-xs); color:var(--text-muted); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; } .contact-detail span{ font-size:var(--text-base); font-weight:600; color:var(--text); overflow-wrap:anywhere; } .contact-detail-arrow{ margin-left:auto; color:var(--text-muted); font-size:var(--text-lg); flex-shrink:0; transition: color .3s var(--ease), transform .3s var(--ease); } .contact-detail:hover .contact-detail-arrow{ color:var(--text-accent); transform: translate(3px,-3px); } .contact-social{ display:flex; gap:var(--space-3); } .contact-social a{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); } .contact-social a svg{ transition: transform .3s var(--ease); } .contact-social a:hover{ background: var(--ink); border-color: var(--text); color:var(--text-inverse); transform: translateY(-3px); } .contact-social a:hover svg{ transform: scale(1.15) rotate(-8deg); } .contact-form{ background: var(--white); border-radius: var(--radius-lg); padding: clamp(26px,4vw,44px); box-shadow: 0 30px 70px -35px rgba(20,20,15,0.25); border:1.5px solid var(--line); } .contact-context{ display:flex; align-items:flex-start; gap:var(--space-3); background:var(--orange-tint); border:1px solid rgba(255,90,31,0.3); border-radius:var(--radius-sm); padding:var(--space-4); margin-bottom:var(--space-5); } .contact-context[hidden]{ display:none; } .contact-context svg{ color:var(--text-accent); flex-shrink:0; margin-top:2px; } .contact-context p{ font-size:var(--text-sm); line-height:1.55; color:var(--text-body); margin:0; } .contact-context strong{ color:var(--text); } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); } .form-group{ position:relative; margin-bottom:var(--space-5); } .form-group input, .form-group select, .form-group textarea{ width:100%; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding: 26px 16px 8px; min-height:56px; background: var(--paper); font-size:var(--text-base); transition: border-color .3s var(--ease), background .3s var(--ease); } .form-group textarea{ resize:vertical; min-height:110px; } .form-group label{ position:absolute; left:16px; top:17px; font-size:var(--text-base); color:var(--text-muted); pointer-events:none; transition: all .25s var(--ease); background:transparent; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; border-color: var(--text); background:var(--white); } .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label, .form-group input:valid:not(:focus):not(:placeholder-shown) + label, .form-group textarea:focus + label, .form-group textarea:not(:placeholder-shown) + label, .form-group select:focus + label, .form-group select:valid + label{ top:8px; font-size:var(--text-xs); color: var(--text-accent); letter-spacing:0.01em; } .form-group input, .form-group textarea{ } .form-group input:not(:placeholder-shown), .form-group textarea:not(:placeholder-shown){ } .form-group select{ appearance:none; -webkit-appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a65' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; background-size:16px; } .form-group select:valid{ color: var(--text); } .form-group select:invalid{ color: transparent; } .form-group select option{ color: var(--text); } .form-group.error input, .form-group.error select, .form-group.error textarea{ border-color:var(--danger); } .form-error{ display:none; color:var(--danger); font-size:var(--text-sm); margin-top:6px; } .form-group.error .form-error{ display:block; } .btn-block{ position:relative; margin-top:4px; } .btn-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(20,20,15,0.25); border-top-color: var(--text); animation: spin .7s linear infinite; } .btn-block.loading .btn-label, .btn-block.loading svg{ opacity:0; } .btn-block.loading .btn-spinner{ display:inline-block; position:absolute; } @keyframes spin{ to{ transform: rotate(360deg); } } .form-feedback{ margin-top:var(--space-4); font-size:var(--text-sm); text-align:center; opacity:0; transform:translateY(6px); transition: all .4s var(--ease); } .form-feedback.show{ opacity:1; transform:none; } .form-feedback.success{ color:var(--success); } .form-feedback.error{ color:var(--danger); } /* ======================= BLOG / ARTICLES ======================= */ .blog{ padding: var(--section-y) 0; background: var(--white); } .blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:var(--space-5); margin-top:var(--head-gap); align-items:stretch; } .blog-card{ display:flex; flex-direction:column; height:100%; min-width:0; background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-md); overflow:hidden; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); } .blog-card:hover{ border-color: var(--orange); box-shadow: 0 30px 60px -34px rgba(255,90,31,0.28); transform: translateY(-5px); } .blog-media{ position:relative; overflow:hidden; aspect-ratio: 4 / 3; flex-shrink:0; } .blog-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease-2); } .blog-card:hover .blog-media img{ transform: scale(1.06); } .blog-body{ display:flex; flex-direction:column; flex:1; padding: var(--space-5); } .blog-cat{ display:inline-block; color: var(--text-accent); font-size:var(--text-xs); font-weight:600; letter-spacing:0.02em; margin-bottom:var(--space-3); } .blog-title{ font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.3; color:var(--text); margin-bottom:var(--space-3); min-height: 2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition: color .35s var(--ease); } .blog-card:hover .blog-title{ color: var(--text-accent); } .blog-desc{ font-size:var(--text-sm); line-height:1.65; color:var(--text-body); margin-bottom:var(--space-5); flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .blog-meta{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:auto; padding-top:var(--space-4); border-top:1px solid var(--line); } .blog-date{ font-size:var(--text-sm); color:var(--text-muted); font-weight:500; } .blog-readmore{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--text); transition: color .3s var(--ease); } .blog-readmore svg{ font-size:var(--text-sm); transition: transform .3s var(--ease); } .blog-card:hover .blog-readmore{ color: var(--text-accent); } .blog-card:hover .blog-readmore svg{ transform: translateX(4px); } .blog-viewall{ display:flex; justify-content:center; margin-top:var(--space-7); } /* ======================= SUBSCRIBE ======================= */ .subscribe{ position:relative; background: var(--charcoal); padding: var(--section-y) 0; overflow:hidden; text-align:center; } .subscribe-grid-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 40%, black, transparent 72%); } .subscribe-grid-bg::after{ content:''; position:absolute; top:-30%; left:50%; width:640px; height:640px; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,90,31,0.16), transparent 70%); pointer-events:none; } .subscribe-inner{ position:relative; z-index:1; max-width:680px; } .subscribe-inner .heading-xl{ margin: var(--space-3) 0 var(--space-4); } .subscribe-text{ color: var(--text-inverse-muted); font-size:var(--text-base); max-width:540px; margin:0 auto; } .subscribe-box{ margin-top:var(--space-6); } .subscribe-form{ display:flex; align-items:center; gap:var(--space-2); max-width:540px; margin:0 auto; background: rgba(255,255,255,0.08); border:1.5px solid var(--line-light-strong); border-radius:var(--radius-pill); padding:6px 6px 6px var(--space-5); transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .subscribe-form:focus-within{ border-color: var(--orange); background: rgba(255,255,255,0.12); box-shadow: 0 0 0 3px rgba(255,90,31,0.35); } .subscribe-field{ flex:1; min-width:0; } .subscribe-field input{ width:100%; background:transparent; border:none; color:var(--text-inverse); font-size:var(--text-base); padding:13px 0; } .subscribe-field input::placeholder{ color: var(--text-inverse-muted); } .subscribe-field input:focus{ outline:none; } .subscribe-form.error{ border-color:var(--danger-on-dark); } .subscribe-feedback{ display:flex; align-items:center; justify-content:center; gap:var(--space-3); max-width:540px; margin:var(--space-4) auto 0; padding:14px var(--space-5); border-radius:var(--radius-pill); background: rgba(255,90,31,0.14); border:1.5px solid rgba(255,90,31,0.45); opacity:0; transform: translateY(10px) scale(0.97); max-height:0; overflow:hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .5s var(--ease), margin .5s var(--ease), padding .5s var(--ease); } .subscribe-feedback.show{ opacity:1; transform:none; max-height:96px; margin-top:var(--space-4); } .subscribe-feedback-icon{ width:22px; height:22px; border-radius:50%; background: var(--orange); color: var(--text); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); } .subscribe-feedback-text{ color: var(--text-inverse); font-size:var(--text-sm); font-weight:500; } .subscribe-feedback.error{ background: rgba(255,138,130,0.12); border-color: rgba(255,138,130,0.5); } .subscribe-feedback.error .subscribe-feedback-icon{ background:var(--danger-on-dark); } /* ======================= FOOTER ======================= */ .footer{ background: var(--ink); padding: var(--space-8) 0 0; color: var(--text-inverse-muted); } .footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--space-7); padding-bottom:var(--space-8); border-bottom:1px solid var(--line-light); } .footer-brand p{ color: var(--text-inverse-muted); margin: var(--space-4) 0 var(--space-5); max-width:340px; font-size:var(--text-sm); } .logo-footer .logo-img{ height:30px; } .footer .contact-social a{ border-color: var(--line-light-strong); color: var(--text-inverse); } /* footer column titles are real

s so the page outline never skips a level */ .footer-title{ color:var(--text-inverse); font-family:var(--font-body); font-size:var(--text-sm); letter-spacing:0.06em; text-transform:uppercase; margin:0 0 var(--space-4); font-weight:600; line-height:1.4; } .footer-col{ display:flex; flex-direction:column; gap:var(--space-3); font-size:var(--text-sm); } .footer-col a{ color: var(--text-inverse-muted); transition: color .3s var(--ease), padding .3s var(--ease); width:fit-content; } .footer-col a:hover{ color: var(--text-inverse-accent); padding-left:4px; } .footer-address{ color: var(--text-inverse-muted); line-height:1.6; } .footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-5); padding-bottom:var(--space-5); flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-sm); color: var(--text-inverse-muted); } .footer-legal{ display:flex; gap:var(--space-5); } .footer-legal a:hover{ color: var(--text-inverse-accent); } .back-to-top{ position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--text-inverse); border:1.5px solid var(--line-light-strong); display:flex; align-items:center; justify-content:center; z-index:400; opacity:0; visibility:hidden; transform: translateY(10px); transition: all .4s var(--ease); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.4); } .back-to-top.show{ opacity:1; visibility:visible; transform:none; } .back-to-top svg{ transform: rotate(-45deg); transform-origin: center; transition: transform .3s var(--ease); } .back-to-top:hover{ background: var(--orange); color: var(--text); border-color: var(--orange); } .back-to-top:hover svg{ transform: rotate(-45deg) translateY(-3px); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1180px){ .hero-inner{ grid-template-columns:1fr; } .hero-visual{ height: 420px; order:-1; } .services-explorer{ grid-template-columns:1fr; } .service-panel{ position:static; max-height:none; overflow:visible; } .expertise-explorer{ grid-template-columns:1fr; } .expertise-panel{ position:static; min-height:auto; max-height:none; overflow:visible; } .intro-grid, .tech-grid, .about-grid, .faq-grid, .contact-grid{ grid-template-columns:1fr; } .contact-form{ order:-1; } .faq-head-inner{ position:static; } .tech-visual{ order:-1; max-width:520px; } .about-media{ max-width:480px; } .team-card{ grid-template-columns:1fr; min-height:0; } .team-image{ aspect-ratio: 16/10; border-right:none; border-bottom:1px solid var(--line); } .ai-grid{ grid-template-columns: repeat(2,1fr); } .impact-grid{ grid-template-columns: repeat(2,1fr); } .impact-item:nth-child(3n){ border-right:1px solid rgba(255,255,255,0.1); } .impact-item:nth-child(2n){ border-right:none; } .impact-item:nth-child(-n+3){ border-top:1px solid rgba(255,255,255,0.1); } .impact-item:nth-child(-n+2){ border-top:none; } .journey-stages, .timeline-stages{ grid-template-columns: repeat(3,1fr); row-gap:50px; } .showcase-grid{ grid-template-columns: repeat(2,1fr); } .portfolio-grid{ grid-template-columns: repeat(2,1fr); } .blog-grid{ grid-template-columns: repeat(2,1fr); } .products-grid{ grid-template-columns: repeat(3,1fr); } .service-full-grid{ grid-template-columns:1fr; } .service-full-media{ position:static; max-width:560px; } .pricing-grid{ grid-template-columns: repeat(2,1fr); } .pricing-grid.tiers-5{ grid-template-columns: repeat(3,1fr); } .more-services-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 1300px){ .nav-links{ display:none; } .nav-toggle{ display:flex; } .btn-nav{ display:none; } } @media (max-width: 900px){ .services-explorer{ display:none; } .service-accordion{ display:block; } .expertise-explorer{ display:none; } .expertise-accordion{ display:block; } .hero{ padding-top:130px; } .hero-meta{ gap:16px; } .story-row, .story-row-rev{ grid-template-columns:1fr; direction:ltr; } .story-media-md, .story-media-sm{ max-width:100%; } .story-row-rev{ display:flex; flex-direction:column-reverse; } .stats-grid{ grid-template-columns: repeat(2,1fr); gap:34px 20px; } .why-row{ grid-template-columns: 40px 1fr; row-gap:8px; } .why-row p{ grid-column: 2; } .why-arrow{ display:none; } .journey-stages, .timeline-stages{ grid-template-columns: repeat(2,1fr); } .showcase-grid{ grid-template-columns: repeat(2,1fr); gap:14px; } .portfolio-grid{ grid-template-columns: repeat(2,1fr); gap:14px; } .products-grid{ grid-template-columns: repeat(2,1fr); gap:14px; } .form-row{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ :root{ --gutter:20px; } .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ justify-content:center; } .hero-meta{ flex-direction:column; align-items:flex-start; gap:14px; } .hero-meta-divider{ display:none; } .hero-visual{ height:340px; } .hero-card{ padding:10px 14px; } .hero-card-stat{ left:2%; } .hero-card-tag{ left:2%; } .page-header{ padding: 140px 0 60px; } .team-controls{ gap:var(--space-4); } .team-image{ aspect-ratio: 4 / 3.2; } .stats-grid{ grid-template-columns: 1fr 1fr; } .journey-stages{ grid-template-columns: 1fr; } .journey-line{ display:none; } .journey-stage{ padding-top:0; padding-left:32px; border-left:2px solid rgba(255,255,255,0.14); padding-bottom:24px; } .journey-dot{ left:-11px; top:0; } .timeline-stages{ grid-template-columns:1fr; } .timeline-line{ display:none; } .timeline-stage{ padding-top:0; padding-left:52px; padding-bottom:30px; border-left:2px solid var(--line); } .timeline-stage::before{ display:none; } .timeline-dot{ left:-18px; top:-6px; } .service-panel{ min-height:auto; } .sp-media{ height:200px; } .showcase-grid{ grid-template-columns: 1fr; } .showcase-item{ aspect-ratio: 4 / 3; } .portfolio-grid{ grid-template-columns: 1fr; } .products-grid{ grid-template-columns: 1fr; } .blog-grid{ grid-template-columns: 1fr; gap:20px; } .service-features{ grid-template-columns:1fr; } .case-meta{ grid-template-columns:1fr 1fr; padding:18px; gap:16px; } .pricing-grid{ grid-template-columns: 1fr; gap:20px; } .pricing-grid.tiers-5{ grid-template-columns: 1fr; } .pricing-card.featured{ transform:none; } .pricing-card.featured:hover{ transform:translateY(-6px); } .more-services-grid{ grid-template-columns: 1fr; gap:16px; } .subscribe-form{ flex-direction:column; align-items:stretch; border-radius: var(--radius-md); padding:16px; gap:12px; } .subscribe-field input{ text-align:center; padding:10px 0; } .subscribe-btn{ width:100%; justify-content:center; } .ai-workflow{ flex-direction:column; } .ai-connector{ width:2px; height:36px; } .ai-connector svg{ width:20px; height:100%; transform:rotate(90deg) translateX(0); margin-left:-9px; } .ai-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; gap:36px; } .impact-grid{ grid-template-columns:1fr; } .impact-item{ border-right:none !important; } .impact-item:nth-child(-n+3){ border-top:1px solid rgba(255,255,255,0.1) !important; } .impact-item:first-child{ border-top:none !important; } .filter-bar{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding:var(--space-1) var(--space-1) var(--space-2); width:100%; } .why-row{ padding:22px 4px; } .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; } } /* ---------- Neutral placeholder background while images decode/paint ---------- */ .tech-visual, .showcase-item, .story-media, .about-media, .p-media, .sp-media, .hero-media, .acc-inner img, .blog-media, .product-media, .team-image{ background: linear-gradient(135deg, #ecebe7, #f7f5f2); } /* ---------- Touch devices: hover-only reveals must show by default ---------- */ @media (hover: none){ .p-desc{ max-height:8em; opacity:1; margin:var(--space-2) 0 0; } .p-view{ max-height:3em; opacity:1; margin-top:var(--space-3); } .p-item:hover .p-media img{ transform:none; } .why-arrow{ opacity:1; } } /* ---------- Graceful image fallback (hotlinked image failed to load) ---------- */ .img-fallback{ background: linear-gradient(135deg, var(--charcoal), var(--charcoal-soft)); display:flex; align-items:center; justify-content:center; } .img-fallback::after{ content:'N'; font-family:var(--font-display); font-style:italic; color: rgba(255,90,31,0.5); font-size:15%; } /* ---------- Small shared utilities (replace one-off inline styles) ---------- */ /* a label sits right on top of the list it introduces ("What we delivered") */ .label + .service-features{ margin-top:var(--space-1); } /* a heading sits close to the intro paragraph that follows it */ .section-head h2{ margin-bottom:var(--space-4); } .section-alt{ background: var(--off-white); } /* Inactive carousel slides are removed from the accessibility tree (screen readers hear the current one) */ .t-slide{ visibility:hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; } .t-slide.active{ visibility:visible; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear 0s; } /* Collapsed accordion / FAQ content must not be reachable by keyboard or screen readers */ .acc-body, .faq-answer{ visibility:hidden; transition: max-height .5s var(--ease), visibility 0s linear .5s; } .acc-item.open .acc-body, .faq-item.open .faq-answer{ visibility:visible; transition: max-height .5s var(--ease), visibility 0s linear 0s; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } }