/*
 * Industry pages family (industry.php, features.php, index.php).
 * Modelled on the VVIP page: a dark hero band showing the real thing the
 * guest carries, then a real sequence, the feature cards and the wrist.
 * Each industry sets its own colours on .ind (inline custom properties):
 *   --ink    deep band colour        --glow  light source in the band
 *   --accent signature colour        --on-accent text on the accent
 * Signature: real QMyTurn Apple Watch screens (simulator captures, demo
 * data) in a drawn watch case whose strap takes the industry colour.
 */
.ind { --ink:#0b1f3a; --glow:#1c4f86; --accent:#4ea8ff; --on-accent:#03182f; --text:#41506a; --head:#13213a; --line:#e3e8ef; }
.ind * { box-sizing:border-box; }
.ind h1, .ind h2, .ind h3 { margin:0; }
.inner-content .ind h2, .inner-content .ind h3 { color:var(--head) !important; }

/* ---------- hero band ---------- */
.ind-band { position:relative; overflow:hidden; border-radius:26px; margin:28px 0 46px; padding:clamp(28px,5vw,60px);
            background:radial-gradient(110% 130% at 88% 8%, var(--glow) 0%, var(--ink) 58%); color:#eef3ff;
            display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,56px); align-items:center; text-align:start; }
.ind-band::before { content:""; position:absolute; inset:auto -10% -55% 30%; height:90%; border-radius:50%;
                    background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events:none; }
