/* =========================================================================
   Sightica shared design system
   -------------------------------------------------------------------------
   Derived from the KULUK feature block on the home page: #4277CE headings,
   justified muted body copy, soft low-opacity shadows on a light grey canvas.

   Add class "sg-page" to a page's main content wrapper to opt in.
   The home page uses "sg-home", which inherits the same tokens.
   ========================================================================= */

.sg-page,
.sg-home {
   --sg-blue:      #4277CE;
   --sg-blue-dark: #2f5cab;
   --sg-blue-soft: rgba(66, 119, 206, 0.08);
   --sg-ink:       #21293c;
   --sg-body:      #5a6270;
   --sg-muted:     #5d6880;
   --sg-card:      #ffffff;
   --sg-line:      #e9ecef;
   --sg-canvas:    #f4f5f7;

   /* Rounded, layered "premium" surface treatment shared by every card */
   --sg-radius:      16px;
   --sg-radius-sm:   10px;
   --sg-shadow:      0 1px 2px rgba(33, 41, 60, 0.05),
                     0 10px 30px -12px rgba(33, 41, 60, 0.16);
   --sg-shadow-hover: 0 2px 4px rgba(33, 41, 60, 0.05),
                      0 22px 44px -14px rgba(66, 119, 206, 0.28);

   /* !important beats the theme's .bg-grey on the home section */
   background: var(--sg-canvas) !important;
   color: var(--sg-body);
}

/* ---------- Typography ---------- */
.sg-page p,
.sg-page li,
.sg-home p,
.sg-home li {
   color: var(--sg-body);
   font-size: 14px;
   line-height: 1.8;
}
.sg-page a,
.sg-home a { color: var(--sg-blue); transition: color .2s ease; }
.sg-page a:hover,
.sg-home a:hover { color: var(--sg-blue-dark); }

/* Page heading + centred accent rule */
.sg-page-title {
   /* px, not rem: the theme drops the root font-size from 10px to 8px under
      576px, which silently shrank rem-based titles to body-text size. */
   font-size: 24px;
   line-height: 1.35;
   text-align: center;
   color: var(--sg-ink);
   font-weight: 700;
   max-width: 980px;
   /* Top gap as padding, not margin: a top margin collapses through
      .about-section and main.sg-page (neither has top padding/border),
      shoving the whole grey canvas down and exposing a white strip of
      .page-wrapper between the header and the page. */
   margin: 0 auto 0.9rem;
   padding-top: 2.6rem;
}
.sg-title-rule {
   width: 60px;
   height: 3px;
   background: var(--sg-blue);
   margin: 0 auto 2.5rem;
   border-radius: 2px;
   opacity: .9;
}

/* Section heading - uppercase label + centred accent bar */
.sg-page .sg-section-head,
.sg-home .sg-section-head { text-align: center; margin: 0 0 34px; }

.sg-page .sg-section-head h2,
.sg-page .section-title,
.sg-home .sg-section-head h2,
.sg-home .section-title {
   /* !important overrides the theme's own .section-title treatment */
   display: inline-block;
   color: var(--sg-ink) !important;
   font-size: 20px !important;
   font-weight: 700 !important;
   text-transform: uppercase;
   letter-spacing: 1.6px;
   margin: 0 0 12px !important;
   padding: 0 0 12px !important;
   border: 0 !important;
   position: relative;
}
.sg-page .sg-section-head h2::after,
.sg-page .section-title::after,
.sg-home .sg-section-head h2::after,
.sg-home .section-title::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   width: 34px;
   height: 2px;
   background: var(--sg-blue);
}
.sg-page .sg-section-head p,
.sg-home .sg-section-head p { max-width: 720px; margin: 0 auto; }

/* Sub-section label - a quieter variant of .sg-section-head for headings
   that sit beneath the page title rather than opening a major section.
   Add class "sg-sub" next to .sg-section-head to opt in. */
