/* ========================================================================== Pro People — Public site design system Brand: teal (primary) · deep blue (secondary) · warm amber (accent) ========================================================================== */ :root{ /* Brand (overridable from admin branding via inline :root in ) */ --brand: #0d7d7d; --brand-600: #0b6a6a; --brand-700: #095757; --secondary: #0b4f6c; --accent: #f4a259; /* Neutrals */ --ink: #10201f; --body: #43575a; --muted: #6b7f82; --line: #e3eaea; --line-2: #eef3f3; --bg: #ffffff; --bg-soft: #f4f8f8; --bg-tint: #eaf5f4; --white: #ffffff; /* Support */ --ok:#0f9d6b; --ok-bg:#e6f6ef; --warn:#c9820a; --warn-bg:#fdf3e0; --danger:#d64545; --danger-bg:#fdecec; --info:#2b7cc4; --info-bg:#e8f2fb; /* Type */ --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --font-display: "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif; /* Shape & motion */ --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(16,32,31,.06),0 1px 3px rgba(16,32,31,.05); --shadow:0 6px 20px -6px rgba(11,79,108,.14),0 4px 10px -6px rgba(16,32,31,.08); --shadow-lg:0 24px 60px -18px rgba(11,79,108,.28); --container:1160px; --ease:cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--font);color:var(--body);background:var(--bg); font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block;height:auto} a{color:var(--brand-700);text-decoration:none;transition:color .18s var(--ease)} a:hover{color:var(--brand)} h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em} h1{font-size:clamp(2.1rem,4.6vw,3.4rem)} h2{font-size:clamp(1.65rem,3vw,2.4rem)} h3{font-size:1.28rem} p{margin:0 0 1rem} ul{margin:0 0 1rem;padding-left:1.15rem} strong{color:var(--ink)} :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px} .section{padding:76px 0} .section-sm{padding:52px 0} .bg-soft{background:var(--bg-soft)} .bg-tint{background:linear-gradient(180deg,var(--bg-tint),#fff)} .bg-ink{background:var(--secondary);color:#cfe3e6} .section-head{max-width:680px;margin:0 auto 46px;text-align:center} .section-head.left{margin-inline:0;text-align:left} .eyebrow{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:var(--bg-tint);padding:.35rem .8rem;border-radius:var(--r-pill);margin-bottom:14px} .lead{font-size:1.12rem;color:var(--muted)} .grid{display:grid;gap:26px} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-family:var(--font); padding:.82rem 1.4rem;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer; font-size:.98rem;line-height:1;transition:all .2s var(--ease);white-space:nowrap;text-align:center} .btn svg{width:1.05em;height:1.05em} .btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 18px -8px rgba(13,125,125,.6)} .btn-primary:hover{background:var(--brand-700);color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(13,125,125,.65)} .btn-accent{background:var(--accent);color:#3d2600} .btn-accent:hover{filter:brightness(1.05);transform:translateY(-2px);color:#3d2600} .btn-ghost{background:#fff;color:var(--secondary);border-color:var(--line)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)} .btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)} .btn-light:hover{background:rgba(255,255,255,.24);color:#fff} .btn-lg{padding:1rem 1.8rem;font-size:1.05rem} .btn-sm{padding:.5rem .9rem;font-size:.85rem} .btn-block{width:100%;justify-content:center} /* ---------- Header / nav ---------- */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line-2)} .nav{display:flex;align-items:center;gap:26px;height:74px} .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em} .brand img{height:38px;width:auto} .nav-menu{display:flex;align-items:center;gap:10px;margin-left:auto} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{color:var(--secondary);font-weight:600;font-size:.96rem;padding:.55rem .8rem;border-radius:var(--r-sm)} .nav-links a:hover{background:var(--bg-tint);color:var(--brand-700)} .nav-links a.active{color:var(--brand)} .nav-cta{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto} .nav-toggle span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.25s} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background: radial-gradient(1100px 460px at 88% -8%,rgba(13,125,125,.16),transparent 60%), radial-gradient(900px 420px at -5% 8%,rgba(11,79,108,.12),transparent 55%), linear-gradient(180deg,#f6fbfb,#fff)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:70px 0 80px} .hero h1 span{color:var(--brand)} .hero .lead{font-size:1.18rem;max-width:34ch;margin-bottom:28px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px} .hero-trust{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:.92rem;flex-wrap:wrap} .hero-art{position:relative} .hero-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:26px} .hero-card h3{margin-bottom:4px} .hero-metric{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)} .hero-metric:last-child{border-bottom:0} .hero-metric .num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--secondary)} .hero-bar{height:8px;border-radius:8px;background:var(--bg-tint);overflow:hidden;width:150px} .hero-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent))} /* ---------- Logo cloud / stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{text-align:center;padding:20px} .stat .n{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--brand);line-height:1} .stat .l{color:var(--muted);font-size:.95rem;margin-top:6px} /* ---------- Cards / services ---------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d3e6e5} .svc-card{display:flex;flex-direction:column;height:100%} .svc-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg-tint);color:var(--brand);margin-bottom:16px} .svc-ic svg{width:26px;height:26px} .svc-card h3{margin-bottom:6px} .svc-card h3 a{color:var(--ink)} .svc-card h3 a:hover{color:var(--brand)} .svc-tag{color:var(--brand);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .svc-card p{color:var(--muted);font-size:.97rem;margin-bottom:16px} .svc-more{margin-top:auto;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:6px} .svc-more svg{width:16px;height:16px;transition:transform .2s} .svc-card:hover .svc-more svg{transform:translateX(4px)} .badge-featured{position:absolute;top:16px;right:16px;background:var(--accent);color:#3d2600;font-size:.72rem;font-weight:800;padding:.28rem .6rem;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.05em} .svc-card{position:relative} /* ---------- Feature rows ---------- */ .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .feature-list{list-style:none;padding:0;margin:18px 0 0} .feature-list li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;color:var(--body)} .feature-list li svg{flex:0 0 auto;width:22px;height:22px;color:var(--brand);margin-top:2px} .media-frame{background:linear-gradient(135deg,var(--bg-tint),#fff);border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;box-shadow:var(--shadow)} /* ---------- Values ---------- */ .value{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center} .value .vic{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;background:var(--bg-tint);color:var(--brand)} .value h3{font-size:1.1rem;margin-bottom:6px} .value p{font-size:.92rem;color:var(--muted);margin:0} /* ---------- Testimonials ---------- */ .quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;height:100%;display:flex;flex-direction:column} .stars{color:var(--accent);letter-spacing:2px;margin-bottom:12px} .quote-card blockquote{margin:0 0 18px;font-size:1.05rem;color:var(--ink);line-height:1.6} .quote-who{margin-top:auto;display:flex;align-items:center;gap:12px} .avatar{width:44px;height:44px;border-radius:50%;background:var(--secondary);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-display)} .quote-who .nm{display:block;font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.3} .quote-who .rl{display:block;color:var(--muted);font-size:.85rem;line-height:1.3} /* ---------- CTA band ---------- */ .cta-band{background:linear-gradient(120deg,var(--secondary),var(--brand-700));color:#fff;border-radius:var(--r-xl);padding:52px;text-align:center;box-shadow:var(--shadow-lg)} .cta-band h2{color:#fff} .cta-band p{color:#d7ebee;max-width:52ch;margin:0 auto 26px} /* ---------- Footer ---------- */ .site-footer{background:#082e3f;color:#a9c4cb;padding:64px 0 26px;font-size:.94rem} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px} .site-footer h4{color:#fff;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px} .site-footer a{color:#a9c4cb;display:block;padding:5px 0} .site-footer a:hover{color:#fff} .footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.2rem;margin-bottom:14px} .footer-brand img{height:36px} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#7fa2ab;font-size:.87rem} /* ---------- Forms ---------- */ .form-field{margin-bottom:18px} .form-field label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px;font-size:.93rem} .req{color:var(--danger)} .input,select.input,textarea.input{width:100%;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s} .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,125,125,.14);outline:none} textarea.input{min-height:130px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field-error{color:var(--danger);font-size:.83rem;margin-top:5px} .input.err{border-color:var(--danger)} .help{color:var(--muted);font-size:.85rem;margin-top:5px} .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow)} /* ---------- Alerts / flash ---------- */ .alert{padding:.9rem 1.1rem;border-radius:var(--r-sm);margin-bottom:18px;font-size:.95rem;border:1px solid transparent} .alert-success{background:var(--ok-bg);color:#0a6b48;border-color:#bfe8d5} .alert-error{background:var(--danger-bg);color:#a52d2d;border-color:#f4c9c9} .alert-info{background:var(--info-bg);color:#1c5c94;border-color:#c6e0f6} .flash-stack{position:fixed;top:86px;right:20px;z-index:80;max-width:360px} .flash-stack .alert{box-shadow:var(--shadow)} /* ---------- Badges & pills ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;padding:.28rem .65rem;border-radius:var(--r-pill);text-transform:capitalize} .b-draft{background:#eef1f2;color:#5a6b6e} .b-sent,.b-contacted{background:var(--info-bg);color:#1c5c94} .b-accepted,.b-paid,.b-won,.b-active,.b-qualified{background:var(--ok-bg);color:#0a6b48} .b-rejected,.b-lost,.b-void{background:var(--danger-bg);color:#a52d2d} .b-partial,.b-proposal,.b-overdue,.b-new{background:var(--warn-bg);color:#8a5a06} /* ---------- Breadcrumb ---------- */ .crumb{font-size:.88rem;color:var(--muted);padding:20px 0 0} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--brand)} /* ---------- Page hero (inner) ---------- */ .page-hero{background:linear-gradient(180deg,var(--bg-tint),#fff);padding:44px 0 40px;border-bottom:1px solid var(--line-2)} .page-hero h1{margin-bottom:8px} .page-hero p{color:var(--muted);max-width:64ch;font-size:1.08rem} /* ---------- Pricing ---------- */ .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px} .price-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column} .price-card.featured{border-color:var(--brand);box-shadow:var(--shadow);position:relative} .price-card.featured::before{content:"Most popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;padding:.3rem .8rem;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.05em} .price-card .amt{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--ink);margin:8px 0 2px} .price-card .amt small{font-size:.9rem;color:var(--muted);font-weight:600} .price-feats{list-style:none;padding:0;margin:16px 0 22px;flex:1} .price-feats li{padding:7px 0;display:flex;gap:9px;align-items:flex-start;font-size:.93rem;color:var(--body)} .price-feats li svg{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:3px} /* ---------- Process steps ---------- */ .steps{counter-reset:step;display:grid;gap:20px} .step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px} .step .num{counter-increment:step;width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.2rem;display:grid;place-items:center} .step .num::before{content:counter(step,decimal-leading-zero)} .step h3{margin-bottom:4px;font-size:1.12rem} .step p{margin:0;color:var(--muted);font-size:.96rem} /* ---------- Deliverables ---------- */ .deliver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .deliver{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px} .deliver svg{width:24px;height:24px;color:var(--brand);flex:0 0 auto} .deliver h4{margin:0 0 3px;font-size:1rem;color:var(--ink)} .deliver p{margin:0;font-size:.88rem;color:var(--muted)} /* ---------- Blog ---------- */ .post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;height:100%} .post-card .pc-body{padding:24px;display:flex;flex-direction:column;flex:1} .post-card h3{font-size:1.15rem} .post-meta{color:var(--muted);font-size:.85rem;margin-bottom:8px} .article{max-width:760px;margin:0 auto} .article h2{margin-top:1.6em} .article p{font-size:1.08rem} /* ---------- FAQ ---------- */ .faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;padding:4px 20px} .faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.4rem;color:var(--brand)} .faq details[open] summary::after{content:"–"} .faq details p{padding-bottom:16px;margin:0;color:var(--muted)} /* ---------- Multi-step wizard ---------- */ .wizard-steps{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap} .wizard-steps .ws{flex:1;min-width:120px;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:#fff;text-align:center;font-size:.88rem;color:var(--muted);font-weight:600} .wizard-steps .ws.active{border-color:var(--brand);background:var(--bg-tint);color:var(--brand-700)} .wizard-steps .ws.done{color:var(--ok)} .wizard-panel{display:none} .wizard-panel.active{display:block;animation:fade .3s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .choice{border:1.5px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;transition:.18s;background:#fff} .choice:hover{border-color:var(--brand)} .choice input{position:absolute;opacity:0} .choice.sel{border-color:var(--brand);background:var(--bg-tint)} .choice .ct{font-weight:700;color:var(--ink)} .choice .cd{font-size:.85rem;color:var(--muted)} /* ---------- Error pages ---------- */ .error-page{min-height:70vh;display:grid;place-items:center;padding:40px 20px;text-align:center} .error-card .error-code{font-family:var(--font-display);font-weight:800;font-size:5rem;color:var(--brand);line-height:1} .body-plain{background:var(--bg-soft)} /* ---------- WhatsApp quick-question widget ---------- */ #wa-widget{position:fixed;right:20px;bottom:20px;z-index:80;font-family:var(--font)} .wa-float{display:flex;align-items:center;gap:2px;background:#25d366;color:#fff;border:0;border-radius:var(--r-pill);padding:6px;box-shadow:0 10px 30px -8px rgba(37,211,102,.55);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s;margin-left:auto} .wa-float:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(37,211,102,.65)} .wa-float .wa-label{font-weight:700;font-size:.92rem;padding:0 6px 0 12px;white-space:nowrap} .wa-float .wa-ic{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto} .wa-float .wa-ic svg{width:27px;height:27px;fill:#fff} .wa-float .wa-ic::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 2.4s infinite} @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} .wa-popup{position:absolute;right:0;bottom:74px;width:340px;max-width:calc(100vw - 40px);background:#fff;border-radius:18px;box-shadow:0 24px 60px -12px rgba(8,46,63,.4);overflow:hidden;transform:translateY(14px) scale(.96);opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .25s;transform-origin:bottom right} #wa-widget.open .wa-popup{transform:none;opacity:1;pointer-events:auto} #wa-widget.open .wa-float .wa-ic::after{animation:none} .wa-pop-head{position:relative;display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(120deg,#075e54,#128c7e);color:#fff; background-image:linear-gradient(120deg,rgba(7,94,84,.96),rgba(18,140,126,.96)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0M-10 10L10 -10M30 50L50 30' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E")} .wa-close{position:absolute;top:8px;right:12px;background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.85} .wa-close:hover{opacity:1} .wa-avatar{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto;overflow:hidden} .wa-avatar img{width:32px;height:32px;object-fit:contain} .wa-who strong{display:block;font-size:1rem;line-height:1.2} .wa-status{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#d7f5ea} .wa-dot{width:8px;height:8px;border-radius:50%;background:#7bed9f;box-shadow:0 0 0 0 rgba(123,237,159,.7);animation:waPulse2 1.8s infinite} @keyframes waPulse2{0%{box-shadow:0 0 0 0 rgba(123,237,159,.6)}70%{box-shadow:0 0 0 6px rgba(123,237,159,0)}100%{box-shadow:0 0 0 0 rgba(123,237,159,0)}} .wa-pop-body{padding:16px;background:#e6ded5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23d9cfc3' fill-opacity='.4'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='40' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E")} .wa-bubble{background:#fff;border-radius:2px 12px 12px 12px;padding:11px 14px;font-size:.9rem;color:var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.08);margin-bottom:12px;line-height:1.5} .wa-questions{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px} .wa-q{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1.5px solid transparent;border-radius:10px;padding:10px 12px;font-size:.86rem;color:var(--ink);cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.06);transition:border-color .15s,background .15s;line-height:1.35} .wa-q:hover{border-color:#25d366} .wa-q input{margin-top:2px;accent-color:#25d366;flex:0 0 auto} .wa-q:has(input:checked){border-color:#25d366;background:#f0fff6} .wa-pop-foot{padding:12px 16px 14px;background:#fff;text-align:center} .wa-send{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;border:0;padding:12px;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .15s,transform .15s} .wa-send:hover{background:#1fbe5a;transform:translateY(-1px)} .wa-direct{display:inline-block;margin-top:9px;font-size:.8rem;color:var(--muted)} .btn-whatsapp{background:#25d366;color:#fff} .btn-whatsapp:hover{background:#1fbe5a;color:#fff;transform:translateY(-2px)} /* ===== Mobile app-style bottom navigation ===== */ .mobile-nav{display:none} @media(max-width:720px){ .mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75; background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(12px); border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(8,46,63,.1); justify-content:space-around;align-items:flex-end; padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px))} .mn-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px; font-size:.66rem;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;padding:2px;text-decoration:none} .mn-item svg{width:22px;height:22px} .mn-item span{line-height:1} .mn-item.active{color:var(--brand)} .mn-item.active svg{color:var(--brand)} .mn-cta{flex:0 0 auto;width:56px;height:56px;margin:-26px 4px 0;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;display:grid;place-items:center; box-shadow:0 10px 22px -6px rgba(13,125,125,.7);border:4px solid #fff;text-decoration:none} .mn-cta svg{width:24px;height:24px} .mn-cta:active{transform:scale(.94)} /* room for the fixed bottom bar */ body{padding-bottom:64px} .site-footer{padding-bottom:26px} /* WhatsApp widget lifts above the bottom bar, compact popup */ #wa-widget{right:14px;left:auto;bottom:78px;pointer-events:auto} .wa-float .wa-label{display:none} .wa-popup{position:absolute;right:0;left:auto;bottom:72px;width:300px;max-width:calc(100vw - 28px)} .wa-questions{max-height:40vh} } /* ---------- Utilities ---------- */ .text-center{text-align:center}.mt-0{margin-top:0}.mb-0{margin-bottom:0} .mt-3{margin-top:1.2rem}.mt-4{margin-top:2rem} .muted{color:var(--muted)} .flex{display:flex;gap:12px;align-items:center} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .hide{display:none} /* ---------- Real photography ---------- */ .hero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)} .hero-photo>img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover} .hero-badge{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:var(--r-lg);padding:14px 12px;box-shadow:var(--shadow);display:flex;justify-content:space-around;gap:10px} .hero-badge .hb{text-align:center} .hero-badge .hb b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--secondary);line-height:1} .hero-badge .hb span{font-size:.72rem;color:var(--muted)} .photo-frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)} .photo-frame img{width:100%;display:block;object-fit:cover} .photo-frame.cutout{background:linear-gradient(150deg,var(--bg-tint),#fff);box-shadow:var(--shadow)} .photo-frame.cutout img{aspect-ratio:1/1;object-fit:contain;padding:8px} /* ---------- Responsive ---------- */ @media(max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:34px} .hero-art{order:-1;max-width:420px} .feature-row{grid-template-columns:1fr;gap:28px} .footer-grid{grid-template-columns:1fr 1fr} .g-3{grid-template-columns:repeat(2,1fr)} .g-4{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .nav-toggle{display:block} .nav-menu{display:none;position:absolute;top:74px;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:12px 22px 18px;max-height:calc(100vh - 74px);overflow-y:auto} .site-header.open .nav-menu{display:flex} .nav-links{flex-direction:column;align-items:stretch;gap:2px;width:100%} .nav-links a{padding:.8rem .6rem;border-radius:var(--r-sm)} .nav-cta{flex-direction:column;align-items:stretch;width:100%;gap:8px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line-2)} .nav-cta .btn{width:100%;justify-content:center} } @media(max-width:720px){ .section{padding:52px 0} .g-2,.g-3,.g-4,.form-row{grid-template-columns:1fr} .cta-band{padding:34px 22px} .footer-grid{grid-template-columns:1fr} .flash-stack{left:14px;right:14px;max-width:none} } @media(max-width:480px){ .stats{grid-template-columns:repeat(2,1fr)} h1{font-size:1.9rem} }