/*
Theme Name: Rank With Hamza
Theme URI: https://example.com/rank-with-hamza
Author: Rank With Hamza
Author URI: https://example.com
Description: A pixel-faithful one-page SEO and guest-posting WordPress theme converted from the supplied Rank With Hamza HTML design.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: rank-with-hamza
*/

:root {
      --bg: #030711;
      --bg-2: #06101f;
      --panel: rgba(10, 20, 36, 0.78);
      --panel-solid: #091423;
      --line: rgba(115, 165, 255, 0.14);
      --line-strong: rgba(38, 132, 255, 0.42);
      --text: #f7faff;
      --muted: #9eabc1;
      --blue: #1688ff;
      --blue-2: #00b7ff;
      --blue-3: #7ed7ff;
      --danger: #ff4e62;
      --success: #2fe6a5;
      --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
      --radius: 22px;
      --max: 1180px;
      --nav-h: 78px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 94px; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 80% 5%, rgba(0, 128, 255, 0.12), transparent 24%),
        radial-gradient(circle at 12% 34%, rgba(0, 183, 255, 0.06), transparent 26%),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    ::selection { background: rgba(22,136,255,.35); color: white; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    img { display: block; max-width: 100%; }

    .page-grid {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .24;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
      z-index: -3;
    }
    .cursor-glow {
      position: fixed;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(22,136,255,.09), transparent 68%);
      transform: translate(-50%,-50%);
      z-index: -1;
      transition: opacity .2s;
    }
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      z-index: 9999;
      background: linear-gradient(90deg, var(--blue), var(--blue-2));
      box-shadow: 0 0 18px rgba(22,136,255,.9);
    }
    .preloader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      background: #02050c;
      transition: opacity .55s ease, visibility .55s ease;
    }
    .preloader.hide { opacity: 0; visibility: hidden; }
    .loader-mark {
      width: 76px;
      aspect-ratio: 1;
      border-radius: 24px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(80,165,255,.35);
      background: radial-gradient(circle at 30% 20%, rgba(56,170,255,.35), rgba(5,12,24,.95));
      box-shadow: 0 0 45px rgba(22,136,255,.3);
      animation: loaderPulse 1.2s ease-in-out infinite;
      font-weight: 900;
      letter-spacing: -.08em;
      font-size: 30px;
    }
    @keyframes loaderPulse { 50% { transform: scale(1.06); box-shadow: 0 0 65px rgba(22,136,255,.55); } }

    .container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
    .section { padding: 110px 0; position: relative; }
    .section.compact { padding: 74px 0; }
    .section-line { border-top: 1px solid rgba(255,255,255,.055); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--blue-3);
      font-size: .75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .18em;
    }
    .eyebrow::before, .eyebrow::after {
      content: "";
      width: 24px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--blue));
    }
    .eyebrow::after { transform: scaleX(-1); }
    .section-head { max-width: 770px; margin-bottom: 44px; }
    .section-head.center { text-align: center; margin-inline: auto; }
    .section-head.center .eyebrow { justify-content: center; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
    h1 { font-size: clamp(3rem, 7vw, 6.15rem); margin-bottom: 24px; }
    h2 { font-size: clamp(2rem, 4.3vw, 3.65rem); margin-bottom: 18px; }
    h3 { font-size: 1.25rem; }
    .accent { color: var(--blue); }
    .gradient-text {
      color: transparent;
      background: linear-gradient(110deg, #fff 0%, #bde9ff 24%, #1694ff 72%, #00c6ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .lead { color: #b4bfd2; font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 680px; }
    .muted { color: var(--muted); }
    .tiny { font-size: .83rem; color: #7f8ca2; }

    .topbar {
      height: 34px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      background: rgba(2,6,14,.85);
      font-size: .75rem;
      color: #aeb9ca;
      display: flex;
      align-items: center;
    }
    .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
    .topbar-left, .topbar-social { display: flex; align-items: center; gap: 20px; }
    .topbar a { transition: color .2s; }
    .topbar a:hover { color: white; }
    .mini-icon { width: 15px; height: 15px; fill: none; stroke: var(--blue); stroke-width: 2; }
    .contact-item { display: inline-flex; gap: 7px; align-items: center; }

    .navbar {
      position: sticky;
      top: 0;
      height: var(--nav-h);
      z-index: 1000;
      backdrop-filter: blur(18px);
      background: rgba(3,7,17,.76);
      border-bottom: 1px solid rgba(255,255,255,.065);
      transition: box-shadow .3s, background .3s;
    }
    .navbar.scrolled { background: rgba(3,7,17,.93); box-shadow: 0 18px 60px rgba(0,0,0,.32); }
    .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: flex; align-items: center; gap: 12px; min-width: 190px; }
    .brand-logo {
      width: 58px;
      height: 49px;
      object-fit: cover;
      object-position: center;
      border-radius: 10px;
      filter: drop-shadow(0 0 10px rgba(22,136,255,.22));
    }
    .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
    .brand-text strong { letter-spacing: .08em; font-size: .86rem; text-transform: uppercase; }
    .brand-text span { color: var(--blue-3); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: 30px; }
    .nav-links a {
      color: #b6c1d2;
      font-size: .86rem;
      font-weight: 650;
      position: relative;
      padding: 28px 0;
      transition: color .2s;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      height: 2px;
      left: 0;
      right: 100%;
      bottom: 18px;
      background: var(--blue);
      box-shadow: 0 0 11px var(--blue);
      transition: right .25s;
    }
    .nav-links a:hover, .nav-links a.active { color: white; }
    .nav-links a:hover::after, .nav-links a.active::after { right: 0; }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.035);
      color: white;
      cursor: pointer;
    }
    .menu-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: currentColor; transition: .25s; }
    .menu-toggle.active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2){ opacity:0; }
    .menu-toggle.active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 23px;
      border-radius: 12px;
      border: 1px solid transparent;
      font-weight: 800;
      font-size: .9rem;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
      position: relative;
      overflow: hidden;
    }
    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.26), transparent 65%);
      transform: translateX(-120%);
      transition: transform .55s;
    }
    .btn:hover::before { transform: translateX(120%); }
    .btn:hover { transform: translateY(-3px); }
    .btn-primary {
      color: white;
      background: linear-gradient(135deg, #0967ff, #00a8ff);
      box-shadow: 0 12px 35px rgba(0,113,255,.28), inset 0 1px rgba(255,255,255,.22);
    }
    .btn-primary:hover { box-shadow: 0 18px 46px rgba(0,113,255,.45); }
    .btn-outline { color: #dceaff; border-color: rgba(80,157,255,.38); background: rgba(8,18,34,.6); }
    .btn-outline:hover { border-color: var(--blue); background: rgba(22,136,255,.08); }
    .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

    .hero {
      min-height: calc(100vh - 112px);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 80px 0 52px;
    }
    .hero::before {
      content: "";
      position: absolute;
      width: 650px;
      height: 650px;
      border-radius: 50%;
      right: -170px;
      top: 3%;
      background: radial-gradient(circle, rgba(0,123,255,.16), rgba(0,123,255,.035) 42%, transparent 68%);
      filter: blur(2px);
    }
    .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 42px; }
    .hero-copy { position: relative; z-index: 2; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      border-radius: 999px;
      border: 1px solid rgba(60,148,255,.38);
      background: rgba(15,72,142,.15);
      color: #caeaff;
      font-size: .78rem;
      font-weight: 750;
      margin-bottom: 26px;
      box-shadow: inset 0 0 18px rgba(22,136,255,.06);
    }
    .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 13px var(--blue-2); animation: blink 1.8s infinite; }
    @keyframes blink { 50% { opacity: .35; transform: scale(.75); } }
    .hero h1 { max-width: 640px; font-size: clamp(2.8rem, 5.8vw, 5.2rem); line-height: 1.02; }
    .hero-description { max-width: 640px; color: #aeb8c9; font-size: 1.04rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 31px 0 34px; }
    .hero-trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; max-width: 720px; }
    .trust-card {
      min-height: 78px;
      padding: 13px;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 14px;
      background: rgba(9,19,34,.58);
      box-shadow: inset 0 1px rgba(255,255,255,.03);
    }
    .trust-card strong { display: block; font-size: 1.25rem; line-height: 1.1; margin-bottom: 5px; }
    .trust-card span { color: #8290a6; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
    .hero-visual { min-height: 600px; position: relative; display: grid; place-items: end center; }
    .visual-orbit {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      border: 1px solid rgba(60,151,255,.22);
      background:
        radial-gradient(circle at 50% 50%, rgba(15,119,255,.18), rgba(5,15,31,.2) 52%, transparent 70%),
        repeating-radial-gradient(circle, transparent 0 43px, rgba(56,146,255,.07) 44px 45px);
      box-shadow: 0 0 90px rgba(0,105,255,.16), inset 0 0 70px rgba(0,105,255,.1);
      animation: orbitPulse 5s ease-in-out infinite;
    }
    @keyframes orbitPulse { 50% { transform: scale(1.035); filter: brightness(1.16); } }
    .portrait-wrap {
      width: min(430px, 100%);
      height: 575px;
      position: relative;
      z-index: 2;
      overflow: hidden;
      border-radius: 42% 42% 8% 8% / 24% 24% 8% 8%;
      filter: drop-shadow(0 30px 45px rgba(0,0,0,.5));
    }
    .portrait-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 45%, rgba(3,7,17,.14) 72%, #030711 98%);
      pointer-events: none;
    }
    .portrait-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 14%;
      filter: saturate(.86) contrast(1.06) brightness(.78) drop-shadow(0 0 24px rgba(0,128,255,.18));
      transform: scale(1.03) scaleX(-1);
    }
    .chart-card {
      position: absolute;
      right: -18px;
      bottom: 70px;
      z-index: 4;
      width: 240px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(65,151,255,.34);
      background: rgba(4,10,21,.88);
      backdrop-filter: blur(18px);
      box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 35px rgba(0,112,255,.12);
      animation: floatCard 4.6s ease-in-out infinite;
    }
    @keyframes floatCard { 50% { transform: translateY(-12px); } }
    .chart-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 13px; }
    .chart-head strong { font-size: .9rem; }
    .chart-head span { color: var(--success); font-weight: 900; }
    .chart-svg { width: 100%; height: 74px; overflow: visible; }
    .chart-line { stroke-dasharray: 310; stroke-dashoffset: 310; animation: drawLine 2.4s .6s ease forwards; }
    @keyframes drawLine { to { stroke-dashoffset: 0; } }
    .floating-pill {
      position: absolute;
      z-index: 4;
      left: -10px;
      top: 110px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(51,146,255,.28);
      background: rgba(6,16,31,.82);
      color: #d5edff;
      font-size: .77rem;
      font-weight: 700;
      box-shadow: 0 16px 42px rgba(0,0,0,.3);
      animation: floatCard 5.4s 1s ease-in-out infinite reverse;
    }

    /* Tighter handoff from Search Visibility to Services. */
    #visibility.section { padding-bottom: 42px; }
    #services.section { padding-top: 54px; }

    .query-panel {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 38px;
      align-items: center;
    }
    .query-list { display: grid; gap: 12px; }
    .query-item {
      display: flex;
      align-items: center;
      gap: 15px;
      min-height: 78px;
      padding: 14px 18px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.065);
      background: rgba(8,16,29,.72);
      transition: .28s;
    }
    .query-item:hover { transform: translateX(6px); border-color: rgba(28,135,255,.4); background: rgba(12,30,58,.58); }
    .query-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items:center; background: rgba(22,136,255,.12); border: 1px solid rgba(22,136,255,.2); flex: 0 0 auto; }
    .query-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-3); stroke-width: 2; }
    .query-text { flex: 1; }
    .query-text strong { display:block; font-size: .94rem; }
    .query-text span { color:#7f8ba0; font-size:.78rem; }
    .rank-tag { padding: 6px 9px; border-radius: 999px; color: #bfe6ff; background: rgba(22,136,255,.1); font-size: .68rem; font-weight: 800; white-space: nowrap; }

    .cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
    .service-card, .feature-card, .expect-card {
      position: relative;
      padding: 27px;
      min-height: 265px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.075);
      background: linear-gradient(145deg, rgba(13,25,45,.88), rgba(5,11,22,.88));
      box-shadow: inset 0 1px rgba(255,255,255,.035);
      overflow: hidden;
      transition: transform .32s, border-color .32s, box-shadow .32s;
    }
    .service-card::before, .feature-card::before, .expect-card::before {
      content:"";
      position:absolute;
      width: 150px;
      height: 150px;
      border-radius:50%;
      right:-65px;
      top:-70px;
      background: radial-gradient(circle, rgba(25,142,255,.18), transparent 70%);
      transition: .32s;
    }
    .service-card:hover, .feature-card:hover, .expect-card:hover { transform: translateY(-8px); border-color: rgba(34,142,255,.42); box-shadow: 0 22px 60px rgba(0,0,0,.3), 0 0 35px rgba(0,106,255,.08); }
    .service-card:hover::before { transform: scale(1.45); }
    .service-card.featured { grid-column: span 2; background: linear-gradient(145deg, rgba(15,37,72,.94), rgba(5,12,24,.94)); border-color: rgba(28,137,255,.35); }
    .icon-box {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display:grid;
      place-items:center;
      margin-bottom: 28px;
      background: linear-gradient(135deg, rgba(8,94,255,.9), rgba(0,184,255,.95));
      box-shadow: 0 14px 30px rgba(0,100,255,.24), inset 0 1px rgba(255,255,255,.3);
    }
    .icon-box svg { width: 25px; height: 25px; fill:none; stroke:white; stroke-width:1.8; }
    .service-card p, .feature-card p, .expect-card p { color: #8d99ad; font-size: .9rem; }
    .chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
    .chip { padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.045); color:#aebacf; font-size:.68rem; border:1px solid rgba(255,255,255,.055); }

    .availability {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      padding: 27px 30px;
      border-radius: 22px;
      border: 1px solid rgba(35,139,255,.42);
      background: linear-gradient(115deg, rgba(0,93,255,.13), rgba(5,13,27,.9) 42%, rgba(9,20,36,.86));
      box-shadow: 0 0 50px rgba(0,105,255,.08), inset 0 1px rgba(255,255,255,.04);
    }
    .availability-main { display:flex; align-items:center; gap:18px; }
    .availability .globe { width:62px; height:62px; border-radius:50%; display:grid;place-items:center; background:rgba(20,130,255,.15); border:1px solid rgba(58,157,255,.28); box-shadow: 0 0 24px rgba(20,130,255,.22); flex:0 0 auto; }
    .availability .globe svg { width:30px; height:30px; fill:none; stroke:var(--blue-3); stroke-width:1.8; }
    .restriction { display:flex; align-items:center; gap:13px; padding-left:24px; border-left:1px solid rgba(255,255,255,.08); }
    .no-icon { width:48px; height:48px; border-radius:50%; display:grid;place-items:center; background:rgba(255,78,98,.08); border:1px solid rgba(255,78,98,.28); color:var(--danger); font-size:1.4rem; font-weight:900; }
    .restriction strong { color:#ff7180; display:block; }

    .metric-strip {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      margin-top: 26px;
      border-top:1px solid rgba(255,255,255,.07);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .metric { padding:28px 18px; text-align:center; position:relative; }
    .metric + .metric::before { content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:rgba(255,255,255,.07); }
    .metric strong { display:block; font-size:clamp(1.55rem,3vw,2.3rem); color:white; }
    .metric span { color:#718097; text-transform:uppercase; letter-spacing:.13em; font-size:.66rem; }

    .process { position: relative; }
    .process-line { position:absolute; left:10%; right:10%; top:57px; height:1px; border-top:1px dashed rgba(55,148,255,.26); }
    .process-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; }
    .step { text-align:center; }
    .step-num {
      width: 68px;
      height: 68px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin:0 auto 25px;
      position:relative;
      z-index:2;
      border:1px solid rgba(60,153,255,.35);
      background: radial-gradient(circle, #148cff, #0758d4 62%, #062752);
      box-shadow:0 0 30px rgba(21,134,255,.24);
      font-size:1.35rem;
      font-weight:900;
    }
    .step-num::after { content:attr(data-step); position:absolute; top:78px; font-size:.65rem; color:#6f819c; letter-spacing:.12em; }
    .step h3 { font-size:1rem; margin-bottom:12px; }
    .step p { color:#7f8ca1; font-size:.81rem; }

    .about-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:58px; align-items:center; }
    .about-photo {
      min-height: 590px;
      border-radius: 28px;
      overflow: hidden;
      position:relative;
      border:1px solid rgba(38,139,255,.36);
      background: radial-gradient(circle at 50% 35%, rgba(22,136,255,.32), rgba(6,13,27,.8) 58%);
      box-shadow: var(--shadow), 0 0 50px rgba(0,103,255,.1);
    }
    .about-photo img { width:100%; height:100%; object-fit:cover; object-position:center 12%; filter:saturate(.86) contrast(1.06) brightness(.8); }
    .about-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 55%, rgba(3,7,17,.75) 100%); }
    .signature { position:absolute; z-index:2; left:28px; bottom:26px; font-family:cursive; font-size:1.65rem; transform:rotate(-7deg); text-shadow:0 4px 20px rgba(0,0,0,.6); }
    .about-content .lead { margin-bottom:24px; }
    .check-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; margin:26px 0 31px; padding:0; list-style:none; }
    .check-list li { display:flex; align-items:flex-start; gap:10px; color:#c8d1df; font-size:.92rem; }
    .check { width:20px; height:20px; border-radius:50%; display:grid;place-items:center; flex:0 0 auto; margin-top:2px; background:rgba(22,136,255,.16); color:#7ed7ff; font-size:.72rem; border:1px solid rgba(22,136,255,.24); }
    .profile-card { margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .profile-item { padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
    .profile-item small { color:#6f7e94; display:block; margin-bottom:4px; }
    .profile-item strong { font-size:.88rem; overflow-wrap:anywhere; }

    .niche-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
    .niche {
      min-height:125px;
      padding:18px;
      border-radius:17px;
      border:1px solid rgba(255,255,255,.065);
      background:rgba(8,17,30,.72);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      text-align:center;
      transition:.26s;
    }
    .niche:hover { transform:translateY(-5px); border-color:rgba(40,142,255,.4); background:rgba(10,31,60,.55); }
    .niche svg { width:27px; height:27px; fill:none; stroke:var(--blue-3); stroke-width:1.6; }
    .niche span { font-size:.82rem; font-weight:700; }

    .expect-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .expect-card { min-height:240px; }
    .expect-card .num { color:rgba(87,164,255,.3); font-size:3.4rem; font-weight:900; line-height:1; margin-bottom:20px; }

    .case-study-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .case-card {
      position:relative;
      min-height:390px;
      padding:28px;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.075);
      background:linear-gradient(150deg, rgba(13,28,51,.94), rgba(5,11,22,.94));
      box-shadow:inset 0 1px rgba(255,255,255,.035);
      overflow:hidden;
      transition:transform .3s, border-color .3s, box-shadow .3s;
    }
    .case-card::before {
      content:"";
      position:absolute;
      width:210px;
      height:210px;
      border-radius:50%;
      right:-105px;
      top:-115px;
      background:radial-gradient(circle, rgba(22,136,255,.24), transparent 68%);
      transition:transform .32s;
    }
    .case-card:hover { transform:translateY(-7px); border-color:rgba(38,143,255,.42); box-shadow:0 24px 60px rgba(0,0,0,.28), 0 0 34px rgba(0,106,255,.08); }
    .case-card:hover::before { transform:scale(1.25); }
    .case-top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:31px; position:relative; z-index:1; }
    .case-number { color:rgba(126,215,255,.42); font-size:2.5rem; font-weight:900; line-height:1; letter-spacing:-.08em; }
    .case-meta { padding:7px 10px; border-radius:999px; border:1px solid rgba(49,148,255,.24); background:rgba(22,136,255,.09); color:#c7eaff; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-align:right; }
    .case-card h3 { position:relative; z-index:1; font-size:1.35rem; margin-bottom:14px; }
    .case-summary { position:relative; z-index:1; color:#8f9db1; font-size:.9rem; min-height:92px; }
    .case-details { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:25px; }
    .case-detail { padding:14px; border-radius:13px; border:1px solid rgba(255,255,255,.065); background:rgba(255,255,255,.025); }
    .case-detail span { display:block; color:#6f7f96; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:6px; }
    .case-detail strong { display:block; color:#dfeaff; font-size:.82rem; line-height:1.4; overflow-wrap:anywhere; }

    .review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .review-card {
      min-height:315px;
      padding:28px;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.075);
      background:
        radial-gradient(circle at 94% 6%, rgba(22,136,255,.16), transparent 28%),
        linear-gradient(145deg, rgba(11,23,42,.9), rgba(5,11,22,.92));
      box-shadow:inset 0 1px rgba(255,255,255,.035);
      display:flex;
      flex-direction:column;
      transition:transform .3s, border-color .3s, box-shadow .3s;
    }
    .review-card:hover { transform:translateY(-7px); border-color:rgba(38,143,255,.4); box-shadow:0 22px 58px rgba(0,0,0,.28); }
    .review-quote-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; margin-bottom:22px; color:var(--blue-3); background:rgba(22,136,255,.11); border:1px solid rgba(22,136,255,.2); }
    .review-quote-icon svg { width:23px; height:23px; fill:currentColor; }
    .review-card blockquote { margin:0 0 25px; color:#b5c1d2; font-size:.94rem; line-height:1.75; flex:1; }
    .review-person { display:flex; align-items:center; gap:13px; padding-top:20px; border-top:1px solid rgba(255,255,255,.065); }
    .review-avatar { width:45px; height:45px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; color:white; font-size:.9rem; font-weight:900; background:linear-gradient(135deg,#0967ff,#00a8ff); box-shadow:0 9px 22px rgba(0,105,255,.25); }
    .review-person strong { display:block; font-size:.9rem; margin-bottom:2px; }
    .review-person span { display:block; color:#74839a; font-size:.74rem; overflow-wrap:anywhere; }

    .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
    .faq-item { border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(7,15,27,.72); overflow:hidden; transition:border-color .25s; }
    .faq-item.open { border-color:rgba(38,137,255,.36); }
    .faq-question { width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 19px; border:0; background:transparent; color:white; text-align:left; cursor:pointer; font-weight:700; font-size:.88rem; }
    .faq-plus { width:27px; height:27px; border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.045); color:#98a8be; font-size:1.1rem; transition:.28s; flex:0 0 auto; }
    .faq-item.open .faq-plus { transform:rotate(45deg); background:rgba(22,136,255,.14); color:#79c9ff; }
    .faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease; }
    .faq-answer p { color:#8b98ac; font-size:.85rem; padding:0 19px 19px; margin:0; }

    .contact-shell {
      border-radius:28px;
      border:1px solid rgba(40,143,255,.42);
      background:
        radial-gradient(circle at 7% 50%, rgba(22,136,255,.24), transparent 24%),
        linear-gradient(115deg, rgba(10,30,60,.78), rgba(5,12,24,.94));
      padding:44px;
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:45px;
      align-items:center;
      box-shadow: 0 24px 70px rgba(0,0,0,.3), 0 0 65px rgba(0,101,255,.08);
    }
    .contact-copy h2 { margin-bottom:16px; }
    .contact-list { display:grid; gap:12px; margin-top:27px; }
    .contact-row { display:flex; align-items:center; gap:12px; color:#c5d0df; font-size:.9rem; overflow-wrap:anywhere; }
    .contact-row .round { width:38px; height:38px; border-radius:12px; display:grid;place-items:center; background:rgba(22,136,255,.12); border:1px solid rgba(22,136,255,.18); flex:0 0 auto; }
    .contact-row svg { width:18px; height:18px; fill:none; stroke:var(--blue-3); stroke-width:2; }
    .contact-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
    .field { display:grid; gap:7px; }
    .field.full { grid-column:1/-1; }
    .field label { color:#9ba8bc; font-size:.73rem; font-weight:700; }
    .field input, .field textarea, .field select {
      width:100%;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.085);
      background:rgba(2,7,15,.65);
      color:white;
      padding:14px 15px;
      outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .field textarea { min-height:112px; resize:vertical; }
    .field input:focus, .field textarea:focus, .field select:focus { border-color:rgba(40,145,255,.58); box-shadow:0 0 0 3px rgba(22,136,255,.08); }
    .field select option { background:#07101d; }
    .form-note { grid-column:1/-1; color:#718097; font-size:.72rem; margin-top:3px; }

    .footer { padding:34px 0; border-top:1px solid rgba(255,255,255,.06); color:#78869b; font-size:.78rem; }
    .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .footer-social { display:flex; gap:10px; }
    .social-button { width:39px; height:39px; border-radius:12px; display:grid;place-items:center; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.025); color:#aec0d7; transition:.22s; }
    .social-button:hover { color:white; transform:translateY(-3px); border-color:rgba(46,143,255,.4); background:rgba(22,136,255,.1); }
    .social-button svg { width:18px; height:18px; fill:currentColor; }
    .back-top { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(44,146,255,.35); color:white; background:rgba(7,22,43,.85); backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(0,0,0,.3); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; z-index:500; }
    .back-top.show { opacity:1; visibility:visible; transform:none; }

    .reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; }
    .reveal.from-left { transform:translateX(-36px); }
    .reveal.from-right { transform:translateX(36px); }
    .reveal.visible { opacity:1; transform:none; }
    .stagger > * { opacity:0; transform:translateY(24px); }
    .stagger.visible > * { animation:staggerIn .6s forwards; }
    .stagger.visible > *:nth-child(2){animation-delay:.08s}.stagger.visible > *:nth-child(3){animation-delay:.16s}.stagger.visible > *:nth-child(4){animation-delay:.24s}.stagger.visible > *:nth-child(5){animation-delay:.32s}.stagger.visible > *:nth-child(6){animation-delay:.4s}.stagger.visible > *:nth-child(7){animation-delay:.48s}.stagger.visible > *:nth-child(8){animation-delay:.56s}.stagger.visible > *:nth-child(9){animation-delay:.64s}.stagger.visible > *:nth-child(10){animation-delay:.72s}
    @keyframes staggerIn { to { opacity:1; transform:none; } }

    @media (max-width: 1040px) {
      .nav-links { gap:18px; }
      .hero-inner, .about-grid, .query-panel, .contact-shell { grid-template-columns:1fr; }
      .hero { padding-top:60px; }
      .hero-copy { text-align:center; }
      .hero-description, .hero h1 { margin-left:auto; margin-right:auto; }
      .hero-actions { justify-content:center; }
      .hero-trust { margin-inline:auto; }
      .hero-visual { min-height:540px; margin-top:-10px; }
      .case-study-grid, .review-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .case-study-grid > :last-child, .review-grid > :last-child { grid-column:1/-1; }
      .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .process-grid { grid-template-columns:repeat(3,1fr); row-gap:48px; }
      .process-line { display:none; }
      .niche-grid { grid-template-columns:repeat(3,1fr); }
      .about-photo { min-height:700px; max-width:620px; width:100%; margin-inline:auto; }
      .contact-copy { text-align:center; }
      .contact-list { max-width:520px; margin-inline:auto; text-align:left; }
    }
    @media (max-width: 840px) {
      :root { --nav-h: 70px; }
      .topbar { display:none; }
      .nav-links {
        position:fixed;
        inset:70px 0 auto 0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:18px 22px 26px;
        background:rgba(3,7,17,.97);
        border-bottom:1px solid rgba(255,255,255,.07);
        transform:translateY(-120%);
        opacity:0;
        visibility:hidden;
        transition:.32s;
      }
      .nav-links.open { transform:none; opacity:1; visibility:visible; }
      .nav-links a { padding:16px 3px; border-bottom:1px solid rgba(255,255,255,.05); }
      .nav-links a::after { display:none; }
      .menu-toggle { display:block; }
      .nav-actions .btn { display:none; }
      .brand { min-width:0; }
      .hero { min-height:auto; }
      .hero-trust { grid-template-columns:repeat(2,1fr); }
      .availability { grid-template-columns:1fr; }
      .restriction { padding:20px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
      .metric-strip { grid-template-columns:repeat(2,1fr); }
      .metric:nth-child(3)::before { display:none; }
      .metric:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.07); }
      .case-study-grid, .review-grid { grid-template-columns:1fr; }
      .case-study-grid > :last-child, .review-grid > :last-child { grid-column:auto; }
      .expect-grid { grid-template-columns:1fr; }
      .faq-grid { grid-template-columns:1fr; }
    }
    @media (max-width: 620px) {
      #visibility.section { padding-bottom: 28px; }
      #services.section { padding-top: 42px; }
      .container { width:min(100% - 26px, var(--max)); }
      .section { padding:82px 0; }
      h1 { font-size:clamp(2.5rem,13vw,4rem); }
      h2 { font-size:clamp(2rem,10vw,3rem); }
      .hero { padding-top:40px; }
      .hero h1 { font-size: clamp(2.35rem, 11vw, 3.7rem); max-width: 100%; }
      .hero-actions .btn { width:100%; }
      .hero-visual { min-height:430px; margin-top:8px; }
      .visual-orbit { width:340px; height:340px; }
      .portrait-wrap { width:min(350px, 100%); height:420px; }
      .chart-card { width:188px; right:0; bottom:18px; }
      .floating-pill { left:6px; top:36px; font-size:.72rem; }
      .case-card, .review-card { padding:23px 20px; min-height:auto; }
      .case-summary { min-height:auto; }
      .case-details { grid-template-columns:1fr; }
      .cards { grid-template-columns:1fr; }
      .service-card.featured { grid-column:auto; }
      .process-grid { grid-template-columns:1fr; }
      .step { max-width:360px; margin-inline:auto; }
      .about-photo { min-height:560px; }
      .check-list, .profile-card { grid-template-columns:1fr; }
      .niche-grid { grid-template-columns:repeat(2,1fr); }
      .contact-shell { padding:28px 18px; }
      .contact-form { grid-template-columns:1fr; }
      .field.full, .form-note { grid-column:auto; }
      .footer-inner { flex-direction:column; text-align:center; }
      .availability { padding:22px 18px; }
      .availability-main { align-items:flex-start; }
      .metric { padding:23px 8px; }
      .query-item { padding:13px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
      .reveal, .stagger > * { opacity:1 !important; transform:none !important; }
    }
  

/* WordPress integration */
.admin-bar .navbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar { top: 46px; } }


/* WordPress navigation and editable page-content support. */
.rwh-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwh-menu li { margin: 0; padding: 0; }
.rwh-menu .current-menu-item > a,
.rwh-menu .current_page_item > a { color: #fff; }
.rwh-menu .current-menu-item > a::after,
.rwh-menu .current_page_item > a::after { right: 0; }
body.admin-bar .navbar { top: 32px; }
.rwh-editor-content {
  padding: 34px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(13,25,45,.88), rgba(5,11,22,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.rwh-editor-content > *:last-child { margin-bottom: 0; }
.rwh-editor-content h1,
.rwh-editor-content h2,
.rwh-editor-content h3,
.rwh-editor-content h4 { color: var(--text); }
.rwh-editor-content p,
.rwh-editor-content li { color: var(--muted); }
.rwh-editor-content a { color: var(--blue-3); text-decoration: underline; }
.rwh-editor-content img { border-radius: 16px; }
.alignwide { width: min(100%, 1180px); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

@media (max-width: 1040px) {
  .rwh-menu { gap: 18px; }
}
@media (max-width: 840px) {
  .rwh-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .rwh-menu li { width: 100%; }
  body.admin-bar .navbar { top: 46px; }
}
@media (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
}
@media (max-width: 600px) {
  body.admin-bar .navbar { top: 0; }
  .rwh-editor-content { padding: 24px 18px; }
}