/*
Theme Name: Commpro Cloud
Theme URI: https://commpro.cloud/
Author: Commpro
Description: WordPress theme based on the Commpro Cloud landing page mockup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: commpro-cloud
*/

:root{
    --navy:#1C316B;
    --blue:#0075BF;
    --lightblue:#169FDB;
    --purple:#7C3B8F;
    --grad: linear-gradient(120deg, #7C3B8F 0%, #25378D 55%, #005AA7 100%);
    --ink:#1d1d1f;
    --sub:#6e6e73;
    --hair:#e5e5e7;
    --bg-soft:#f5f5f7;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  img,svg{display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  .ic{font-size:16px; line-height:1; color:currentColor; flex-shrink:0;}

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.75);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,0.06);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .logo-mark{height:42px; width:auto;}
  .navlinks{
    display:flex; align-items:center; gap:32px;
    font-size:13px; font-weight:500; color:var(--ink);
  }
  .navlinks a{opacity:0.8; transition:opacity .15s;}
  .navlinks a:hover{opacity:1;}
  .nav-cta{display:flex; align-items:center; gap:16px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 20px; border-radius:100px; font-size:13px; font-weight:600;
    cursor:pointer; border:1px solid transparent; white-space:nowrap;
  }
  .btn-primary{background:var(--grad); color:#fff;}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{color:var(--ink); opacity:0.85;}
  .btn-ghost:hover{opacity:1;}
  .btn-lg{padding:14px 28px; font-size:15px; border-radius:100px;}
  .btn-outline{border:1px solid rgba(0,0,0,0.15); color:var(--ink);}

  /* HERO */
  .hero{
    position:relative; overflow:hidden;
    padding:120px 0 40px;
    text-align:center;
  }
  .hero::before{
    content:"";
    position:absolute; top:-260px; left:50%; transform:translateX(-50%);
    width:1100px; height:700px;
    background:var(--grad);
    filter:blur(120px);
    opacity:0.22;
    z-index:0;
    border-radius:50%;
  }
  .hero-inner{position:relative; z-index:1;}
  .kicker{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; letter-spacing:.02em;
    color:var(--navy);
    background:rgba(37,55,141,0.07);
    padding:6px 16px; border-radius:100px;
    margin-bottom:24px;
  }
  .kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--grad);}
  h1{
    font-size:clamp(38px,6vw,68px);
    line-height:1.05; letter-spacing:-0.02em;
    font-weight:700; margin:0 0 20px;
    color:var(--ink);
  }
  h1 .accent{
    background:var(--grad);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero p.lead{
    max-width:620px; margin:0 auto 36px;
    font-size:clamp(17px,2vw,21px); line-height:1.5;
    color:var(--sub); font-weight:400;
  }
  .hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:80px;}

  /* DEVICE MOCK */
  .device{
    position:relative; z-index:1;
    max-width:960px; margin:0 auto;
    border-radius:16px;
    background:#fff;
    box-shadow:0 30px 80px -20px rgba(28,49,107,0.3), 0 0 0 1px rgba(0,0,0,0.04);
    overflow:hidden;
    text-align:left;
  }
  .device-bar{
    height:40px; display:flex; align-items:center; gap:10px;
    padding:0 14px; background:#ececee; border-bottom:1px solid var(--hair);
    flex-shrink:0;
  }
  .traffic{display:flex; gap:7px; margin-right:6px;}
  .dot-b{width:11px;height:11px;border-radius:50%;}
  .dot-b.red{background:#ec6b5e;} .dot-b.yellow{background:#f2b83f;} .dot-b.green{background:#61c454;}
  .device-nav{display:flex; gap:2px; color:#b9b9bf;}
  .device-nav .ic{font-size:13px;}
  .device-url{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0 auto; font-size:12px; color:var(--sub);
    background:#fff; border:1px solid var(--hair); border-radius:6px;
    padding:5px 14px; max-width:340px;
  }
  .device-url .ic{font-size:12px; color:#b9b9bf;}
  .device-bar-right{display:flex; gap:12px; color:#b9b9bf; margin-left:6px;}
  .device-bar-right .ic{font-size:13px;}

  .device-body{display:flex; height:460px;}
  .app-rail{
    width:52px; flex-shrink:0; background:#fafafa; border-right:1px solid var(--hair);
    display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px;
  }
  .rail-icon{
    width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    color:var(--sub);
  }
  .rail-icon .ic{font-size:16px;}
  .rail-icon.active{background:var(--blue); color:#fff;}
  .rail-icon.active .ic, .rail-icon.active svg, .rail-icon.active svg *{color:#fff !important; fill:#fff !important;}
  .rail-spacer{flex:1;}
  .rail-avatar{
    width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff;
    font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
    margin-top:4px;
  }

  .mail-sidebar{
    width:200px; background:#fafafa; border-right:1px solid var(--hair);
    padding:14px 12px; flex-shrink:0; overflow:hidden;
  }
  .sb-user{display:flex; align-items:center; gap:9px; padding:6px 4px 14px; border-bottom:1px solid var(--hair); margin-bottom:12px;}
  .sb-avatar{
    width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff;
    font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .sb-user-info{display:flex; flex-direction:column; font-size:11px; color:var(--sub); line-height:1.35; overflow:hidden;}
  .sb-user-info b{font-size:12.5px; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .sb-chev{margin-left:auto; color:var(--sub);}
  .sb-chev .ic{font-size:11px;}
  .sb-search{
    display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sub);
    background:#fff; border:1px solid var(--hair); border-radius:8px; padding:7px 10px; margin-bottom:16px;
  }
  .sb-search .ic{font-size:13px; color:#b9b9bf;}
  .sb-heading{font-size:11px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.03em; margin:14px 4px 6px;}
  .sb-item{
    font-size:13px; padding:7px 8px; border-radius:8px; margin-bottom:2px; color:#555;
    display:flex; align-items:center; gap:9px;
  }
  .sb-item.active{background:rgba(0,117,191,0.12); color:var(--blue); font-weight:600;}
  .sb-count{margin-left:auto; font-size:11px; color:var(--sub);}
  .sb-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}

  .mail-list{width:300px; border-right:1px solid var(--hair); overflow:hidden; flex-shrink:0; display:flex; flex-direction:column;}
  .mail-list-head{
    display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--hair);
    flex-shrink:0; background:#fff; position:sticky; top:0; z-index:1;
  }
  .mlh-title{font-size:13.5px; font-weight:700; color:var(--ink);}
  .mlh-sub{font-size:11.5px; color:var(--sub); display:flex; align-items:center; gap:4px;}
  .mlh-sub .ic{font-size:9px;}
  .mlh-icons{margin-left:auto; display:flex; gap:12px; color:var(--sub);}
  .mlh-icons .ic{font-size:13px; cursor:pointer;}
  .mlh-icons .ic:hover{color:var(--ink);}
  .mail-row{padding:13px 16px; border-bottom:1px solid var(--hair); cursor:pointer;}
  .mail-row.active{background:rgba(0,117,191,0.07);}
  .mrow-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;}
  .mail-row .from{font-size:13px; color:#555; font-weight:500; display:inline-flex; align-items:center;}
  .unread-dot{width:6px; height:6px; border-radius:50%; background:var(--blue); display:inline-block; margin-right:7px; flex-shrink:0;}
  .mail-row.unread .from{color:var(--ink); font-weight:700;}
  .mail-row .time{font-size:11px; color:var(--sub); flex-shrink:0;}
  .mail-row .subj{font-size:12.5px; color:var(--ink); margin-bottom:3px; font-weight:500; display:flex; align-items:center; gap:6px;}
  .mail-row.unread .subj{font-weight:700;}
  .mail-row .snip{font-size:12px; color:var(--sub); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  .attach-ic{font-size:11px; color:var(--sub); flex-shrink:0;}

  .mail-reading{flex:1; padding:26px 32px; overflow:hidden; display:flex; flex-direction:column;}
  .reading-title-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .reading-title-row h4{font-size:19px; font-weight:700; margin:0; color:var(--ink); letter-spacing:-0.01em; flex:1;}
  .label-pill{
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    padding:4px 12px; border-radius:100px; background:rgba(220,194,60,0.18); color:#8a6d1a; flex-shrink:0;
  }
  .label-pill .dot{width:7px; height:7px; border-radius:50%; background:#dcc23c;}
  .star-ic{color:#dcc23c; font-size:15px; flex-shrink:0;}
  .reading-meta{display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--hair); margin-bottom:10px;}
  .rm-avatar{
    width:32px; height:32px; border-radius:50%; background:var(--grad); color:#fff;
    font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .reading-meta > div{display:flex; flex-direction:column; font-size:12px; line-height:1.4;}
  .reading-meta b{font-size:13.5px; color:var(--ink); font-weight:600;}
  .reading-meta span{color:var(--sub);}
  .reading-meta-right{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0;}
  .rm-date{font-size:12px; color:var(--sub);}
  .reading-actions{display:flex; gap:10px; color:var(--sub);}
  .reading-actions .ic{font-size:13px; cursor:pointer;}
  .reading-actions .ic:hover{color:var(--ink);}
  .reading-attachments{
    display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sub);
    margin-bottom:18px;
  }
  .reading-body p{font-size:13.5px; line-height:1.7; color:#3a3a3d; margin:0 0 14px;}
  .reading-signature{font-size:12.5px; line-height:1.6; color:var(--sub); margin-top:2px;}
  .reading-signature b{display:block; color:var(--navy); font-size:14px; font-weight:700; margin-bottom:2px;}
  .contact-line{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sub); margin-top:6px;}
  .contact-line .ic{font-size:12px; color:var(--blue);}
  .reading-toolbar{display:flex; gap:10px; margin-top:26px; padding-top:20px; border-top:1px solid var(--hair);}
  .rt-btn{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink);
    background:#fff; border:1px solid var(--hair); border-radius:100px; padding:8px 16px; cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .rt-btn:hover{background:var(--bg-soft); border-color:rgba(0,0,0,0.15); transform:translateY(-1px);}
  .rt-btn .ic{font-size:12px;}

  /* App switching */
  .app-hidden{ display:none !important; }
  .rail-icon[data-app]{ cursor:pointer; }
  .sb-item[data-folder]{ cursor:pointer; }
  .mail-main{ display:flex; flex:1; min-width:0; overflow:hidden; }

  /* Empty reading state */
  .empty-reading{ display:flex; align-items:center; justify-content:center; }
  .empty-state{ text-align:center; }
  .empty-icon{
    width:60px; height:60px; border-radius:50%; background:var(--bg-soft);
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px; color:var(--sub);
  }
  .empty-state h4{font-size:16px; font-weight:700; margin:0 0 6px; color:var(--ink);}
  .empty-state p{font-size:13px; color:var(--sub); margin:0;}

  /* Generic app-content pane (calendar / files / contacts / settings) */
  .app-content{flex:1; min-width:0; overflow:hidden; padding:26px 32px;}
  .app-content-flex{display:flex; padding:0;}
  .app-content-header{display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
  .app-content-header h4{font-size:19px; font-weight:700; margin:0; flex-shrink:0;}

  /* Calendar */
  .calendar-app{
    flex:1; min-width:0; overflow:hidden; padding:0;
    display:flex; background:#fff;
  }
  .calendar-side{
    width:178px; flex-shrink:0; border-right:1px solid #e6ebf2;
    background:#f8fafc; padding:16px 14px; overflow:hidden;
  }
  .mini-cal-head{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; font-weight:700; color:#24324a; margin-bottom:12px;
  }
  .mini-cal-head .ic{font-size:10px; color:#7c8798;}
  .mini-cal{
    display:grid; grid-template-columns:repeat(7,1fr); gap:4px 2px;
    align-items:center; text-align:center; margin-bottom:18px;
  }
  .mini-cal span{
    font-size:9px; color:#7c8798; font-weight:700;
  }
  .mini-cal b{
    height:18px; display:flex; align-items:center; justify-content:center;
    font-size:10px; color:#29384f; border-radius:50%; font-weight:500;
  }
  .mini-cal .muted{color:#b8c0cc;}
  .mini-cal .selected{background:#3b82f6; color:#fff; font-weight:700;}
  .cal-list-title{
    margin:12px 0 10px; font-size:10px; line-height:1; font-weight:700;
    color:#7c8798; text-transform:uppercase; letter-spacing:.04em;
  }
  .cal-source{
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
    font-size:11px; color:#344054; white-space:nowrap;
  }
  .cal-source span{
    width:9px; height:9px; border-radius:3px; flex-shrink:0;
  }
  .calendar-main{flex:1; min-width:0; display:flex; flex-direction:column; background:#fff;}
  .calendar-toolbar{
    height:46px; flex-shrink:0; display:flex; align-items:center; gap:10px;
    padding:8px 14px; border-bottom:1px solid #e6ebf2; color:#23314a;
  }
  .calendar-toolbar h4{
    margin:0; font-size:13px; font-weight:800; min-width:78px;
  }
  .calendar-toolbar button{
    height:28px; border-radius:5px; border:1px solid #d8e0ea; background:#fff;
    color:#27364e; font-size:10.5px; font-weight:700; display:inline-flex;
    align-items:center; justify-content:center; gap:6px; padding:0 10px;
    white-space:nowrap; cursor:pointer;
  }
  .calendar-toolbar button .ic{font-size:10px;}
  .calendar-toolbar .cal-nav{display:flex; gap:12px; color:#27364e;}
  .calendar-toolbar .cal-nav .ic{font-size:10px;}
  .view-tabs{
    margin-left:auto; display:flex; align-items:center; border:1px solid #d8e0ea;
    border-radius:5px; overflow:hidden; height:28px; flex-shrink:0;
  }
  .view-tabs span,
  .view-tabs b{
    min-width:42px; padding:8px 10px; font-size:10px; line-height:1;
    text-align:center; color:#64748b; font-weight:600;
  }
  .view-tabs b{background:#3478f6; color:#fff;}
  .create-cal{background:#3478f6 !important; border-color:#3478f6 !important; color:#fff !important;}
  .calendar-main .import-cal{max-width:118px; overflow:hidden; text-overflow:ellipsis;}
  .cal-month{flex:1; min-height:0; display:flex; flex-direction:column;}
  .cal-weekdays{
    height:24px; display:grid; grid-template-columns:repeat(7,1fr);
    border-bottom:1px solid #e6ebf2; color:#64748b; font-size:10px;
    text-align:center; align-items:center; flex-shrink:0;
  }
  .cal-grid{
    flex:1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
    grid-template-rows:repeat(5,minmax(0,1fr));
    border-left:1px solid #e6ebf2;
  }
  .cal-day{
    position:relative; min-width:0; min-height:0; padding:12px 4px 4px;
    border-right:1px solid #e6ebf2; border-bottom:1px solid #e6ebf2;
    background:#fff; overflow:hidden;
  }
  .cal-day b{
    display:block; text-align:center; font-size:10.5px; color:#24324a;
    line-height:1; font-weight:500; margin-bottom:8px;
  }
  .cal-day.is-muted b{color:#aab4c2;}
  .cal-day.today b{
    width:18px; height:18px; margin:-4px auto 4px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#3478f6; color:#fff; font-weight:800;
  }
  .cal-event{
    display:block; height:15px; line-height:15px; margin:2px 0;
    padding:0 5px; border-radius:3px; font-size:9.5px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-left:2px solid currentColor;
  }
  .cal-event .ic{font-size:8px; margin-right:3px;}
  .cal-event.work{background:#d8eee3; color:#087443;}
  .cal-event.team{background:#f3d6f8; color:#9c27b0;}
  .cal-event.holiday{background:#fee1d8; color:#e1593f;}
  .cal-event.span-two{width:calc(200% + 9px); position:relative; z-index:2;}

  /* Contacts */
  .contacts-list{width:260px; border-right:1px solid var(--hair); overflow:hidden; flex-shrink:0; padding:14px 10px;}
  .contact-row{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:10px; cursor:pointer; transition:background .2s ease;}
  .contact-row.active{background:rgba(0,117,191,.08);}
  .contact-row:hover{background:rgba(0,0,0,.03);}
  .c-avatar{width:30px; height:30px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .contact-row div{display:flex; flex-direction:column; font-size:12.5px;}
  .contact-row b{font-size:13px; color:var(--ink);}
  .contact-row span{color:var(--sub); font-size:11.5px;}
  .contact-detail{flex:1; padding:32px; overflow:hidden;}
  .c-avatar-lg{width:64px; height:64px; border-radius:50%; color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .contact-detail h4{font-size:20px; margin:0 0 4px; font-weight:700;}
  .c-role{font-size:13px; color:var(--sub); margin:0 0 18px;}

  /* Files */
  .files-breadcrumb{font-size:13px; color:var(--sub); margin-right:auto;}
  .files-table{border:1px solid var(--hair); border-radius:12px; overflow:hidden;}
  .files-row{display:grid; grid-template-columns:1fr 100px 120px; padding:10px 16px; font-size:13px; border-bottom:1px solid var(--hair); align-items:center; transition:background .2s ease;}
  .files-row:last-child{border-bottom:none;}
  .files-row.files-head{background:var(--bg-soft); font-weight:700; font-size:11.5px; color:var(--sub); text-transform:uppercase; letter-spacing:.03em;}
  .files-row span:first-child{display:flex; align-items:center; gap:8px;}
  .files-row:hover:not(.files-head){background:rgba(0,0,0,.02);}

  /* Settings */
  .settings-nav{width:200px; border-right:1px solid var(--hair); padding:16px 10px; flex-shrink:0;}
  .settings-item{font-size:13px; padding:8px 10px; border-radius:8px; color:#555; cursor:pointer; margin-bottom:2px; transition:background .2s ease;}
  .settings-item.active{background:rgba(0,117,191,.1); color:var(--blue); font-weight:600;}
  .settings-item:hover{background:rgba(0,0,0,.03);}
  .settings-panel{flex:1; padding:32px; overflow:hidden;}
  .settings-panel h4{font-size:19px; margin:0 0 20px; font-weight:700;}
  .settings-field{margin-bottom:16px;}
  .settings-field label{display:block; font-size:11.5px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px;}
  .settings-value{font-size:13.5px; color:var(--ink); background:var(--bg-soft); padding:9px 12px; border-radius:8px;}
  .settings-toggle{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--hair); font-size:13.5px;}
  .toggle{width:36px; height:20px; border-radius:100px; background:var(--hair); position:relative; cursor:pointer;}
  .toggle::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .2s ease;}
  .toggle.on{background:var(--blue);}
  .toggle.on::after{left:18px;}

  .compose-fab{
    position:absolute; right:24px; bottom:24px;
    width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -4px rgba(0,117,191,0.5);
  }
  .compose-fab .ic, .compose-fab svg, .compose-fab svg *{font-size:17px; color:#fff !important; fill:#fff !important;}

  .preview-note{
    text-align:center; font-size:13px; color:var(--sub); margin-top:16px;
  }

  section{padding:100px 0;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 56px;}
  .section-head .eyebrow{
    font-size:13px; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px;
  }
  .section-head h2{
    font-size:clamp(28px,4vw,42px); line-height:1.1; letter-spacing:-0.01em; margin:0 0 16px; font-weight:700;
  }
  .section-head p{font-size:17px; color:var(--sub); line-height:1.6; margin:0;}

  /* FEATURE GRID */
  .grid4{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  }
  .fcard{
    background:var(--bg-soft); border-radius:20px; padding:32px 26px;
    transition:transform .2s ease;
  }
  .fcard:hover{transform:translateY(-4px);}
  .ficon{
    width:44px; height:44px; border-radius:12px; margin-bottom:20px;
    display:flex; align-items:center; justify-content:center;
    background:var(--grad);
  }
  .ficon i, .ficon svg, .ficon svg *{
    font-size:20px; color:#fff !important; fill:#fff !important; --fa-primary-color:#fff; --fa-secondary-color:#fff; --fa-primary-opacity:1; --fa-secondary-opacity:1;
  }
  .fcard h3{font-size:18px; margin:0 0 10px; font-weight:600;}
  .fcard p{font-size:14.5px; color:var(--sub); line-height:1.55; margin:0;}

  /* JMAP SPOTLIGHT */
  .jmap-spotlight{
    margin-top:72px; padding-top:64px; border-top:1px solid var(--hair);
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  }
  .jmap-left h3{font-size:26px; margin:0 0 14px; font-weight:700; letter-spacing:-0.01em;}
  .jmap-left p{font-size:15.5px; color:var(--sub); line-height:1.65; margin:0;}
  .jmap-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .jmap-list li{
    display:flex; gap:12px; font-size:14.5px; color:var(--ink); line-height:1.5;
    background:var(--bg-soft); padding:16px 18px; border-radius:14px;
  }
  .jmap-list .check{
    flex-shrink:0; width:20px; height:20px; border-radius:50%;
    background:var(--grad); color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }

  /* ROADMAP PILLARS */
  .pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px;}
  .pillar-card{
    border:1px solid var(--hair); border-radius:20px; padding:32px 28px;
    background:#fff;
  }
  .pillar-card.pillar-active{
    border-color:transparent;
    background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
    border:2px solid transparent;
  }
  .pillar-status{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.02em;
    padding:5px 12px; border-radius:100px; margin-bottom:18px;
  }
  .status-ready{background:rgba(76,175,125,0.14); color:#2f8f61;}
  .status-live{background:rgba(0,117,191,0.1); color:var(--blue);}
  .status-soon{background:rgba(37,55,141,0.08); color:var(--navy);}
  .status-research{background:rgba(124,59,143,0.1); color:var(--purple);}
  .pillar-card h3{font-size:20px; margin:0 0 10px; font-weight:700;}
  .pillar-card p{font-size:14.5px; color:var(--sub); line-height:1.55; margin:0;}
  .roadmap-closing{
    text-align:center; font-size:clamp(18px,2.4vw,24px); font-weight:600; line-height:1.5;
    color:var(--ink); max-width:720px; margin:0 auto;
  }
  .roadmap-closing .accent-text{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* COMPARISON */
  .compare{
    background:var(--bg-soft); border-radius:28px; padding:56px;
  }
  .compare-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:0; border-radius:16px; overflow:hidden; background:#fff;}
  .compare-grid > div{padding:18px 22px; font-size:14.5px; border-bottom:1px solid var(--hair);}
  .compare-grid .h-row{font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--sub); background:#fafafa;}
  .compare-grid .col-us{color:var(--navy); font-weight:600;}
  .compare-grid .col-us.h-row{background:rgba(37,55,141,0.06); color:var(--navy);}
  .compare-cta{text-align:center; margin-top:36px;}

  /* PROGRESS TEASER */
  .progress-band{
    background:var(--navy);
    color:#fff;
    border-radius:28px;
    padding:64px 56px;
    display:flex; align-items:center; gap:56px;
  }
  .progress-band .txt{flex:1;}
  .progress-band .eyebrow{color:var(--lightblue); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
  .progress-band h2{font-size:clamp(24px,3vw,32px); margin:0 0 16px; font-weight:700; letter-spacing:-0.01em;}
  .progress-band p{font-size:15.5px; line-height:1.65; color:rgba(255,255,255,0.75); margin:0 0 24px; max-width:480px;}
  .timeline-mini{flex-shrink:0; width:280px; display:flex; flex-direction:column; gap:0;}
  .tl-item{display:flex; gap:14px; padding:10px 0;}
  .tl-dot{width:10px;height:10px;border-radius:50%; background:var(--lightblue); margin-top:5px; flex-shrink:0;}
  .tl-item.done .tl-dot{background:#7CE0B8;}
  .tl-line{font-size:13px; color:rgba(255,255,255,0.85); line-height:1.5;}
  .tl-line b{display:block; color:#fff; font-size:13.5px; margin-bottom:2px;}

  /* ABOUT / TRUST STRIP */
  .about-strip{
    display:flex; align-items:center; gap:48px;
    border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    padding:64px 0;
  }
  .about-strip .logo-mark{height:42px; margin-bottom:20px;}
  .about-strip h3{font-size:22px; margin:0 0 12px; font-weight:700;}
  .about-strip p{font-size:15px; color:var(--sub); line-height:1.6; margin:0; max-width:560px;}
  .stat-row{display:flex; gap:40px; flex-shrink:0;}
  .stat{text-align:left;}
  .stat b{display:block; font-size:28px; font-weight:700; color:var(--navy);}
  .stat span{font-size:13px; color:var(--sub);}

  /* FINAL CTA */
  .final-cta{
    background:var(--grad); border-radius:28px; padding:72px 40px; text-align:center; color:#fff;
  }
  .final-cta h2{font-size:clamp(26px,4vw,40px); margin:0 0 14px; font-weight:700; letter-spacing:-0.01em;}
  .final-cta p{font-size:16px; color:rgba(255,255,255,0.85); margin:0 0 32px;}
  .signup-form{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
  .signup-form form{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0;}
  .signup-form input{
    width:320px; max-width:70vw; padding:14px 20px; border-radius:100px; border:none;
    font-size:15px; outline:none;
  }
  .signup-form button{
    padding:14px 26px; border-radius:100px; border:none; background:#fff; color:var(--navy);
    font-weight:600; font-size:15px; cursor:pointer;
  }
  .gravity-signup .gform_wrapper,
  .gravity-signup .gform_body,
  .gravity-signup .gform_fields,
  .gravity-signup .gfield,
  .gravity-signup .ginput_container{
    margin:0 !important; padding:0 !important;
  }
  .gravity-signup .gform_wrapper form{
    display:flex; justify-content:center; align-items:flex-start; gap:10px;
    flex-wrap:wrap; margin:0;
  }
  .gravity-signup .gform_fields{display:block !important;}
  .gravity-signup .gfield_label,
  .gravity-signup .gform_required_legend,
  .gravity-signup .gfield_required{
    position:absolute !important; width:1px !important; height:1px !important;
    overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
  }
  .gravity-signup input[type="email"],
  .gravity-signup input[type="text"]{
    width:320px !important; max-width:70vw !important; min-height:46px !important;
    padding:14px 20px !important; border-radius:100px !important; border:none !important;
    background:#fff !important; color:var(--ink) !important; font-size:15px !important;
    box-shadow:none !important; outline:none !important;
  }
  .gravity-signup .gform_footer{
    margin:0 !important; padding:0 !important;
  }
  .gravity-signup input[type="submit"],
  .gravity-signup button[type="submit"]{
    min-height:46px !important; padding:14px 26px !important; border-radius:100px !important;
    border:none !important; background:#fff !important; color:var(--navy) !important;
    font-weight:600 !important; font-size:15px !important; cursor:pointer !important;
    line-height:1 !important;
  }
  .gravity-signup .gform_validation_errors,
  .gravity-signup .validation_message{
    max-width:460px; margin:10px auto 0 !important; border-radius:12px !important;
    text-align:left; color:#fff !important; background:rgba(255,255,255,0.14) !important;
    border:1px solid rgba(255,255,255,0.25) !important;
  }
  .gravity-signup .gform_confirmation_message{
    color:#fff; font-weight:600;
  }
  .fineprint{font-size:12.5px; color:rgba(255,255,255,0.65); margin:36px 0 0;}

  /* FOOTER */
  footer{padding:64px 0 40px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px;}
  .foot-grid h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--sub); margin:0 0 16px; font-weight:600;}
  .foot-grid a{display:block; font-size:14px; color:var(--ink); opacity:0.8; margin-bottom:10px;}
  .foot-grid a:hover{opacity:1;}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--hair); padding-top:24px; font-size:12.5px; color:var(--sub);
  }

  /* CONTACT PAGE */
  .contact-page{background:#fff;}
  .contact-hero{
    position:relative; overflow:hidden; padding:112px 0 84px;
    background:linear-gradient(180deg,#f7f9fc 0%,#fff 78%);
  }
  .contact-hero::before{
    content:""; position:absolute; top:-260px; right:-220px;
    width:720px; height:520px; background:var(--grad); opacity:.14;
    filter:blur(110px); border-radius:50%; pointer-events:none;
  }
  .contact-hero-grid{
    position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 460px;
    gap:64px; align-items:center;
  }
  .contact-hero-copy h1{
    font-size:clamp(38px,5vw,58px); line-height:1.05; letter-spacing:-.02em;
    margin:0 0 20px; max-width:660px;
  }
  .contact-hero-copy .lead{
    font-size:18px; line-height:1.65; color:var(--sub); max-width:620px; margin:0;
  }
  .contact-quick-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
    max-width:520px; margin-top:36px;
  }
  .contact-quick-card{
    background:#fff; border:1px solid var(--hair); border-radius:16px;
    padding:18px; box-shadow:0 18px 40px -30px rgba(28,49,107,.28);
  }
  .contact-quick-card .ic{
    width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:rgba(0,117,191,.1); color:var(--blue); margin-bottom:14px;
  }
  .contact-quick-card span{display:block; font-size:12px; color:var(--sub); margin-bottom:4px;}
  .contact-quick-card b{display:block; font-size:15px; color:var(--ink);}
  .contact-form-panel{
    background:#fff; border:1px solid rgba(28,49,107,.1); border-radius:24px;
    padding:34px; box-shadow:0 32px 80px -36px rgba(28,49,107,.36);
  }
  .contact-form-head{margin-bottom:24px;}
  .form-pill{
    display:inline-flex; align-items:center; padding:6px 12px; border-radius:100px;
    background:rgba(37,55,141,.08); color:var(--navy);
    font-size:12px; font-weight:700; margin-bottom:14px;
  }
  .contact-form-head h2{font-size:26px; line-height:1.15; margin:0 0 10px; letter-spacing:-.01em;}
  .contact-form-head p{font-size:14.5px; color:var(--sub); line-height:1.6; margin:0;}
  .contact-gravity-form form,
  .contact-gravity-form .gform_wrapper form{
    display:flex; flex-direction:column; gap:14px; margin:0;
  }
  .contact-fallback-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .contact-gravity-form input,
  .contact-gravity-form textarea,
  .contact-gravity-form select,
  .contact-gravity-form .ginput_container input,
  .contact-gravity-form .ginput_container textarea,
  .contact-gravity-form .ginput_container select{
    width:100% !important; border:1px solid #dfe4ec !important; border-radius:12px !important;
    background:#fff !important; color:var(--ink) !important; font-size:14.5px !important;
    padding:13px 15px !important; outline:none !important;
    transition:border-color .2s ease, box-shadow .2s ease !important;
  }
  .contact-gravity-form textarea,
  .contact-gravity-form .ginput_container textarea{min-height:128px !important; resize:vertical;}
  .contact-gravity-form input:focus,
  .contact-gravity-form textarea:focus,
  .contact-gravity-form select:focus{
    border-color:var(--blue) !important; box-shadow:0 0 0 4px rgba(0,117,191,.1) !important;
  }
  .contact-gravity-form button,
  .contact-gravity-form input[type="submit"],
  .contact-gravity-form .gform_button{
    width:100% !important; border:0 !important; border-radius:100px !important;
    background:var(--grad) !important; color:#fff !important; padding:14px 22px !important;
    font-size:15px !important; font-weight:700 !important; cursor:pointer !important;
    box-shadow:0 14px 26px -14px rgba(37,55,141,.6) !important;
  }
  .contact-gravity-form .gform_fields,
  .contact-gravity-form .gfield,
  .contact-gravity-form .ginput_container,
  .contact-gravity-form .gform_footer{
    margin:0 !important; padding:0 !important;
  }
  .contact-gravity-form .gfield_label{font-size:12px !important; font-weight:700 !important; color:var(--navy) !important;}
  .contact-gravity-form .gform_required_legend{display:none !important;}
  .contact-gravity-form .gform_validation_errors,
  .contact-gravity-form .validation_message{
    border-radius:12px !important; border-color:#f1b8ad !important; background:#fff5f2 !important;
    color:#9f3424 !important;
  }
  .contact-gravity-form .gform_confirmation_message{
    border-radius:16px; background:rgba(76,175,125,.12); color:#1f7d52;
    padding:18px; font-weight:700;
  }
  .contact-assurance{padding:0 0 96px;}
  .contact-assurance-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .assurance-card{
    border:1px solid var(--hair); border-radius:18px; padding:26px;
    background:#fff;
  }
  .assurance-card .ic{
    width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--grad); color:#fff; margin-bottom:18px;
  }
  .assurance-card h3{font-size:18px; margin:0 0 8px;}
  .assurance-card p{font-size:14.5px; color:var(--sub); line-height:1.6; margin:0;}

  @media (max-width:900px){
    .navlinks{display:none;}
    .grid4{grid-template-columns:repeat(2,1fr);}
    .jmap-spotlight{grid-template-columns:1fr; gap:32px; margin-top:48px; padding-top:40px;}
    .pillars-grid{grid-template-columns:1fr;}
    .compare-grid{grid-template-columns:1fr; }
    .compare-grid > div{border-bottom:1px solid var(--hair);}
    .progress-band{flex-direction:column; padding:40px 28px;}
    .timeline-mini{width:100%;}
    .about-strip{flex-direction:column; text-align:left;}
    .stat-row{flex-wrap:wrap;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .device-body{height:400px;}
    .app-rail{display:none;}
    .mail-sidebar{display:none;}
    .mail-list{width:150px;}
    .mail-list .snip{display:none;}
    .mail-reading{padding:18px 16px;}
    .contact-hero-grid{grid-template-columns:1fr; gap:36px;}
    .contact-form-panel{padding:24px;}
    .contact-assurance-grid{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .mail-list{display:none;}
    .device-body{height:340px;}
    .contact-hero{padding:86px 0 60px;}
    .contact-quick-grid,
    .contact-fallback-row{grid-template-columns:1fr;}
  }

  /* ============ EFFECTS & TRANSITIONS ============ */

  /* Header gets a soft shadow once the page scrolls */
  header{ transition: background .3s ease, box-shadow .3s ease; }
  header.scrolled{
    background:rgba(255,255,255,0.85);
    box-shadow:0 1px 0 rgba(0,0,0,0.05), 0 12px 30px -18px rgba(28,49,107,0.35);
  }
  header a[aria-label="Commpro Cloud"]{ transition: transform .25s ease, opacity .25s ease; display:inline-block; }
  header a[aria-label="Commpro Cloud"]:hover{ transform:scale(1.04); opacity:.85; }

  /* Nav underline sweep */
  .navlinks a{ position:relative; }
  .navlinks a::after{
    content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
    background:var(--grad); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .navlinks a:hover::after{ transform:scaleX(1); }

  /* Buttons */
  .btn{ transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, filter .25s ease, background .5s ease, opacity .2s ease; }
  .btn:active{ transform:scale(.97); }
  .btn-primary{ background-size:200% 100%; background-position:0% 0%; box-shadow:0 6px 18px -8px rgba(37,55,141,0.55); }
  .btn-primary:hover{ background-position:100% 0%; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(37,55,141,0.55); filter:none; }
  .btn-outline{ transition: transform .25s ease, border-color .25s ease, background .25s ease; }
  .btn-outline:hover{ transform:translateY(-2px); border-color:rgba(0,0,0,0.28); background:rgba(0,0,0,0.02); }
  .btn-ghost:hover{ transform:translateY(-1px); }

  /* Kicker: soft pulsing live-indicator dot */
  .kicker .dot{ animation: pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.5); opacity:.55; }
  }

  /* Hero entrance + ambient glow drift */
  @keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
  .kicker{ animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both; }
  h1{ animation: fadeUp .8s cubic-bezier(.16,1,.3,1) .08s both; }
  .hero p.lead{ animation: fadeUp .8s cubic-bezier(.16,1,.3,1) .16s both; }
  .hero-ctas{ animation: fadeUp .8s cubic-bezier(.16,1,.3,1) .24s both; }
  .device{ animation: deviceIn 1s cubic-bezier(.16,1,.3,1) .34s both; }
  @keyframes deviceIn{ from{opacity:0; transform:translateY(34px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
  @keyframes heroGlow{
    0%,100%{ opacity:.2; transform:translateX(-50%) scale(1); }
    50%{ opacity:.3; transform:translateX(-50%) scale(1.08); }
  }
  .hero::before{ animation: heroGlow 11s ease-in-out infinite; }

  /* Scroll reveal system */
  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    will-change:opacity, transform;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .fcard:nth-child(1).reveal{transition-delay:.04s;} .fcard:nth-child(2).reveal{transition-delay:.11s;}
  .fcard:nth-child(3).reveal{transition-delay:.18s;} .fcard:nth-child(4).reveal{transition-delay:.25s;}
  .fcard:nth-child(5).reveal{transition-delay:.32s;} .fcard:nth-child(6).reveal{transition-delay:.39s;}
  .pillar-card:nth-child(1).reveal{transition-delay:.04s;}
  .pillar-card:nth-child(2).reveal{transition-delay:.14s;}
  .pillar-card:nth-child(3).reveal{transition-delay:.24s;}

  /* Card hovers */
  .fcard{ transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
  .fcard:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(28,49,107,0.3); }
  .ficon{ transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .fcard:hover .ficon{ transform:scale(1.08) rotate(-4deg); }

  .pillar-card{ transition: transform .3s ease, box-shadow .3s ease; }
  .pillar-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -20px rgba(28,49,107,0.28); }
  .pillar-active{ animation: pillarGlow 3.2s ease-in-out infinite; }
  @keyframes pillarGlow{
    0%,100%{ box-shadow:0 0 0 rgba(124,59,143,0); }
    50%{ box-shadow:0 14px 30px -18px rgba(124,59,143,0.4); }
  }
  .pillar-status{ transition: transform .25s ease; }
  .pillar-card:hover .pillar-status{ transform:scale(1.04); }

  /* JMAP checklist: subtle hover lift */
  .jmap-list li{ transition: transform .25s ease, box-shadow .25s ease; }
  .jmap-list li:hover{ transform:translateX(4px); box-shadow:0 10px 24px -16px rgba(28,49,107,0.25); }
  .jmap-list .check{ transition: transform .25s ease; }
  .jmap-list li:hover .check{ transform:scale(1.15); }

  /* Compare CTA + rows */
  .compare-grid > div{ transition: background .2s ease; }
  .compare{ transition: box-shadow .3s ease; }
  .compare:hover{ box-shadow:0 20px 50px -30px rgba(28,49,107,0.3); }

  /* Timeline items drift in from the left, staggered */
  .tl-item{ opacity:0; transform:translateX(-14px); transition:opacity .6s ease, transform .6s ease; }
  .progress-band.in .tl-item{ opacity:1; transform:translateX(0); }
  .progress-band.in .tl-item:nth-child(1){ transition-delay:.05s; }
  .progress-band.in .tl-item:nth-child(2){ transition-delay:.15s; }
  .progress-band.in .tl-item:nth-child(3){ transition-delay:.25s; }
  .progress-band.in .tl-item:nth-child(4){ transition-delay:.35s; }
  .tl-dot{ transition: transform .3s ease; }
  .tl-item:hover .tl-dot{ transform:scale(1.4); }

  /* Stats */
  .stat{ transition: transform .3s ease; }
  .stat:hover{ transform:translateY(-3px); }

  /* Device mockup micro-interactions */
  .mail-row{ transition: background .2s ease; }
  .mail-row:hover{ background:rgba(0,0,0,0.025); }
  .mail-row.active:hover{ background:rgba(0,117,191,0.09); }
  .sb-item{ transition: background .2s ease, color .2s ease; cursor:pointer; }
  .sb-item:hover{ background:rgba(0,0,0,0.045); }
  .sb-item.active:hover{ background:rgba(0,117,191,0.18); }
  .rail-icon{ transition: background .2s ease, color .2s ease, transform .2s ease; cursor:pointer; }
  .rail-icon:hover{ background:rgba(0,0,0,0.06); color:var(--ink); transform:translateY(-1px); }
  .rail-icon.active:hover{ background:var(--blue); }
  .compose-fab{ transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; animation: fabPulse 3s ease-in-out infinite; }
  .compose-fab:hover{ transform:scale(1.1); box-shadow:0 14px 30px -6px rgba(0,117,191,0.65); }
  @keyframes fabPulse{
    0%,100%{ box-shadow:0 8px 20px -4px rgba(0,117,191,0.5); }
    50%{ box-shadow:0 8px 26px -2px rgba(0,117,191,0.72); }
  }
  .device-nav .ic, .device-bar-right .ic{ transition: color .2s ease, transform .2s ease; cursor:pointer; }
  .device-nav .ic:hover, .device-bar-right .ic:hover{ color:var(--ink); transform:translateY(-1px); }

  /* Final CTA ambient gradient drift + form focus */
  .final-cta{ background-size:220% 220%; animation: gradientDrift 14s ease infinite; }
  @keyframes gradientDrift{
    0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; }
  }
  .signup-form input{ transition: box-shadow .25s ease, transform .25s ease; }
  .signup-form input:focus{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,0.35); transform:translateY(-1px); }
  .signup-form button{ transition: transform .25s ease, box-shadow .25s ease; }
  .signup-form button:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,0,0,0.28); }

  /* Footer links */
  .foot-grid a{ transition: opacity .2s ease, transform .2s ease; display:inline-block; }
  .foot-grid a:hover{ opacity:1; transform:translateX(2px); }

  @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, .tl-item{ opacity:1 !important; transform:none !important; }
  }