/* Homepage module previews. The illustrations are local SVGs, not live project data. */
#features{box-sizing:border-box;min-height:calc(100vh - var(--landing-nav-height,62px));min-height:calc(100dvh - var(--landing-nav-height,62px));display:flex;flex-direction:column;padding:clamp(20px,4dvh,40px) 36px;background:#111110;color:#FAFAF6}
.features-heading{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.features-title{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(32px,5.6dvh,56px);line-height:1.05;text-transform:uppercase}
.features-meta{font:10px/1.5 'IBM Plex Mono',monospace;letter-spacing:.05em;color:#8d9a8e;margin-left:auto;text-align:right}
.features-copy{font-size:15px;line-height:1.4;color:#a5aca1;margin-bottom:clamp(14px,3dvh,28px);max-width:560px}
.features-grid{flex:1;display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(min-content,1fr));grid-template-areas:'gis ai cctv diary' 'gis weather devices devices';gap:14px}
.feature-card{position:relative;min-width:0;box-sizing:border-box;border:1px solid #b8c1b51f;padding:20px;display:flex;flex-direction:column;background:linear-gradient(145deg,#232622,#191c19);color:#FAFAF6;text-decoration:none;transition:border-color .25s,background .25s;overflow:hidden}
.feature-card:hover{color:#FAFAF6;border-color:#F59E0B;background:linear-gradient(145deg,#2a2e26,#1d211b)}
.feature-card:focus-visible{outline:2px solid #F59E0B;outline-offset:-3px;border-color:#F59E0B}
.feature-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;position:relative;z-index:1}
.feature-number{font:10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#9ca595}
.feature-arrow{font-size:16px;line-height:1;color:#8b9586;transition:transform .25s,color .25s}
.feature-card:hover .feature-arrow,.feature-card:focus-visible .feature-arrow{transform:translateX(3px);color:#F59E0B}
.feature-preview{position:relative;flex:1;min-height:60px;margin-bottom:16px;background:radial-gradient(ellipse at center,#7183500a,transparent 75%)}
.feature-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .6s;pointer-events:none}
.feature-card:hover .feature-preview img{transform:scale(1.015)}
.feature-details{position:relative;z-index:1}
.feature-title{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:24px;line-height:1.1;text-transform:uppercase;margin-bottom:8px}
.feature-copy{font-size:12.5px;line-height:1.5;color:#adb5a8}
.feature-card--gis{grid-area:gis;padding:24px;background:radial-gradient(ellipse at 55% 40%,#2e392a,#1d251e 70%);border-color:#b59a4638}
.feature-card--gis:hover{background:radial-gradient(ellipse at 55% 40%,#354030,#202a21 70%)}
.feature-card--gis .feature-number{color:#f5b344}
.feature-card--gis .feature-preview{min-height:180px;margin:0 0 18px}
.feature-card--gis .feature-preview img{mask-image:radial-gradient(ellipse 65% 62% at center,#000 58%,transparent 100%)}
.feature-card--gis .feature-title{font-size:38px}
.feature-card--gis .feature-copy{font-size:14px;line-height:1.5}
.feature-map-legend{display:flex;gap:14px;margin-bottom:10px;font:10px/1.4 'IBM Plex Mono',monospace;color:#aebba8}
.feature-map-legend span::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;background:#819c87}
.feature-map-legend span:last-child::before{background:transparent;outline:1px solid #f5b344}
.feature-card--ai{grid-area:ai}.feature-card--cctv{grid-area:cctv}.feature-card--diary{grid-area:diary}.feature-card--weather{grid-area:weather}
.feature-card--devices{grid-area:devices;display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto 1fr;column-gap:18px}
.feature-card--devices .feature-header{grid-column:1/-1}
.feature-card--devices .feature-preview{grid-column:2;grid-row:2;margin-bottom:0}
.feature-card--devices .feature-details{grid-column:1;grid-row:2;align-self:center}
.feature-actions{display:flex;align-items:center;gap:12px}
.feature-live{display:flex;align-items:center}
.feature-live i{width:5px;height:5px;background:#80c69a;border-radius:50%}
@media(prefers-reduced-motion:no-preference){.feature-card:hover .feature-live i{animation:pulse 2.5s infinite}}
@media(prefers-reduced-motion:reduce){.feature-card,.feature-arrow,.feature-preview img{transition:none}.feature-card:hover,.feature-card:hover .feature-preview img,.feature-card:hover .feature-arrow{transform:none}}
@media(min-width:768px) and (max-width:1050px) and (min-height:601px){
  .features-grid{grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:repeat(3,minmax(min-content,1fr));grid-template-areas:'gis ai cctv' 'gis diary weather' 'gis devices devices'}
  .feature-card{padding:10px}.feature-header{margin-bottom:4px}.feature-preview{min-height:30px;margin-bottom:6px}.feature-title{font-size:22px}.feature-copy{font-size:12px;line-height:1.4}
}
@media(max-width:767px){
  #features{padding:16px 18px}
  .features-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .features-title{font-size:clamp(28px,8.6vw,40px)}
  .features-meta{margin-left:0;font-size:9px;text-align:left}
  .features-copy{font-size:13px;margin-bottom:12px}
  .features-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(min-content,1fr));grid-template-areas:none;gap:8px}
  .feature-card{grid-area:auto;padding:10px;display:flex}
  .feature-header{margin-bottom:4px}.feature-number{font-size:9px}.feature-arrow{font-size:14px}
  .feature-card .feature-preview{flex:0 0 38px;min-height:38px;max-height:38px;margin:0 0 8px}
  .feature-card .feature-details{align-self:stretch}
  .feature-card .feature-title{font-size:21px;margin-bottom:5px}
  .feature-card .feature-copy{font-size:12px;line-height:1.4}
  .feature-map-legend,.feature-live{display:none}
}
@media(max-width:767px) and (max-height:740px){
  #features{padding-top:12px;padding-bottom:12px}
  .feature-card{padding:8px;justify-content:center}
  .feature-card .feature-preview{position:absolute;inset:0;min-height:0;max-height:none;margin:0;opacity:.12;mask-image:linear-gradient(90deg,transparent,#000)}
  .feature-card .feature-title{font-size:19px;margin-bottom:4px}
  .feature-card .feature-copy{font-size:11.5px;line-height:1.35}
}
@media(min-width:768px) and (max-height:600px){
  #features{padding-top:12px;padding-bottom:12px}
  .features-title{font-size:30px}.features-copy{font-size:13px;margin-bottom:12px}
  .features-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(min-content,1fr));grid-template-areas:none;gap:8px}
  .feature-card{grid-area:auto;display:flex;padding:8px 12px;justify-content:center}
  .feature-header{margin-bottom:4px}.feature-number{font-size:10px}
  .feature-card .feature-preview{position:absolute;inset:0;min-height:0;margin:0;opacity:.14;mask-image:linear-gradient(90deg,transparent 15%,#000)}
  .feature-card .feature-title{font-size:20px;margin-bottom:4px}
  .feature-card .feature-copy{font-size:12px;line-height:1.35}
  .feature-map-legend,.feature-live{display:none}
}
@media(min-width:768px) and (max-height:450px){
  .feature-card{padding:6px 10px}.feature-header{margin-bottom:3px}.feature-card .feature-title{font-size:18px;margin-bottom:3px}.feature-card .feature-copy{font-size:11.5px;line-height:1.3}
}