.sg-page .sg-section-head.sg-sub h2,
.sg-home .sg-section-head.sg-sub h2 {
   font-size: 14px !important;
   font-weight: 600 !important;
   color: var(--sg-muted) !important;
   letter-spacing: 2.4px;
   padding-bottom: 10px !important;
}
.sg-page .sg-section-head.sg-sub h2::after,
.sg-home .sg-section-head.sg-sub h2::after { width: 26px; }

/* ---------- Card surface ---------- */
.sg-card {
   background: var(--sg-card);
   border: 1px solid var(--sg-line);
   border-radius: var(--sg-radius, 16px);
   padding: 32px 34px;
   margin-bottom: 30px;
   box-shadow: var(--sg-shadow);
   transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.sg-card:hover {
   box-shadow: var(--sg-shadow-hover);
   border-color: rgba(66, 119, 206, 0.3);
   transform: translateY(-3px);
}
.sg-card h3 {
   color: var(--sg-blue);
   font-size: 21px;
   font-weight: 700;
   line-height: 1.45;
   margin: 0 0 8px;
}
.sg-card .sg-card-rule {
   width: 34px;
   height: 2px;
   background: var(--sg-blue);
   margin: 0 0 18px;
   opacity: .85;
}
.sg-card p { text-align: justify; margin-bottom: 14px; }
.sg-card p:last-child { margin-bottom: 0; }

/* Lead-in card with a left accent, like the OS-support panel on home */
.sg-intro-card {
   border-left: 3px solid var(--sg-blue);
   margin-bottom: 40px;
}
.sg-intro-card p {
   font-size: 14.5px;
   line-height: 1.85;
   text-align: justify;
}

/* Text link rendered as a soft pill */
.sg-link-pill {
   display: inline-block;
   margin-top: 6px;
   padding: 9px 20px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .3px;
   color: var(--sg-blue) !important;
   background: var(--sg-blue-soft);
   border: 1px solid rgba(66, 119, 206, 0.25);
   border-radius: 999px;
   transition: all .25s ease;
}
.sg-link-pill:hover {
   background: var(--sg-blue);
   border-color: var(--sg-blue);
   color: #fff !important;
}

/* Equal-height card rows */
.sg-row-equal { display: flex; flex-wrap: wrap; }
.sg-row-equal > [class*="col-"] { display: flex; flex-direction: column; }
.sg-row-equal > [class*="col-"] > .sg-card,
.sg-row-equal > [class*="col-"] > .sg-support,
.sg-row-equal > [class*="col-"] > .sg-srvc { flex: 1 1 auto; }

/* =========================================================================
   Product pages (Item Seeker / Map Seeker / Netradaan / Fall Detection)
   ========================================================================= */

/* Split hero: product icon beside the pitch + download CTA */
.sg-product-hero { margin-bottom: 34px; }
.sg-product-hero .sg-product-art {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
}
.sg-product-hero .sg-product-art img {
   max-width: 260px;
   width: 100%;
   height: auto;
   /* Squircle app-icon treatment, matching the home-page app stack thumbs */
   border-radius: 22%;
   opacity: .97;
   transition: transform .3s ease, opacity .3s ease;
}
.sg-product-hero:hover .sg-product-art img { transform: scale(1.03); opacity: 1; }
.sg-product-hero h2 {
   color: var(--sg-blue);
   font-size: 23px;
   font-weight: 700;
   line-height: 1.4;
   margin: 0 0 8px;
}

/* Google Play / primary action button */
.sg-btn-play {
   display: inline-block;
   padding: 11px 24px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .3px;
   color: #fff !important;
   background: var(--sg-blue);
   border: 1px solid var(--sg-blue);
   border-radius: 999px;
   transition: all .25s ease;
}
.sg-btn-play:hover {
   background: var(--sg-blue-dark);
   border-color: var(--sg-blue-dark);
   color: #fff !important;
   transform: translateY(-2px);
   box-shadow: 0 8px 18px rgba(66, 119, 206, 0.3);
}
.sg-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* App screenshot gallery. The theme gives .gallery-section its own grey,
   which reads as a stray band against the page canvas. */
.sg-page .gallery-section {
   background: transparent !important;
   padding: 10px 0 40px;
}
.sg-gallery .gallery-item {
   display: block;
   background: var(--sg-card);
   border: 1px solid var(--sg-line);
   border-radius: var(--sg-radius, 16px);
   padding: 14px;
   box-shadow: var(--sg-shadow);
   transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.sg-gallery .gallery-item:hover {
   box-shadow: var(--sg-shadow-hover);
   transform: translateY(-5px);
   border-color: rgba(66, 119, 206, 0.35);
}
.sg-gallery .gallery-item img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: calc(var(--sg-radius, 16px) - 8px);
}

/* Modern smartphone frame for app screenshots: a slim dark slab with a
   punch-hole camera, drawn in CSS around the bare screen capture. Replaces
   the old baked-in device mockups on white cards. */
.sg-gallery .gallery-item.sg-phone {
   background: #10141b;
   border: 1px solid #2a3140;
   border-radius: 36px;
   padding: 12px 10px;
   max-width: 240px;
   margin: 8px auto 16px;
   position: relative;
   box-shadow: var(--sg-shadow);
}
.sg-gallery .gallery-item.sg-phone:hover {
   box-shadow: var(--sg-shadow-hover);
   border-color: #3a4454;
   transform: translateY(-5px);
}
.sg-gallery .sg-phone img {
   width: 100%;
   border-radius: 26px;
}
/* Punch-hole front camera, centred over the status bar */
.sg-gallery .sg-phone::after {
   content: "";
   position: absolute;
   top: 17px;
   left: 50%;
   transform: translateX(-50%);
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #05070b;
   box-shadow: inset 0 0 0 2px #1a2230, 0 0 0 2px rgba(0, 0, 0, 0.6);
   z-index: 2;
}
/* Side power button */
.sg-gallery .sg-phone::before {
   content: "";
   position: absolute;
   right: -3px;
   top: 110px;
   width: 3px;
   height: 58px;
   border-radius: 0 3px 3px 0;
   background: #2a3140;
}

/* Responsive 16:9 video, replaces the fixed-height .vidis boxes */
.sg-video {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   border-radius: var(--sg-radius-sm, 10px);
   background: #10141b;
}
.sg-video iframe {
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   border: 0;
}

/* Bulleted feature list */
.sg-list { list-style: none; padding: 0; margin: 0; }
.sg-list li { position: relative; padding-left: 20px; margin-bottom: 12px; text-align: justify; }
.sg-list li::before {
   content: "";
   position: absolute;
   left: 0; top: 10px;
   width: 6px; height: 6px;
   border-radius: 50%;
   background: var(--sg-blue);
   opacity: .75;
}

/* =========================================================================
   Awards & Recognitions
   ========================================================================= */

/* Logos have wildly different aspect ratios, so each sits in a fixed-height
   plaque and is contained rather than stretched. */
.sg-award-card { text-align: center; }
.sg-award-logo {
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 1px solid var(--sg-line);
   border-radius: var(--sg-radius-sm, 10px);
   padding: 16px;
   margin-bottom: 24px;
   overflow: hidden;
}
.sg-award-logo img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform .3s ease;
}
.sg-award-card:hover .sg-award-logo img { transform: scale(1.04); }
.sg-award-card h3 { text-align: center; font-size: 20px; }
.sg-award-card .sg-card-rule { margin-left: auto; margin-right: auto; }
.sg-award-card p { text-align: center; }
.sg-award-year {
   display: inline-block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--sg-blue);
   background: var(--sg-blue-soft);
   border-radius: 999px;
   padding: 4px 12px;
   margin-bottom: 12px;
}
.sg-award-card .sg-link-pill { margin-top: 16px; }

