/* ───────────────────────── TOKENS ───────────────────────── */ :root{ --bg: #0A0D08; --bg-2: #0E1310; --surface: #131A12; --glass: rgba(233,239,224,.035); --line: rgba(233,239,224,.10); --line-2: rgba(233,239,224,.18); --ink: #EAEEE0; --muted: #8E9782; --accent: #AEDB4C; --accent-2: #7FA63A; --accent-ink:#0A0D08; --glow: rgba(174,219,76,.30); --serif: "Fraunces", Georgia, serif; --sans: "Space Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --ease-lux: cubic-bezier(.16,1,.3,1); --shadow: 0 30px 70px -30px rgba(0,0,0,.7); --text-xs:.74rem; --text-sm:.86rem; --text-base:.96rem; --text-md:1.06rem; } /* ───────────────────────── RESET / BASE ───────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} .sproutlio-scope{ font-family:var(--sans); /* No background here. The design set this on , with the ambient wash layered behind it; repeated per section it would hide that wash instead. */ color:var(--ink); font-weight:300; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* Ambient depth glows + film grain, all in ONE fixed layer behind the content. (The grain used to be a second full-viewport layer stacked above everything, which forced a whole-screen recomposite on every scroll frame.) */ .sproutlio-ambient::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(60% 45% at 78% 8%, rgba(174,219,76,.10), transparent 60%), radial-gradient(50% 40% at 12% 42%, rgba(127,166,58,.07), transparent 65%), var(--bg); } .sproutlio-scope img,.sproutlio-scope svg{display:block;max-width:100%;} .sproutlio-scope a{color:inherit;text-decoration:none;} .sproutlio-scope button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;} ::selection{background:var(--accent);color:var(--accent-ink);} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;} .sproutlio-scope section{position:relative;scroll-margin-top:5rem;} /* Content column: always centred, so every section shares one axis. Widened from 1280 so large displays don't leave the page looking stranded. */ .wrap{width:min(1440px,92vw);margin-inline:auto;} /* editorial atoms */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--accent); } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);flex:none;} .eyebrow.muted{color:var(--muted);} .eyebrow.muted::before{background:var(--accent);} .display{font-family:var(--serif);font-weight:400;line-height:1.03;letter-spacing:-.02em;} .display em{font-style:italic;color:var(--accent);} .line{display:block;overflow:hidden;padding-block:.14em;margin-block:-.14em;} .line-inner{display:block;will-change:transform;} /* buttons */ .btn{ position:relative;display:inline-flex;align-items:center;gap:.7rem; padding:1rem 1.9rem;border-radius:999px; background:var(--accent);color:var(--accent-ink); font-size:var(--text-base);font-weight:500;letter-spacing:.01em; transition:transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux); will-change:transform; } .btn .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-ink);transition:transform .5s var(--ease-lux);} .btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px -12px var(--glow);} .btn:hover .dot{transform:scale(1.7);} .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);} .btn--ghost .dot{background:var(--accent);} .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--accent);} .link-arrow{ display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono); font-size:var(--text-sm);font-weight:500;color:var(--ink); border-bottom:1px solid var(--line);padding-bottom:.35rem; transition:gap .4s var(--ease-lux), border-color .4s, color .4s; } .link-arrow:hover{gap:.9rem;border-color:var(--accent);color:var(--accent);} /* ───────────────────────── NAV ───────────────────────── */ #nav{position:fixed;inset-inline:0;top:0;z-index:100;transition:background .4s,box-shadow .4s,backdrop-filter .4s;} #nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:1.35rem;transition:padding .4s var(--ease-lux);} #nav.scrolled{background:rgba(10,13,8,.88);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line);} #nav.scrolled .wrap{padding-block:.85rem;} .logo{font-family:var(--sans);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;line-height:1;} .logo .logo-dot{color:var(--accent);} .logo small{display:block;font-family:var(--mono);font-size:.56rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.28rem;} .nav-links{display:flex;gap:2.2rem;list-style:none;} .nav-links a{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.03em;text-transform:uppercase;position:relative;padding-block:.3rem;color:var(--muted);transition:color .3s;} .nav-links a:hover{color:var(--ink);} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-lux);} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left;} .nav-cta{padding:.65rem 1.4rem;font-size:var(--text-sm);} .nav-right{display:flex;align-items:center;gap:.7rem;} .menu-btn{display:none;width:42px;height:42px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px;} .menu-btn span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease-lux);} #nav.menu-open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg);} #nav.menu-open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg);} .mobile-menu{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;} .mobile-menu[hidden]{display:none;} .mobile-menu .eyebrow{margin-bottom:2.2rem;} .mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:1.1rem;} .mobile-menu ul a{font-family:var(--serif);font-size:2.1rem;} .mobile-menu ul a:hover{color:var(--accent);} @media(max-width:920px){.nav-links{display:none;}.menu-btn{display:flex;}} @media(max-width:560px){.nav-cta{display:none;}.logo small{display:none;}} /* ───────────────────────── HERO ───────────────────────── */ #hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:7rem;padding-bottom:4rem;overflow:hidden;} .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;} .hero-fallback{position:absolute;z-index:0;pointer-events:none;right:2vw;top:50%;transform:translateY(-50%);width:min(44vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%, rgba(174,219,76,.22), transparent 62%);} .webgl-on .hero-fallback{display:none;} /* Hero copy. `max-width` shrinks this block, and .wrap's `margin-inline:auto` would then centre the narrow block in the whole viewport — which read as "floating in the middle". Pin its left edge to the same gutter every other section uses, so it lines up with the logo and all section headings. Only this block moves; the rest of the layout stays centred. */ .hero-grid{ position:relative;z-index:2;max-width:44rem; margin-left:calc((100vw - min(1440px,92vw)) / 2); margin-right:auto; } .hero-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem;} .hero-tags span{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted);padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;} .hero-title{font-size:clamp(3rem,7.6vw,6.6rem);margin-top:1.6rem;} .hero-sub{max-width:33rem;margin-top:2rem;font-size:var(--text-md);color:var(--muted);} .hero-actions{display:flex;align-items:center;gap:1.8rem;margin-top:2.6rem;flex-wrap:wrap;} .hero-note{margin-top:1.7rem;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.03em;color:var(--muted);} .hero-note b{color:var(--accent);font-weight:500;} /* floating tech cards */ .float-card{position:absolute;z-index:3;background:rgba(16,20,14,.86);backdrop-filter:blur(6px);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);will-change:transform;} .fc-score{right:6vw;top:20vh;padding:1.2rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;} .score-ring{position:relative;width:76px;height:76px;} .score-ring svg{transform:rotate(-90deg);} .score-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:1.3rem;color:var(--accent);} .fc-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .fc-code{right:14vw;top:52vh;padding:1rem 1.1rem;min-width:230px;} .fc-dots{display:flex;gap:6px;margin-bottom:.7rem;} .fc-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);} .fc-dots i:first-child{background:var(--accent-2);} .fc-code pre{font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--ink);white-space:pre;} .c-key{color:var(--accent);} .c-fn{color:#8fd0ff;} .c-str{color:#e6c07b;} .c-com{color:var(--muted);} .fc-stat{right:3vw;top:60vh;padding:1.1rem 1.3rem;min-width:170px;} .fc-stat .fc-big{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--accent);line-height:1;margin:.4rem 0 .7rem;} .spark{display:flex;align-items:flex-end;gap:4px;height:26px;} .spark i{flex:1;background:linear-gradient(var(--accent),var(--accent-2));border-radius:2px;opacity:.85;} @media(max-width:1100px){.fc-code{display:none;}} @media(max-width:920px){.float-card{display:none;}} .scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);z-index:2;} .scroll-hint::after{content:"";width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:drip 2.2s var(--ease-lux) infinite;} @keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ───────────────────────── CAPABILITY MARQUEE ───────────────────────── */ #cap{border-block:1px solid var(--line);padding-block:1.5rem;overflow:hidden;background:var(--bg-2);} .marquee{display:flex;width:max-content;animation:marquee 34s linear infinite;} .marquee:hover{animation-play-state:paused;} .marquee-set{display:flex;align-items:center;gap:0;} .marquee-set span{font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.06em;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;} .marquee-set span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.7;margin:0 2.6rem;} @keyframes marquee{to{transform:translateX(-50%);}} /* ───────────────────────── SERVICES (BENTO) ───────────────────────── */ #services { padding-block: 8rem 7rem; } .sec-head { max-width: 46rem; margin-bottom: 3.5rem; } .sec-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-top: 1.3rem; } .sec-head p { margin-top: 1.3rem; color: var(--muted); max-width: 34rem; } .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; } /* ── Card ─────────────────────────────────────────────────────────────── */ .bcard { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--line); border-radius: 20px; padding: 2rem; transition: border-color .5s var(--ease-lux), transform .5s var(--ease-lux), background .5s var(--ease-lux), box-shadow .5s var(--ease-lux); } .bcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 120% 90% at 100% 0%, rgba(174, 219, 76, .10), transparent 55% ); opacity: 0; transition: opacity .5s var(--ease-lux); pointer-events: none; } /* Keep the entire card above the glow */ .bcard > * { position: relative; z-index: 1; } /* ── Whole-card link ─────────────────────────────────────────────────── */ .sproutlio-scope .bcard-link { display: flex; flex-direction: column; width: 100%; height: 100%; color: inherit; text-decoration: none; } .sproutlio-scope .bcard-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 14px; } /* Content gets natural height while the Learn More sits at bottom */ .bcard-content { display: block; } /* ── Hover ───────────────────────────────────────────────────────────── */ .bcard:hover { border-color: var(--line-2); transform: translateY(-5px); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .8); } .bcard:hover::before { opacity: 1; } /* ── Grid spans ──────────────────────────────────────────────────────── */ .bcard.col3 { grid-column: span 3; } .bcard.col2 { grid-column: span 2; } .bcard.col4 { grid-column: span 4; } /* ── Number ──────────────────────────────────────────────────────────── */ .bcard .b-ix { display: block; font-family: var(--mono); font-size: var(--text-xs); color: var(--accent); } /* ── Icon ────────────────────────────────────────────────────────────── */ .bcard .b-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(174, 219, 76, .10); display: grid; place-items: center; color: var(--accent); margin: 1.4rem 0 1.3rem; box-shadow: inset 0 0 0 1px var(--line); transition: background .4s var(--ease-lux), border-color .4s var(--ease-lux), transform .4s var(--ease-lux); } .bcard:hover .b-ic { background: rgba(174, 219, 76, .16); transform: translateY(-2px); } /* ── Title ───────────────────────────────────────────────────────────── */ .bcard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; position: relative; color: var(--ink); transition: color .35s var(--ease-lux); } .bcard:hover h3 { color: var(--accent); } /* ── Description ─────────────────────────────────────────────────────── */ .bcard p { color: var(--muted); font-size: var(--text-base); margin-top: .7rem; position: relative; max-width: 34rem; } /* ── Tags ────────────────────────────────────────────────────────────── */ .bcard .b-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; position: relative; } .bcard .b-tags span { font-family: var(--mono); font-size: .68rem; color: var(--muted); padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 6px; transition: color .35s var(--ease-lux), border-color .35s var(--ease-lux), background .35s var(--ease-lux); } .bcard:hover .b-tags span { border-color: var(--line-2); } /* ── Learn More ──────────────────────────────────────────────────────── */ .bcard-more { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .4s var(--ease-lux), border-color .4s var(--ease-lux); } .bcard-more svg { flex: none; transform: translateX(0); transition: transform .45s var(--ease-lux), color .4s var(--ease-lux); } .bcard:hover .bcard-more { color: var(--accent); border-color: rgba(174, 219, 76, .28); } .bcard:hover .bcard-more svg { transform: translateX(5px); } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 920px) { .bento { grid-template-columns: repeat(2, 1fr); } .bcard.col3, .bcard.col2, .bcard.col4 { grid-column: span 2; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bcard.col3, .bcard.col2, .bcard.col4 { grid-column: span 1; } .bcard { padding: 1.6rem; border-radius: 18px; } .bcard .b-ic { margin-top: 1.2rem; } .bcard h3 { font-size: 1.45rem; } .bcard-more { margin-top: 1.6rem; } } /* ───────────────────────── PORTFOLIO ───────────────────────── */ #work{padding-block:7rem;background:var(--bg-2);border-block:1px solid var(--line);} .work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3.5rem;flex-wrap:wrap;} .work-head h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin-top:1.3rem;} .work-head p{max-width:24rem;color:var(--muted);font-size:var(--text-base);} /* featured */ .featured{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface);margin-bottom:1.6rem;} .featured .frame{border:0;border-radius:0;box-shadow:none;border-right:1px solid var(--line);} .featured-info{padding:2.6rem clamp(1.6rem,3vw,2.8rem);display:flex;flex-direction:column;justify-content:center;} .featured-info .f-cat{font-family:var(--mono);font-size:var(--text-xs);color:var(--accent);letter-spacing:.1em;text-transform:uppercase;} .featured-info h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);margin-top:.9rem;line-height:1.05;} .featured-info p{color:var(--muted);margin-top:1.1rem;font-size:var(--text-base);max-width:30rem;} .metrics{display:flex;gap:2.2rem;margin-top:1.8rem;} .metric b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--ink);line-height:1;} .metric span{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;} .tag-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.8rem;} .tag-row span{font-family:var(--mono);font-size:.7rem;color:var(--muted);padding:.3rem .7rem;border:1px solid var(--line);border-radius:6px;} .featured-info .link-arrow{margin-top:2rem;align-self:flex-start;} /* browser frame + real photo */ .frame{background:var(--surface);overflow:hidden;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);} .frame-bar{display:flex;align-items:center;gap:.45rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:rgba(10,13,8,.5);} .frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);} .frame-bar i:nth-child(3){background:var(--accent-2);} .frame-bar b{margin-left:.9rem;font-family:var(--mono);font-weight:400;font-size:var(--text-xs);color:var(--muted);} .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);} .shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,4,.12) 0%,rgba(6,9,4,.20) 45%,rgba(6,9,4,.72) 100%);} .shot-nav{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:4% 5%;} .shot-logo{color:#fff;font-family:var(--serif);font-weight:500;font-size:clamp(.9rem,1.4vw,1.15rem);} .shot-links{display:flex;gap:9px;} .shot-links i{width:18px;height:5px;border-radius:99px;background:rgba(255,255,255,.6);} .shot-hero{position:absolute;left:5%;right:5%;bottom:7%;z-index:2;color:#fff;} .shot-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.9;} .shot-hero h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.3vw,1.85rem);line-height:1.05;margin-top:.4rem;max-width:76%;} /* grid */ .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;} .pcard{transition:transform .5s var(--ease-lux);} .pcard:hover{transform:translateY(-6px);} .pcard .frame{transition:border-color .5s;} .pcard:hover .frame{border-color:var(--line-2);} .pcard .shot{aspect-ratio:16/11;} .pmeta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.1rem;} .pmeta h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;} .pmeta .p-tags{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-align:right;} .pcard .p-cat{font-family:var(--mono);font-size:var(--text-xs);color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-top:.2rem;} @media(max-width:920px){.featured{grid-template-columns:1fr;}.featured .frame{border-right:0;border-bottom:1px solid var(--line);}.work-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.work-grid{grid-template-columns:1fr;}} /* ───────────────────────── PROCESS ───────────────────────── */ #process{padding-block:8rem;} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:3.5rem;position:relative;} .steps::before{content:"";position:absolute;top:22px;left:6%;right:6%;height:1px;background:var(--line);} .pline{position:absolute;top:22px;left:6%;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;box-shadow:0 0 10px var(--glow);} .step{position:relative;} .step .s-node{width:46px;height:46px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:var(--text-sm);color:var(--accent);position:relative;z-index:2;} .step h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-top:1.4rem;} .step p{color:var(--muted);font-size:var(--text-sm);margin-top:.6rem;} @media(max-width:820px){.steps{grid-template-columns:1fr 1fr;}.steps::before,.pline{display:none;}} @media(max-width:460px){.steps{grid-template-columns:1fr;}} /* ───────────────────────── STATS ───────────────────────── */ #stats{padding-block:6rem 8rem;} .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;} .stats-left h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-top:1.3rem;} .props{margin-top:2.6rem;display:flex;flex-direction:column;} .prop{display:flex;gap:1.2rem;padding-block:1.4rem;border-top:1px solid var(--line);} .prop:last-child{border-bottom:1px solid var(--line);} .prop .pk{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(174,219,76,.10);display:grid;place-items:center;color:var(--accent);box-shadow:inset 0 0 0 1px var(--line);} .prop h3{font-family:var(--sans);font-weight:500;font-size:var(--text-md);} .prop p{color:var(--muted);font-size:var(--text-sm);margin-top:.2rem;} .numbers{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;} .number{border:1px solid var(--line);border-radius:18px;padding:2.2rem 1.9rem;background:var(--glass);position:relative;overflow:hidden;} .number::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:radial-gradient(90% 70% at 0% 0%,rgba(174,219,76,.08),transparent 60%);} .number strong{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:1;display:flex;align-items:baseline;} .number strong sup{font-size:.42em;color:var(--accent);margin-left:.08em;font-family:var(--mono);} .number > span{display:block;margin-top:.7rem;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} @media(max-width:920px){.stats-grid{grid-template-columns:1fr;gap:3rem;}} /* ───────────────────────── PRICING (three tiers) ───────────────────────── */ #pricing{padding-bottom:8rem;} .pricing-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:46rem;margin:0 auto 3.5rem;} .pricing-head h2{font-size:clamp(2.1rem,4.2vw,3.4rem);margin-top:1.3rem;} .pricing-head p{margin-top:1.1rem;color:var(--muted);font-size:var(--text-base);} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;} .tier{ position:relative;display:flex;flex-direction:column;height:100%; border:1px solid var(--line);border-radius:22px;background:var(--glass); padding:2.5rem 1.8rem 2rem; transition:border-color .5s var(--ease-lux), transform .5s var(--ease-lux); } .tier:hover{border-color:var(--line-2);transform:translateY(-4px);} /* the recommended plan: lit from the top so it reads as the default choice */ .tier--featured{ border-color:rgba(174,219,76,.45); background:linear-gradient(180deg,rgba(174,219,76,.13),rgba(174,219,76,.02) 45%,var(--glass)); box-shadow:0 34px 80px -46px var(--glow); } .tier-badge{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--accent);color:var(--accent-ink); font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; padding:.42rem 1.1rem;border-radius:999px;white-space:nowrap; } .tier-icon{align-self:center;width:34px;height:34px;color:var(--accent);margin-bottom:.9rem;} .tier h3{text-align:center;font-family:var(--sans);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;} .tier-sub{text-align:center;margin-top:.5rem;color:var(--muted);font-size:var(--text-sm);line-height:1.6;} .tier-rule{margin:1.5rem 0 1.3rem;height:1px;background:var(--line);} .tier--featured .tier-rule{background:rgba(174,219,76,.28);} .tier-plus{ font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin-bottom:.9rem; } .tier-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;} .tier-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--text-sm);font-weight:300;line-height:1.5;} .tier-list .tick{flex:none;margin-top:.15rem;color:var(--accent);font-size:.72rem;} .tier-list small{display:block;margin-top:.2rem;font-family:var(--mono);font-size:.64rem;color:var(--muted);letter-spacing:.02em;} .tier-best{margin-top:auto;padding-top:1.8rem;text-align:center;} .tier-best b{ display:block;font-family:var(--mono);font-size:.64rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem; } .tier-best span{color:var(--muted);font-size:var(--text-xs);line-height:1.6;} .tier-cta{ display:block;margin-top:1.4rem;padding:1.05rem 1rem;border-radius:14px;text-align:center; background:linear-gradient(160deg,var(--accent-2),#6d9130);color:var(--accent-ink); transition:transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux); } .tier--featured .tier-cta{background:linear-gradient(160deg,var(--accent),var(--accent-2));} .tier-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px var(--glow);} .tier-cta strong{display:block;font-size:1.85rem;font-weight:600;letter-spacing:-.02em;line-height:1;} .tier-cta strong i{font-style:normal;font-size:.5em;font-weight:500;opacity:.75;} .tier-cta em{display:block;font-style:normal;margin-top:.35rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;opacity:.8;} /* custom-work strip under the tiers */ .tier-note{ margin-top:1.5rem;display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap; border:1px solid var(--line);border-radius:16px;background:var(--glass);padding:1.2rem 1.8rem; } .tier-note .tn-copy b{display:block;color:var(--accent);font-size:var(--text-base);font-weight:500;} .tier-note .tn-copy span{color:var(--muted);font-size:var(--text-sm);} .tier-note .tn-icon{color:var(--accent);flex:none;} @media(max-width:1080px){ .tiers{grid-template-columns:1fr;max-width:34rem;margin-inline:auto;gap:2.2rem;} .tier--featured{order:-1;} } /* ───────────────────────── ABOUT ───────────────────────── */ #about{padding-block:8rem;background:var(--bg-2);border-block:1px solid var(--line);} .about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center;} .about-visual{position:relative;} .about-card{aspect-ratio:4/4.4;border-radius:22px;overflow:hidden;position:relative;border:1px solid var(--line);box-shadow:var(--shadow);} .about-photo{width:100%;height:100%;object-fit:cover;filter:saturate(.92);} .about-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,9,4,.5));} .about-chip{position:absolute;right:-1.2rem;bottom:2.2rem;z-index:2;background:#141a12;border:1px solid var(--line-2);border-radius:14px;padding:1rem 1.4rem;box-shadow:var(--shadow);font-size:var(--text-sm);line-height:1.5;} .about-chip strong{font-family:var(--serif);font-weight:500;font-size:var(--text-md);display:block;color:var(--accent);} .about-copy h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-top:1.3rem;} .about-copy p{margin-top:1.4rem;color:var(--muted);max-width:32rem;} .about-copy .link-arrow{margin-top:2rem;} @media(max-width:920px){.about-grid{grid-template-columns:1fr;gap:3rem;}.about-chip{right:.6rem;}} /* ───────────────────────── CTA ───────────────────────── */ #cta{padding-block:9rem 10rem;text-align:center;overflow:hidden;} #cta::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:70vw;height:70vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(circle,rgba(174,219,76,.14),transparent 62%);pointer-events:none;} .cta-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;} .cta-node{width:clamp(52px,6vw,74px);aspect-ratio:1;margin-bottom:1.4rem;border-radius:14px;border:1px solid var(--line-2);background:rgba(16,20,14,.6);display:grid;place-items:center;color:var(--accent);box-shadow:0 0 40px -8px var(--glow);} #cta h2{font-size:clamp(2.6rem,7vw,5.6rem);margin-top:.4rem;} #cta p{margin-top:1.6rem;color:var(--muted);max-width:26rem;} #cta .btn{margin-top:2.6rem;padding:1.2rem 2.6rem;font-size:1rem;} /* ───────────────────────── FOOTER ───────────────────────── */ .sproutlio-scope footer{border-top:1px solid var(--line);padding-block:4rem 2.4rem;} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;} .foot-grid h3{font-family:var(--mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;} .foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;} .foot-grid ul a{font-size:var(--text-sm);color:var(--muted);transition:color .3s;} .foot-grid ul a:hover{color:var(--accent);} .foot-brand p{margin-top:1.1rem;font-size:var(--text-sm);color:var(--muted);max-width:17rem;} .foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--text-xs);color:var(--muted);} @media(max-width:920px){.sproutlio-scope .foot-grid{grid-template-columns:1fr 1fr;}} /* ───────────────────────── MOTION SAFETY ───────────────────────── */ @media (prefers-reduced-motion: reduce){ .marquee{animation:none;} .scroll-hint::after{animation:none;} html{scroll-behavior:auto;} } /* ── Elementor host reset ────────────────────────────────────────────────── Section widgets render full bands, so neutralise the wrapper Elementor puts around every widget. Without this the design's own spacing gets doubled. */ .elementor-widget.sproutlio-section-widget, .elementor-widget.sproutlio-section-widget > .elementor-widget-container { margin: 0; padding: 0; width: 100%; max-width: none; } .sproutlio-scope { width: 100%; } /* ── Link colours vs the Elementor kit ───────────────────────────────────── The kit styles links as `.elementor-kit-N a`, which outranks the design's own `.btn` / `.link-arrow` rules. Re-assert them at higher specificity so button labels keep their intended colour. */ .sproutlio-scope a { color: inherit; } .sproutlio-scope a.btn { color: var(--accent-ink); } .sproutlio-scope a.btn--ghost { color: var(--ink); } .sproutlio-scope a.link-arrow { color: var(--ink); } .sproutlio-scope a.link-arrow:hover { color: var(--accent); } .sproutlio-scope a.tier-cta { color: var(--accent-ink); } .sproutlio-scope .foot-grid ul a { color: var(--muted); } .sproutlio-scope .foot-grid ul a:hover { color: var(--accent); } .sproutlio-scope .nav-links a { color: var(--muted); } .sproutlio-scope .nav-links a:hover { color: var(--ink); } /* Closing "your project" tile — the design carried these as inline styles. */ .pcard--cta{ display:flex;flex-direction:column;justify-content:center;align-items:flex-start; border:1px solid var(--line);border-radius:16px;padding:2.2rem;background:var(--glass); } .pcard--cta h3.display{font-size:1.7rem;margin-top:1rem;} .pcard--cta p{color:var(--muted);font-size:var(--text-sm);margin-top:.8rem;} .pcard--cta .link-arrow{margin-top:1.6rem;} /* ── Images vs Elementor's reset ─────────────────────────────────────────── Elementor ships `.elementor img{height:auto}` at specificity (0,2,0), which outranks the design's `.shot-img{height:100%}` (0,1,0). The cover images then collapse to zero height — and because a zero-height image never enters the viewport, lazy loading never fires either. Re-assert at (0,3,0). */ .sproutlio-scope .shot .shot-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; } .sproutlio-scope .about-card .about-photo{ width:100%; height:100%; object-fit:cover; max-width:none; } /* ── Theme-part wrappers ─────────────────────────────────────────────────── Elementor renders theme parts inside its own