/* ============================================================ LANDBASE — Stylesheet v4 (Dark + Light mode) 320px → 4K, zero external dependencies ============================================================ */ /* ===== RESET ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit} ::selection{background:#f59e0b;color:#020817} /* ============================================================ DARK MODE VARIABLES (default) ============================================================ */ :root{ --bg: #020817; --bg-card: #0f172a; --bg-dark: #060e1c; --bg-hover: #1e293b; --border: #1e293b; --border-lt: #334155; --text: #f1f5f9; --text-h: #ffffff; --muted: #94a3b8; --muted2: #64748b; --card-bg: rgba(15,23,42,.5); --card-hover: rgba(15,23,42,.75); --overlay-hero: rgba(2,8,23,.96); --slide-info: rgba(2,8,23,.97); --form-bg: rgba(15,23,42,.45); --input-bg: #020817; --shadow: 0 4px 20px rgba(0,0,0,.4); --shadow-sm: 0 1px 6px rgba(0,0,0,.3); --amber: #f59e0b; --amber-lt: #fbbf24; --amber-dk: 3ffcc00; --amber-bg: rgba(245,158,11,.08); --amber-bd: rgba(245,158,11,.22); --green: #10b981; --green-lt: #34d399; --green-bg: rgba(16,185,129,.08); --green-bd: rgba(16,185,129,.28); --red-bg: rgba(239,68,68,.08); --red-bd: rgba(239,68,68,.22); --mono: ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace; --sans: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --r: 0.75rem; --r-sm:0.5rem; --r-lg:1rem; --r-xl:1.25rem; --ease: .2s ease; --header-bg: rgba(2,8,23,.92); --header-bdr: rgba(30,41,59,.85); --ticker-bg: linear-gradient(90deg,rgba(245,158,11,.16),rgba(245,158,11,.04),transparent); --tick-chip: #0f172a; --step-num: rgba(30,41,59,.45); --glow-a: rgba(245,158,11,.09); --glow-g: rgba(16,185,129,.06); --zone-bg: rgba(2,8,23,.78); --kw-bg: rgba(15,23,42,.5); --foot-bg: #060e1c; --quote-col: #cbd5e1; --label-col: var(--amber); --scrollbar: #334155; } /* ============================================================ LIGHT MODE VARIABLES — applied when ============================================================ */ html.light{ --bg: #f8fafc; --bg-card: #ffffff; --bg-dark: #f1f5f9; --bg-hover: #e2e8f0; --border: #e2e8f0; --border-lt: #cbd5e1; --text: #0f172a; --text-h: #020817; --muted: #475569; --muted2: #64748b; --card-bg: rgba(255,255,255,.9); --card-hover: rgba(255,255,255,1); --overlay-hero: rgba(248,250,252,.95); --slide-info: rgba(255,255,255,.98); --form-bg: rgba(255,255,255,.9); --input-bg: #ffffff; --shadow: 0 4px 20px rgba(0,0,0,.1); --shadow-sm: 0 1px 6px rgba(0,0,0,.08); --amber-bg: rgba(245,158,11,.1); --amber-bd: rgba(245,158,11,.35); --green-bg: rgba(16,185,129,.1); --green-bd: rgba(16,185,129,.35); --red-bg: rgba(239,68,68,.08); --red-bd: rgba(239,68,68,.3); --header-bg: rgba(255,255,255,.95); --header-bdr: rgba(226,232,240,.9); --ticker-bg: linear-gradient(90deg,rgba(245,158,11,.12),rgba(245,158,11,.04),transparent); --tick-chip: #ffffff; --step-num: rgba(203,213,225,.8); --glow-a: rgba(245,158,11,.06); --glow-g: rgba(16,185,129,.04); --zone-bg: rgba(241,245,249,.95); --kw-bg: rgba(241,245,249,.8); --foot-bg: #1e293b; --quote-col: #334155; --label-col: var(--amber-dk); --scrollbar: #cbd5e1; } /* ============================================================ BASE ============================================================ */ body{ background:var(--bg);color:var(--text); font-family:var(--sans);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%; transition:background .3s ease,color .3s ease; } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px} /* ===== ANIMATIONS ===== */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.2);opacity:0}} @keyframes spin{to{transform:rotate(360deg)}} /* ============================================================ LAYOUT ============================================================ */ .wrap{width:100%;padding-left:clamp(1rem,5vw,5rem);padding-right:clamp(1rem,5vw,5rem)} .section{padding:4rem 0;border-bottom:1px solid var(--border);width:100%;transition:border-color .3s} @media(min-width:768px){.section{padding:5.5rem 0}} @media(min-width:1024px){.section{padding:7rem 0}} .center{text-align:center} .center .sub{margin-left:auto;margin-right:auto} /* ============================================================ TYPOGRAPHY ============================================================ */ .label{ display:inline-block;font-family:var(--mono); font-size:clamp(.65rem,.8vw,.8rem);font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--label-col); } h2.heading{font-size:clamp(1.6rem,3.5vw,2.75rem);font-weight:900;letter-spacing:-.025em;line-height:1.12;color:var(--text-h);margin-top:.6rem} h3.heading{font-size:clamp(1.35rem,2.8vw,2.2rem);font-weight:900;letter-spacing:-.02em;line-height:1.15;color:var(--text-h);margin-top:.6rem} .sub{font-size:clamp(.9rem,1.1vw,1.05rem);color:var(--muted);line-height:1.8;margin-top:.75rem;max-width:50rem} .grad{background:linear-gradient(90deg,#fde68a,#f59e0b,#ffcc00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} html.light .grad{background:linear-gradient(90deg,#ffcc00,#ffcc00,#92400e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* ============================================================ BADGES ============================================================ */ .badge{ display:inline-flex;align-items:center;gap:.375rem; background:var(--amber-bg);border:1px solid var(--amber-bd); color:#ffcc00;font-family:var(--mono); font-size:clamp(.6rem,.75vw,.75rem);font-weight:700; letter-spacing:.12em;text-transform:uppercase; padding:.3rem .875rem;border-radius:999px;white-space:nowrap; } html.light .badge{color:#92400e} .badge-green{background:var(--green-bg);border-color:var(--green-bd);color:var(--green)} .badge-xs{font-size:clamp(.55rem,.65vw,.65rem);padding:.2rem .6rem} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-weight:800;font-size:clamp(.75rem,.9vw,.875rem); letter-spacing:.08em;text-transform:uppercase; border:none;border-radius:999px;padding:.875rem 1.75rem; transition:background var(--ease),box-shadow var(--ease),transform var(--ease),border-color var(--ease); white-space:nowrap;line-height:1;font-family:var(--sans); } .btn:active{transform:scale(.98)} .btn svg{width:.875rem;height:.875rem;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.5} .btn-primary{background:var(--amber);color:#020817} .btn-primary:hover{background:var(--amber-lt);box-shadow:0 0 28px rgba(245,158,11,.35)} .btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)} .btn-secondary:hover{border-color:var(--border-lt);background:var(--bg-hover)} .btn-sm{padding:.65rem 1.25rem;font-size:clamp(.7rem,.8vw,.8rem)} /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle{ display:flex;align-items:center;justify-content:center; width:2.375rem;height:2.375rem;flex-shrink:0; border:1.5px solid var(--border);border-radius:999px; background:var(--bg-card);color:var(--text); transition:background var(--ease),border-color var(--ease),transform var(--ease); position:relative;overflow:hidden; } .theme-toggle:hover{border-color:var(--amber);background:var(--amber-bg);transform:scale(1.08)} .theme-toggle svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0;transition:opacity .25s,transform .3s} .theme-toggle .ico-moon{position:absolute} .theme-toggle .ico-sun{position:absolute;opacity:0;transform:rotate(90deg)} /* Light mode: show sun, hide moon */ html.light .theme-toggle .ico-moon{opacity:0;transform:rotate(-90deg)} html.light .theme-toggle .ico-sun{opacity:1;transform:rotate(0deg)} html.light .theme-toggle{border-color:var(--amber-bd);color:var(--amber-dk)} /* Icon box */ .icon-box{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--border)} .icon-box svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--amber);stroke-width:2} html.light .icon-box{background:var(--bg-dark)} /* Glow blobs */ .glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px)} .glow-a{background:radial-gradient(circle,var(--glow-a),transparent 70%)} .glow-g{background:radial-gradient(circle,var(--glow-g),transparent 70%)} .g1{width:clamp(20rem,35vw,40rem);height:clamp(20rem,35vw,40rem);top:-8rem;right:-6rem} .g2{width:clamp(16rem,28vw,32rem);height:clamp(16rem,28vw,32rem);bottom:-6rem;left:-4rem} /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky;top:0;z-index:100;width:100%; background:var(--header-bg); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--header-bdr); transition:background .3s,border-color .3s,box-shadow .3s; } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.9rem clamp(1rem,5vw,5rem)} .logo{display:flex;align-items:center;flex-shrink:0} .logo img{height:clamp(34px,4vw,44px);width:auto} /* Show correct logo per theme */ .logo-dark{display:block} .logo-light{display:none} html.light .logo-dark{display:none} html.light .logo-light{display:block} .site-nav{display:none;align-items:center;gap:clamp(.875rem,1.5vw,2rem)} .site-nav a{font-size:clamp(.8rem,.95vw,.95rem);font-weight:500;color:var(--muted);white-space:nowrap;transition:color var(--ease);position:relative} .site-nav a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--amber);border-radius:2px;transition:width var(--ease)} .site-nav a:hover{color:var(--text)} .site-nav a:hover::after{width:100%} html.light .site-nav a:hover{color:var(--amber-dk)} .header-cta{display:none;align-items:center;gap:.625rem} .ham{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text);padding:.375rem;border-radius:var(--r-sm);transition:background var(--ease)} .ham:hover{background:var(--bg-hover)} .ham svg{width:1.5rem;height:1.5rem;display:block} /* Mobile nav */ .mob-nav{display:none;flex-direction:column;border-top:1px solid var(--border);background:var(--bg-card);padding:1rem clamp(1rem,5vw,5rem) 1.5rem;gap:.25rem;width:100%;transition:background .3s} .mob-nav.open{display:flex} .mob-nav a{font-size:1rem;font-weight:500;color:var(--text);padding:.75rem 0;border-bottom:1px solid var(--border);transition:color var(--ease)} .mob-nav a:hover{color:var(--amber)} .mob-nav a:last-child{border:none} .mob-nav .btn-primary{margin-top:.75rem;justify-content:center;border-radius:var(--r)} /* Mobile theme row */ .mob-theme-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border)} .mob-theme-row span{font-size:.9rem;font-weight:500;color:var(--muted)} @media(min-width:768px){ .site-nav{display:flex} .header-cta{display:flex} .ham{display:none} } /* ============================================================ TICKER ============================================================ */ .ticker{width:100%;background:var(--ticker-bg);border-bottom:1px solid var(--border);padding:.5rem 0;transition:background .3s,border-color .3s} .ticker-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:0 clamp(1rem,5vw,5rem)} .tick-left{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .tick-chip{background:var(--tick-chip);border:1px solid var(--border);padding:.2rem .625rem;border-radius:4px;font-family:var(--mono);font-size:clamp(.55rem,.7vw,.7rem);font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--amber-dk);flex-shrink:0;white-space:nowrap} html.light .tick-chip{color:var(--amber-dk)} .tick-text{font-size:clamp(.75rem,.9vw,.875rem);color:var(--muted)} .tick-text strong{color:var(--text)} .tick-right{font-size:clamp(.75rem,.9vw,.875rem);font-weight:700;color:var(--amber-dk);white-space:nowrap} @media(max-width:480px){.tick-right{display:none}} /* ============================================================ HERO ============================================================ */ .hero{position:relative;overflow:hidden;padding:4rem 0 5rem;border-bottom:1px solid var(--border);width:100%} @media(min-width:768px){.hero{padding:5rem 0 6.5rem}} .hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;position:relative;align-items:center} @media(min-width:900px){.hero-grid{grid-template-columns:58fr 42fr;gap:3rem}} .hero-title{font-size:clamp(1.85rem,5vw,4rem);font-weight:900;letter-spacing:-.03em;line-height:1.08;color:var(--text-h);margin:.875rem 0 1.125rem} .hero-desc{font-size:clamp(.95rem,1.15vw,1.1rem);color:var(--muted);line-height:1.8;max-width:36rem} .hero-btns{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:1.75rem} .hero-btns .btn-secondary svg{width:1rem;height:1rem;stroke:var(--amber)} /* Stats */ .stats{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.25rem;padding-top:1.875rem;border-top:1px solid var(--border)} @media(min-width:500px){.stats{grid-template-columns:repeat(4,1fr)}} .stat-val{font-size:clamp(1.5rem,2.5vw,2.25rem);font-weight:900;letter-spacing:-.02em;line-height:1} .stat-val.a{color:var(--amber)}.stat-val.w{color:var(--text-h)}.stat-val.g{color:var(--green)} .stat-lbl{font-family:var(--mono);font-size:clamp(.58rem,.7vw,.7rem);text-transform:uppercase;letter-spacing:.15em;color:var(--muted2);margin-top:.3rem} /* Hero card */ .hero-card{position:relative;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(1.25rem,2vw,1.75rem);backdrop-filter:blur(12px);overflow:hidden;transition:border-color var(--ease),background .3s,box-shadow var(--ease)} .hero-card:hover{border-color:var(--border-lt);box-shadow:var(--shadow)} html.light .hero-card{box-shadow:0 4px 20px rgba(0,0,0,.08)} .hc-glow{position:absolute;top:-4rem;right:-4rem;width:18rem;height:18rem;background:radial-gradient(circle,var(--glow-a),transparent 70%);pointer-events:none} .hc-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem} .pdot{width:9px;height:9px;background:var(--green);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0} .hc-title{font-size:clamp(.9rem,1.1vw,1.0625rem);font-weight:800;color:var(--text-h)} .hc-sub{font-size:clamp(.78rem,.9vw,.875rem);color:var(--muted);margin-bottom:1.125rem} .zone{background:var(--zone-bg);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin-bottom:.875rem;transition:border-color var(--ease),background .3s} .zone:hover{border-color:var(--amber-bd)} html.light .zone{box-shadow:0 2px 8px rgba(0,0,0,.06)} .zone-lbl{font-family:var(--mono);font-size:clamp(.55rem,.65vw,.65rem);font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--amber-dk);display:block;margin-bottom:.2rem} .zone-title{font-size:clamp(.8rem,.95vw,.9375rem);font-weight:700;color:var(--text-h)} .zone-desc{font-size:clamp(.72rem,.82vw,.8rem);color:var(--muted);margin-top:.2rem;line-height:1.5} .zone-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem;font-size:clamp(.68rem,.78vw,.78rem);color:var(--muted);flex-wrap:wrap;gap:.25rem} .zone-foot strong{color:var(--text);font-family:var(--mono)} .zg{color:var(--green);font-weight:700;font-family:var(--mono)} .hc-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border:1px solid var(--amber-bd);border-radius:var(--r);background:var(--amber-bg);font-size:clamp(.72rem,.85vw,.8125rem);font-weight:700;color:var(--amber-dk);transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);margin-top:.25rem} .hc-cta:hover{background:rgba(245,158,11,.15);border-color:var(--amber);box-shadow:0 0 16px rgba(245,158,11,.15)} .hc-cta svg{width:.875rem;height:.875rem;fill:none;stroke:var(--amber-dk);stroke-width:2.5} /* ============================================================ ABOUT ============================================================ */ .about-grid{display:grid;gap:3rem;align-items:center} @media(min-width:900px){.about-grid{grid-template-columns:5fr 7fr}} /* Slider */ .slider-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:.5rem;overflow:hidden;position:relative;transition:background .3s,border-color .3s} html.light .slider-wrap{box-shadow:0 4px 16px rgba(0,0,0,.1)} .slider-frame{position:relative;height:clamp(240px,35vw,420px);border-radius:var(--r-lg);overflow:hidden} .slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease} .slide.on{opacity:1} .slide img{width:100%;height:100%;object-fit:cover} .s-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,8,23,.95) 0%,rgba(2,8,23,.15) 55%,transparent 100%)} html.light .s-overlay{background:linear-gradient(to top,rgba(15,23,42,.8) 0%,rgba(15,23,42,.05) 55%,transparent 100%)} .s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;background:var(--slide-info);border:1px solid var(--border);border-radius:50%;opacity:0;transition:opacity var(--ease),background var(--ease)} .s-arrow svg{width:.9rem;height:.9rem;fill:none;stroke:var(--text);stroke-width:2.5} .s-arrow.prev{left:.75rem}.s-arrow.next{right:.75rem} .slider-wrap:hover .s-arrow{opacity:1} .s-arrow:hover{background:var(--bg-card)} .s-info{position:absolute;bottom:.875rem;left:.875rem;right:.875rem;background:var(--slide-info);border:1px solid var(--border);border-radius:var(--r);padding:.875rem;backdrop-filter:blur(10px);z-index:3;transition:background .3s} .s-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem} .dots{display:flex;gap:.375rem} .dot{width:6px;height:6px;border-radius:999px;background:var(--border-lt);border:none;padding:0;transition:width .3s,background .3s} .dot.on{width:16px;background:var(--amber)} .s-title{font-size:clamp(.8rem,.95vw,.9375rem);font-weight:700;color:var(--text-h)} .s-desc{font-size:clamp(.7rem,.8vw,.8rem);color:var(--muted);margin-top:.2rem;line-height:1.5} .about-body{font-size:clamp(.875rem,1vw,1rem);color:var(--muted);line-height:1.8;margin-top:1rem} .about-feats{display:grid;grid-template-columns:1fr;gap:1.125rem;margin-top:1.625rem} @media(min-width:500px){.about-feats{grid-template-columns:1fr 1fr}} .af{display:flex;gap:.75rem} .af h4{font-size:clamp(.85rem,1vw,.9375rem);font-weight:700;color:var(--text-h)} .af p{font-size:clamp(.78rem,.88vw,.85rem);color:var(--muted);margin-top:.2rem;line-height:1.6} /* Founders */ .founders-section{margin-top:4.5rem;padding-top:4rem;border-top:1px solid var(--border)} .founders-grid{display:grid;gap:1.25rem;margin-top:2.25rem} @media(min-width:600px){.founders-grid{grid-template-columns:1fr 1fr}} .fc{display:flex;gap:1.125rem;align-items:center;padding:1.375rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card-bg);transition:border-color var(--ease),background var(--ease),box-shadow var(--ease)} .fc:hover{border-color:var(--border-lt);background:var(--card-hover);box-shadow:var(--shadow-sm)} .fc-img{width:clamp(4rem,6vw,5.5rem);height:clamp(4rem,6vw,5.5rem);border-radius:var(--r);object-fit:cover;border:1px solid var(--border);flex-shrink:0;filter:grayscale(1);transition:filter .5s} .fc:hover .fc-img{filter:grayscale(0)} .fc-name{font-size:clamp(.9rem,1.1vw,1.0625rem);font-weight:800;color:var(--text-h)} .fc-role{font-family:var(--mono);font-size:clamp(.55rem,.65vw,.65rem);font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--amber-dk);margin-top:.2rem} .fc-bio{font-size:clamp(.75rem,.85vw,.8125rem);color:var(--muted);margin-top:.4rem;line-height:1.65} /* ============================================================ SERVICES ============================================================ */ .srv-layout{display:grid;gap:1.75rem;margin-top:3rem} @media(min-width:900px){.srv-layout{grid-template-columns:5fr 7fr}} .srv-list{display:flex;flex-direction:column;gap:.5rem} .srv-btn{display:flex;align-items:center;gap:.875rem;width:100%;text-align:left;padding:.9rem 1rem;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-dark);color:var(--muted);transition:all var(--ease)} .srv-btn:hover{background:var(--card-bg);color:var(--text);border-color:var(--border-lt)} .srv-btn.on{background:var(--bg-card);border-color:var(--amber);color:var(--text-h);box-shadow:0 0 0 3px var(--amber-bg)} html.light .srv-btn{background:var(--bg-dark)} html.light .srv-btn:hover{background:var(--bg-hover)} html.light .srv-btn.on{background:var(--bg-card)} .si{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--border);flex-shrink:0;transition:background var(--ease),border-color var(--ease)} .si svg{width:1.2rem;height:1.2rem;fill:none;stroke:var(--muted2);stroke-width:1.75;transition:stroke var(--ease)} .srv-btn.on .si{background:var(--amber);border-color:var(--amber)} .srv-btn.on .si svg{stroke:#020817} .sb{flex:1;min-width:0} .sb-t{font-size:clamp(.85rem,1vw,.9375rem);font-weight:700;display:block;color:var(--text)} .sb-d{font-size:clamp(.7rem,.8vw,.78rem);color:var(--muted2);display:block;margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sa{width:.9rem;height:.9rem;fill:none;stroke:var(--muted2);stroke-width:2;flex-shrink:0;transition:transform var(--ease),stroke var(--ease)} .srv-btn.on .sa{stroke:var(--amber);transform:translateX(4px)} .srv-panel{display:flex;flex-direction:column;padding:clamp(1.25rem,2vw,2rem);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--card-bg);gap:1.375rem;min-height:30rem;transition:background .3s,border-color .3s;box-shadow:var(--shadow-sm)} .sp-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.875rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)} .sp-eye{font-family:var(--mono);font-size:clamp(.55rem,.65vw,.65rem);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--amber-dk);display:block} .sp-title{font-size:clamp(1.1rem,1.8vw,1.625rem);font-weight:900;color:var(--text-h);margin-top:.2rem} .sp-body{font-size:clamp(.875rem,1vw,1rem);color:var(--muted);line-height:1.8;flex:1} .sp-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;background:var(--bg-dark);padding:1rem;border-radius:var(--r);border:1px solid var(--border);transition:background .3s} .sp-lbl{font-size:clamp(.68rem,.78vw,.78rem);color:var(--muted2);font-weight:600;display:block} .sp-val{font-size:clamp(.82rem,.95vw,.9375rem);font-weight:800;color:var(--text-h);display:block;margin-top:.2rem} .sp-val.a{color:var(--amber-dk);font-family:var(--mono)} .sp-call{background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:var(--r);padding:.875rem;font-size:clamp(.78rem,.9vw,.875rem);color:var(--amber-dk);line-height:1.65} .sp-call strong{color:var(--amber-dk);font-weight:800} html.light .sp-call{color:#92400e}.html.light .sp-call strong{color:#78350f} .sp-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.875rem;padding-top:1.125rem;border-top:1px solid var(--border);margin-top:auto} .sp-foot p{font-size:clamp(.78rem,.88vw,.875rem);color:var(--muted)} /* ============================================================ HOW IT WORKS ============================================================ */ .steps{display:grid;gap:1.25rem;margin-top:3rem} @media(min-width:540px){.steps{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}} .step{position:relative;overflow:hidden;padding:1.625rem;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--card-bg);transition:border-color var(--ease),box-shadow var(--ease),background .3s} .step:hover{border-color:var(--amber-bd);box-shadow:0 0 24px rgba(245,158,11,.07)} html.light .step:hover{box-shadow:0 4px 16px rgba(245,158,11,.12)} .step-num{position:absolute;top:1rem;right:1rem;font-size:3.25rem;font-weight:900;color:var(--step-num);font-family:var(--mono);line-height:1;pointer-events:none;user-select:none} .step-badge{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--r-sm);background:var(--bg-dark);border:1px solid var(--border);font-family:var(--mono);font-size:.8125rem;font-weight:700;color:var(--amber-dk);margin-bottom:1.125rem;flex-shrink:0} html.light .step-badge{background:var(--amber-bg);border-color:var(--amber-bd)} .step-title{font-size:clamp(.875rem,1.05vw,1rem);font-weight:800;color:var(--text-h);margin-bottom:.5rem} .step-desc{font-size:clamp(.8rem,.92vw,.875rem);color:var(--muted);line-height:1.75} /* ============================================================ PROJECTS ============================================================ */ .proj-head{padding-bottom:2.25rem;border-bottom:1px solid var(--border);margin-bottom:2.75rem} @media(min-width:768px){.proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}} .proj-grid{display:grid;gap:1.375rem} @media(min-width:540px){.proj-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.proj-grid{grid-template-columns:repeat(4,1fr)}} .pc{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;background:var(--card-bg);transition:border-color var(--ease),box-shadow var(--ease),background .3s} .pc:hover{border-color:var(--border-lt);box-shadow:var(--shadow)} .pc-img{position:relative;height:clamp(9rem,16vw,14rem);overflow:hidden;background:var(--bg-dark);flex-shrink:0} .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .pc:hover .pc-img img{transform:scale(1.06)} .pc-cat{position:absolute;top:.75rem;left:.75rem;background:rgba(2,8,23,.9);border:1px solid var(--amber-bd);padding:.2rem .6rem;border-radius:4px;font-family:var(--mono);font-size:clamp(.52rem,.62vw,.65rem);font-weight:700;color:var(--amber-lt);text-transform:uppercase;letter-spacing:.12em;backdrop-filter:blur(4px)} html.light .pc-cat{background:rgba(15,23,42,.85);color:#fbbf24} .pc-body{padding:1.25rem;flex:1} .pc-loc{display:flex;align-items:center;gap:.375rem;font-size:clamp(.72rem,.82vw,.8rem);color:var(--muted);margin-bottom:.45rem} .pc-loc svg{width:.875rem;height:.875rem;fill:none;stroke:var(--amber);stroke-width:2;flex-shrink:0} .pc-title{font-size:clamp(.875rem,1.05vw,1rem);font-weight:800;color:var(--text-h);margin-bottom:.4rem;line-height:1.35} .pc-detail{font-size:clamp(.75rem,.85vw,.8125rem);color:var(--muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pc-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.375rem;padding:.75rem 1.25rem;border-top:1px solid var(--border);background:var(--bg-dark);font-size:clamp(.7rem,.8vw,.8rem);transition:background .3s} .pc-size{color:var(--muted)} .pc-size strong{color:var(--text-h);font-family:var(--mono)} .pc-yield{color:var(--green);font-family:var(--mono);font-weight:700;flex-shrink:0} /* ============================================================ WHY US ============================================================ */ .ben-grid{display:grid;gap:1.125rem;margin-top:3rem} @media(min-width:540px){.ben-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.ben-grid{grid-template-columns:repeat(3,1fr)}} .bc{display:flex;gap:.875rem;padding:1.375rem;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--card-bg);transition:border-color var(--ease),background var(--ease),box-shadow var(--ease)} .bc:hover{border-color:var(--border-lt);background:var(--card-hover);box-shadow:var(--shadow-sm)} .bi{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--r-sm);background:var(--amber);flex-shrink:0} .bi svg{width:1.25rem;height:1.25rem;fill:none;stroke:#020817;stroke-width:2.25} .bt{font-size:clamp(.875rem,1.05vw,1rem);font-weight:800;color:var(--text-h)} .bd{font-size:clamp(.78rem,.9vw,.875rem);color:var(--muted);margin-top:.35rem;line-height:1.75} /* ============================================================ INDUSTRIES ============================================================ */ .ind-grid{display:grid;gap:.875rem;margin-top:3rem} @media(min-width:540px){.ind-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.ind-grid{grid-template-columns:repeat(3,1fr)}} .ic{display:flex;gap:.875rem;padding:1.25rem;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--card-bg);align-items:flex-start;transition:border-color var(--ease),background var(--ease),box-shadow var(--ease)} .ic:hover{border-color:var(--amber-bd);background:var(--card-hover);box-shadow:var(--shadow-sm)} .ii{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--r);background:var(--bg-dark);border:1px solid var(--border);flex-shrink:0;transition:background .3s} .ii svg{width:1.4rem;height:1.4rem;fill:none;stroke:var(--amber);stroke-width:1.75} html.light .ii{background:var(--amber-bg);border-color:var(--amber-bd)} .in-name{font-size:clamp(.875rem,1.05vw,1rem);font-weight:800;color:var(--text-h)} .in-desc{font-size:clamp(.75rem,.85vw,.8125rem);color:var(--muted);margin-top:.2rem;line-height:1.65} /* ============================================================ TESTIMONIALS ============================================================ */ .testi-grid{display:grid;gap:1.375rem;margin-top:3rem} @media(min-width:640px){.testi-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.testi-grid{grid-template-columns:repeat(3,1fr)}} .tc{display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--card-bg);transition:border-color var(--ease),box-shadow var(--ease),background .3s} .tc:hover{border-color:var(--border-lt);box-shadow:var(--shadow-sm)} .tc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:1rem} .tc-name{font-size:clamp(.875rem,1.05vw,1rem);font-weight:800;color:var(--text-h)} .tc-role{font-size:clamp(.7rem,.8vw,.8rem);color:var(--muted);margin-top:.1rem} .tc-q{font-size:clamp(.8125rem,.92vw,.9125rem);color:var(--quote-col);font-style:italic;line-height:1.8;flex:1;transition:color .3s} .tc-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:1.125rem;padding-top:.875rem;border-top:1px solid var(--border);font-size:clamp(.68rem,.78vw,.78rem)} .tc-lbl{text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);font-weight:600} .tc-y{color:var(--green);font-family:var(--mono);font-weight:700;font-size:clamp(.75rem,.85vw,.8125rem)} /* ============================================================ FAQS ============================================================ */ .faq-list{display:flex;flex-direction:column;gap:.625rem;max-width:56rem;margin:3rem auto 0} .faq-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card-bg);transition:border-color var(--ease),background .3s,box-shadow var(--ease)} .faq-item:hover{border-color:var(--border-lt);box-shadow:var(--shadow-sm)} .faq-btn{width:100%;text-align:left;padding:1.25rem 1.375rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.875rem;background:none;border:none;color:var(--text-h);font-size:clamp(.875rem,1vw,.9375rem);font-weight:700;cursor:pointer;font-family:var(--sans);line-height:1.5} .faq-icon{width:1.25rem;height:1.25rem;fill:none;stroke:var(--muted2);stroke-width:2;flex-shrink:0;margin-top:.125rem;transition:transform .25s,stroke .2s} .faq-item.open .faq-icon{stroke:var(--amber);transform:rotate(45deg)} .faq-body{display:none;padding:0 1.375rem 1.375rem;font-size:clamp(.82rem,.92vw,.9rem);color:var(--muted);line-height:1.85;border-top:1px solid var(--border);padding-top:.875rem} .faq-item.open .faq-body{display:block} .faq-body strong{color:var(--text-h)} /* ============================================================ CONTACT ============================================================ */ .contact-grid{display:grid;gap:2.5rem} @media(min-width:900px){.contact-grid{grid-template-columns:5fr 7fr}} .ci-list{display:flex;flex-direction:column;gap:1.375rem;margin-top:1.75rem} .ci{display:flex;gap:.875rem} .ci-icon{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--border);flex-shrink:0;transition:background .3s} html.light .ci-icon{background:var(--bg-dark)} .ci-icon svg{width:1.2rem;height:1.2rem;fill:none;stroke:var(--amber);stroke-width:2} .ci h4{font-size:clamp(.85rem,1vw,.9375rem);font-weight:700;color:var(--text-h)} .ci p{font-size:clamp(.78rem,.88vw,.875rem);color:var(--muted);margin-top:.2rem} .expert{padding:1.25rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card-bg);margin-top:1.5rem;transition:background .3s} html.light .expert{box-shadow:var(--shadow-sm)} .exp-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem;margin-bottom:.875rem;border-bottom:1px solid var(--border)} .exp-head svg{width:.9rem;height:.9rem;fill:none;stroke:var(--amber);stroke-width:2} .exp-head span{font-family:var(--mono);font-size:clamp(.52rem,.62vw,.65rem);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--amber-dk)} .exp-name{font-size:clamp(.9rem,1.05vw,1rem);font-weight:700;color:var(--text-h)} .exp-role{font-size:clamp(.6rem,.7vw,.7rem);text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin-top:.1rem} .exp-phone{font-family:var(--mono);font-size:clamp(.875rem,1vw,1rem);font-weight:700;color:var(--amber-dk);margin-top:.45rem} .wa-link{display:inline-flex;align-items:center;gap:.625rem;background:#25D366;color:#fff;font-weight:800;font-size:clamp(.72rem,.82vw,.8125rem);text-transform:uppercase;letter-spacing:.1em;padding:.875rem 1.375rem;border-radius:var(--r);transition:opacity var(--ease),box-shadow var(--ease);margin-top:.875rem} .wa-link:hover{opacity:.92;box-shadow:0 4px 16px rgba(37,211,102,.3)} .wa-link svg{width:1.1rem;height:1.1rem;fill:currentColor} /* Form */ .form-card{background:var(--form-bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(1.25rem,2.5vw,2rem);transition:border-color var(--ease),background .3s,box-shadow var(--ease)} html.light .form-card{box-shadow:0 4px 20px rgba(0,0,0,.08)} .form-card:hover{border-color:var(--border-lt)} .form-title{font-size:clamp(.95rem,1.15vw,1.2rem);font-weight:800;color:var(--text-h);display:flex;align-items:center;gap:.5rem;margin-bottom:1.625rem} .form-title svg{width:1.2rem;height:1.2rem;fill:none;stroke:var(--amber);stroke-width:2;flex-shrink:0} .frow{display:grid;gap:.875rem;grid-template-columns:1fr;margin-bottom:.875rem} @media(min-width:500px){.frow.two{grid-template-columns:1fr 1fr}} .fg{display:flex;flex-direction:column;gap:.35rem} label{font-size:clamp(.78rem,.88vw,.875rem);font-weight:600;color:var(--text)} input[type=text],input[type=email],input[type=tel],select,textarea{ width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm); padding:.8rem .9rem;color:var(--text);font-size:clamp(.85rem,.95vw,.9375rem); font-family:var(--sans);transition:border-color var(--ease),box-shadow var(--ease),background .3s; outline:none;appearance:none; } input::placeholder,textarea::placeholder{color:var(--muted2)} input:focus,select:focus,textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg)} textarea{resize:vertical;min-height:6.5rem} select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.5rem} select option{background:var(--bg-card);color:var(--text)} .f-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--amber);color:#020817;font-weight:900;font-size:clamp(.75rem,.88vw,.875rem);text-transform:uppercase;letter-spacing:.14em;padding:1.05rem;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--sans);transition:background var(--ease),box-shadow var(--ease);margin-top:.5rem} .f-btn:hover{background:var(--amber-lt);box-shadow:0 0 28px rgba(245,158,11,.3)} .f-btn:disabled{opacity:.5;cursor:not-allowed} .f-btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.5} .alert{display:flex;gap:.625rem;align-items:flex-start;padding:.875rem 1rem;border-radius:var(--r);font-size:clamp(.78rem,.88vw,.875rem);line-height:1.65;margin-top:.875rem} .alert svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0;margin-top:.1rem} .alert-ok{background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green)} html.light .alert-ok{color:#065f46} .alert-err{background:var(--red-bg);border:1px solid var(--red-bd);color:#dc2626} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--foot-bg);border-top:1px solid var(--border);padding:4.5rem 0 2rem;width:100%;transition:background .3s} .foot-grid{display:grid;gap:2.25rem} @media(min-width:640px){.foot-grid{grid-template-columns:1fr 1fr}} @media(min-width:900px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}} /* Footer always dark regardless of theme for contrast */ .site-footer .foot-desc{font-size:clamp(.78rem,.88vw,.875rem);color:#94a3b8;line-height:1.75;max-width:26rem} .foot-col h5{font-family:var(--mono);font-size:clamp(.58rem,.68vw,.68rem);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#f1f5f9;margin-bottom:.875rem} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem} .foot-col li a,.foot-col li span{font-size:clamp(.78rem,.88vw,.875rem);color:#64748b;transition:color var(--ease)} .foot-col li a:hover{color:var(--amber)} .foot-trans{font-size:clamp(.78rem,.88vw,.875rem);color:#64748b;line-height:1.75} .foot-trans strong{color:#94a3b8} .foot-logo{height:clamp(34px,4vw,42px);width:auto;margin-bottom:.875rem} .foot-seo{padding:1.75rem 0;border-top:1px solid rgba(30,41,59,.5);border-bottom:1px solid rgba(30,41,59,.5);margin:1.75rem 0} .foot-seo h6{font-family:var(--mono);font-size:clamp(.5rem,.6vw,.6rem);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#64748b;margin-bottom:.75rem} .kw-list{display:flex;flex-wrap:wrap;gap:.375rem} .kw{font-size:clamp(.55rem,.65vw,.65rem);font-family:var(--mono);color:#64748b;background:var(--kw-bg);border:1px solid rgba(30,41,59,.7);padding:.225rem .6rem;border-radius:999px;transition:color var(--ease);cursor:default} .kw:hover{color:#94a3b8} .foot-bottom{display:flex;flex-direction:column;gap:.875rem;font-size:clamp(.68rem,.78vw,.78rem);color:#64748b} @media(min-width:768px){.foot-bottom{flex-direction:row;align-items:center;justify-content:space-between}} .foot-links{display:flex;gap:.875rem;flex-wrap:wrap;align-items:center} .foot-links a{color:#64748b;transition:color var(--ease)} .foot-links a:hover{color:var(--amber)} .fsep{color:#334155} /* ============================================================ WHATSAPP FLOAT ============================================================ */ .wa-float{position:fixed;bottom:1.25rem;right:1.25rem;z-index:200;display:flex;align-items:center;gap:.625rem;background:#25D366;color:#fff;padding:.875rem 1rem;border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);transition:transform var(--ease),box-shadow var(--ease)} .wa-float:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(37,211,102,.25)} .wa-float>svg{width:1.25rem;height:1.25rem;fill:#fff;flex-shrink:0} .wa-txt{display:none;flex-direction:column;line-height:1.2} .wa-txt .wt{font-size:clamp(.52rem,.62vw,.6rem);font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.8)} .wa-txt .wm{font-size:clamp(.72rem,.82vw,.8125rem);font-weight:900} .wa-pulse{position:absolute;top:-4px;right:-4px;width:12px;height:12px;background:var(--amber);border-radius:50%;border:2px solid #020817} .wa-pulse::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--amber);opacity:.45;animation:ping 1.8s infinite} @media(min-width:540px){.wa-txt{display:flex}} /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease} .reveal.visible{opacity:1;transform:none} /* ============================================================ REDUCED MOTION ============================================================ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} }