/*
 Theme Name: RTT Telecom Landing (Child)
 Theme URI: https://example.com
 Description: Child theme providing an original PABX Virtual landing page for RTT TELECOM.
 Author: ChatGPT
 Template: twentytwentyfour
 Version: 1.0
*/

/* Reset & base */
:root{
  --rtt-primary: #1a73e8;
  --rtt-dark: #0f172a;
  --rtt-light: #f8fafc;
  --rtt-accent: #00d1ff;
  --rtt-radius: 16px;
  --rtt-shadow: 0 10px 30px rgba(2,12,27,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
  color:#0b1220;background:#fff;line-height:1.6
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section.small{padding:36px 0}

/* Header */
.rtt-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #eef2f7}
.rtt-header .inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.rtt-logo{display:flex;gap:12px;align-items:center}
.rtt-logo img{height:42px;width:auto}
.rtt-logo span{font-weight:800;letter-spacing:.5px}

/* Hero */
.hero{background:radial-gradient(1200px 500px at 20% -10%, rgba(0,209,255,.20), transparent 60%), linear-gradient(180deg,#f7fbff, #fff 70%);}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(28px,3.2vw,48px);margin:.1em 0 .4em;color:var(--rtt-dark)}
.hero p.lead{font-size:clamp(16px,1.6vw,20px);opacity:.85;margin:0 0 20px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.badge{background:#eef6ff;border:1px solid #d8e7ff;padding:6px 10px;border-radius:999px;font-size:13px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn{appearance:none;border:0;border-radius:12px;padding:14px 18px;font-weight:700;cursor:pointer;box-shadow:var(--rtt-shadow);text-decoration:none;display:inline-block}
.btn-primary{background:var(--rtt-primary);color:#fff}
.btn-ghost{background:#fff;color:var(--rtt-primary);border:2px solid #dbeafe}
.hero-card{background:#fff;border:1px solid #e6eef7;border-radius:var(--rtt-radius);padding:20px;box-shadow:var(--rtt-shadow)}
.hero-card .price{font-size:36px;font-weight:800;color:var(--rtt-primary)}
.hero-list{margin:14px 0 0;padding:0;list-style:none}
.hero-list li{display:flex;gap:8px;align-items:flex-start;margin:8px 0}
.hero-list li:before{content:"✓";color:#16a34a;font-weight:900}

/* Benefits grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid #e6eef7;border-radius:var(--rtt-radius);padding:22px;box-shadow:var(--rtt-shadow)}
.card h3{margin:0 0 8px}
.icon{font-size:22px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--rtt-light);border:1px dashed #d7e3f4;border-radius:12px;padding:16px;text-align:center}
.step .num{font-weight:900;font-size:22px;color:var(--rtt-primary)}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{border-radius:var(--rtt-radius);border:1px solid #e6eef7;background:#fff;box-shadow:var(--rtt-shadow);padding:24px;position:relative}
.plan .title{font-weight:800}
.plan .price{font-size:32px;font-weight:900;margin:8px 0;color:var(--rtt-primary)}
.plan ul{list-style:none;margin:0;padding:0}
.plan li{margin:8px 0}
.plan .badge{position:absolute;top:16px;right:16px}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:#0f172a;color:#e5ecff;border-radius:16px;padding:20px}
.quote p{margin:0}
.quote .author{margin-top:12px;opacity:.8;font-size:14px}

/* FAQ */
.faq details{border:1px solid #e6eef7;border-radius:12px;padding:14px 16px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}

/* Footer */
.footer{background:#0b1220;color:#cbd5e1;padding:44px 0}
.footer a{color:#e0f2fe;text-decoration:none}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
@media (max-width: 960px){
  .hero .wrap{grid-template-columns:1fr}
  .grid,.steps,.pricing,.testimonials,.footer .cols{grid-template-columns:1fr}
}