/*
Theme Name: Intelligent PK
Theme URI: https://intelligent.pk
Author: Laraib Shahzad
Author URI: https://cynur.com
Description: Homepage theme for the intelligent.pk subdomain registry — naming, hosting and web design, bundled as a 3-in-1 offer. Built as a static front page theme; wire the search box and checkout buttons to your booking/WooCommerce flow.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: intelligentpk
*/

:root{
  --bg:#FAFAFC;
  --surface:#FFFFFF;
  --surface-2:#F1F1FC;
  --text:#0C0E1D;
  --text-dim:#585D75;
  --accent:#4F46E5;
  --accent-soft:#EEECFF;
  --accent-ink:#FFFFFF;
  --accent-2:#00B592;
  --accent-3:#FF6B4A;
  --blue:#2E6BFF;
  --border:#E6E6F3;
  --shadow: 0 1px 2px rgba(12,14,29,0.05), 0 24px 48px -24px rgba(79,70,229,0.3);
  --glow: 0 0 0 1px var(--accent), 0 10px 30px -8px rgba(79,70,229,0.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0B16;
    --surface:#12132A;
    --surface-2:#181A38;
    --text:#F1F1FA;
    --text-dim:#9A9DC0;
    --accent:#8C81FF;
    --accent-soft:#211F45;
    --accent-ink:#0A0B16;
    --accent-2:#2FE3C4;
    --accent-3:#FF8B68;
    --blue:#6E9BFF;
    --border:#242645;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 28px 56px -24px rgba(140,129,255,0.4);
    --glow: 0 0 0 1px var(--accent), 0 10px 34px -8px rgba(140,129,255,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0B16;
  --surface:#12132A;
  --surface-2:#181A38;
  --text:#F1F1FA;
  --text-dim:#9A9DC0;
  --accent:#8C81FF;
  --accent-soft:#211F45;
  --accent-ink:#0A0B16;
  --accent-2:#2FE3C4;
  --accent-3:#FF8B68;
  --blue:#6E9BFF;
  --border:#242645;
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 28px 56px -24px rgba(140,129,255,0.4);
  --glow: 0 0 0 1px var(--accent), 0 10px 34px -8px rgba(140,129,255,0.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{
  font-family:'Outfit', system-ui, sans-serif;
  font-weight:700;
  margin:0;
  letter-spacing:-0.015em;
}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace;}
.wrap{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:20px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 3px rgba(0,181,146,0.25);
}

/* ---------- Nav ---------- */
nav{
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:rgba(250,250,252,0.88);
  backdrop-filter:blur(12px);
  z-index:20;
}
@media (prefers-color-scheme: dark){
  nav{background:rgba(10,11,22,0.88);}
}
.navrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'Outfit', sans-serif;
  font-size:18px;
  font-weight:700;
}
.brand .mark{
  width:28px; height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:700;
  box-shadow:var(--shadow);
}
.brand .pk{color:var(--accent);}
.navlinks{
  display:flex;
  gap:24px;
  font-size:14px;
  font-weight:500;
  color:var(--text-dim);
  flex-wrap:wrap;
}
.navlinks a:hover{color:var(--text);}
.navcta{display:flex; gap:10px; flex-wrap:wrap;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:9px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--border);
  cursor:pointer;
  white-space:nowrap;
  font-family:'Manrope', sans-serif;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #1FA88C);
  color:var(--accent-ink);
  border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(79,70,229,0.5);
}
.btn-ghost{background:var(--surface); color:var(--text);}

/* ---------- Hero ---------- */
.hero-shell{
  position:relative;
  overflow:hidden;
}
.hero-shell::before,
.hero-shell::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.35;
  z-index:0;
  pointer-events:none;
}
.hero-shell::before{
  width:420px; height:420px;
  background:var(--accent);
  top:-180px; left:50%;
  transform:translateX(-72%);
}
.hero-shell::after{
  width:360px; height:360px;
  background:var(--accent-2);
  top:-120px; left:50%;
  transform:translateX(20%);
  opacity:0.28;
}
.hero{
  position:relative;
  z-index:1;
  padding-block:56px 20px;
  display:grid;
  grid-template-columns:1.08fr 0.92fr;
  align-items:center;
  gap:36px;
  text-align:left;
}
@media (max-width:880px){
  .hero{grid-template-columns:1fr; text-align:center; padding-block:48px 12px;}
  .hero-art{order:-1; max-width:280px; margin-inline:auto;}
}
.hero-copy .search-box,
.hero-copy .search-result{margin-inline:0;}
@media (max-width:880px){
  .hero-copy .search-box,
  .hero-copy .search-result{margin-inline:auto;}
}
.hero h1{
  font-size:clamp(32px,4.2vw,48px);
  line-height:1.1;
  max-width:15ch;
}
.hero-art{
  width:100%;
  height:auto;
  filter:drop-shadow(0 20px 40px rgba(79,70,229,0.18));
}
.hero h1 .grad{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  margin:18px auto 0;
  font-size:16.5px;
  line-height:1.6;
  color:var(--text-dim);
  max-width:48ch;
}

