/* ============================================================ TAMISH TECHNOLOGIES — Design System & Styles Hand-written CSS — no framework runtime required. ============================================================ */ /* ---------- Web Fonts (Self-Hosted) ---------- */ @font-face{font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url('../fonts/poppins-v24-latin-400.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* Fallback font metric override to eliminate layout shift */ @font-face{font-family: 'Poppins-Fallback';src: local('Arial');ascent-override: 95%;descent-override: 30%;line-gap-override: 10%;size-adjust: 100%;}/* ---------- Custom Properties (Design Tokens) ---------- */ :root{/* Color */ --c-deep: #0F2E2E;--c-accent: #204E4A;--c-gold: #CDAA6D;--c-muted: #6B7280;--c-light: #F7F7F5;--c-shadow: #0A1F1F;--c-white: #FFFFFF;--c-error: #B04040;--c-success: #3A7D5C;/* Typography */ --f-family: 'Poppins', 'Poppins-Fallback', system-ui, -apple-system, sans-serif;--f-display: 600;--f-body: 500;/* Type Scale (mobile-first, overridden at breakpoints) */ --fs-h1: 2.25rem;/* 36px */ --fs-h2: 1.75rem;/* 28px */ --fs-h3: 1.125rem;/* 18px */ --fs-eyebrow: 0.75rem;/* 12px */ --fs-body: 1rem;/* 16px */ --fs-caption: 0.8125rem;/* 13px */ --fs-button: 0.9375rem;/* 15px */ /* Spacing */ --space-xs: 0.5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 3rem;--space-xl: 5rem;--space-2xl: 7rem;/* Misc */ --radius: 6px;--radius-lg: 10px;--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--nav-height: 72px;}/* Desktop type scale */ @media (min-width: 768px){:root{--fs-h1: 3.75rem;/* 60px */ --fs-h2: 2.35rem;/* 38px */ --fs-h3: 1.375rem;/* 22px */ --fs-eyebrow: 0.8125rem;/* 13px */ --fs-body: 1.0625rem;/* 17px */ --fs-caption: 0.875rem;/* 14px */}} /* ---------- Reset & Base ---------- */ *, *::before, *::after{margin: 0;padding: 0;box-sizing: border-box;}/* Visually hidden — screen-reader only */ .sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}html{scroll-behavior: smooth;-webkit-text-size-adjust: 100%;}@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}*, *::before, *::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}} body{font-family: var(--f-family);font-weight: var(--f-body);font-size: var(--fs-body);line-height: 1.6;color: var(--c-deep);background-color: var(--c-light);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}img, svg{display: block;max-width: 100%;}a{color: inherit;text-decoration: none;}button{font: inherit;cursor: pointer;border: none;background: none;}input, select, textarea{font: inherit;}ul, ol{list-style: none;}/* Skip to content */ .skip-link{position: absolute;top: -100%;left: var(--space-sm);background: var(--c-gold);color: var(--c-deep);padding: var(--space-xs) var(--space-sm);border-radius: var(--radius);font-weight: var(--f-display);font-size: var(--fs-caption);z-index: 1000;transition: top var(--transition);}.skip-link:focus{top: var(--space-xs);}/* Focus styles */ :focus-visible{outline: 2px solid var(--c-gold);outline-offset: 3px;}/* ---------- Utility ---------- */ .container{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 var(--space-md);/* Prevent horizontal overflow on small screens */ overflow-x: hidden;}.eyebrow{font-size: var(--fs-eyebrow);font-weight: var(--f-body);letter-spacing: 0.08em;text-transform: uppercase;color: var(--c-gold);margin-bottom: var(--space-sm);}.section-padding{padding: var(--space-xl) 0;}@media (min-width: 768px){.section-padding{padding: var(--space-2xl) 0;}} /* ---------- Typography ---------- */ h1, h2, h3{font-weight: var(--f-display);}h1{font-size: var(--fs-h1);line-height: 1.1;letter-spacing: -0.02em;}h2{font-size: var(--fs-h2);line-height: 1.15;letter-spacing: -0.01em;}h3{font-size: var(--fs-h3);line-height: 1.25;}/* ============================================================ NAVIGATION ============================================================ */ .nav{position: fixed;top: 0;left: 0;right: 0;z-index: 100;height: var(--nav-height);display: flex;align-items: center;background-color: #f3f3f3;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);transition: box-shadow var(--transition);}.nav--solid{box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}.nav--menu-open,.nav:has(.nav__toggle--active),.nav:has(.nav__mobile--open){background-color: transparent !important;box-shadow: none !important;}.nav__inner{display: flex;align-items: center;justify-content: space-between;width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 var(--space-md);}.nav__logo{display: flex;align-items: center;z-index: 101;transition: opacity var(--transition), visibility var(--transition);}.nav--menu-open .nav__logo,.nav:has(.nav__toggle--active) .nav__logo,.nav:has(.nav__mobile--open) .nav__logo{opacity: 0;visibility: hidden;pointer-events: none;}.nav__logo-img{height: 36px;width: auto;}.nav__links{display: none;align-items: center;gap: var(--space-md);}@media (min-width: 900px){.nav__links{display: flex;gap: var(--space-lg);}} .nav__link{font-size: var(--fs-caption);font-weight: var(--f-body);color: var(--c-deep);letter-spacing: 0.02em;opacity: 0.75;transition: opacity var(--transition), color var(--transition);position: relative;}.nav__link::after{content: '';position: absolute;bottom: -4px;left: 0;width: 0;height: 1.5px;background: var(--c-gold);transition: width var(--transition);}.nav__link:hover, .nav__link:focus-visible{opacity: 1;color: var(--c-deep);}.nav__link:hover::after, .nav__link:focus-visible::after{width: 100%;}.nav__cta{display: none;font-size: var(--fs-caption);font-weight: var(--f-body);color: var(--c-deep);background: var(--c-gold);padding: 0.6rem 1.4rem;border-radius: var(--radius);letter-spacing: 0.02em;white-space: nowrap;transition: background-color var(--transition), transform var(--transition);}/* Only show desktop CTA at 900px+ (same breakpoint as nav links) */ @media (min-width: 900px){.nav__cta{display: inline-flex;}} .nav__cta:hover{background-color: #D9B87A;transform: translateY(-1px);}/* Mobile menu toggle */ .nav__toggle{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 44px;height: 44px;gap: 5px;z-index: 101;margin-left: auto;}@media (min-width: 900px){.nav__toggle{display: none;}} .nav__toggle-line{width: 22px;height: 2px;background: var(--c-deep);border-radius: 2px;transition: transform var(--transition), opacity var(--transition), background-color var(--transition);}.nav__toggle--active .nav__toggle-line{background: var(--c-light);}.nav__toggle--active:hover .nav__toggle-line{background: var(--c-gold);}.nav__toggle--active .nav__toggle-line:nth-child(1){transform: translateY(7px) rotate(45deg);}.nav__toggle--active .nav__toggle-line:nth-child(2){opacity: 0;}.nav__toggle--active .nav__toggle-line:nth-child(3){transform: translateY(-7px) rotate(-45deg);}/* Mobile menu panel — slide in from right */ .nav__mobile{position: fixed;top: 0;right: -100vw;/* Fully off-screen */ bottom: 0;width: 100vw;max-width: 100vw;height: 100%;height: 100dvh;background: var(--c-shadow);padding: var(--nav-height) 0 var(--space-lg) 0;/* push links below navbar */ display: flex;flex-direction: column;gap: 0;transition: right var(--transition);z-index: 100;overflow-y: auto;overflow-x: hidden;}/* Open state */ .nav__mobile--open{right: 0;}.nav__mobile-overlay{position: fixed;inset: 0;background: rgba(10, 31, 31, 0.6);z-index: 99;opacity: 0;visibility: hidden;transition: opacity var(--transition), visibility var(--transition);}.nav__mobile-overlay--visible{opacity: 1;visibility: visible;}/* Nav links */ .nav__mobile-link{font-size: 1.2rem;font-weight: var(--f-display);color: var(--c-light);padding: var(--space-sm) var(--space-md);border-bottom: 1px solid rgba(255, 255, 255, 0.05);transition: color var(--transition), padding-left var(--transition);display: block;letter-spacing: 0.01em;}.nav__mobile-link:hover, .nav__mobile-link:focus-visible{color: var(--c-gold);padding-left: calc(var(--space-md) + 8px);}/* CTA button at the bottom of panel */ .nav__mobile-cta{display: inline-flex;align-self: stretch;justify-content: center;font-size: var(--fs-button);font-weight: var(--f-body);color: var(--c-deep);background: var(--c-gold);padding: 1rem var(--space-md);border-radius: var(--radius);margin: var(--space-md) var(--space-md) 0;transition: background-color var(--transition);text-align: center;}.nav__mobile-cta:hover{background-color: #D9B87A;}/* ============================================================ HERO ============================================================ */ .hero{position: relative;min-height: 100vh;min-height: 100dvh;display: flex;align-items: center;background: var(--c-deep);overflow: hidden;padding-top: var(--nav-height);/* Ensure content never bleeds outside viewport */ width: 100%;max-width: 100vw;}.hero__bg{position: absolute;inset: 0;background: radial-gradient(ellipse 70% 60% at 75% 55%, rgba(32, 78, 74, 0.4) 0%, transparent 70%);pointer-events: none;}.hero__inner{display: grid;grid-template-columns: 1fr;gap: var(--space-lg);align-items: center;position: relative;z-index: 1;}@media (min-width: 768px){.hero__inner{grid-template-columns: 1.15fr 0.85fr;gap: var(--space-xl);}} .hero__content{/* Reduced padding on mobile to prevent overflow */ padding: var(--space-md) 0 var(--space-md);}@media (min-width: 480px){.hero__content{padding: var(--space-lg) 0 var(--space-md);}} @media (min-width: 768px){.hero__content{padding: var(--space-2xl) 0;}} /* Badge Pill */ .hero__badge-pill{display: inline-flex;align-items: center;gap: 0.5rem;font-size: 0.65rem;font-weight: var(--f-display);letter-spacing: 0.06em;text-transform: uppercase;color: var(--c-gold);background: rgba(205, 170, 109, 0.12);border: 1px solid rgba(205, 170, 109, 0.28);padding: 0.35rem 0.75rem;border-radius: 100px;margin-bottom: var(--space-sm);backdrop-filter: blur(8px);/* Allow wrapping on very small screens */ max-width: 100%;white-space: normal;word-break: break-word;line-height: 1.4;}@media (min-width: 480px){.hero__badge-pill{font-size: 0.72rem;letter-spacing: 0.08em;white-space: nowrap;}} .hero__badge-dot{width: 6px;height: 6px;border-radius: 50%;background: var(--c-gold);animation: badgePulse 2s ease-in-out infinite;}.hero__title{color: var(--c-light);margin-bottom: var(--space-md);hyphens: none;/* Allow line breaks on small screens to prevent overflow */ word-break: normal;overflow-wrap: break-word;}/* Scale down hero h1 on very small phones */ @media (max-width: 390px){.hero__title{font-size: 1.85rem;}} .hero__title-accent{color: var(--c-gold);}.hero__description{color: var(--c-light);opacity: 0.82;font-size: var(--fs-body);max-width: 540px;margin-bottom: var(--space-md);line-height: 1.65;}@media (min-width: 768px){.hero__description{margin-bottom: var(--space-lg);}} .hero__actions{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-sm);}@media (min-width: 480px){.hero__actions{gap: var(--space-md);}} .btn-primary{display: inline-flex;align-items: center;gap: 0.5rem;font-size: var(--fs-button);font-weight: var(--f-body);color: var(--c-deep);background: var(--c-gold);padding: 0.75rem 1.5rem;border-radius: var(--radius);letter-spacing: 0.03em;white-space: nowrap;transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);}@media (min-width: 480px){.btn-primary{padding: 0.85rem 2rem;}} .btn-primary:hover{background-color: #D9B87A;transform: translateY(-2px);box-shadow: 0 6px 20px rgba(205, 170, 109, 0.25);}.btn-secondary{display: inline-flex;align-items: center;gap: 0.4rem;font-size: var(--fs-caption);font-weight: var(--f-body);color: var(--c-light);opacity: 0.75;letter-spacing: 0.02em;transition: opacity var(--transition), color var(--transition);}.btn-secondary:hover, .btn-secondary:focus-visible{opacity: 1;color: var(--c-gold);}.btn-secondary__arrow{display: inline-block;transition: transform var(--transition);}.btn-secondary:hover .btn-secondary__arrow{transform: translateY(3px);}/* Trust Proof Strip */ .hero__trust-strip{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-top: var(--space-md);padding-top: var(--space-md);border-top: 1px solid rgba(205, 170, 109, 0.15);}@media (min-width: 768px){.hero__trust-strip{margin-top: var(--space-lg);}} .trust-pill{display: inline-flex;align-items: center;gap: 0.4rem;font-size: 0.75rem;color: var(--c-light);opacity: 0.85;background: rgba(32, 78, 74, 0.4);border: 1px solid rgba(205, 170, 109, 0.22);border-radius: 100px;padding: 0.3rem 0.75rem;transition: background var(--transition), border-color var(--transition);}.trust-pill:hover{background: rgba(32, 78, 74, 0.7);border-color: var(--c-gold);}.trust-pill__icon{width: 14px;height: 14px;flex-shrink: 0;}/* Hero illustration */ .hero__visual{display: none;position: relative;justify-self: center;}@media (min-width: 768px){.hero__visual{display: block;}} .hero__circuit{width: 100%;max-width: 480px;height: auto;opacity: 0.6;}.hero__circuit .node-pulse{fill: var(--c-gold);opacity: 0;animation: nodePulse 4s ease-in-out infinite;}.hero__circuit .node-pulse:nth-child(2){animation-delay: 1.2s;}.hero__circuit .node-pulse:nth-child(3){animation-delay: 2.4s;}.hero__circuit .node-pulse:nth-child(4){animation-delay: 0.6s;}.hero__circuit .node-pulse:nth-child(5){animation-delay: 1.8s;}@keyframes nodePulse{0%, 100%{opacity: 0;r: 3;}50%{opacity: 0.9;r: 5;}} /* Mobile circuit background */ .hero__mobile-bg{display: block;position: absolute;right: -20%;top: 15%;width: 80%;max-width: 360px;height: auto;opacity: 0.08;pointer-events: none;}@media (min-width: 768px){.hero__mobile-bg{display: none;}} /* ============================================================ SERVICES — Core Capabilities ============================================================ */ .services{background: var(--c-light);}.services__header{margin-bottom: var(--space-lg);}.services__subtitle, .process__subtitle{font-size: var(--fs-caption);color: var(--c-muted);max-width: 560px;margin-top: var(--space-xs);line-height: 1.6;}.services__grid{display: grid;grid-template-columns: 1fr;gap: var(--space-md);}@media (min-width: 768px){.services__grid{grid-template-columns: repeat(2, 1fr);gap: var(--space-md);}} .service-card{background: var(--c-deep);border-radius: var(--radius-lg);padding: var(--space-lg) var(--space-md);position: relative;overflow: hidden;transition: transform var(--transition);}.service-card:hover{transform: translateY(-4px);}/* Gold accent line that reveals on hover */ .service-card::after{content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: var(--c-gold);transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);}.service-card:hover::after{width: 100%;}/* Gold corner accent on cards — hover effect */ .service-card:hover::before{content: '';position: absolute;top: 0;left: 0;width: 50px;height: 50px;border-top: 2px solid var(--c-gold);border-left: 2px solid var(--c-gold);border-top-left-radius: var(--radius-lg);opacity: 0.5;}.service-card__icon{width: 44px;height: 44px;margin-bottom: var(--space-md);}.service-card__icon svg{width: 100%;height: 100%;stroke: var(--c-gold);stroke-width: 1.5;fill: none;}.service-card__title{color: var(--c-light);margin-bottom: var(--space-xs);}.service-card__description{color: var(--c-light);opacity: 0.75;font-size: var(--fs-caption);line-height: 1.65;}/* ============================================================ THE VIBE CODING GAP — From Prototype to Production ============================================================ */ .vibe-gap{background: var(--c-deep);color: var(--c-light);position: relative;overflow: hidden;}.vibe-gap::before{content: '';position: absolute;top: -10%;right: -10%;width: 500px;height: 500px;border-radius: 50%;background: radial-gradient(circle, rgba(205, 170, 109, 0.08) 0%, transparent 70%);pointer-events: none;}.vibe-gap__header{margin-bottom: var(--space-xl);}.vibe-gap__header h2{color: var(--c-light);margin-bottom: var(--space-sm);}.vibe-gap__accent{color: var(--c-gold);}.vibe-gap__lead{font-size: var(--fs-body);color: var(--c-light);opacity: 0.8;max-width: 720px;line-height: 1.65;}.vibe-gap__grid{display: grid;grid-template-columns: 1fr;gap: var(--space-md);margin-bottom: var(--space-xl);}@media (min-width: 768px){.vibe-gap__grid{grid-template-columns: repeat(2, 1fr);}} .vibe-card{background: var(--c-accent);border: 1px solid rgba(205, 170, 109, 0.2);border-radius: var(--radius-lg);padding: var(--space-lg) var(--space-md);display: flex;flex-direction: column;position: relative;transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);}.vibe-card:hover{transform: translateY(-3px);border-color: var(--c-gold);box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);}.vibe-card__badge{display: inline-flex;align-self: flex-start;font-size: 0.6875rem;font-weight: var(--f-display);letter-spacing: 0.08em;text-transform: uppercase;padding: 0.2rem 0.6rem;border-radius: 4px;margin-bottom: var(--space-xs);}.vibe-card__badge--warn{background: rgba(176, 64, 64, 0.2);color: #F87171;border: 1px solid rgba(176, 64, 64, 0.35);}.vibe-card__badge--solve{background: rgba(58, 125, 92, 0.25);color: #34D399;border: 1px solid rgba(58, 125, 92, 0.4);}.vibe-card__title{font-size: 1.15rem;color: var(--c-light);margin-bottom: var(--space-xs);}.vibe-card__problem{font-size: var(--fs-caption);color: var(--c-light);opacity: 0.72;line-height: 1.6;margin-bottom: var(--space-md);flex: 1;}.vibe-card__solution{background: rgba(15, 46, 46, 0.6);border: 1px solid rgba(205, 170, 109, 0.15);border-radius: var(--radius);padding: var(--space-sm);display: flex;flex-direction: column;gap: 0.35rem;}.vibe-card__solution p{font-size: var(--fs-caption);color: var(--c-light);opacity: 0.9;line-height: 1.55;}/* Comparison Matrix Box */ .vibe-compare{background: rgba(15, 46, 46, 0.85);border: 1px solid rgba(205, 170, 109, 0.3);border-radius: var(--radius-lg);padding: var(--space-lg);box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);}.vibe-compare__header{text-align: center;margin-bottom: var(--space-lg);}.vibe-compare__header h3{font-size: 1.35rem;color: var(--c-light);}.vibe-compare__vs{display: inline-block;font-size: 0.85rem;color: var(--c-gold);text-transform: uppercase;padding: 0 0.35rem;font-weight: var(--f-body);}.vibe-compare__grid{display: grid;grid-template-columns: 1fr;gap: var(--space-md);margin-bottom: var(--space-lg);}@media (min-width: 768px){.vibe-compare__grid{grid-template-columns: 1fr 1fr;gap: var(--space-lg);}} .vibe-compare__col{border-radius: var(--radius);padding: var(--space-md);}.vibe-compare__col--before{background: rgba(176, 64, 64, 0.08);border: 1px solid rgba(176, 64, 64, 0.2);}.vibe-compare__col--after{background: rgba(58, 125, 92, 0.12);border: 1px solid rgba(205, 170, 109, 0.3);}.vibe-compare__tag{font-size: 0.8rem;font-weight: var(--f-display);letter-spacing: 0.05em;text-transform: uppercase;margin-bottom: var(--space-sm);display: inline-block;}.vibe-compare__tag--before{color: #F87171;}.vibe-compare__tag--after{color: var(--c-gold);}.vibe-compare__list{display: flex;flex-direction: column;gap: 0.6rem;}.vibe-compare__list li{font-size: var(--fs-caption);line-height: 1.5;color: var(--c-light);opacity: 0.85;display: flex;align-items: flex-start;gap: 0.5rem;}.cross{color: #F87171;font-weight: bold;font-size: 1.1rem;line-height: 1;}.check{color: #34D399;font-weight: bold;font-size: 1rem;line-height: 1;}.vibe-compare__cta{display: flex;flex-direction: column;align-items: center;justify-content: space-between;gap: var(--space-md);padding-top: var(--space-md);border-top: 1px solid rgba(205, 170, 109, 0.15);text-align: center;}@media (min-width: 768px){.vibe-compare__cta{flex-direction: row;text-align: left;}} .vibe-compare__cta-text{font-size: var(--fs-caption);color: var(--c-light);opacity: 0.9;max-width: 500px;}.vibe-compare__cta-text strong{color: var(--c-gold);}.vibe-compare__btn{white-space: nowrap;}/* ============================================================ PROCESS — Signature Timeline ============================================================ */ .process{background: var(--c-light);}.process__header{margin-bottom: var(--space-xl);}.process__timeline{position: relative;display: grid;grid-template-columns: 1fr;gap: var(--space-xl);max-width: 900px;margin: 0 auto;}@media (min-width: 768px){.process__timeline{grid-template-columns: repeat(3, 1fr);gap: var(--space-lg);}} /* Connecting line — desktop horizontal */ .process__line-wrap{display: none;}@media (min-width: 768px){.process__line-wrap{display: block;position: absolute;top: 36px;left: 50px;right: 50px;height: 4px;z-index: 0;}} .process__line-bg{position: absolute;inset: 0;background: var(--c-muted);opacity: 0.2;border-radius: 2px;}.process__line-fill{position: absolute;top: 0;left: 0;bottom: 0;width: 0;background: linear-gradient(90deg, var(--c-gold), var(--c-gold));border-radius: 2px;transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);}.process--animated .process__line-fill{width: 100%;}/* Vertical line — mobile */ .process__vline-wrap{display: block;position: absolute;top: 36px;bottom: 36px;left: 23px;width: 4px;z-index: 0;}@media (min-width: 768px){.process__vline-wrap{display: none;}} .process__vline-bg{position: absolute;inset: 0;background: var(--c-muted);opacity: 0.2;border-radius: 2px;}.process__vline-fill{position: absolute;top: 0;left: 0;right: 0;height: 0;background: var(--c-gold);border-radius: 2px;transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);}.process--animated .process__vline-fill{height: 100%;}/* Step */ .process__step{position: relative;z-index: 1;text-align: center;padding-left: 0;}/* Mobile: left-align with node on the left */ @media (max-width: 767px){.process__step{text-align: left;padding-left: 60px;}} .process__node{width: 48px;height: 48px;border-radius: 50%;border: 2px solid var(--c-muted);display: flex;align-items: center;justify-content: center;margin: 0 auto var(--space-md);background: var(--c-light);position: relative;transition: border-color 0.6s ease, background-color 0.6s ease, transform 0.6s ease;}/* Mobile: absolute-position node to left */ @media (max-width: 767px){.process__node{position: absolute;left: 0;top: 0;margin: 0;}} /* Blueprint concentric ring */ .process__node::before{content: '';position: absolute;inset: -6px;border-radius: 50%;border: 1px solid var(--c-muted);opacity: 0.3;transition: border-color 0.6s ease, opacity 0.6s ease;}.process__node-number{font-size: var(--fs-caption);font-weight: var(--f-display);color: var(--c-muted);transition: color 0.6s ease;}/* Animated state */ .process--animated .process__node{border-color: var(--c-gold);background: var(--c-deep);transform: scale(1.08);}.process--animated .process__node::before{border-color: var(--c-gold);opacity: 0.5;}.process--animated .process__node-number{color: var(--c-gold);}/* Staggered node animation */ .process--animated .process__step:nth-child(1) .process__node{transition-delay: 0s;}.process--animated .process__step:nth-child(2) .process__node{transition-delay: 0.5s;}.process--animated .process__step:nth-child(3) .process__node{transition-delay: 1s;}.process--animated .process__step:nth-child(1) .process__node::before{transition-delay: 0s;}.process--animated .process__step:nth-child(2) .process__node::before{transition-delay: 0.5s;}.process--animated .process__step:nth-child(3) .process__node::before{transition-delay: 1s;}.process--animated .process__step:nth-child(1) .process__node-number{transition-delay: 0s;}.process--animated .process__step:nth-child(2) .process__node-number{transition-delay: 0.5s;}.process--animated .process__step:nth-child(3) .process__node-number{transition-delay: 1s;}.process__title{color: var(--c-deep);margin-bottom: var(--space-xs);}.process__description{font-size: var(--fs-caption);color: var(--c-muted);line-height: 1.6;max-width: 260px;margin: 0 auto;}@media (max-width: 767px){.process__description{margin: 0;}} /* ============================================================ PRODUCTS — "What We're Building" ============================================================ */ .products{background: var(--c-deep);color: var(--c-light);}.products__header{margin-bottom: var(--space-lg);}.products__header p{opacity: 0.7;max-width: 520px;margin-top: var(--space-xs);}.products__grid{display: grid;grid-template-columns: 1fr;gap: var(--space-md);margin-bottom: var(--space-xl);}@media (min-width: 768px){.products__grid{grid-template-columns: repeat(3, 1fr);}} .product-card{background: var(--c-accent);border: 1px solid var(--c-muted);border-radius: var(--radius-lg);padding: var(--space-lg) var(--space-md);transition: border-color var(--transition);display: flex;flex-direction: column;}.product-card:hover{border-color: var(--c-gold);}.product-card__name{color: var(--c-light);margin-bottom: var(--space-xs);}.product-card__description{color: var(--c-light);opacity: 0.7;font-size: var(--fs-caption);margin-bottom: var(--space-md);line-height: 1.6;flex: 1;}.product-card__footer{display: flex;align-items: center;gap: var(--space-sm);margin-top: var(--space-md);}.product-card__link{font-size: var(--fs-caption);color: var(--c-gold);font-weight: var(--f-body);letter-spacing: 0.02em;transition: opacity var(--transition);}.product-card__link:hover{opacity: 0.8;}/* Live badge — green variant */ .badge{display: inline-flex;align-items: center;gap: 0.35rem;font-size: 0.7rem;font-weight: var(--f-body);letter-spacing: 0.06em;text-transform: uppercase;color: var(--c-gold);border: 1px solid var(--c-gold);border-radius: 100px;padding: 0.3rem 0.8rem;}.badge--live{border-color: #2ECC71;color: #2ECC71;}.badge__dot{width: 6px;height: 6px;background: var(--c-gold);border-radius: 50%;animation: badgePulse 2s ease-in-out infinite;}.badge__dot--live{background: #2ECC71;}@keyframes badgePulse{0%, 100%{opacity: 0.4;}50%{opacity: 1;}} /* Waitlist form */ .products__waitlist{max-width: 480px;}.products__waitlist-label{font-size: var(--fs-caption);color: var(--c-light);opacity: 0.6;margin-bottom: var(--space-xs);}.waitlist-form{display: flex;gap: var(--space-xs);}.waitlist-form__input{flex: 1;background: rgba(255, 255, 255, 0.08);border: 1px solid var(--c-muted);border-radius: var(--radius);padding: 0.7rem 1rem;color: var(--c-light);font-size: var(--fs-caption);transition: border-color var(--transition);}.waitlist-form__input::placeholder{color: var(--c-muted);}.waitlist-form__input:focus{outline: none;border-color: var(--c-gold);}.waitlist-form__btn{background: var(--c-gold);color: var(--c-deep);font-size: var(--fs-caption);font-weight: var(--f-body);padding: 0.7rem 1.4rem;border-radius: var(--radius);white-space: nowrap;transition: background-color var(--transition);}.waitlist-form__btn:hover{background-color: #D9B87A;}.waitlist-form__btn:disabled{opacity: 0.6;cursor: not-allowed;}.products__waitlist-msg{font-size: var(--fs-caption);margin-top: var(--space-xs);min-height: 1.4em;}.products__waitlist-msg--success{color: var(--c-success);}.products__waitlist-msg--error{color: var(--c-error);}/* ============================================================ FAQ ============================================================ */ .faq{background: var(--c-light);}.faq__header{margin-bottom: var(--space-xl);}.faq__header p{color: var(--c-muted);font-size: var(--fs-caption);margin-top: var(--space-xs);}.faq__list{max-width: 860px;margin: 0 auto;display: flex;flex-direction: column;gap: var(--space-sm);}.faq-item{background: var(--c-white);border: 1px solid #E5E7EB;border-radius: var(--radius-lg);overflow: hidden;transition: border-color var(--transition), box-shadow var(--transition);}.faq-item:hover{border-color: var(--c-gold);}.faq-item__trigger{width: 100%;display: flex;align-items: center;justify-content: space-between;text-align: left;padding: var(--space-md);background: transparent;border: none;cursor: pointer;gap: var(--space-sm);color: var(--c-deep);}.faq-item__question{font-size: var(--fs-body);font-weight: var(--f-display);line-height: 1.35;}.faq-item__icon{font-size: 1.5rem;line-height: 1;color: var(--c-gold);font-weight: 300;transition: transform var(--transition);flex-shrink: 0;}.faq-item__panel{max-height: 0;overflow: hidden;transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;padding: 0 var(--space-md);}.faq-item__panel p{font-size: var(--fs-caption);color: var(--c-muted);line-height: 1.65;padding-bottom: var(--space-md);}.faq-item--open{border-color: var(--c-gold);box-shadow: 0 4px 16px rgba(15, 46, 46, 0.05);}.faq-item--open .faq-item__icon{transform: rotate(45deg);}.faq-item--open .faq-item__panel{max-height: 320px;}/* ============================================================ CONTACT ============================================================ */ .contact{background: var(--c-light);}.contact__inner{display: grid;grid-template-columns: 1fr;gap: var(--space-lg);}@media (min-width: 768px){.contact__inner{grid-template-columns: 1fr 1.15fr;gap: var(--space-xl);align-items: start;}} .contact__text h2{margin-bottom: var(--space-sm);}.contact__text p{color: var(--c-muted);max-width: 440px;}.contact__perks{display: flex;flex-direction: column;gap: 0.6rem;margin: var(--space-md) 0;}.contact__perk-item{display: flex;align-items: center;gap: 0.5rem;font-size: var(--fs-caption);color: var(--c-deep);opacity: 0.9;}.contact__perk-icon{width: 20px;height: 20px;border-radius: 50%;background: rgba(205, 170, 109, 0.2);color: var(--c-deep);font-weight: bold;font-size: 0.75rem;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}.contact__email-link{display: inline-flex;align-items: center;gap: 0.5rem;color: var(--c-gold);font-size: var(--fs-caption);margin-top: var(--space-sm);transition: opacity var(--transition);font-weight: var(--f-body);}.contact__email-link:hover{opacity: 0.8;}/* Form */ .contact-form{background: var(--c-white);border-radius: var(--radius-lg);padding: var(--space-lg);box-shadow: 0 1px 3px rgba(15, 46, 46, 0.06), 0 8px 24px rgba(15, 46, 46, 0.04);}.contact-form__row{display: grid;grid-template-columns: 1fr;gap: var(--space-md);margin-bottom: var(--space-md);}@media (min-width: 600px){.contact-form__row--2col{grid-template-columns: 1fr 1fr;}} .form-group{position: relative;}.form-group label{display: block;font-size: var(--fs-caption);font-weight: var(--f-body);color: var(--c-muted);margin-bottom: 0.35rem;}.form-group label .required{color: var(--c-error);margin-left: 0.15em;}.form-group input, .form-group select, .form-group textarea{width: 100%;background: transparent;border: none;border-bottom: 1.5px solid #D1D5DB;padding: 0.6rem 0;color: var(--c-deep);font-size: var(--fs-body);transition: border-color var(--transition);border-radius: 0;-webkit-appearance: none;}.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline: none;border-bottom-color: var(--c-gold);}.form-group input::placeholder, .form-group textarea::placeholder{color: #9CA3AF;}.form-group select{cursor: pointer;color: var(--c-deep);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 0 center;padding-right: 20px;}.form-group textarea{resize: vertical;min-height: 80px;}/* WhatsApp toggle */ .whatsapp-toggle{display: flex;align-items: center;gap: 0.5rem;cursor: pointer;margin-bottom: var(--space-md);}.whatsapp-toggle__checkbox{width: 18px;height: 18px;accent-color: var(--c-gold);cursor: pointer;flex-shrink: 0;}.whatsapp-toggle__label{font-size: var(--fs-caption);color: var(--c-muted);cursor: pointer;user-select: none;}.whatsapp-reveal{max-height: 0;opacity: 0;overflow: hidden;transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;margin-bottom: 0;}.whatsapp-reveal--open{max-height: 120px;opacity: 1;margin-bottom: var(--space-md);}/* Submit button */ .contact-form__submit{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;width: 100%;font-size: var(--fs-button);font-weight: var(--f-body);color: var(--c-deep);background: var(--c-gold);padding: 0.9rem 2rem;border: none;border-radius: var(--radius);letter-spacing: 0.03em;cursor: pointer;transition: background-color var(--transition), opacity var(--transition);}@media (min-width: 600px){.contact-form__submit{width: auto;}} .contact-form__submit:hover:not(:disabled){background-color: #D9B87A;}.contact-form__submit:disabled{opacity: 0.6;cursor: not-allowed;}/* CSS-only spinner */ .spinner{display: none;width: 16px;height: 16px;border: 2px solid rgba(15, 46, 46, 0.3);border-top-color: var(--c-deep);border-radius: 50%;animation: spin 0.6s linear infinite;}.contact-form__submit--loading .spinner{display: inline-block;}@keyframes spin{to{transform: rotate(360deg);}} /* Form messages */ .form-message{margin-top: var(--space-sm);padding: 0.75rem 1rem;border-radius: var(--radius);font-size: var(--fs-caption);display: none;}.form-message--visible{display: block;}.form-message--success{background: rgba(58, 125, 92, 0.08);color: var(--c-success);border: 1px solid rgba(58, 125, 92, 0.2);}.form-message--error{background: rgba(176, 64, 64, 0.08);color: var(--c-error);border: 1px solid rgba(176, 64, 64, 0.2);}.form-message__close{float: right;font-size: 1.1rem;line-height: 1;color: inherit;opacity: 0.6;cursor: pointer;padding: 0 0.25rem;}.form-message__close:hover{opacity: 1;}/* ============================================================ FOOTER ============================================================ */ .footer{background: var(--c-shadow);color: var(--c-light);padding: var(--space-xl) 0 var(--space-lg);}.footer__inner{display: flex;flex-direction: column;align-items: center;text-align: center;gap: var(--space-md);}.footer__logo{display: flex;align-items: center;justify-content: center;}.footer__logo-img{height: 36px;width: auto;}.footer__tagline{font-size: var(--fs-caption);color: var(--c-muted);}.footer__nav{display: flex;flex-wrap: wrap;justify-content: center;gap: var(--space-md);}.footer__nav a{font-size: var(--fs-caption);color: var(--c-light);opacity: 0.6;transition: opacity var(--transition);}.footer__nav a:hover, .footer__nav a:focus-visible{opacity: 1;}.footer__email{font-size: var(--fs-caption);color: var(--c-gold);transition: opacity var(--transition);}.footer__email:hover{opacity: 0.8;}.footer__copy{font-size: var(--fs-caption);color: var(--c-muted);opacity: 0.6;}.footer__divider{width: 100%;max-width: 200px;height: 1px;background: rgba(205, 170, 109, 0.1);}/* ============================================================ SCROLL REVEAL (Fade-up on intersection) ============================================================ */ .reveal{opacity: 0;transform: translateY(20px);transition: opacity 0.6s ease, transform 0.6s ease;}.reveal--visible{opacity: 1;transform: translateY(0);}@media (prefers-reduced-motion: reduce){.reveal{opacity: 1;transform: none;}}