/* ════════════════════════════════
   JR TECHNOLOGIES — SERVICES PAGE STYLES
   Requires: reset.css, common.css
════════════════════════════════ */

/* ── Page Hero orbs (services-specific) ── */
.ph-grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-size: 200px; pointer-events: none; opacity: 0.6;
}
.ph-orb1 {
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.48) 0%, transparent 70%);
    top: -100px; right: -80px;
    animation: orbFloat1 14s ease-in-out infinite;
}
.ph-orb2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(30, 64, 175, 0.3) 0%, transparent 70%);
    bottom: 60px; left: -40px;
    animation: orbFloat2 18s ease-in-out infinite;
}
.ph-orb3 {
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
    top: 45%; left: 40%;
    animation: orbFloat1 10s ease-in-out infinite reverse;
}

/* ────────────────────────────────
   PAGE HERO — Right Panel (Services)
──────────────────────────────── */
.ph-svc-card {
    width: 100%;
    max-width: 420px;
    padding: 28px;
    box-shadow: var(--shadow-lg);
}
.ph-svc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.ph-svc-card-label {
    font-size: var(--text-xxs);
    letter-spacing: var(--ls-ultra);
    text-transform: uppercase;
    color: var(--gray-400);
    font-weight: var(--fw-medium);
}
.ph-svc-count {
    font-size: 11px;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--blue-light);
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: var(--radius-full);
    padding: 5px 12px;
}
.ph-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}
.ph-svc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast);
}
.ph-svc-item:hover { background: rgba(37, 99, 235, 0.12); }
.ph-svc-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(37, 99, 235, 0.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ph-svc-icon svg {
    width: 14px; height: 14px;
    stroke: var(--blue-light); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ph-svc-name {
    font-size: 12px;
    color: var(--gray-300);
    font-weight: var(--fw-regular);
    line-height: 1.3;
}

/* Float badges */
.ph-svc-badge {
    top: 16px; right: -20px;
    display: flex; align-items: center; gap: 8px;
    font-size: var(--text-xs); color: var(--gray-300); font-weight: var(--fw-medium);
    white-space: nowrap;
    animation: orbFloat1 5s ease-in-out infinite;
}
.ph-svc-badge-icon {
    width: 14px; height: 14px;
    stroke: #4ade80; fill: none; stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.ph-svc-response {
    bottom: 16px; left: -24px;
    text-align: center;
    animation: orbFloat2 5.5s ease-in-out infinite;
}
.ph-svc-response-num {
    font-family: var(--serif);
    font-size: 32px; font-weight: var(--fw-semi);
    color: var(--white); line-height: 1;
}
.ph-svc-response-num span { color: var(--blue-light); }
.ph-svc-response-lbl {
    font-size: 11px; color: var(--gray-400);
    letter-spacing: var(--ls-wider); text-transform: uppercase;
    margin-top: 4px;
}

/* ── Services uses .eyebrow/.sec-title naming ── */
.eyebrow { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.eyebrow-line { width: 30px; height: 1px; background: var(--blue); }
.eyebrow-text { font-size: var(--text-xxs); letter-spacing: var(--ls-ultra); text-transform: uppercase; color: var(--blue); font-weight: var(--fw-medium); }
.eyebrow-line-lt { background: var(--blue-light); }
.eyebrow-text-lt { color: var(--blue-light); }

.sec-title {
    font-family: var(--serif);
    font-size: var(--text-3xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--black);
    margin-bottom: 16px;
}
.sec-title em { font-style: italic; color: var(--blue); }
.sec-title.lt { color: var(--white); }
.sec-title.lt em { color: var(--blue-light); }
.sec-body { font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--gray-700); max-width: 580px; font-weight: var(--fw-light); }

/* ────────────────────────────────
   STICKY SERVICE NAV
──────────────────────────────── */
.svc-nav-bar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: var(--nav-height);
    z-index: 90;
    transition: top 0.4s var(--ease);
}
.svc-nav-inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter);
    display: flex; align-items: center; gap: 4px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.svc-nav-inner::-webkit-scrollbar { display: none; }
.svc-pill {
    flex-shrink: 0; padding: 14px var(--space-md);
    font-size: var(--text-sm);; font-weight: var(--fw-medium); color: var(--gray-500);
    border-bottom: 2px solid transparent; white-space: nowrap;
    transition: color var(--duration-fast), border-color var(--duration-fast);
    cursor: pointer;
}
.svc-pill:hover { color: var(--black); }
.svc-pill.active { color: var(--blue); border-color: var(--blue); }

