/* Andybuddy Apps - a warm studio palette with a navy finance accent */
:root { --ink:#24272a; --muted:#74777a; --line:#dedfdd; --paper:#f7f6f2; --orange:#f2aa00; --orange-dark:#d98e00; --navy:#10132f; --violet:#7857ed; --mint:#28d7a1; --coral:#ff7288; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.section-wrap { width:min(1160px, calc(100% - 80px)); margin:0 auto; }
.site-header { height:76px; padding:0 5vw; background:#fff; border-bottom:1px solid #e7e7e5; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; line-height:1; }
.brand strong { display:block; font:700 17px/1 'Space Grotesk'; letter-spacing:.5px; }
.brand strong span { color:#626467; }
.brand small { display:block; color:#626467; font-size:9px; letter-spacing:2px; text-align:right; margin-top:4px; }
.brand-mark { width:31px; height:35px; display:block; position:relative; border:5px solid var(--orange); border-right-color:transparent; transform:skewY(-9deg); }
.brand-mark:after { content:''; position:absolute; inset:4px -6px 4px 7px; border:5px solid #686a6d; border-left-color:transparent; }
.site-nav { display:flex; align-items:center; gap:31px; font-size:14px; font-weight:600; }
.site-nav a { color:#606266; transition:color .2s; }
.site-nav a:hover,.site-nav a.active { color:var(--orange-dark); }
.site-nav .nav-cta { background:var(--orange); color:#fff; padding:29px 23px; margin-left:-8px; }
.nav-cta span { font-size:18px; margin-left:8px; }
.menu-toggle { display:none; background:none; border:0; }
.hero { min-height:660px; padding:100px 0 82px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; }
.eyebrow { color:var(--orange-dark); text-transform:uppercase; letter-spacing:2px; font:600 11px 'Space Grotesk'; margin:0 0 22px; }
.eyebrow span { width:30px; height:1px; background:var(--orange); display:inline-block; vertical-align:middle; margin-left:8px; }
h1,h2,h3 { font-family:'Space Grotesk', sans-serif; letter-spacing:-1.8px; line-height:1.04; margin:0; }
h1 { font-size:clamp(52px, 7vw, 88px); }
h1 em,h2 em { color:var(--orange); font-style:normal; }
.hero-intro { max-width:440px; font-size:19px; color:#6e7173; margin:27px 0 34px; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.button { display:inline-flex; align-items:center; gap:30px; border:0; padding:16px 21px; font:600 14px 'DM Sans'; cursor:pointer; }
.button-dark { background:var(--ink); color:#fff; }
.button-dark span,.button-light span { font-size:20px; }
.text-link { font-size:14px; font-weight:600; border-bottom:1px solid var(--orange); padding-bottom:4px; }
.text-link span { color:var(--orange-dark); margin-left:8px; font-size:18px; }
.hero-art { height:470px; position:relative; background:#ece8de; overflow:hidden; }
.hero-art:before { content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:var(--orange); left:22%; top:19%; }
.orbit { position:absolute; border:1px solid rgba(36,39,42,.25); border-radius:50%; transform:rotate(-30deg); }
.orbit-one { width:470px; height:170px; left:2%; top:30%; }.orbit-two { width:430px; height:135px; left:8%; top:39%; transform:rotate(22deg); }
.hero-card { position:absolute; background:#fff; box-shadow:12px 14px 30px rgba(45,39,17,.16); padding:24px; display:flex; flex-direction:column; }
.card-back { width:190px; height:230px; left:8%; top:21%; transform:rotate(-9deg); background:#f8f7f2; }.card-back span { color:var(--orange-dark); font:600 12px 'Space Grotesk'; }.card-back strong { margin-top:auto; font:600 26px/1.05 'Space Grotesk'; }
.card-front { width:224px; height:292px; right:14%; top:15%; transform:rotate(7deg); background:var(--navy); color:#fff; padding:25px; }.mini-brand { color:var(--mint); font:700 24px 'Space Grotesk'; }.card-label { color:#9696b8; font-size:9px; letter-spacing:1.5px; margin-top:46px; }.card-front strong { font:600 33px/1.02 'Space Grotesk'; margin-top:9px; }.card-foot { display:flex; justify-content:space-between; color:var(--mint); font-size:12px; margin-top:auto; }
.floating-note { position:absolute; font:600 12px 'Space Grotesk'; background:#fff; padding:9px 13px; box-shadow:4px 6px 12px rgba(0,0,0,.1); }.note-one { right:6%; bottom:18%; transform:rotate(-5deg); }.note-two { left:15%; bottom:11%; background:var(--ink); color:#fff; transform:rotate(4deg); }
.about { padding:120px 0 130px; display:grid; grid-template-columns:1fr 1fr; gap:38px 100px; }.section-heading h2,.apps-intro h2,.contact h2 { font-size:clamp(44px, 5vw, 67px); }.section-heading h2 span { color:#989b9e; }.about-copy { color:#74777a; font-size:16px; padding-top:12px; }.about-copy p { margin:0 0 18px; }.about-copy .lead { color:var(--ink); font-size:21px; line-height:1.4; }.principles { grid-column:1/-1; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding-top:32px; margin-top:20px; gap:20px; }.principles div { display:flex; gap:16px; }.principles b { color:var(--orange-dark); font:600 12px 'Space Grotesk'; }.principles strong { font:600 15px/1.3 'Space Grotesk'; }
.apps-section { background:var(--navy); color:#fff; padding:105px 0 120px; }.eyebrow-light { color:var(--mint); }.apps-intro { display:flex; justify-content:space-between; align-items:end; margin-bottom:58px; }.apps-intro h2 em { color:var(--mint); }.apps-intro > p { max-width:305px; color:#a4a7c6; margin:0 0 4px; }.app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.app-card { background:#1b2044; overflow:hidden; }.app-image { height:315px; position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; }.app-image img { width:100%; height:100%; object-fit:cover; }.opener .app-image { background:#c9362c; }.opener .app-image img { object-position:center 30%; transform:scale(1.1); }.locker .app-image { background:#3799d2; }.locker .app-image > img:first-child { width:140px; height:140px; object-fit:contain; position:absolute; z-index:1; left:16%; top:29%; }.locker-screen { width:205px !important; height:280px !important; object-fit:cover !important; object-position:left top; position:absolute; right:-8px; bottom:-25px; border-radius:18px 0 0 0; }.finance .app-image { background:#0d102b; }.finance .app-image img { object-fit:cover; object-position:center top; transform:scale(1.1); }.app-details { padding:24px 25px 27px; }.app-number { color:#a5a8ce; font:600 10px 'Space Grotesk'; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 14px; }.app-details h3 { font-size:31px; letter-spacing:-1px; }.app-details > p:not(.app-number) { color:#a5a8c2; font-size:14px; min-height:67px; margin:12px 0 20px; }.card-link { color:var(--mint); font-size:13px; font-weight:700; }.card-link span { font-size:18px; margin-left:8px; }
.faq { padding:115px 0 120px; display:grid; grid-template-columns:38% 1fr; gap:80px; }.faq-list details { border-top:1px solid var(--line); padding:23px 0; }.faq-list details:last-child { border-bottom:1px solid var(--line); }.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font:600 17px 'Space Grotesk'; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:var(--orange-dark); font-size:25px; font-weight:400; transition:transform .2s; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list p { max-width:650px; color:var(--muted); font-size:15px; margin:17px 35px 0 0; }
.contact { background:var(--orange); color:var(--ink); padding:105px 0 115px; }.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:120px; }.contact .eyebrow { color:var(--ink); }.contact h2 em { color:#fff; }.contact-note { max-width:360px; font-size:17px; margin:25px 0 38px; }.contact-details { display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; }.contact-details a { text-decoration:underline; text-underline-offset:4px; }.contact form { display:flex; flex-direction:column; gap:19px; padding-top:12px; }.contact label { font:600 10px 'Space Grotesk'; letter-spacing:1.4px; }.contact input,.contact textarea { display:block; width:100%; border:0; border-bottom:1px solid rgba(36,39,42,.45); background:transparent; padding:10px 0; font:16px 'DM Sans'; outline:none; resize:vertical; }.contact input:focus,.contact textarea:focus { border-color:var(--ink); }.contact input::placeholder,.contact textarea::placeholder { color:rgba(36,39,42,.6); }.button-light { align-self:flex-start; background:var(--ink); color:#fff; }.form-status { font-size:13px; margin:0; min-height:20px; }
footer { background:var(--ink); color:#b9bbbc; font-size:12px; padding:22px 0; }.section-wrap + footer {} footer .section-wrap { display:flex; justify-content:space-between; }footer a { color:var(--orange); font-size:18px; margin-left:15px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:800px) { .section-wrap { width:min(100% - 40px, 560px); }.site-header { height:68px; padding:0 20px; }.menu-toggle { display:flex; flex-direction:column; gap:4px; padding:8px; }.menu-toggle span { width:23px; height:2px; background:var(--ink); }.site-nav { display:none; position:absolute; top:68px; left:0; right:0; background:#fff; padding:10px 20px 20px; flex-direction:column; align-items:stretch; gap:0; box-shadow:0 8px 20px #0001; }.site-nav.open { display:flex; }.site-nav a { padding:13px 0; }.site-nav .nav-cta { margin:4px 0 0; padding:14px 16px; text-align:center; }.hero { min-height:auto; grid-template-columns:1fr; padding:75px 0 70px; gap:55px; }.hero-art { height:400px; }.hero-art:before { width:275px; height:275px; left:14%; top:20%; }.hero-card.card-front { right:10%; top:11%; }.card-back { left:5%; }.about,.faq,.contact-layout { grid-template-columns:1fr; gap:45px; }.about { padding:80px 0 90px; }.principles { grid-template-columns:1fr 1fr; gap:26px 10px; margin-top:5px; }.apps-section { padding:78px 0 82px; }.apps-intro { display:block; margin-bottom:38px; }.apps-intro > p { margin-top:25px; }.app-grid { grid-template-columns:1fr; }.app-image { height:290px; }.faq { padding:80px 0 90px; }.contact { padding:78px 0 80px; }.contact-layout { gap:35px; } }
@media (max-width:430px) { h1 { font-size:52px; }.hero-intro { font-size:17px; }.hero-actions { gap:17px; flex-wrap:wrap; }.hero-art { height:350px; }.card-front { width:195px; height:260px; }.card-front strong { font-size:29px; }.card-back { width:165px; height:205px; }.principles { grid-template-columns:1fr; }.principles div { align-items:baseline; }.faq-list summary { font-size:15px; gap:18px; }.faq-list summary span { flex:none; } footer .section-wrap { display:block; } footer .section-wrap span + span { display:block; margin-top:8px; } }