:root{--bg:#F7F6F3;--panel:#ffffff;--text:#0f172a;--muted:#475569;--border:#e9edf2;--brand:#389C91;--accent:#FF7A00;--container:1100px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,'Noto Sans','Helvetica Neue',sans-serif}
img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none}

.container{width:94%;max-width:var(--container);margin:0 auto;padding:36px 0}

/* Header */
.header{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand a{font-weight:800;letter-spacing:.2px;font-size:20px}
.brand .blue{color:var(--brand)}
.nav a{margin-left:16px;font-weight:700}
.nav .btn{margin-left:16px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-weight:800;font-size:15px;line-height:1}
.btn-blue{background:var(--brand);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.btn-orange{background:var(--accent);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.btn-outline{background:#fff;border:1px solid var(--border)}

/* Sections */
.section{padding:38px 0;border-top:1px solid var(--border)}
.section h2{margin:0 0 6px;font-size:26px;font-weight:800}
.lead{color:var(--muted);margin:0 0 14px;font-size:16px;line-height:1.5}

/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;padding:26px 0}
.hero h1{font-size:44px;line-height:1.02;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.hero h1 .sub{display:block;font-weight:700;font-size:.58em;margin-top:6px}
.hero p{color:var(--muted);max-width:640px;margin:6px 0 12px;font-size:16px}
.hero .hero-media{border-radius:16px;overflow:hidden;box-shadow:0 8px 18px rgba(15,23,42,.08);background:var(--panel)}

/* Cards */
.cards{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.card{flex:1 1 320px;border:1px solid var(--border);padding:18px;background:var(--panel);border-radius:12px}
.card h3{margin:0 0 8px;font-weight:800;font-size:18px}
.card p{color:var(--muted);margin:0 0 8px;font-size:15px}
.card ul{margin:0 0 8px 18px} .card ul li{margin:4px 0}

/* UGC grid + phone frames */
.ugc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.phone-card{text-align:center; transform: scale(1.14);}
.phone{position:relative;border:1.5px solid var(--border);border-radius:28px;background:#000;overflow:hidden;
padding:10px 6px 16px;aspect-ratio:9/16;box-shadow:0 10px 18px rgba(0,0,0,.08)}
.phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:40%;height:12px;background:#111;border-radius:10px}
.phone .video{position:absolute;inset:10px 6px 16px;border-radius:16px;overflow:hidden;background:#000}
.phone .video iframe{width:100%;height:100%;border:0;display:block}
.caption{font-size:13px;color:#334155;margin-top:8px}

.landscape-wrap{margin-top:14px;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,.06);background:#000}
.landscape-wrap iframe{width:100%;height:320px;border:0;display:block}

/* About */
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.about-figure{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel)}
.about-cap{font-size:12px;color:#475569;padding:6px}

/* Contact */
.contact-grid{display:flex;gap:18px;flex-wrap:wrap}
.contact-card{flex:1 1 320px;border:1px solid var(--border);padding:18px;border-radius:12px;background:var(--panel)}
/* tighter caption + socials */
.contact-intro { margin-bottom: 8px; }
.contact-socials { gap: 10px; margin-top: 8px; }

/* Footer */
.site-footer{padding:20px 0;border-top:1px solid var(--border);text-align:center;color:#64748b;background:var(--panel)}

/* Page titles */
h1.page-title{margin:8px 0 8px} /* reduced top space on portfolio */

/* Desktop hero split */
@media (min-width:900px){.hero{grid-template-columns:1.1fr 1fr}}

/* Mobile */
@media (max-width:680px){
  .header-inner{flex-wrap:wrap;gap:10px}
  .nav{width:100%;display:flex;gap:12px;overflow-x:auto;white-space:nowrap;padding-bottom:4px}
  .nav a{font-size:16px;margin:0}
  .btn{padding:10px 14px;font-size:14px;border-radius:12px}
  .hero h1{font-size:40px}
  .hero p, .lead{font-size:15px}
}


/* === v8.1 HOTFIX: uniform phone sizes === */
.ugc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;justify-items:center}
.phone-card{width:29vw;max-width:160px;min-width:100px;display:flex;flex-direction:column;align-items:center}
.phone{width:100%;aspect-ratio:9/16;border:1.5px solid var(--border);border-radius:28px;background:#000;overflow:hidden;padding:10px 6px 16px;box-shadow:0 10px 18px rgba(0,0,0,.08)}
.phone .video{position:absolute;inset:10px 6px 16px;border-radius:16px;overflow:hidden;background:#000}
.caption{font-size:13px;color:#334155;margin-top:8px;text-align:center}
@media (max-width:680px){
  .phone-card{width:30vw;max-width:150px}
}