/*
Theme Name: Create Your Dream Services Pro
Author: Create Your Dream Services Inc.
Version: 3.0
Description: Complete WordPress-friendly responsive blue/white hosting theme based on the approved image 2 design.
*/
:root{--navy:#061942;--deep:#020b22;--blue:#075cff;--blue2:#0088ff;--soft:#eef6ff;--text:#061842;--muted:#5d6c8c;--border:#dce9fb;--shadow:0 22px 60px rgba(0,45,140,.16)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#f8fbff,#eef6ff);color:var(--text);line-height:1.55}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}
.topbar{background:linear-gradient(90deg,#0045ce,#006dff);color:white;font-size:14px;font-weight:800}.topbar .container{display:flex;justify-content:space-between;gap:18px;padding:9px 0;flex-wrap:wrap}
.header{background:white;box-shadow:0 10px 35px rgba(0,25,80,.08);position:sticky;top:0;z-index:10}.admin-bar .header{top:32px}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:950}.logo-mark{width:74px;height:54px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,#62ddff,#0c6cff 45%,#0433b4);box-shadow:0 15px 28px rgba(7,92,255,.27);position:relative}.logo-mark:before{content:"";position:absolute;width:56px;height:29px;background:#fff;border-radius:40px;left:10px;bottom:12px}.logo-mark:after{content:"↗";position:absolute;color:#075cff;font-size:34px;font-weight:950;left:25px;top:10px}.logo-text{line-height:.92;color:var(--navy)}.logo-text .dream{display:block;color:var(--blue);font-size:30px}.logo-text small{display:block;font-size:13px;letter-spacing:1.6px;margin-top:8px}
.nav{display:flex;gap:25px;font-size:14px;font-weight:900;align-items:center}.nav a:hover{color:var(--blue)}.menu-toggle{display:none;background:var(--blue);color:#fff;border:0;border-radius:10px;padding:11px 13px;font-weight:950}.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;border:0;padding:14px 24px;font-weight:950;background:linear-gradient(135deg,#075cff,#0088ff);color:white;box-shadow:0 14px 28px rgba(7,92,255,.24);cursor:pointer}.btn-light{background:white;color:var(--blue)}.btn-outline{background:transparent;border:2px solid #0b65ff;color:var(--blue);box-shadow:none}
.hero{background:radial-gradient(circle at 82% 30%,rgba(30,155,255,.55),transparent 30%),linear-gradient(135deg,#031033,#06245c 48%,#003ab5);color:white;overflow:hidden;position:relative}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.04) 0 1px,transparent 1px);background-size:80px 80px}.hero-inner{position:relative;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:55px;padding:84px 0 98px}.badge{display:inline-flex;gap:9px;background:rgba(7,92,255,.42);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 15px;font-weight:950;margin-bottom:21px}.hero h1{font-size:54px;line-height:1.08;letter-spacing:-1.7px;margin:0 0 18px;font-weight:950}.hero h1 span{color:#20a2ff}.hero p{color:#e7f1ff;font-size:18px;max-width:560px;margin:0 0 30px}
.hero-features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:34px}.hero-feature i{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;color:#42caff;font-style:normal;font-size:25px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}.hero-feature strong{display:block;font-size:18px}.hero-feature small{color:#d5e7ff}.actions{display:flex;gap:16px;flex-wrap:wrap}
.visual{position:relative;min-height:470px}.platform{position:absolute;left:8%;right:2%;bottom:26px;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,146,255,.72),rgba(0,75,255,.18) 52%,transparent 72%)}.server{position:absolute;right:7%;top:0;width:280px;height:330px;border-radius:28px;background:linear-gradient(145deg,#172c68,#041333 70%);box-shadow:0 35px 75px rgba(0,0,0,.35),0 0 38px rgba(0,132,255,.55);border:1px solid rgba(105,205,255,.35)}.server:before,.server:after,.server span{content:"";position:absolute;left:28px;right:28px;height:68px;border-radius:14px;background:linear-gradient(90deg,#0c1f54 0 45%,#1d448c 45% 100%);box-shadow:inset 0 0 20px rgba(73,205,255,.55),0 0 15px rgba(0,149,255,.45)}.server:before{top:45px}.server:after{top:135px}.server span{top:225px}.cloud{position:absolute;right:18%;bottom:50px;width:270px;height:130px;border-radius:72px;background:linear-gradient(180deg,#fff,#dceaff);box-shadow:0 27px 45px rgba(1,22,70,.35),0 0 38px rgba(86,210,255,.6)}.cloud:before{content:"";position:absolute;width:118px;height:118px;border-radius:50%;left:48px;top:-53px;background:#fff}.cloud:after{content:"↗";position:absolute;color:var(--blue);font-size:92px;font-weight:950;left:105px;top:0}.laptop{position:absolute;right:-20px;bottom:64px;width:210px;height:140px;border-radius:14px;background:linear-gradient(135deg,#172d62,#071436);transform:perspective(400px) rotateY(-16deg);border:2px solid rgba(151,218,255,.35)}.laptop:before{content:"";position:absolute;inset:16px;border-radius:9px;background:linear-gradient(135deg,#e8f5ff,#98ccff)}
.trust{margin-top:-52px;position:relative;z-index:4}.trust-grid{background:white;border-radius:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}.trust-item{padding:26px 20px;text-align:center;border-right:1px solid #e1ebfa}.stars{color:#ffbc00;font-size:24px;letter-spacing:2px}
.section{padding:88px 0}.white{background:#fff}.section-title{text-align:center;margin-bottom:46px}.section-title small{color:var(--blue);font-weight:950;text-transform:uppercase}.section-title h2{font-size:40px;line-height:1.12;margin:8px 0 12px}.section-title p{color:var(--muted);max-width:650px;margin:auto}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.plan{background:white;border:1px solid var(--border);border-radius:28px;padding:36px;box-shadow:0 12px 35px rgba(0,45,140,.1);position:relative}.popular{border:2px solid var(--blue);transform:translateY(-14px)}.ribbon{position:absolute;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#075cff,#0094ff);color:#fff;border-radius:0 0 12px 12px;padding:8px 18px;font-weight:950;font-size:13px}.plan-icon{width:72px;height:72px;margin:-4px auto 18px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:linear-gradient(145deg,#dceeff,#fff);color:var(--blue);box-shadow:inset 0 0 0 6px rgba(7,92,255,.08),0 12px 25px rgba(7,92,255,.18)}.plan h3{text-align:center;color:var(--blue);font-size:31px;margin:0;font-weight:950}.plan-sub{text-align:center;color:var(--muted)}.price{text-align:center;font-size:46px;font-weight:950;color:var(--navy)}.price small{font-size:16px;color:var(--muted)}.features{list-style:none;margin:24px 0 30px;padding:0}.features li{padding:9px 0 9px 30px;border-bottom:1px solid #eef4fc;position:relative;font-weight:700}.features li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:950}
.card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.mini-card{background:white;border:1px solid var(--border);border-radius:18px;padding:22px;text-align:center;box-shadow:0 10px 24px rgba(0,45,140,.06)}.mini-card i{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:16px;background:#edf6ff;color:var(--blue);font-style:normal;font-size:25px}.mini-card h3{font-size:16px;margin:0 0 7px}.mini-card p{font-size:13px;color:var(--muted);margin:0}
.domain{background:linear-gradient(135deg,#00205f,#075cff);color:white;border-radius:26px;padding:36px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.3fr .9fr;gap:34px;align-items:center}.domain-form{display:flex;max-width:600px;margin-top:18px}.domain-form input{flex:1;border:0;border-radius:13px 0 0 13px;padding:17px}.domain-form button{border-radius:0 13px 13px 0}.tlds{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tld{background:white;color:var(--navy);border-radius:14px;padding:14px 16px;font-weight:950;display:flex;justify-content:space-between}.tld span{color:var(--blue);font-size:22px}.stats{margin-top:28px;background:white;border-radius:20px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 12px 35px rgba(0,45,140,.1);overflow:hidden}.stat{padding:24px;text-align:center;border-right:1px solid #e1ebfa}.stat strong{font-size:30px;color:var(--blue);display:block}
.page-hero{background:linear-gradient(135deg,#031033,#063aa2);color:white;padding:78px 0}.page-hero h1{font-size:50px;margin:0 0 14px}.page-hero p{font-size:19px;color:#e1edff;max-width:760px}.split{display:grid;grid-template-columns:1fr 1fr;gap:44px}.panel{background:white;border-radius:28px;padding:38px;box-shadow:0 12px 35px rgba(0,45,140,.1);border:1px solid var(--border)}.blue-panel{background:linear-gradient(135deg,#03184a,#075cff);color:white}.form input,.form textarea{width:100%;border:1px solid #dbe8fa;border-radius:13px;padding:15px;margin-bottom:14px}
.footer{background:linear-gradient(135deg,#031033,#020817);color:white;padding:60px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}.footer p,.footer a{color:#c8d9f4}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;color:#b8c8e6;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:1080px){.nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}.header-inner{flex-wrap:wrap}.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.admin-bar .header{top:0}.menu-toggle{display:block}.nav{display:none;flex-direction:column;align-items:flex-start;background:white;border:1px solid var(--border);border-radius:16px;padding:18px}.nav.is-open{display:flex}.header-cta{display:none}.hero-inner,.domain,.split{grid-template-columns:1fr}.hero h1{font-size:40px}.visual{min-height:360px}.server{width:210px;height:260px}.cloud{width:215px;height:105px}.laptop{display:none}.hero-features,.trust-grid,.pricing,.card-grid,.stats,.footer-grid{grid-template-columns:1fr}.popular{transform:none}.domain-form{flex-direction:column;gap:10px}.domain-form input,.domain-form button{border-radius:13px}.section{padding:64px 0}.section-title h2{font-size:32px}}
@media(max-width:480px){.logo-mark{width:58px;height:46px}.logo-text .dream{font-size:24px}.hero h1{font-size:34px}.actions{flex-direction:column}.btn{width:100%}}