/* ────────────────────────────────
   INTRO BAND
──────────────────────────────── */
.intro-band { background: var(--white); padding: var(--space-3xl) var(--gutter) 0; }
.intro-band-inner {
    max-width: var(--max-width); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center;
    padding-bottom: var(--space-3xl); border-bottom: 1px solid var(--gray-100);
}
.intro-lead {
    font-family: var(--serif); font-size: clamp(22px, 2.5vw, 34px);
    font-weight: var(--fw-light); font-style: italic; line-height: 1.45; color: var(--black);
    border-left: 3px solid var(--blue); padding-left: 24px; margin: 24px 0 28px;
}
.intro-body { font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--gray-700); font-weight: var(--fw-light); margin-bottom: 18px; }
.intro-right { display: flex; flex-direction: column; gap: 16px; }
.intro-stat-row {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md) 24px;
    background: var(--off-white); border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    transition: border-color var(--duration-base), transform var(--duration-base) var(--ease);
}
.intro-stat-row:hover { border-color: var(--blue-pale); transform: translateX(6px); }
.intro-stat-num {
    font-family: var(--serif); font-size: 36px; font-weight: var(--fw-semi);
    color: var(--blue); line-height: var(--lh-tight); flex-shrink: 0; min-width: 70px;
}
.intro-stat-num sup { font-size: 0.5em; vertical-align: super; }
.intro-stat-text { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--gray-500); font-weight: var(--fw-light); }
.intro-stat-text strong { display: block; font-size: var(--text-base);; font-weight: var(--fw-semi); color: var(--black); margin-bottom: 2px; }

/* ────────────────────────────────
   SERVICE DETAIL BLOCKS
──────────────────────────────── */
.svc-block { padding: 100px var(--gutter); }
.svc-block-inner { max-width: var(--max-width); margin: 0 auto; }
.svc-block.light { background: var(--off-white); }
.svc-block.white { background: var(--white); }
.svc-block.pale  { background: var(--blue-pale); }
.svc-block.dark  { background: var(--charcoal); }
.svc-anchor { scroll-margin-top: 130px; }

.svc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; }
.svc-layout.flip { direction: rtl; }
.svc-layout.flip > * { direction: ltr; }

.svc-service-num {
    font-family: var(--serif); font-size: var(--text-xxs); letter-spacing: var(--ls-ultra);
    text-transform: uppercase; color: var(--blue); font-weight: var(--fw-medium);
    margin-bottom: var(--space-md); display: flex; align-items: center; gap: 10px;
}
.svc-service-num::before { content: ""; width: 24px; height: 1px; background: var(--blue); }
.svc-service-num.lt { color: var(--blue-light); }
.svc-service-num.lt::before { background: var(--blue-light); }

.svc-name {
    font-family: var(--serif); font-size: clamp(36px, 4.5vw, 60px);
    font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: -1px;
    color: var(--black); margin-bottom: 24px;
}
.svc-name em { font-style: italic; color: var(--blue); }
.svc-name.lt { color: var(--white); }
.svc-name.lt em { color: var(--blue-light); }

.svc-desc { font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--gray-700); font-weight: var(--fw-light); margin-bottom: var(--space-md); }
.svc-desc.lt { color: rgba(255, 255, 255, 0.45); }

.svc-highlight {
    font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.55;
    color: var(--black); border-left: 3px solid var(--blue); padding-left: var(--space-md);
    margin: 28px 0 var(--space-lg);
}
.svc-highlight.lt { color: rgba(255, 255, 255, 0.75); border-color: var(--blue-light); }

.svc-cta-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--blue); letter-spacing: var(--ls-wide);
    border-bottom: 1px solid var(--blue); padding-bottom: 2px;
    transition: gap var(--duration-fast), color var(--duration-fast);
}
.svc-cta-link:hover { gap: 16px; }
.svc-cta-link.lt { color: var(--blue-light); border-color: var(--blue-light); }

/* Feature cards */
.svc-features { display: flex; flex-direction: column; gap: 14px; }
.svc-feature-card {
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg); padding: 24px 26px;
    position: relative; overflow: hidden;
    transition: transform var(--duration-base) var(--ease), border-color var(--duration-base), box-shadow var(--duration-base);
}
.svc-feature-card:hover { transform: translateX(8px); border-color: var(--blue-pale); box-shadow: var(--shadow-sm); }
.svc-feature-card-bar {
    position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
    background: var(--blue); transform: scaleY(0); transform-origin: top;
    transition: transform 0.35s var(--ease);
}
.svc-feature-card:hover .svc-feature-card-bar { transform: scaleY(1); }
.svc-feature-card-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.svc-feature-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--blue-pale); border: 1px solid rgba(37, 99, 235, 0.15);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.svc-feature-icon svg { width: 17px; height: 17px; stroke: var(--blue); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-feature-card-title { font-size: var(--text-base);; font-weight: var(--fw-semi); color: var(--black); }
.svc-feature-card-desc { font-size: var(--text-sm);; line-height: var(--lh-relaxed); color: var(--gray-500); font-weight: var(--fw-light); }

/* Dark variant */
.svc-feature-card.dk { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07); }
.svc-feature-card.dk:hover { border-color: rgba(37, 99, 235, 0.5); box-shadow: none; }
.svc-feature-card.dk .svc-feature-card-bar { background: var(--blue-light); }
.svc-feature-card.dk .svc-feature-icon { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.3); }
.svc-feature-card.dk .svc-feature-icon svg { stroke: var(--blue-light); }
.svc-feature-card.dk .svc-feature-card-title { color: var(--white); }
.svc-feature-card.dk .svc-feature-card-desc { color: var(--gray-400); }