/* Certificate modal */
.sg-modal .modal-content {
   border: 0;
   border-radius: var(--sg-radius, 16px);
   overflow: hidden;
   box-shadow: 0 24px 60px -12px rgba(16, 20, 27, 0.35);
}
.sg-modal .modal-header { border-bottom: 2px solid var(--sg-blue); padding: 16px 20px; }
.sg-modal .modal-title { color: var(--sg-ink); font-size: 19px; font-weight: 700; }
.sg-modal .modal-body { padding: 16px; }
.sg-modal .modal-body img { width: 100%; height: auto; }

/* =========================================================================
   Contact
   ========================================================================= */
.sg-contact-card { text-align: center; padding: 30px 22px; }
.sg-contact-icon {
   width: 54px; height: 54px;
   margin: 0 auto 18px;
   display: flex; align-items: center; justify-content: center;
   border-radius: 50%;
   background: var(--sg-blue-soft);
   border: 1px solid rgba(66, 119, 206, 0.22);
   color: var(--sg-blue);
   font-size: 20px;
   transition: all .25s ease;
}
.sg-card:hover .sg-contact-icon {
   background: var(--sg-blue);
   border-color: var(--sg-blue);
   color: #fff;
}
.sg-contact-label {
   display: block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--sg-muted);
   margin-bottom: 8px;
}
.sg-contact-card .sg-contact-value,
.sg-contact-card .sg-contact-value a {
   font-size: 14.5px;
   font-weight: 600;
   color: var(--sg-ink);
   line-height: 1.6;
   word-break: break-word;
}
.sg-contact-card .sg-contact-value a:hover { color: var(--sg-blue-dark); }
.sg-contact-card .sg-contact-value.sg-address {
   font-weight: 400;
   font-size: 13.5px;
   color: var(--sg-body);
}

