/*
Theme Name: Two Dots Creative Studio
Theme URI: https://twodots.example
Author: Jorge Palomares & Pancho (GPT-5 Thinking)
Author URI: https://example.com
Description: One-page landing theme for Two Dots Creative Studio. Clean, fast, and WPBakery-compatible.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twodots
*/

/* CSS Reset (trimmed) */
*,*::before,*::after{box-sizing:border-box}html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;line-height:1.5;color:#111827;background:#fafafa}
img{max-width:100%;display:block;height:auto}a{color:inherit;text-decoration:none}button{font:inherit}

/* Layout utilities */
.container{max-width:1120px;margin-inline:auto;padding-inline:16px}
.section{padding:64px 0}
.section-tight{padding:40px 0}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:#F1F5F9;color:#0f172a;font-weight:600;font-size:12px}

/* Navbar */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(180%) blur(8px);background:#ffffffbd;border-bottom:1px solid #e5e7eb}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{height:36px;width:36px;border-radius:14px;background:#000;color:#fff;display:grid;place-content:center;font-weight:800}
.nav a{font-size:14px}
.nav-links{display:none;gap:24px}
@media(min-width:768px){.nav-links{display:flex}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:16px;border:1px solid #0ea5a6;background:#0ea5a6;color:#fff;font-weight:700}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#fff;color:#0f172a;border-color:#e5e7eb}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#d1fae5, #fff 40%, #ecfdf5)}
.h1{font-size:56px;line-height:1.05;margin:0 0 12px;font-weight:900;letter-spacing:-.02em}
@media(max-width:720px){.h1{font-size:36px}}
.hero p{max-width:720px;color:#475569;font-size:18px}

/* Cards */
.card{border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card .card-body{padding:16px}
.card .card-head{padding:16px 16px 8px;font-weight:700}

/* Portfolio */
.portfolio figure{overflow:hidden;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.portfolio img{transition:transform .25s ease}
.portfolio img:hover{transform:scale(1.05)}
.portfolio figcaption{padding:10px 12px;color:#334155;font-size:14px}

/* Pricing */
.price-row{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border-radius:12px;padding:10px 12px;font-size:14px}
.mono{font-feature-settings:'tnum' 1,'lnum' 1}

/* Quote calculator */
.kpi{background:#f8fafc;border-radius:12px;padding:12px}
.kpi .label{color:#64748b;font-size:12px}
.kpi .value{font-weight:800}
.input{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.input:focus{outline:2px solid #99f6e4;outline-offset:0;border-color:#22d3ee}

/* Footer */
.footer{border-top:1px solid #e5e7eb;color:#475569;font-size:14px}
.footer .wrap{display:flex;align-items:start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Helpers */
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-0{margin-bottom:0}
.text-muted{color:#64748b}
.text-emerald{color:#047857}
.flex{display:flex}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-6{gap:24px}
.round{border-radius:14px}
.small{font-size:12px}
.bold{font-weight:700}
/* End */
/* Two Dots additions */
.twodots-contact-bar a, .twodots-footer-contacts a{font-weight:600}