/*
Theme Name: DTAPP Landing (Split Hero)
Theme URI: https://dtappcall.com
Author: DTAPP
Author URI: https://dtappcall.com
Description: A lightweight, responsive split-screen animated landing page theme for DTAPP (Double Tap Call™) with gradient hero, parallax phone mockup, QR, and App Store badge.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dtapp
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, landing-page
*/

:root{
  --blue:#006CFF;
  --aqua:#0FB5EE;
  --txt:#0b2239;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#0b2239;
  background: linear-gradient(135deg, var(--blue), var(--aqua));
  background-size: 200% 200%;
  animation: dtapp-bgShift 16s ease-in-out infinite;
}
@keyframes dtapp-bgShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:28px 20px 64px;}
.header{display:flex;align-items:center;justify-content:space-between;color:var(--white);}
.header .brand{display:flex;align-items:center;gap:14px}
.header .brand img{height:44px}
.header nav a{opacity:.9;margin-left:18px;text-decoration:none}
.header nav a:hover{opacity:1}
.hero{display:grid;grid-template-columns: 1.05fr 0.95fr;gap:32px;align-items:center;margin-top:18px;}
@media (max-width: 980px){.hero{grid-template-columns:1fr;gap:24px}}
.left{color:var(--white);}
.badges{display:flex;align-items:center;gap:16px;margin:18px 0}
.badges img{height:56px}
.cta-note{font-size:14px;opacity:.9}
.qr-wrap{display:flex;align-items:center;gap:14px;margin-top:8px}
.qr-wrap img{height:112px;width:112px;background:#fff;border-radius:12px;padding:6px}
.qr-wrap .qr-text{font-size:14px;opacity:.95}
.hero h1{font-size: clamp(32px, 5.2vw, 56px);line-height:1.04;margin:10px 0 12px;}
.hero p{font-size: clamp(16px, 1.7vw, 20px);opacity:.95;margin: 0 0 12px;}
.right{position:relative;height: 560px;display:flex;align-items:center;justify-content:center;perspective:1200px;}
.phone-frame{position:relative;width: 320px;height: 560px;border-radius: 36px;background: rgba(255,255,255,.15);backdrop-filter: blur(6px);box-shadow: 0 24px 60px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.35);transform-style: preserve-3d;transform: rotateY(-10deg) rotateX(4deg) translateZ(0);transition: transform .6s ease, box-shadow .6s ease;}
.phone-frame:hover{transform: rotateY(-2deg) rotateX(1deg) translateZ(8px);box-shadow: 0 28px 72px rgba(0,0,0,.3);}
.screen{position:absolute;inset:12px;border-radius:28px;overflow:hidden;background:#000;}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition: opacity 800ms ease, transform 1200ms ease;}
.screen img.active{opacity:1;transform:scale(1)}
.caption{position:absolute;left:50%;bottom: -38px;transform:translateX(-50%);background: rgba(0,0,0,.35);color:#fff;padding:8px 12px;border-radius:12px;font-size:12px;letter-spacing:.15px;white-space:nowrap;backdrop-filter: blur(4px);}
.features{margin-top:64px;display:grid;grid-template-columns: repeat(4,1fr);gap:16px;}
@media (max-width: 980px){.features{grid-template-columns:1fr 1fr}}
.feature{background: rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;padding:20px;border-radius:16px;box-shadow: 0 8px 30px rgba(0,0,0,.15);}
.feature h3{margin:0 0 6px;font-size:18px}
.feature p{margin:0;opacity:.95;font-size:14px}
.cta-bar{margin-top:56px;background: rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:18px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.footer{color:#eaf7ff;opacity:.95;margin-top:36px;font-size:14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer a{color:#eaf7ff;text-decoration:none;opacity:.95}
.footer a:hover{opacity:1;text-decoration:underline}
.small{font-size:12px;opacity:.9}
.brand-mini{display:flex;align-items:center;gap:10px}
.brand-mini img{height:26px}