/* Tags */
.svc-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: 24px; }
.svc-tag {
    font-size: var(--text-xs); color: var(--blue-deep); background: var(--blue-pale);
    padding: 6px 14px; border-radius: 20px; font-weight: var(--fw-medium); letter-spacing: 0.3px;
}
.svc-tag.lt { color: rgba(96, 165, 250, 0.9); background: rgba(37, 99, 235, 0.15); }

/* Divider */
.svc-divider { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); border-bottom: 1px solid var(--gray-100); }

/* ────────────────────────────────
   PACKAGES / PRICING
──────────────────────────────── */
.packages { background: var(--blue-pale); padding: 100px var(--gutter); }
.packages-inner { max-width: var(--max-width); margin: 0 auto; }
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.pkg-card {
    background: var(--white); border-radius: 14px; border: 1px solid rgba(37, 99, 235, 0.1);
    padding: 44px 36px; position: relative; overflow: hidden;
    transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base), border-color var(--duration-base);
}
.pkg-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
.pkg-card.featured { background: var(--blue); border-color: var(--blue); }
.pkg-card.featured:hover { box-shadow: var(--shadow-btn); }
.pkg-ribbon {
    position: absolute; top: var(--space-md); right: var(--space-md);
    background: rgba(255, 255, 255, 0.15); color: var(--white);
    font-size: var(--text-xxs); letter-spacing: 1.5px; text-transform: uppercase;
    padding: 5px var(--space-sm); border-radius: var(--radius-full); font-weight: var(--fw-medium);
}
.pkg-icon {
    width: 52px; height: 52px; border-radius: var(--radius-xl);
    background: var(--blue-pale); border: 1px solid rgba(37, 99, 235, 0.15);
    display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.pkg-card.featured .pkg-icon { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); }
.pkg-icon svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pkg-card.featured .pkg-icon svg { stroke: var(--white); }
.pkg-name { font-size: var(--text-xxs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--blue); font-weight: var(--fw-semi); margin-bottom: 10px; }
.pkg-card.featured .pkg-name { color: rgba(255, 255, 255, 0.65); }
.pkg-title { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 30px); font-weight: var(--fw-semi); color: var(--black); margin-bottom: 16px; letter-spacing: -0.3px; }
.pkg-card.featured .pkg-title { color: var(--white); }
.pkg-desc { font-size: var(--text-xs); line-height: var(--lh-loose); color: var(--gray-700); font-weight: var(--fw-light); margin-bottom: 28px; }
.pkg-card.featured .pkg-desc { color: rgba(255, 255, 255, 0.85); }
.pkg-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-lg); }
.pkg-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-xs); color: var(--gray-700); font-weight: var(--fw-light); line-height: 1.5; }
.pkg-card.featured .pkg-list li { color: rgba(255, 255, 255, 0.7); }
.pkg-list li::before {
    content: ""; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; margin-top: 2px;
    background: var(--blue-pale) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5' stroke='%236B1A2A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
    border: 1px solid rgba(37, 99, 235, 0.25);
}
.pkg-card.featured .pkg-list li::before {
    background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pkg-btn {
    display: block; text-align: center; background: var(--blue); color: var(--white);
    padding: 14px; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide);
    transition: var(--transition); position: relative; overflow: hidden;
}
.pkg-btn::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.07); transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease);
}
.pkg-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.pkg-btn:hover::before { transform: translateX(0); }
.pkg-card.featured .pkg-btn { background: var(--white); color: var(--blue); }
.pkg-card.featured .pkg-btn:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); }

/* ────────────────────────────────
   TECHNOLOGY STACK
──────────────────────────────── */
.tech-stack { background: var(--white); padding: 100px var(--gutter); }
.tech-stack-inner { max-width: var(--max-width); margin: 0 auto; }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: 56px; }
.tech-card {
    border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
    padding: 28px 24px; text-align: center;
    transition: border-color var(--duration-base), transform var(--duration-base) var(--ease), box-shadow var(--duration-base);
}
.tech-card:hover { border-color: var(--blue-pale); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.tech-category { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); font-weight: var(--fw-semi); margin-bottom: var(--space-sm); }
.tech-name { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--black); margin-bottom: 6px; }
.tech-desc { font-size: var(--text-sm);; line-height: var(--lh-normal); color: var(--gray-500); font-weight: var(--fw-light); }

/* ────────────────────────────────
   RESPONSIVE
──────────────────────────────── */
@media (max-width: 1024px) {
    .intro-band-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .svc-layout, .svc-layout.flip { grid-template-columns: 1fr; direction: ltr; gap: var(--space-xl); }
    .packages-grid { grid-template-columns: 1fr 1fr; }
    .packages-grid .pkg-card:last-child { grid-column: span 2; max-width: 480px; margin: 0 auto; width: 100%; }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .svc-nav-bar { top: var(--nav-height-sm); }
    .svc-block { padding: 70px var(--gutter); }
    .packages-grid { grid-template-columns: 1fr; }
    .packages-grid .pkg-card:last-child { grid-column: span 1; max-width: 100%; }
    .tech-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .tech-grid { grid-template-columns: 1fr; }
}