/* Map panel */
.sg-map-card { padding: 10px; margin-bottom: 34px; }
.sg-map {
   position: relative;
   width: 100%;
   height: 420px;
   border-radius: var(--sg-radius-sm, 10px);
   overflow: hidden;
   background: #eef1f5;
}
.sg-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .sg-map { height: 300px; } }

/* =========================================================================
   Careers / Join the Team
   ========================================================================= */
.sg-job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.sg-job-tag {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .8px;
   text-transform: uppercase;
   color: var(--sg-blue);
   background: var(--sg-blue-soft);
   border: 1px solid rgba(66, 119, 206, 0.22);
   border-radius: 999px;
   padding: 5px 13px;
}
.sg-job-card h3 { font-size: 22px; }

/* =========================================================================
   Long-form / legal prose (privacy policies)
   ========================================================================= */
/* The card itself is capped at a comfortable reading measure and centred,
   so the surface hugs its content instead of leaving dead space beside a
   narrow text column. */
.sg-prose {
   padding: 44px 48px;
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
}
.sg-prose p {
   /* Left-aligned, not justified: long legal text with no hyphenation
      opens ugly rivers of whitespace when justified. */
   text-align: left;
   font-size: 14.5px;
   line-height: 1.9;
}
@media (max-width: 767px) { .sg-prose { padding: 26px 22px; } }

/* Full-width figure inside a card */
.sg-figure { margin: 0; text-align: center; }
.sg-figure img { max-width: 100%; height: auto; border-radius: var(--sg-radius-sm, 10px); }

/* ---------- Responsive ----------
   Page titles keep their full 24px desktop size on every breakpoint so
   headings read consistently across devices; only supporting headings and
   spacing tighten on phones. */
@media (max-width: 991px) {
   .sg-card { padding: 26px 22px; }
   .sg-product-hero .sg-product-art { margin-bottom: 22px; }
   .sg-product-hero h2 { font-size: 21px; }
}
@media (max-width: 575px) {
   .sg-page .sg-section-head h2,
   .sg-page .section-title,
   .sg-home .sg-section-head h2,
   .sg-home .section-title { font-size: 20px !important; letter-spacing: 1.2px; }
   .sg-card h3 { font-size: 20px; }
   .sg-product-hero h2 { font-size: 20px; }
   .sg-card { padding: 22px 18px; }
   .sg-btn-row .sg-btn-play { width: 100%; text-align: center; }
}