.ind-eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.ind-band h1 { font-weight:800; font-size:clamp(2rem,4.3vw,3.2rem); line-height:1.07; letter-spacing:-.015em; color:#fff !important; margin:0 0 18px; max-width:18ch; }
.ind-band .lead { color:#d5def0; font-size:1.1rem; line-height:1.6; margin:0 0 26px; max-width:52ch; }
.ind-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ind-cta { display:inline-block; padding:13px 26px; border-radius:999px; background:var(--accent); color:var(--on-accent) !important; font-weight:800;
           text-decoration:none; transition:filter .15s, transform .15s; }
.ind-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
.ind-ghost { color:#eef3ff !important; text-decoration:none; font-weight:700; border-bottom:2px solid color-mix(in srgb, var(--accent) 60%, transparent); padding:4px 0; }
.ind-small { color:#a9b6cf; font-size:.88rem; margin:14px 0 0; }
.ind :focus-visible { outline:3px solid #8fb4ff; outline-offset:3px; border-radius:6px; }

/* ---------- the watch ---------- */
.watch { position:relative; margin:0 auto; width:min(230px, 62vw); padding:44px 0; }
.watch::before, .watch::after { content:""; position:absolute; left:16%; right:16%; height:56px; border-radius:16px;
                                background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #10131a), color-mix(in srgb, var(--accent) 30%, #05070b)); }
.watch::before { top:0; border-radius:16px 16px 6px 6px; }
.watch::after { bottom:0; border-radius:6px 6px 16px 16px; }
.watch-case { position:relative; z-index:1; padding:12px; border-radius:58px / 54px;
              background:linear-gradient(150deg,#4a4e57 0%,#1a1c21 45%,#0b0c0f 100%);
              box-shadow:0 28px 60px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.25); }
.watch-case::before { content:""; position:absolute; right:-7px; top:24%; width:9px; height:38px; border-radius:4px;
                      background:linear-gradient(90deg,#2b2e35,#6b707b 60%,#2b2e35); }
.watch-case::after { content:""; position:absolute; right:-4px; top:52%; width:5px; height:46px; border-radius:3px; background:#24272d; }
.watch-case img { display:block; width:100%; height:auto; border-radius:46px / 42px; background:#000; }
.watch.tilt { transform:rotate(-4deg); }
.watch figcaption { position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); width:max-content; max-width:240px; text-align:center;
                    font-size:.78rem; color:#a9b6cf; }

/* ---------- sections ---------- */
.ind-h2 { font-weight:800; font-size:clamp(1.45rem,2.6vw,1.9rem); text-align:center; margin:0 0 10px !important; letter-spacing:-.01em; }
.ind-sub { text-align:center; max-width:62ch; margin:0 auto 26px; color:var(--text); line-height:1.6; }
.ind-steps { list-style:none; counter-reset:s; padding:0; margin:0 auto 54px; max-width:1040px;
             display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; text-align:start; }
.ind-steps li { counter-increment:s; position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:52px 18px 18px; color:var(--text); line-height:1.55; font-size:.95rem; }
.ind-steps li::before { content:counter(s); position:absolute; left:18px; top:16px; width:28px; height:28px; border-radius:50%;
                        background:var(--ink); color:var(--accent); font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; }
[dir="rtl"] .ind-steps li::before { left:auto; right:18px; }
.ind-steps b { display:block; color:var(--head); font-weight:800; font-size:1rem; margin-bottom:4px; }
.ind-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:0 0 54px; text-align:start; }
.ind-card { background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:14px; padding:18px 20px; }
.ind-card h3 { font-size:1rem; font-weight:700; margin:0 0 6px !important; line-height:1.3; }
.ind-card p { margin:0; color:var(--text); font-size:.93rem; line-height:1.55; }
.ind-card.new { position:relative; }
.ind-card.new::after { content:"New"; position:absolute; top:12px; inset-inline-end:14px; font-size:.68rem; font-weight:800; letter-spacing:.06em;
                       text-transform:uppercase; background:var(--ink); color:var(--accent); border-radius:999px; padding:2px 8px; }

/* ---------- on the wrist ---------- */
.ind-wrist { background:linear-gradient(180deg,#f4f7fb,#fff); border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,44px) clamp(16px,3vw,36px) 20px; margin:0 0 54px; }
.ind-wrist-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(16px,3vw,36px); align-items:start; }
.ind-wrist .watch { width:min(170px, 52vw); padding:34px 0; }
.ind-wrist .watch::before, .ind-wrist .watch::after { height:40px; }
.ind-wrist .watch-case { padding:9px; border-radius:42px / 40px; }
.ind-wrist .watch-case img { border-radius:34px / 31px; }
.ind-wrist-row p { text-align:center; color:var(--text); font-size:.9rem; line-height:1.5; margin:10px auto 0; max-width:26ch; }
.ind-wrist-row p b { display:block; color:var(--head); font-weight:800; }
.ind-fine { text-align:center; color:#8a97ad; font-size:.8rem; margin:18px 0 0; }

/* ---------- closing band ---------- */
.ind-close { border-radius:22px; padding:clamp(24px,4vw,40px); margin:0 0 7%; background:var(--ink); color:#eef3ff;
             display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; text-align:start; }
.inner-content .ind .ind-close h2, .ind-close h2 { color:#fff !important; font-weight:800; font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 4px !important; }
.ind-close p { margin:0; color:#c3cde0; }

/* ---------- other industries (tiles) ---------- */
.ind-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:0 0 54px; }
.ind-tile { display:flex; flex-direction:column; gap:6px; text-decoration:none !important; border-radius:18px; padding:18px; color:#eef3ff !important;
            background:radial-gradient(120% 120% at 90% 0%, var(--glow), var(--ink) 65%); transition:transform .15s, box-shadow .15s; min-height:150px; }
.ind-tile:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,20,40,.22); }
.ind-tile .k { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ind-tile b { font-size:1.08rem; line-height:1.3; color:#fff; }
.ind-tile span.d { font-size:.86rem; color:#c3cde0; line-height:1.45; }
.ind-tile .go { margin-top:auto; font-weight:700; font-size:.86rem; color:var(--accent); }

@media (max-width: 880px) {
  .ind-band { grid-template-columns:1fr; text-align:start; }
  .watch.tilt { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-cta, .ind-tile { transition:none; }
  .ind-cta:hover, .ind-tile:hover { transform:none; }
}

/* ---------- every industry (features.php, index.php) ---------- */
.ind-every { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:16px; margin:0 0 20px; }
.ind-ecard { display:grid; grid-template-columns:1fr 128px; gap:14px; align-items:center; border-radius:20px; padding:22px 20px 22px 24px; color:#eef3ff;
             background:radial-gradient(120% 140% at 95% 0%, var(--glow), var(--ink) 62%); text-decoration:none !important; transition:transform .15s, box-shadow .15s; }
.ind-ecard:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(10,20,40,.25); }
.ind-ecard .k { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.inner-content .ind-ecard h3, .feat-page .ind-ecard h3, .ind-ecard h3 { color:#fff !important; font-size:1.15rem; font-weight:800; margin:6px 0 10px; line-height:1.25; }
.ind-ecard ul { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:6px; }
.ind-ecard li { position:relative; padding-inline-start:18px; font-size:.9rem; line-height:1.45; color:#d5def0; }
.ind-ecard li::before { content:""; position:absolute; inset-inline-start:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.ind-ecard .go { font-weight:700; font-size:.88rem; color:var(--accent); }
.ind-ecard .watch { width:128px; padding:26px 0; }
.ind-ecard .watch::before, .ind-ecard .watch::after { height:30px; left:18%; right:18%; }
.ind-ecard .watch-case { padding:7px; border-radius:32px / 30px; }
.ind-ecard .watch-case::before { width:6px; height:24px; right:-5px; }
.ind-ecard .watch-case::after { display:none; }
.ind-ecard .watch-case img { border-radius:26px / 24px; }
@media (max-width: 520px) { .ind-ecard { grid-template-columns:1fr; } .ind-ecard .watch { margin:0; } }
@media (prefers-reduced-motion: reduce) { .ind-ecard { transition:none; } .ind-ecard:hover { transform:none; } }