/* search box */
.search-box{
  margin:36px auto 0;
  max-width:620px;
  display:flex;
  align-items:stretch;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.search-input{
  flex:1;
  display:flex;
  align-items:center;
  gap:0;
  padding-inline:18px;
}
.search-input input{
  border:none;
  background:transparent;
  outline:none;
  font-family:'JetBrains Mono', monospace;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  padding-block:17px;
  width:100%;
  min-width:0;
}
.search-input .suffix{
  font-family:'JetBrains Mono', monospace;
  font-size:16px;
  color:var(--text-dim);
  white-space:nowrap;
}
.search-go{
  background:linear-gradient(135deg, var(--accent), #1FA88C);
  color:var(--accent-ink);
  border:none;
  padding-inline:24px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  font-family:'Manrope', sans-serif;
}
.search-result{
  max-width:620px;
  margin:12px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13.5px;
}
.search-result .avail{color:var(--accent-2); font-weight:700;}
.search-result .mono{color:var(--text);}
.price-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--text-dim);
  font-weight:600;
}
.hero-note{
  margin-top:16px;
  font-size:12.5px;
  color:var(--text-dim);
}

/* ---------- Section shell ---------- */
section{padding-block:52px; position:relative;}
.section-head{
  max-width:58ch;
  margin-bottom:32px;
}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head h2{
  font-size:clamp(24px,3.1vw,32px);
  margin-top:10px;
}
.section-head p{
  margin-top:12px;
  color:var(--text-dim);
  font-size:15px;
  line-height:1.6;
}
hr.rule{border:none; border-top:1px solid var(--border); margin:0;}

/* ---------- How it works ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.step .num{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.step .num svg{width:18px; height:18px;}
.step .num .tag{
  position:absolute;
  bottom:-6px; right:-6px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--surface);
}

/* ---------- Section head icon chip ---------- */
.head-row{display:flex; align-items:center; gap:12px; margin-bottom:2px;}
.head-icon{
  width:34px; height:34px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.head-icon svg{width:17px; height:17px;}
.step h3{font-size:16.5px; font-weight:700; font-family:'Outfit';}
.step p{font-size:13.5px; color:var(--text-dim); line-height:1.55; margin:0;}

/* ---------- Premium names grid ---------- */
.name-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media (max-width:860px){ .name-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .name-grid{grid-template-columns:1fr;} }
.name-card{
  border:1px solid var(--border);
  border-radius:13px;
  padding:16px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:9px;
  transition:border-color .15s ease;
}
.name-card .tier{
  align-self:flex-start;
  font-size:10px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
}
.tier-ultra{ color:var(--accent-3); background:rgba(255,107,74,0.14); }
.tier-phrase{ color:var(--accent-2); background:rgba(0,181,146,0.14); }
.tier-personal{ color:var(--blue); background:rgba(46,107,255,0.14); }
.tier-brand{ color:var(--accent); background:rgba(79,70,229,0.14); }
.name-card .addr{
  font-family:'JetBrains Mono', monospace;
  font-size:14.5px;
  font-weight:700;
}
.name-card .price{
  font-size:12.5px;
  color:var(--text-dim);
  font-weight:600;
}
.name-card.taken{opacity:0.45;}
.name-card.taken .addr{text-decoration:line-through;}

/* ---------- Pricing ---------- */
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:820px){ .price-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .price-grid{grid-template-columns:1fr;} }
.price-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 22px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
.price-card.featured{
  box-shadow:var(--glow);
}
.price-name{font-size:13px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em;}
.price-example{font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--accent-2); font-weight:600;}
.price-amt{
  font-family:'Outfit', sans-serif;
  font-size:29px;
  font-weight:700;
}
.price-amt span{font-size:13px; font-weight:600; color:var(--text-dim); font-family:'Manrope';}
.price-desc{font-size:13px; color:var(--text-dim); line-height:1.5;}

/* ---------- Trust strip ---------- */
.trust{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  justify-content:center;
  padding-block:36px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.trust-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center;
  padding-inline:32px;
  border-left:1px solid var(--border);
}
.trust-item:first-child{border-left:none;}
@media (max-width:640px){
  .trust-item{border-left:none; width:50%; padding-inline:10px;}
}
.trust-item .n{
  font-family:'Outfit', sans-serif;
  font-size:27px;
  font-weight:800;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.trust-item .l{font-size:12.5px; color:var(--text-dim);}

/* ---------- Bundle banner ---------- */
.bundle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background:linear-gradient(120deg, var(--accent-soft), var(--surface-2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 28px;
}
.bundle-copy{max-width:52ch;}
.bundle-copy .eyebrow{margin-bottom:7px;}
.bundle-copy h3{
  font-family:'Outfit', sans-serif;
  font-size:20px;
  font-weight:700;
  margin:0;
}
.bundle-copy p{
  margin:7px 0 0;
  font-size:13.5px;
  color:var(--text-dim);
  line-height:1.55;
}
.bundle-save{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--accent-ink);
  padding:10px 18px;
  border-radius:9px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(79,70,229,0.5);
}

/* ---------- Included row on package cards ---------- */
.incl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.incl li{
  font-size:13px;
  color:var(--text-dim);
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.incl li::before{
  content:"\2713";
  color:var(--accent-2);
  font-weight:700;
  flex:none;
}
.price-card .price-badge{
  position:absolute;
  top:-11px; right:20px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  padding:4px 11px;
  border-radius:999px;
}

footer.site-footer{
  padding-block:34px;
  border-top:1px solid var(--border);
}
.foot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:12.5px;
  color:var(--text-dim);
}